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

Reorganize typography styles

Browse Source
This commit is contained in:
Félix Péault
2022-06-07 16:36:54 +02:00
parent 29cb3a30ba
commit f36cb93820
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/style/_typography.scss
View File

@@ -3,11 +3,11 @@
========================================================================== */ ========================================================================== */
// Huge // Huge
.title-huge { .title-huge {
font-size: clamp(200px, 38vw, 700px);
font-family: $font-serif; font-family: $font-serif;
font-size: clamp(200px, 38vw, 700px);
font-weight: 200; font-weight: 200;
letter-spacing: -0.04em;
line-height: 1; line-height: 1;
letter-spacing: -0.04em;
white-space: nowrap; white-space: nowrap;
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
@@ -19,8 +19,8 @@
// House Name // House Name
.title-image { .title-image {
font-size: rem(40px);
font-family: $font-serif; font-family: $font-serif;
font-size: rem(40px);
line-height: 1; line-height: 1;
color: $color-secondary; color: $color-secondary;
@@ -32,11 +32,11 @@
// House Number // House Number
.title-index { .title-index {
font-size: rem(80px);
font-family: $font-serif; font-family: $font-serif;
letter-spacing: -0.05em; font-size: rem(80px);
font-weight: 200;
line-height: 1; line-height: 1;
font-weight: 200;
letter-spacing: -0.05em;
color: rgba($color-tertiary, 0.6); color: rgba($color-tertiary, 0.6);
@include bp (sm) { @include bp (sm) {
@@ -44,12 +44,24 @@
} }
} }
// Big
.title-big {
font-family: $font-serif;
font-size: rem(28px);
line-height: 1.2;
letter-spacing: -0.025em;
@include bp (sm) {
font-size: clamp(#{rem(28px)}, 7vw, #{rem(48px)});
}
}
// Medium // Medium
.title-medium { .title-medium {
font-family: $font-serif; font-family: $font-serif;
font-size: rem(26px); font-size: rem(26px);
line-height: 1.3;
font-weight: 400; font-weight: 400;
line-height: 1.3;
@include bp (sm) { @include bp (sm) {
font-size: rem(32px); font-size: rem(32px);
@@ -58,11 +70,11 @@
// Small // Small
.title-small { .title-small {
font-family: $font-serif;
color: $color-secondary; color: $color-secondary;
font-size: rem(24px); font-size: rem(24px);
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
font-family: $font-serif;
@include bp (sm) { @include bp (sm) {
font-size: rem(28px); font-size: rem(28px);
@@ -77,7 +89,6 @@
// Large // Large
.text-large { .text-large {
font-size: rem(32px); font-size: rem(32px);
font-family: $font-sans;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
} }
@@ -85,7 +96,6 @@
// Medium // Medium
.text-medium { .text-medium {
font-size: rem(20px); font-size: rem(20px);
font-family: $font-sans;
font-weight: 200; font-weight: 200;
line-height: 1.4; line-height: 1.4;
@@ -108,8 +118,8 @@
// Small // Small
.text-small { .text-small {
font-size: rem(18px); font-size: rem(18px);
line-height: 1.4;
font-weight: 400; font-weight: 400;
line-height: 1.4;
@include bp (sm) { @include bp (sm) {
font-size: rem(20px); font-size: rem(20px);
@@ -132,7 +142,7 @@
.text-label { .text-label {
font-size: rem(12px); font-size: rem(12px);
line-height: 1.4; line-height: 1.4;
font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 500;
} }