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

🚧 Switch to monorepo with Turbo

Browse Source
This commit is contained in:
Félix Péault
2023-01-10 12:53:42 +01:00
parent dd8715bb34
commit 25bb949a13
205 changed files with 14975 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
apps/website/src/style/_typography.scss Normal file
View File

@@ -0,0 +1,232 @@
/* ==========================================================================
TITLES
========================================================================== */
// Huge
.title-huge {
font-family: $font-serif;
font-size: clamp(#{rem(200px)}, 38vw, #{rem(700px)});
font-weight: 200;
line-height: 1;
letter-spacing: -0.04em;
white-space: nowrap;
user-select: none;
pointer-events: none;
span {
transition: none;
}
}
// House Name
.title-image {
font-family: $font-serif;
font-size: rem(40px);
line-height: 1;
color: $color-secondary;
@include bp (sm) {
font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
}
}
// House Number
.title-index {
font-family: $font-serif;
font-size: rem(80px);
line-height: 1;
font-weight: 200;
letter-spacing: -0.05em;
color: rgba($color-tertiary, 0.6);
@include bp (sm) {
font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
}
}
// X-Large
.title-xl {
font-family: $font-serif;
font-size: rem(34px);
line-height: 1.2;
letter-spacing: -0.025em;
@include bp (sm) {
font-size: clamp(#{rem(34px)}, 4vw, #{rem(60px)});
}
}
// Big
.title-big {
font-family: $font-serif;
font-size: rem(28px);
line-height: 1.2;
letter-spacing: -0.025em;
@include bp (sm) {
font-size: rem(32px);
}
@include bp (md) {
font-size: clamp(#{rem(32px)}, 3.5vw, #{rem(48px)});
}
}
// Big - Sans Sefif
.title-big-sans {
font-size: rem(40px);
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.02em;
@include bp (sm) {
font-size: clamp(#{rem(40px)}, 6vw, #{rem(56px)})
}
}
// Medium
.title-medium {
font-family: $font-serif;
font-size: rem(26px);
font-weight: 400;
line-height: 1.3;
@include bp (sd) {
font-size: rem(32px);
}
}
// Small
.title-small {
font-family: $font-serif;
color: $color-secondary;
font-size: rem(24px);
font-weight: 400;
line-height: 1.5;
@include bp (sm) {
font-size: rem(28px);
}
}
/* ==========================================================================
TEXT
========================================================================== */
// Huge
.text-huge {
font-size: rem(34px);
font-weight: 300;
line-height: 1.25;
@include bp (sm) {
font-size: rem(44px);
}
@include bp (sd) {
font-size: clamp(#{rem(44px)}, 5vw, #{rem(72px)});
}
}
// Big
.text-big {
font-size: rem(32px);
font-weight: 300;
line-height: 1.3;
@include bp (sm) {
font-size: rem(36px);
}
@include bp (sd) {
font-size: rem(44px);
}
}
// Large
.text-large {
font-size: rem(24px);
font-weight: 400;
line-height: 1.4;
@include bp (sm) {
font-size: rem(28px);
}
@include bp (sd) {
font-size: rem(32px);
}
}
// Medium
.text-medium {
font-size: rem(20px);
font-weight: 200;
line-height: 1.4;
@include bp (sm) {
font-size: rem(24px);
line-height: 1.5;
}
@include bp (sd) {
font-size: rem(28px);
}
}
// Normal
.text-normal {
font-size: rem(18px);
font-weight: 400;
line-height: 1.4;
@include bp (sm) {
font-size: rem(20px);
}
@include bp (sd) {
font-size: rem(22px);
line-height: 1.5;
}
}
// Small
.text-small {
font-size: rem(16px);
font-weight: 400;
line-height: 1.5;
@include bp (sd) {
font-size: rem(20px);
}
}
// XSmall
.text-xsmall {
font-size: rem(16px);
font-weight: 400;
line-height: 1.4;
@include bp (sm) {
font-size: rem(18px);
line-height: 1.5;
}
}
// Information
.text-info {
font-size: rem(14px);
line-height: 1.3;
@include bp (md) {
font-size: rem(16px);
line-height: 1.4;
}
}
// Label
.text-label {
font-size: rem(12px);
line-height: 1.4;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
&--small {
font-size: rem(10px);
}
}