diff --git a/.gitignore b/.gitignore index df8c6a6..13c182e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,7 @@ venv/ kver.db +kver.db-shm +kver.db-wal kver.db.bak original-kver.db /kver diff --git a/web/css/app.css b/web/css/app.css index 3c6aa86..57eaa83 100644 --- a/web/css/app.css +++ b/web/css/app.css @@ -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; diff --git a/web/entry.html b/web/entry.html index b44af15..e810689 100644 --- a/web/entry.html +++ b/web/entry.html @@ -31,7 +31,6 @@

-

Antworten

diff --git a/web/js/feed.js b/web/js/feed.js index 6811834..cf64dfd 100644 --- a/web/js/feed.js +++ b/web/js/feed.js @@ -60,12 +60,14 @@ function renderEntry(e) {
${escapeHtml(e.username)} · ${when}
${linkify(e.content)}
${media} -
- - – / – - +
+ +
+ + – / – + +
-
${replyLabel}
`; setupVoting(el, e.pid); el.addEventListener("click", (ev) => {