Create a tag prop for SiteTitle + make it responsive
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -13,31 +13,40 @@
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
// Pink text
|
||||
&__pink {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
|
||||
// Variants
|
||||
/*
|
||||
** Variants
|
||||
*/
|
||||
// Default: Two lines
|
||||
&--lines {
|
||||
line-height: 0.5;
|
||||
|
||||
strong {
|
||||
line-height: clamp(100%, 1.5vw, 100%);
|
||||
font-size: rem(30px);
|
||||
|
||||
@include bp (sm) {
|
||||
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: -7px;
|
||||
margin-left: -0.023em;
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: rem(14px);
|
||||
font-size: 0.45em;
|
||||
}
|
||||
strong, span {
|
||||
transition: color 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user