davide
071bc1eaa5
Mobile-first layout with breakpoints at 48rem (tablet) and 64rem (desktop): stacked nav on phones, progressive column counts for the article grid and footer, scrollable markdown tables, larger tap targets on nav links.
239 lines
4.1 KiB
CSS
239 lines
4.1 KiB
CSS
:root {
|
|
/* Neutral editorial palette: warm off-white paper, near-black ink. */
|
|
--color-ink: #14130f;
|
|
--color-body: #3d3a34;
|
|
--color-muted: #857f74;
|
|
--color-bg: #fbfaf7;
|
|
--color-surface: #f1efe9;
|
|
--color-border: #e0ddd4;
|
|
--color-rule: #14130f;
|
|
|
|
--font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
|
|
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
|
|
--width: 76rem;
|
|
--width-prose: 40rem;
|
|
--radius: 2px;
|
|
|
|
/* Breakpoints used throughout: 48rem = tablet, 64rem = desktop. */
|
|
--space: 1.1rem;
|
|
--gap-section: 2.5rem;
|
|
}
|
|
|
|
@media (min-width: 48rem) {
|
|
:root {
|
|
--space: 1.5rem;
|
|
--gap-section: 4rem;
|
|
}
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--color-body);
|
|
background: var(--color-bg);
|
|
font-family: var(--font-sans);
|
|
font-size: 1rem;
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0;
|
|
color: var(--color-ink);
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-ink);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: var(--width);
|
|
margin-inline: auto;
|
|
padding-inline: var(--space);
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
left: var(--space);
|
|
top: var(--space);
|
|
z-index: 10;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-ink);
|
|
}
|
|
|
|
.muted {
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
/* Small uppercase label used for categories, dates and section headings. */
|
|
.kicker {
|
|
margin: 0;
|
|
font-family: var(--font-sans);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
margin-block: var(--gap-section) 1.75rem;
|
|
}
|
|
|
|
.section-heading::after {
|
|
content: "";
|
|
flex: 1;
|
|
height: 1px;
|
|
background: var(--color-border);
|
|
}
|
|
|
|
/* Centred title block at the top of a listing page. */
|
|
.page-header {
|
|
margin-bottom: var(--gap-section);
|
|
padding-bottom: 1.75rem;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|
}
|
|
|
|
.page-header .kicker {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
gap: 2.25rem 1.5rem;
|
|
/* One column on phones, two on tablets, three or more on wide screens. */
|
|
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
@media (min-width: 48rem) {
|
|
.card-grid {
|
|
gap: 3rem 2.5rem;
|
|
}
|
|
}
|
|
|
|
/* Article body */
|
|
.prose {
|
|
max-width: var(--width-prose);
|
|
font-size: 1.0125rem;
|
|
/* Editors paste long URLs; without this they push the page sideways. */
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
@media (min-width: 48rem) {
|
|
.prose {
|
|
font-size: 1.075rem;
|
|
}
|
|
}
|
|
|
|
/* Markdown tables have no wrapper to scroll, so the table scrolls itself. */
|
|
.prose table {
|
|
display: block;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.prose h2,
|
|
.prose h3 {
|
|
margin-block: 2.5rem 0.75rem;
|
|
}
|
|
|
|
.prose h2 {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.prose h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.prose p,
|
|
.prose ul,
|
|
.prose ol {
|
|
margin-block: 0 1.4rem;
|
|
}
|
|
|
|
.prose a {
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.2em;
|
|
}
|
|
|
|
.prose blockquote {
|
|
margin: 2.5rem 0;
|
|
padding-left: 1.5rem;
|
|
border-left: 2px solid var(--color-ink);
|
|
font-family: var(--font-display);
|
|
font-size: 1.3rem;
|
|
line-height: 1.45;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.prose img {
|
|
margin-block: 2rem;
|
|
}
|
|
|
|
.prose pre {
|
|
overflow-x: auto;
|
|
padding: 1rem 1.25rem;
|
|
background: var(--color-surface);
|
|
border-radius: var(--radius);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.prose code {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem 2rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: var(--gap-section);
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--color-border);
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|