181 lines
3.8 KiB
SCSS
181 lines
3.8 KiB
SCSS
@use 'functions' as *;
|
|
|
|
@mixin size-font($ms, $ds) {
|
|
font-size: mobile-vw($ms);
|
|
|
|
&.vh {
|
|
font-size: mobile-vh($ms);
|
|
}
|
|
|
|
@include desktop {
|
|
font-size: desktop-vw($ds);
|
|
|
|
&.vh {
|
|
font-size: desktop-vh($ds);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Super
|
|
@mixin s1 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(240px, 240px);
|
|
}
|
|
@mixin s2 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(50px, 160px);
|
|
}
|
|
@mixin s3 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(60px, 140px);
|
|
}
|
|
@mixin s4 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.046em;
|
|
@include size-font(115px, 115px);
|
|
}
|
|
|
|
// Header
|
|
@mixin h1 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(46px, 85px);
|
|
}
|
|
@mixin h2 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(32px, 60px);
|
|
}
|
|
@mixin h3 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(32px, 40px);
|
|
}
|
|
@mixin h4 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.9;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(18px, 30px);
|
|
}
|
|
@mixin h5 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 900;
|
|
line-height: 0.8;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(18px, 20px);
|
|
}
|
|
@mixin h6 {
|
|
font-family: var(--font-druk);
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
text-transform: none;
|
|
letter-spacing: -0.01em;
|
|
@include size-font(18px, 18px);
|
|
}
|
|
|
|
// Emphasis
|
|
@mixin em1 {
|
|
font-family: var(--font-gt);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
line-height: 0.8;
|
|
letter-spacing: -0.06em;
|
|
text-transform: none;
|
|
@include size-font(48px, 80px);
|
|
}
|
|
@mixin em2 {
|
|
font-family: var(--font-gt);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
line-height: 0.96;
|
|
letter-spacing: -0.01em;
|
|
text-transform: none;
|
|
@include size-font(36px, 61px);
|
|
}
|
|
@mixin em3 {
|
|
font-family: var(--font-gt);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
line-height: 0.8;
|
|
text-transform: none;
|
|
@include size-font(22px, 41px);
|
|
}
|
|
|
|
// Quote
|
|
@mixin q1 {
|
|
font-family: var(--font-gt);
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
text-transform: none;
|
|
@include size-font(22px, 35px);
|
|
}
|
|
|
|
// Paragraph
|
|
@mixin p-l {
|
|
font-family: var(--font-arial);
|
|
font-weight: 700;
|
|
line-height: 0.9;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.04em;
|
|
@include size-font(32px, 45px);
|
|
}
|
|
@mixin p {
|
|
font-family: var(--font-arial);
|
|
font-weight: 700;
|
|
line-height: 0.94;
|
|
letter-spacing: -0.03em;
|
|
text-transform: uppercase;
|
|
@include size-font(16px, 21px);
|
|
}
|
|
@mixin p-s {
|
|
font-family: var(--font-arial);
|
|
font-weight: 700;
|
|
line-height: 0.9;
|
|
letter-spacing: -0.02em;
|
|
text-transform: uppercase;
|
|
@include size-font(14px, 18px);
|
|
}
|
|
@mixin p-xs {
|
|
font-family: var(--font-arial);
|
|
font-weight: 700;
|
|
line-height: 0.94;
|
|
text-transform: uppercase;
|
|
@include size-font(14px, 16px);
|
|
}
|
|
@mixin p-xxs {
|
|
font-family: var(--font-arial);
|
|
font-weight: 700;
|
|
line-height: 0.94;
|
|
text-transform: uppercase;
|
|
@include size-font(12px, 14px);
|
|
}
|