From 61029ea437ceda778de3e204a2aa5c82d0dbc812 Mon Sep 17 00:00:00 2001 From: Pontoporeia Date: Thu, 9 Jul 2026 14:44:44 +0200 Subject: [PATCH] css: apropos special block styling --- app/public/assets/css/content-page.css | 278 +++++++++++-------------- 1 file changed, 126 insertions(+), 152 deletions(-) diff --git a/app/public/assets/css/content-page.css b/app/public/assets/css/content-page.css index a437285..d519a0e 100644 --- a/app/public/assets/css/content-page.css +++ b/app/public/assets/css/content-page.css @@ -5,52 +5,52 @@ /* Override inherited padding on main-content */ #main-content { - padding-top: 0; + padding-top: 0; } .page-content { - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; - scroll-behavior: smooth; - padding: var(--space-xl) var(--space-l) var(--space-2xl); - display: grid; - grid-template-columns: 180px 1fr; - gap: var(--space-2xl); - align-items: start; + flex: 1; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + scroll-behavior: smooth; + padding: var(--space-xl) var(--space-l) var(--space-2xl); + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-2xl); + align-items: start; } /* ── TOC styles → components/toc.css (shared with admin) ───────────────── */ /* Grid column positioning for content pages with sidebar TOC */ @media (min-width: 768px) { - .page-content > article { - grid-column: 2; - min-width: 0; - max-width: 100%; - } + .page-content > article { + grid-column: 2; + min-width: 0; + max-width: 100%; + } } @media (max-width: 767px) { - .page-content { - grid-template-columns: 1fr; - gap: var(--space-l); - padding: var(--space-m) var(--space-s) var(--space-xl); - } + .page-content { + grid-template-columns: 1fr; + gap: var(--space-l); + padding: var(--space-m) var(--space-s) var(--space-xl); + } - .page-content > article { - grid-column: 1; - } + .page-content > article { + grid-column: 1; + } - .toc { - margin-top: var(--space-s); - } + .toc { + margin-top: var(--space-s); + } } /* ── First content child aligns with TOC heading top ───────────────────── */ .page-content > article > :first-child { - margin-top: 2.2rem; + margin-top: 2.2rem; } /* ------------------------------------------------------------------ */ @@ -58,108 +58,108 @@ /* ------------------------------------------------------------------ */ .page-content > article { - display: block; - max-width: 100%; - font-family: var(--font-body); - font-size: var(--step-0); - line-height: 1.6; - color: var(--text-primary); - font-weight: 300; - padding-bottom: var(--space-xl); + display: block; + max-width: 100%; + font-family: var(--font-body); + font-size: var(--step-0); + line-height: 1.6; + color: var(--text-primary); + font-weight: 300; + /* padding-bottom: var(--space-xl); */ } .page-content > article * { - max-width: 100%; - overflow-wrap: anywhere; - word-break: break-word; + max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; } .page-content > article p { - margin: 0 0 1em 0; + margin: 0 0 1em 0; } .page-content > article p:last-child { - margin-bottom: 0; + margin-bottom: 0; } .page-content > article a { - color: inherit; - text-decoration: none; - font-weight: 700; + color: inherit; + text-decoration: none; + font-weight: 700; } .page-content > article a:hover { - color: var(--accent-primary); - text-decoration: none; + color: var(--accent-primary); + text-decoration: none; } .page-content > article ul, .page-content > article ol { - padding-left: var(--space-m); - margin-bottom: var(--space-s); + padding-left: var(--space-m); + margin-bottom: var(--space-s); } .page-content > article li { - margin-bottom: 0.3em; + margin-bottom: 0.3em; } .page-content > article strong { - font-weight: 700; + font-weight: 700; } .page-content > article em { - font-style: italic; + font-style: italic; } .page-content > article :where(pre, pre code, code) { - display: block; - max-width: 100%; - overflow-x: auto; - overflow-wrap: normal; - word-break: normal; - font-family: "Courier New", Courier, monospace; - font-size: 0.88em; - background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent); - padding: 0.5em 0.75em; - border-radius: var(--radius); - white-space: pre-wrap; - word-wrap: break-word; + display: block; + max-width: 100%; + overflow-x: auto; + overflow-wrap: normal; + word-break: normal; + font-family: "Courier New", Courier, monospace; + font-size: 0.88em; + background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent); + padding: 0.5em 0.75em; + border-radius: var(--radius); + white-space: pre-wrap; + word-wrap: break-word; } #apropos-intro *, #apropos-contacts *, #apropos-credits * { - overflow-wrap: anywhere; - word-break: break-word; - max-width: 100%; + overflow-wrap: anywhere; + word-break: break-word; + max-width: 100%; } #apropos-contacts, #apropos-intro { - border-bottom: none; + border-bottom: none; } /* Section separators (about page only) */ .page-content > article > section { - padding-bottom: var(--space-xl); - border-bottom: 1px solid var(--border-primary); - margin-bottom: var(--space-xl); + /* padding-bottom: var(--space-xl); */ + border-bottom: 1px solid var(--border-primary); + margin-bottom: var(--space-xl); } .page-content > article > section:last-child { - border-bottom: none; - margin-bottom: 0; - padding-bottom: var(--space-xl); + border-bottom: none; + margin-bottom: 0; + padding-bottom: var(--space-xl); } /* Scroll margin so anchor links account for the sticky header */ .page-content > article :where(h1, h2, h3) { - scroll-margin-top: var(--space-l); + scroll-margin-top: var(--space-l); } /* Hide CommonMark heading permalink anchors */ .heading-permalink { - display: none; + display: none; } /* ------------------------------------------------------------------ */ @@ -167,12 +167,12 @@ /* ------------------------------------------------------------------ */ .content-section-title { - font-family: var(--font-display); - font-size: var(--step-3); - font-weight: 400; - color: var(--text-primary); - margin: 0 0 var(--space-m) 0; - line-height: 1.1; + font-family: var(--font-display); + font-size: var(--step-3); + font-weight: 400; + color: var(--text-primary); + margin: 0 0 var(--space-m) 0; + line-height: 1.1; } /* ------------------------------------------------------------------ */ @@ -180,48 +180,28 @@ /* ------------------------------------------------------------------ */ .apropos-contacts-grid { - display: flex; - flex-direction: column; - gap: 0; + display: flex; + flex-direction: column; + gap: 0; } .apropos-contact-card { - font-style: normal; - padding: var(--space-s) 0; - border-bottom: 1px solid var(--border-primary); -} - -.apropos-contact-card:first-child { - border-top: 1px solid var(--border-primary); + font-style: normal; + padding: var(--space-s) 0; } .apropos-contact-card strong { - display: block; - font-size: var(--step-0); - font-weight: 600; - color: var(--text-primary); - margin-bottom: var(--space-3xs); + display: block; + font-weight: 600; + color: var(--text-primary); + margin-bottom: var(--space-3xs); } .apropos-contact-card span { - display: block; - font-size: var(--step--1); - color: var(--text-secondary); - line-height: 1.4; - margin-bottom: var(--space-3xs); -} - -.apropos-contact-card a { - font-size: var(--step--1); - color: inherit; - text-decoration: none; - font-weight: 700; - transition: color 0.15s; -} - -.apropos-contact-card a:hover { - color: var(--accent-primary); - text-decoration: none; + display: block; + color: var(--text-secondary); + line-height: 1.4; + margin-bottom: var(--space-3xs); } /* ------------------------------------------------------------------ */ @@ -229,39 +209,33 @@ /* ------------------------------------------------------------------ */ .apropos-credits-list { - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 0; } .apropos-credit-row { - display: grid; - grid-template-columns: 1fr 1.6fr; - gap: var(--space-s); - padding: var(--space-s) 0; - border-bottom: 1px solid var(--border-primary); - align-items: baseline; -} - -.apropos-credit-row:first-child { - border-top: 1px solid var(--border-primary); + display: grid; + grid-template-columns: 1fr 1.6fr; + gap: var(--space-s); + padding: var(--space-s) 0; + align-items: baseline; } .apropos-credits-list dt { - font-size: var(--step--2); - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-tertiary); + /* font-size: var(--step--1); */ + font-weight: 300; + letter-spacing: 0.04em; + text-transform: uppercase; } .apropos-credits-list dd { - font-size: var(--step--1); - color: var(--text-primary); - margin: 0; - line-height: 1.5; + /* font-size: var(--step-; */ + color: var(--text-primary); + margin: 0; + line-height: 1.5; } /* ------------------------------------------------------------------ */ @@ -269,7 +243,7 @@ /* ------------------------------------------------------------------ */ .apropos-single { - max-width: 720px; + max-width: 720px; } /* ------------------------------------------------------------------ */ @@ -277,20 +251,20 @@ /* ------------------------------------------------------------------ */ @media (max-width: 600px) { - .page-content { - padding: var(--space-m) var(--space-s) var(--space-xl); - } + .page-content { + padding: var(--space-m) var(--space-s) var(--space-xl); + } - .page-content > article { - font-size: var(--step-0); - } + .page-content > article { + font-size: var(--step-0); + } - .content-section-title { - font-size: var(--step-2); - } + .content-section-title { + font-size: var(--step-2); + } - .apropos-credit-row { - grid-template-columns: 1fr; - gap: var(--space-3xs); - } + .apropos-credit-row { + grid-template-columns: 1fr; + gap: var(--space-3xs); + } }