129 lines
2.3 KiB
SCSS
129 lines
2.3 KiB
SCSS
/* ==========================================================================
|
|
TITLES
|
|
========================================================================== */
|
|
// Huge
|
|
.title-huge {
|
|
font-size: clamp(200px, 38vw, 700px);
|
|
font-family: $font-serif;
|
|
font-weight: 200;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// House Name
|
|
.title-image {
|
|
font-size: rem(40px);
|
|
font-family: $font-serif;
|
|
line-height: 1;
|
|
color: $color-secondary;
|
|
|
|
@include bp (sm) {
|
|
font-size: clamp(#{rem(40px)}, 7vw, #{rem(88px)});
|
|
}
|
|
|
|
}
|
|
|
|
// House Number
|
|
.title-index {
|
|
font-size: rem(80px);
|
|
font-family: $font-serif;
|
|
letter-spacing: -0.05em;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
color: rgba($color-tertiary, 0.6);
|
|
|
|
@include bp (sm) {
|
|
font-size: clamp(#{rem(80px)}, 24vw, #{rem(280px)});
|
|
}
|
|
}
|
|
|
|
// Medium
|
|
.title-medium {
|
|
font-family: $font-serif;
|
|
font-size: rem(26px);
|
|
line-height: 1.3;
|
|
font-weight: 400;
|
|
|
|
@include bp (sm) {
|
|
font-size: rem(32px);
|
|
}
|
|
}
|
|
|
|
// Small
|
|
.title-small {
|
|
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);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ==========================================================================
|
|
TEXT
|
|
========================================================================== */
|
|
// Large
|
|
.text-large {
|
|
font-size: rem(32px);
|
|
font-family: $font-sans;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// Medium
|
|
.text-medium {
|
|
font-size: rem(20px);
|
|
font-family: $font-sans;
|
|
font-weight: 200;
|
|
line-height: 1.4;
|
|
|
|
@include bp (sm) {
|
|
font-size: rem(24px);
|
|
line-height: 1.5;
|
|
}
|
|
@include bp (md) {
|
|
font-size: rem(28px);
|
|
}
|
|
}
|
|
|
|
// Normal
|
|
.text-normal {
|
|
font-size: rem(22px);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// Small
|
|
.text-small {
|
|
font-size: rem(20px);
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// Information
|
|
.text-info {
|
|
font-size: rem(14px);
|
|
line-height: 1.3;
|
|
|
|
@include bp (sm) {
|
|
font-size: rem(16px);
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
// Label
|
|
.text-label {
|
|
font-size: rem(12px);
|
|
line-height: 1.4;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 400;
|
|
} |