takerofnotes/takerofnotes-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

detail page port

Browse Source
This commit is contained in:
nicwands
2026-05-29 11:22:56 -04:00
parent b85d28c142
commit e22d75c50a
65 changed files with 7006 additions and 4044 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
styles/_font-style.scss
View File

@@ -1,6 +1,6 @@
@use 'functions' as *;
@mixin size-font($ds, $ms) {
@mixin size-font($ms, $ds) {
font-size: mobile-vw($ms);
&.vh {
@@ -16,24 +16,165 @@
}
}
// 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-display);
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;
line-height: 1.3;
@include size-font(30px, 30px);
text-transform: none;
@include size-font(22px, 35px);
}
@mixin h1-mono {
font-family: var(--font-mono);
font-weight: 400;
line-height: 1;
@include size-font(22px, 22px);
// 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-mono);
font-weight: 400;
line-height: 1.4;
@include size-font(12px, 12px);
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);
}