irrlicht/Kontrollverlust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend: Kommentarbereich, Ladezeit & Interaktionsleiste

Browse Source 
- "Antworten"-Überschrift entfernt; direkte Antworten sind eine flache Liste
- Thread-Strich nur noch bei der Ahnenkette (#ancestors), Antworten nur eingerückt
- font-display: swap + korrekte format()-Hinweise -> kein FOIT mehr beim Laden
- Interaktionsleiste als Grid: Vote-Buttons zentriert, "n Antworten" links daneben

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
irrlicht
2026-06-07 17:21:28 +02:00
parent 1313e9613c
commit b4d03f8741
4 changed files with 43 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/app.css
+34 -9
View File
@@ -2,28 +2,34 @@
EB Garamond als Fließtext, Cheltenham Classic für die Überschrift,
Concrete-Textur als Hintergrund, weiße zentrierte Inhaltsspalte. */
/* font-display: swap -> Text wird sofort mit System-Serife gezeichnet und
wechselt zur Webschrift, sobald geladen (kein FOIT). Der Browser lädt nur
das erste passende src-Format, daher .ttf als truetype korrekt deklarieren. */
@font-face {
font-family: "EB Garamond";
src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf"),
url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("truetype");
src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Regular.ttf") format("truetype"),
url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Regular.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "EB Garamond";
src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Italic.ttf"),
url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Italic.otf") format("truetype");
src: url("/static/assets/EBGaramond-0.016/ttf/EBGaramond12-Italic.ttf") format("truetype"),
url("/static/assets/EBGaramond-0.016/otf/EBGaramond12-Italic.otf") format("opentype");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Cheltenham Classic";
src: url("/static/assets/cheltenham/CheltenhamClassic.ttf"),
url("/static/assets/cheltenham/CheltenhamClassic.otf") format("truetype");
src: url("/static/assets/cheltenham/CheltenhamClassic.ttf") format("truetype"),
url("/static/assets/cheltenham/CheltenhamClassic.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
html {
@@ -163,15 +169,34 @@ a.button:hover, button:hover {
max-width: 100%;
}
/* Ahnenkette / Antworten leicht eingerückt mit Threadline. */
#ancestors .card,
#replies .card {
/* Ahnenkette: der Strich links symbolisiert den Thread oberhalb des Beitrags. */
#ancestors .card {
border-left: 3px solid gray;
margin-left: 3%;
padding-left: 0.75rem;
}
/* Direkte Antworten unter dem Fokus-Beitrag: nur eingerückt, kein Thread-Strich. */
#replies .card {
margin-left: 3%;
padding-left: 0.75rem;
}
/* Interaktionsleiste: Vote-Buttons mittig (auto-Spalte zwischen zwei gleichen
1fr-Spalten), das Antworten-Label links daneben. */
.interactions {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-top: 0.25rem;
}
.interactions .replies {
justify-self: start;
}
.row {
justify-self: center;
display: flex;
align-items: center;
gap: 0.5rem;