Create a tag prop for SiteTitle + make it responsive

This commit is contained in:
2021-10-18 16:16:25 +02:00
parent 63e8edcbe8
commit 7f8dc8cec6
3 changed files with 20 additions and 11 deletions

View File

@@ -1,16 +1,16 @@
<script lang="ts">
export let variant: string = 'lines'
export let type: string = 'title'
export let tag: string = 'h1'
</script>
{#if type === 'title'}
<h1 class="site-title {variant ? `site-title--${variant}` : ''}">
{#if tag === 'title'}
<h1 class="site-title site-title--{variant}">
<strong>Houses</strong>
<span>Of The</span>
<strong>World</strong>
</h1>
{:else}
<div class="site-title {variant ? `site-title--${variant}` : ''}">
<div class="site-title site-title--{variant}">
<strong>Houses</strong>
<span>Of The</span>
<strong>World</strong>

View File

@@ -10,7 +10,7 @@
<footer class="footer">
<div class="container grid">
<a href="/" class="footer__title" sveltekit:prefetch>
<SiteTitle />
<SiteTitle tag="div" />
</a>
<nav class="footer__links">

View File

@@ -13,31 +13,40 @@
letter-spacing: 1px;
}
// Pink text
&__pink {
color: $color-secondary;
}
// Variants
/*
** Variants
*/
// Default: Two lines
&--lines {
line-height: 0.5;
line-height: clamp(100%, 1.5vw, 100%);
font-size: rem(30px);
@include bp (sm) {
font-size: clamp(#{rem(20px)}, 2.5vw, #{rem(30px)});
}
strong {
font-size: rem(30px);
&:first-child {
display: block;
color: $color-lilas-bright;
}
&:last-child {
display: inline-block;
margin-left: -7px;
margin-left: -0.023em;
color: $color-secondary;
}
}
span {
font-size: rem(14px);
font-size: 0.45em;
}
strong, span {
transition: color 0.25s;
}
}