dave-dmg/blog_legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial tool setup and basic styles

Browse Source
This commit is contained in:
Dave
2025-09-04 14:13:55 +02:00
parent b212b4f596
commit fc8b07185d
19 changed files with 9016 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
src/styles/base/typography.css Normal file
View File

@@ -0,0 +1,254 @@
html {
font-size: var(--typo-size-base);
}
body {
font-family: var(--font-body), sans-serif;
font-feature-settings: "kern" 1;
font-weight: var(--typo-weight-regular);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: var(--typo-leading-comfortable);
color: var(--color-text-primary);
background-color: var(--color-surface-base);
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-display), serif;
}
h1 {
margin-bottom: var(--spacing-cozy);
padding-bottom: var(--spacing-snug);
border-bottom: var(--size-4) solid var(--color-text-primary);
font-size: var(--typo-size-6xl);
font-weight: var(--typo-weight-black);
line-height: 1.125;
text-transform: uppercase;
letter-spacing: -0.0137em;
}
h2 {
margin: var(--spacing-relaxed) 0 var(--spacing-cozy) 0;
padding-left: var(--spacing-cozy);
border-left: var(--size-4) solid var(--color-text-primary);
font-size: var(--typo-size-5xl);
font-weight: var(--typo-weight-black);
line-height: 1.1765;
text-transform: uppercase;
letter-spacing: -0.0096em;
}
h3 {
margin: var(--spacing-comfortable) 0 var(--spacing-cozy) 0;
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-size: var(--typo-size-4xl);
font-weight: var(--typo-weight-extrabold);
line-height: 1.2;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: -0.004em;
}
h4 {
margin: var(--spacing-comfortable) 0 var(--spacing-snug) 0;
padding: var(--spacing-tight) var(--spacing-snug);
font-size: var(--typo-size-3xl);
font-weight: var(--typo-weight-bold);
line-height: 1.125;
color: var(--color-surface-base);
text-transform: uppercase;
letter-spacing: 0.0025em;
background: var(--color-text-primary);
}
h5 {
position: relative;
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
border-top: var(--size-2) solid var(--color-text-secondary);
border-bottom: var(--size-2) solid var(--color-text-secondary);
font-size: var(--typo-size-2xl);
font-weight: var(--typo-weight-extrabold);
line-height: 1.28;
color: var(--color-text-secondary);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
}
h6 {
margin: var(--spacing-cozy) 0 var(--spacing-snug) 0;
font-size: var(--typo-size-xl);
font-weight: var(--typo-weight-black);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.035em;
/* &::after {
content: "▼";
display: block;
font-size: 1.25em;
} */
}
p {
margin: var(--spacing-cozy) 0;
font-size: var(--typo-size-md);
line-height: var(--typo-leading-normal);
text-align: justify;
}
h1 + p {
font-size: var(--typo-size-xl);
font-weight: var(--typo-weight-bold);
line-height: 1.4;
letter-spacing: 0.022em;
}
blockquote {
margin: var(--spacing-comfortable) 0;
padding: var(--spacing-snug) 0 var(--spacing-snug) var(--spacing-comfortable);
border-left: var(--size-4) solid var(--color-text-tertiary);
color: var(--color-text-tertiary);
& p {
margin-top: 0;
}
}
pre {
overflow-x: auto;
margin: var(--spacing-comfortable) 0;
padding: var(--spacing-comfortable);
font-family: var(--font-mono), monospace;
font-size: var(--typo-size-sm);
line-height: 1.5385;
color: var(--color-surface-base);
background: var(--color-text-primary);
}
hr {
position: relative;
overflow: visible;
height: var(--size-4);
margin: var(--spacing-relaxed) 0;
border: none;
background-color: var(--color-text-primary);
&::after {
content: "▼";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 var(--spacing-snug);
font-size: var(--typo-size-4xl);
line-height: var(--typo-leading-compressed);
color: var(--color-text-primary);
background-color: var(--color-surface-base);
}
}
figure {
margin: var(--spacing-relaxed) 0;
padding: var(--spacing-comfortable) 0;
border-top: var(--size-3) solid var(--color-text-primary);
border-bottom: var(--size-3) solid var(--color-text-primary);
& blockquote {
position: relative;
margin: var(--spacing-comfortable) 0;
padding: var(--spacing-snug) 0 var(--spacing-comfortable) var(--spacing-comfortable);
border: none;
font-size: var(--typo-size-lg);
font-weight: var(--typo-weight-extrabold);
line-height: var(--typo-leading-loose);
color: var(--color-text-tertiary);
&::before {
content: "";
position: absolute;
bottom: calc(var(--size-1)*-1);
left: 50%;
transform: translateX(-50%);
width: var(--size-16);
height: var(--size-2);
background: var(--color-text-tertiary);
}
& p {
margin: 0;
text-align: center;
}
}
& figcaption {
margin-top: var(--spacing-snug);
font-size: var(--typo-size-xs);
color: var(--color-text-tertiary);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.074em;
}
}
details {
overflow: hidden;
& summary {
padding: var(--spacing-snug) 0;
font-family: var(--font-display), serif;
font-size: var(--typo-size-lg);
font-weight: var(--typo-weight-black);
line-height: 1.5385;
color: var(--color-surface-base);
text-transform: uppercase;
letter-spacing: 0.035em;
background: var(--color-text-secondary);
&::marker {
content: "🞃";
position: absolute;
right: 0;
font-family: var(--font-body), sans-serif
}
}
&[open] {
summary {
&::marker {
content: "🞁";
}
}
}
}