PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-08-10 07:11:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

css: apropos special block styling

Browse Source
This commit is contained in:
Pontoporeia
2026-07-09 14:45:03 +02:00
parent 20873f94af
commit 61029ea437
1 changed files with 126 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/assets/css/content-page.css
+126 -152
View File
@@ -5,52 +5,52 @@
/* Override inherited padding on main-content */ /* Override inherited padding on main-content */
#main-content { #main-content {
padding-top: 0; padding-top: 0;
} }
.page-content { .page-content {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
padding: var(--space-xl) var(--space-l) var(--space-2xl); padding: var(--space-xl) var(--space-l) var(--space-2xl);
display: grid; display: grid;
grid-template-columns: 180px 1fr; grid-template-columns: 180px 1fr;
gap: var(--space-2xl); gap: var(--space-2xl);
align-items: start; align-items: start;
} }
/* ── TOC styles → components/toc.css (shared with admin) ───────────────── */ /* ── TOC styles → components/toc.css (shared with admin) ───────────────── */
/* Grid column positioning for content pages with sidebar TOC */ /* Grid column positioning for content pages with sidebar TOC */
@media (min-width: 768px) { @media (min-width: 768px) {
.page-content > article { .page-content > article {
grid-column: 2; grid-column: 2;
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
} }
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.page-content { .page-content {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--space-l); gap: var(--space-l);
padding: var(--space-m) var(--space-s) var(--space-xl); padding: var(--space-m) var(--space-s) var(--space-xl);
} }
.page-content > article { .page-content > article {
grid-column: 1; grid-column: 1;
} }
.toc { .toc {
margin-top: var(--space-s); margin-top: var(--space-s);
} }
} }
/* ── First content child aligns with TOC heading top ───────────────────── */ /* ── First content child aligns with TOC heading top ───────────────────── */
.page-content > article > :first-child { .page-content > article > :first-child {
margin-top: 2.2rem; margin-top: 2.2rem;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -58,108 +58,108 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.page-content > article { .page-content > article {
display: block; display: block;
max-width: 100%; max-width: 100%;
font-family: var(--font-body); font-family: var(--font-body);
font-size: var(--step-0); font-size: var(--step-0);
line-height: 1.6; line-height: 1.6;
color: var(--text-primary); color: var(--text-primary);
font-weight: 300; font-weight: 300;
padding-bottom: var(--space-xl); /* padding-bottom: var(--space-xl); */
} }
.page-content > article * { .page-content > article * {
max-width: 100%; max-width: 100%;
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: break-word; word-break: break-word;
} }
.page-content > article p { .page-content > article p {
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
.page-content > article p:last-child { .page-content > article p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.page-content > article a { .page-content > article a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
font-weight: 700; font-weight: 700;
} }
.page-content > article a:hover { .page-content > article a:hover {
color: var(--accent-primary); color: var(--accent-primary);
text-decoration: none; text-decoration: none;
} }
.page-content > article ul, .page-content > article ul,
.page-content > article ol { .page-content > article ol {
padding-left: var(--space-m); padding-left: var(--space-m);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
} }
.page-content > article li { .page-content > article li {
margin-bottom: 0.3em; margin-bottom: 0.3em;
} }
.page-content > article strong { .page-content > article strong {
font-weight: 700; font-weight: 700;
} }
.page-content > article em { .page-content > article em {
font-style: italic; font-style: italic;
} }
.page-content > article :where(pre, pre code, code) { .page-content > article :where(pre, pre code, code) {
display: block; display: block;
max-width: 100%; max-width: 100%;
overflow-x: auto; overflow-x: auto;
overflow-wrap: normal; overflow-wrap: normal;
word-break: normal; word-break: normal;
font-family: "Courier New", Courier, monospace; font-family: "Courier New", Courier, monospace;
font-size: 0.88em; font-size: 0.88em;
background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent); background: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
border-radius: var(--radius); border-radius: var(--radius);
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
#apropos-intro *, #apropos-intro *,
#apropos-contacts *, #apropos-contacts *,
#apropos-credits * { #apropos-credits * {
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: break-word; word-break: break-word;
max-width: 100%; max-width: 100%;
} }
#apropos-contacts, #apropos-contacts,
#apropos-intro { #apropos-intro {
border-bottom: none; border-bottom: none;
} }
/* Section separators (about page only) */ /* Section separators (about page only) */
.page-content > article > section { .page-content > article > section {
padding-bottom: var(--space-xl); /* padding-bottom: var(--space-xl); */
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
margin-bottom: var(--space-xl); margin-bottom: var(--space-xl);
} }
.page-content > article > section:last-child { .page-content > article > section:last-child {
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: var(--space-xl); padding-bottom: var(--space-xl);
} }
/* Scroll margin so anchor links account for the sticky header */ /* Scroll margin so anchor links account for the sticky header */
.page-content > article :where(h1, h2, h3) { .page-content > article :where(h1, h2, h3) {
scroll-margin-top: var(--space-l); scroll-margin-top: var(--space-l);
} }
/* Hide CommonMark heading permalink anchors */ /* Hide CommonMark heading permalink anchors */
.heading-permalink { .heading-permalink {
display: none; display: none;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -167,12 +167,12 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.content-section-title { .content-section-title {
font-family: var(--font-display); font-family: var(--font-display);
font-size: var(--step-3); font-size: var(--step-3);
font-weight: 400; font-weight: 400;
color: var(--text-primary); color: var(--text-primary);
margin: 0 0 var(--space-m) 0; margin: 0 0 var(--space-m) 0;
line-height: 1.1; line-height: 1.1;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -180,48 +180,28 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-contacts-grid { .apropos-contacts-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.apropos-contact-card { .apropos-contact-card {
font-style: normal; font-style: normal;
padding: var(--space-s) 0; padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary);
}
.apropos-contact-card:first-child {
border-top: 1px solid var(--border-primary);
} }
.apropos-contact-card strong { .apropos-contact-card strong {
display: block; display: block;
font-size: var(--step-0); font-weight: 600;
font-weight: 600; color: var(--text-primary);
color: var(--text-primary); margin-bottom: var(--space-3xs);
margin-bottom: var(--space-3xs);
} }
.apropos-contact-card span { .apropos-contact-card span {
display: block; display: block;
font-size: var(--step--1); color: var(--text-secondary);
color: var(--text-secondary); line-height: 1.4;
line-height: 1.4; margin-bottom: var(--space-3xs);
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;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -229,39 +209,33 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-credits-list { .apropos-credits-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.apropos-credit-row { .apropos-credit-row {
display: grid; display: grid;
grid-template-columns: 1fr 1.6fr; grid-template-columns: 1fr 1.6fr;
gap: var(--space-s); gap: var(--space-s);
padding: var(--space-s) 0; padding: var(--space-s) 0;
border-bottom: 1px solid var(--border-primary); align-items: baseline;
align-items: baseline;
}
.apropos-credit-row:first-child {
border-top: 1px solid var(--border-primary);
} }
.apropos-credits-list dt { .apropos-credits-list dt {
font-size: var(--step--2); /* font-size: var(--step--1); */
font-weight: 600; font-weight: 300;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-tertiary);
} }
.apropos-credits-list dd { .apropos-credits-list dd {
font-size: var(--step--1); /* font-size: var(--step-; */
color: var(--text-primary); color: var(--text-primary);
margin: 0; margin: 0;
line-height: 1.5; line-height: 1.5;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -269,7 +243,7 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
.apropos-single { .apropos-single {
max-width: 720px; max-width: 720px;
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@@ -277,20 +251,20 @@
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */
@media (max-width: 600px) { @media (max-width: 600px) {
.page-content { .page-content {
padding: var(--space-m) var(--space-s) var(--space-xl); padding: var(--space-m) var(--space-s) var(--space-xl);
} }
.page-content > article { .page-content > article {
font-size: var(--step-0); font-size: var(--step-0);
} }
.content-section-title { .content-section-title {
font-size: var(--step-2); font-size: var(--step-2);
} }
.apropos-credit-row { .apropos-credit-row {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--space-3xs); gap: var(--space-3xs);
} }
} }