diff --git a/src/components/atoms/SiteTitle.svelte b/src/components/atoms/SiteTitle.svelte index 8afc426..1d9063f 100644 --- a/src/components/atoms/SiteTitle.svelte +++ b/src/components/atoms/SiteTitle.svelte @@ -20,20 +20,14 @@ threshold: 0, }} > - - - - - - - - - + + + {:else}
- Houses - Of The - World + Houses + Of The + World
{/if} \ No newline at end of file diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss index 43e44ee..9402637 100644 --- a/src/style/atoms/_site-title.scss +++ b/src/style/atoms/_site-title.scss @@ -1,10 +1,10 @@ .site-title { font-family: $font-serif; - & > strong { + .pink { font-weight: 300; } - & > span { + .middle { position: relative; top: -4px; font-weight: 600; @@ -31,43 +31,41 @@ font-size: clamp(#{rem(20px)}, 2.5vw, #{rem(30px)}); } - strong { - &:first-child { - display: block; - color: $color-lilas-bright; - } - &:last-child { - display: inline-block; - margin-left: -0.023em; - color: $color-secondary; - } + .word-1 { + display: block; + color: $color-lilas-bright; } - span { + .word-2 { font-size: 0.45em; } - strong, span { + .word-3 { + display: inline-block; + margin-left: -0.023em; + color: $color-secondary; + } + span { transition: color 0.25s; } } + // Inline Variant &--inline { display: block; align-items: baseline; color: $color-lightpurple; justify-content: center; - font-size: rem(64px); + font-size: rem(52px); + @include bp (mob-lg) { + font-size: rem(64px); + } @include bp (sm) { display: flex; font-size: rem(96px); } - & > strong { - color: $color-secondary; - } - & > span { - // display: block; + .middle { top: 0; margin: 10px 0; font-size: 0.3125em; @@ -77,5 +75,8 @@ margin: 0 10px 0 20px; } } + .char { + transition: none; + } } } \ No newline at end of file diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss index e0b65b0..929841f 100644 --- a/src/style/organisms/_footer.scss +++ b/src/style/organisms/_footer.scss @@ -29,10 +29,14 @@ margin: auto 0; } - // hover - .site-title:hover { - strong, span { - color: #fff; + .site-title { + line-height: 1; + + // Hover + &:hover { + strong, span { + color: #fff; + } } } }