flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create a tag prop for SiteTitle + make it responsive

Browse Source
This commit is contained in:
Félix Péault
2021-10-18 16:16:25 +02:00
parent 63e8edcbe8
commit 7f8dc8cec6
3 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/atoms/SiteTitle.svelte
View File

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

2
src/components/organisms/Footer.svelte
View File

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

21
src/style/atoms/_site-title.scss
View File

@@ -13,31 +13,40 @@
letter-spacing: 1px; letter-spacing: 1px;
} }
// Pink text
&__pink { &__pink {
color: $color-secondary; color: $color-secondary;
} }
// Variants /*
** Variants
*/
// Default: Two lines // Default: Two lines
&--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 { strong {
font-size: rem(30px);
&:first-child { &:first-child {
display: block; display: block;
color: $color-lilas-bright; color: $color-lilas-bright;
} }
&:last-child { &:last-child {
display: inline-block; display: inline-block;
margin-left: -7px; margin-left: -0.023em;
color: $color-secondary; color: $color-secondary;
} }
} }
span { span {
font-size: rem(14px); font-size: 0.45em;
}
strong, span {
transition: color 0.25s;
} }
} }