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