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

Use global typography styles on Poster page layout

Browse Source
This commit is contained in:
Félix Péault
2022-09-14 22:07:31 +02:00
parent 07060c8661
commit 0728491aa6
3 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/layouts/PosterLayout.svelte
View File

@@ -75,8 +75,8 @@
<aside class="poster-layout__buy">
<div class="poster-layout__info">
<dl>
<dt>{capitalizeFirstLetter(product.type)}</dt>
<dd>{shopProduct.name} – {shopProduct.price}€</dd>
<dt class="title-small">{capitalizeFirstLetter(product.type)}</dt>
<dd class="text-info">{shopProduct.name} – {shopProduct.price}€</dd>
</dl>
<Button
tag="button"
@@ -114,10 +114,10 @@
<div class="poster-layout__about grid">
<div class="text container">
{#if product.description}
<p>{product.description}</p>
<p class="headline text-large">{product.description}</p>
{/if}
{#if product.details}
<p class="details">{product.details}</p>
<p class="details text-xsmall">{product.details}</p>
{/if}
</div>
</div>

11
src/style/_typography.scss
View File

@@ -142,9 +142,16 @@
// Large
.text-large {
font-size: rem(32px);
font-size: rem(24px);
font-weight: 400;
line-height: 1.5;
line-height: 1.4;
@include bp (sm) {
font-size: rem(28px);
}
@include bp (sd) {
font-size: rem(32px);
}
}
// Medium

22
src/style/layouts/_poster.scss
View File

@@ -73,20 +73,15 @@
// Title
dt {
color: $color-secondary;
font-family: $font-serif;
font-size: rem(36px);
line-height: 1.3;
line-height: 1.2;
}
// Text
dd {
margin-top: 8px;
font-size: rem(14px);
line-height: 1.4;
color: $color-gray;
@include bp (sm) {
max-width: none;
font-size: rem(16px);
}
}
}
@@ -177,7 +172,7 @@
white-space: pre-line;
@include bp (sm) {
padding: 144px 0 260px;
padding: clamp(88px, 20vw, 144px) 0 clamp(256px, 20vw, 320px);
margin: -120px 0;
}
@@ -186,25 +181,20 @@
max-width: 768px;
margin-left: 0;
margin-right: 0;
font-size: clamp(#{rem(22px)}, 5vw, #{rem(28px)});
font-weight: 200;
@include bp (sm) {
grid-column: 5 / span 12;
font-size: rem(32px);
}
}
.headline {
font-weight: 300;
}
.details {
color: $color-gray;
font-size: rem(16px);
margin-top: 32px;
line-height: 1.5;
font-weight: 300;
@include bp (sm) {
margin-top: 56px;
font-size: rem(18px);
margin-top: 40px;
}
}
}