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;
+ }
}
}
}