fde5cc4d0e
Remove hero section styles Add CSS reset and variables Improve typography and layout Update base template with CSS versioning Restructure list templates with semantic HTML Add proper container classes Improve code organization and readability
169 lines
3.5 KiB
CSS
169 lines
3.5 KiB
CSS
/* RESET */
|
|
* { box-sizing: border-box; margin-bottom: 0 }
|
|
|
|
/* VARIABLES */
|
|
:root {
|
|
--color-text: oklch(20% 0 0);
|
|
--color-background: oklch(98% 0 0);
|
|
--color-accent: oklch(50% 0.15 250);
|
|
--color-border: oklch(85% 0 0);
|
|
--color-muted: oklch(50% 0 0);
|
|
|
|
--space-xs: 0.5rem;
|
|
--space-s: 1rem;
|
|
--space-m: 2rem;
|
|
--space-l: 4rem;
|
|
|
|
--size-content: 42rem;
|
|
}
|
|
|
|
/* GLOBAL */
|
|
html {
|
|
font-family: system-ui, sans-serif;
|
|
font-size: clamp(16px, 2.3vw, 20px);
|
|
line-height: 1.6;
|
|
color: var(--color-text);
|
|
background: var(--color-background);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* CONTENT CENTERING */
|
|
.contain, :where(main > article, main > section, main > div) {
|
|
display: grid;
|
|
grid-template-columns: minmax(var(--space-s), 1fr) minmax(0, var(--size-content)) minmax(var(--space-s), 1fr);
|
|
& > * { grid-column: 2 }
|
|
}
|
|
|
|
/* TYPOGRAPHY */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
margin-top: 1.3em;
|
|
text-wrap: pretty;
|
|
}
|
|
h1 { font-size: 2.3rem }
|
|
h4 { font-weight: 700 }
|
|
|
|
p, ul, ol, dl { margin-block: 1em }
|
|
|
|
a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
&:hover { text-decoration: underline }
|
|
}
|
|
|
|
img { max-width: 100%; height: auto; display: block }
|
|
|
|
/* HEADER */
|
|
header {
|
|
border-bottom: 1px solid var(--color-border);
|
|
|
|
& > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-s);
|
|
align-items: center;
|
|
padding-block: var(--space-s);
|
|
}
|
|
|
|
& nav {
|
|
display: flex;
|
|
gap: var(--space-s);
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
|
|
&:first-child { flex: 1 }
|
|
|
|
& a {
|
|
text-decoration: none;
|
|
&:hover { text-decoration: underline }
|
|
&[aria-current] { font-weight: bold }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* MAIN */
|
|
main { padding-block: var(--space-m) }
|
|
|
|
/* FOOTER */
|
|
footer {
|
|
border-top: 1px solid var(--color-border);
|
|
padding-block: var(--space-s);
|
|
font-size: 0.875rem;
|
|
color: var(--color-muted);
|
|
& p { margin: 0 }
|
|
}
|
|
|
|
/* CODE */
|
|
code {
|
|
background: oklch(95% 0.02 250);
|
|
padding: 0.125em 0.25em;
|
|
border-radius: 0.25em;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
pre {
|
|
background: oklch(95% 0.02 250);
|
|
padding: var(--space-s);
|
|
border-radius: 0.5em;
|
|
overflow-x: auto;
|
|
& code { background: none; padding: 0 }
|
|
}
|
|
|
|
/* TABLES */
|
|
table { border-collapse: collapse; width: 100%; margin-block: var(--space-s) }
|
|
th, td { padding: var(--space-xs); text-align: start; border-bottom: 1px solid var(--color-border) }
|
|
th { font-weight: bold }
|
|
|
|
/* BLOCKQUOTES */
|
|
blockquote {
|
|
margin-inline: 0;
|
|
padding-inline-start: var(--space-s);
|
|
border-inline-start: 4px solid var(--color-accent);
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
/* ARTICLE */
|
|
article time { color: var(--color-muted); font-size: 0.875rem }
|
|
|
|
/* LIST VIEWS */
|
|
.list-item {
|
|
margin-bottom: var(--space-m);
|
|
& img { margin-bottom: var(--space-xs) }
|
|
& h2 { margin-top: 0 }
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
|
|
gap: var(--space-m);
|
|
}
|
|
|
|
.card {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
padding: var(--space-s);
|
|
& img { margin-bottom: var(--space-xs); border-radius: 0.25rem }
|
|
& h3 { margin-top: 0 }
|
|
}
|
|
|
|
.compact-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
& li { border-bottom: 1px solid var(--color-border); padding-block: var(--space-xs) }
|
|
& a {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: var(--space-s);
|
|
&:hover strong { text-decoration: underline }
|
|
}
|
|
& time { white-space: nowrap; font-size: 0.875rem }
|
|
& p { margin-top: var(--space-xs); color: var(--color-muted); font-size: 0.9rem }
|
|
}
|