Fix SiteTitle variants style

This commit is contained in:
2021-10-09 12:04:28 +02:00
parent 8b0de919d8
commit ab01cf9809
2 changed files with 19 additions and 30 deletions

View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
export let variant: string = undefined export let variant: string = 'lines'
</script> </script>
<h1 class="site-title {variant ? `site-title--${variant}` : ''}"> <h1 class="site-title {variant ? `site-title--${variant}` : ''}">

View File

@@ -1,27 +1,15 @@
.site-title { .site-title {
font-family: $font-serif; font-family: $font-serif;
line-height: 0.7;
strong { strong {
font-size: rem(30px);
font-weight: 300; font-weight: 300;
&:first-child {
display: block;
color: $color-lilas-bright;
}
&:last-child {
display: inline-block;
margin-left: -6px;
}
} }
span { span {
position: relative; position: relative;
top: -4px; top: -4px;
font-size: rem(14px); font-weight: 600;
color: $color-lightpurple; color: $color-lightpurple;
text-transform: uppercase; text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px; letter-spacing: 1px;
} }
@@ -29,25 +17,26 @@
color: $color-secondary; color: $color-secondary;
} }
// Large variant
&--large { // Variants
display: flex; // Default: Two lines
align-items: baseline; &--lines {
justify-content: center; line-height: 0.5;
color: $color-lightpurple;
margin: 0 auto;
line-height: 1;
strong { strong {
display: block; font-size: rem(30px);
font-size: rem(96px);
color: $color-secondary !important; &:first-child {
display: block;
color: $color-lilas-bright;
}
&:last-child {
display: inline-block;
margin-left: -6px;
}
} }
span { span {
display: block; font-size: rem(14px);
top: 0;
margin: 0 16px 0 24px;
font-size: rem(32px);
} }
} }
@@ -63,7 +52,7 @@
} }
strong { strong {
color: $color-secondary !important; color: $color-secondary;
font-size: rem(64px); font-size: rem(64px);
@include bp (sm) { @include bp (sm) {