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">
export let variant: string = undefined
export let variant: string = 'lines'
</script>
<h1 class="site-title {variant ? `site-title--${variant}` : ''}">

View File

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