dialog: Position/Rolle + Breadcrumb-Nav + nüchterne Wortmeldungen, Footer voll-breit
- comments: author_role (Position bei OPENBUREAU) aus authors.json gespeichert/ausgeliefert - schema: comments.author_role hinzugefügt - dialog.js: Breadcrumb (Dialoge › Forum), volles Datum/Uhrzeit, Box→Trennlinien-Layout - css: Footer voll-breit (Flex statt Grid), Balken zwischen Header/main/Footer entfernt Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+35
-34
@@ -98,6 +98,7 @@ body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0; /* Theme-main.css setzt body{gap:spacing-lg} → erzeugte Balken zwischen Header/main/Footer */
|
||||
}
|
||||
body > header.site-header,
|
||||
body > footer { flex: none; }
|
||||
@@ -114,7 +115,7 @@ body > main::-webkit-scrollbar { width: 0; height: 0; display: none; }
|
||||
body:not(.is-home) > main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: safe center;
|
||||
justify-content: flex-start; /* Inhalt startet direkt unter dem Header (keine Zentrier-Bänder) */
|
||||
}
|
||||
/* Inhalt 72ch-zentriert in der vollbreiten Scroll-Fläche (Home = Vollbreite). */
|
||||
body:not(.is-home) > main > * {
|
||||
@@ -396,8 +397,7 @@ body.is-home .journal-list::-webkit-scrollbar { width: 0; height: 0; display: no
|
||||
body.is-home .journal-entry { flex: 0 0 auto; }
|
||||
body.is-home .more { flex: none; padding: 0.4rem 10px; margin: 0; }
|
||||
/* Footer kompakt (~1/3): kein großer Außenabstand, knappes Padding. */
|
||||
body.is-home > footer { margin-top: 0; padding: 0.55rem 0; }
|
||||
body.is-home > footer .footer-grid { row-gap: 0.2rem; }
|
||||
body.is-home > footer { margin-top: 0; padding: 0.55rem 1.5rem; }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
/* Mobil: kein Full-Height-Rahmen — normale Seite scrollt, kein interner Scroll. */
|
||||
@@ -570,7 +570,9 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
|
||||
|
||||
/* Eigene Dialog-Seite (/dialog/?thread=…) */
|
||||
/* Füllt die normale Inhaltsspalte (kein eigenes max-width/Seiten-Padding → gleiche Breite wie andere Seiten) */
|
||||
.dialog-page { padding: var(--spacing-sm) 0 var(--spacing-xl); }
|
||||
/* width:100% → füllt immer die ganze Inhaltsspalte (sonst schrumpft .dialog-page
|
||||
als Flex-Item mit margin-inline:auto bei schmalem Inhalt, z.B. Forum-Ansicht). */
|
||||
.dialog-page { width: 100%; padding: var(--spacing-sm) 0 var(--spacing-xl); }
|
||||
.dialog-overview { display: flex; flex-direction: column; gap: 0.6em; }
|
||||
.dialog-overview-item {
|
||||
display: flex; justify-content: space-between; align-items: baseline; gap: 1em;
|
||||
@@ -584,23 +586,33 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
|
||||
.dialog-back:empty { margin: 0; }
|
||||
.dialog-back a { color: var(--color-text-muted); text-decoration: none; }
|
||||
.dialog-back a:hover { color: var(--accent); }
|
||||
/* Dialog-Navigation oben: Breadcrumb (Dialoge › Forum). */
|
||||
.dialog-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; font-size: var(--font-size-small); }
|
||||
.dialog-crumb a { color: var(--color-text-muted); text-decoration: none; }
|
||||
.dialog-crumb a:hover { color: var(--accent); }
|
||||
.dialog-crumb-sep { color: var(--color-text-muted); }
|
||||
|
||||
.dialog-title {
|
||||
font-family: var(--font-family-serif);
|
||||
margin: 0 0 var(--spacing-md);
|
||||
}
|
||||
.dialog-list { display: flex; flex-direction: column; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
|
||||
.dialog-list { display: flex; flex-direction: column; margin-bottom: var(--spacing-lg); }
|
||||
.dialog-empty { color: var(--color-text-muted); font-style: italic; }
|
||||
.dialog-card { border: 1px solid var(--color-border); border-radius: 12px; padding: var(--spacing-md); background: var(--color-bg-secondary); }
|
||||
.dialog-card-head { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.6em; }
|
||||
/* Nüchterne Wortmeldung: keine Box — nur feine Trennlinie + Abstand. */
|
||||
.dialog-post { padding: 1.15em 0; border-bottom: 1px solid var(--color-border); }
|
||||
.dialog-post:first-child { padding-top: 0.2em; }
|
||||
.dialog-post:last-child { border-bottom: none; }
|
||||
.dialog-post-head { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.5em; }
|
||||
.dialog-avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%; flex: none;
|
||||
background: var(--color-border) center/cover no-repeat;
|
||||
display: grid; place-items: center; font-weight: 600; color: var(--color-text-muted);
|
||||
}
|
||||
.dialog-meta { display: flex; flex-direction: column; line-height: 1.3; }
|
||||
.dialog-ident { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
|
||||
.dialog-nameline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5em; }
|
||||
.dialog-name { font-weight: 600; }
|
||||
.dialog-time { font-size: var(--font-size-small); color: var(--color-text-muted); }
|
||||
.dialog-pos { font-size: var(--font-size-small); color: var(--color-text-muted); }
|
||||
.dialog-time { font-size: var(--font-size-small); color: var(--color-text-muted); margin-top: 0.1em; }
|
||||
.dialog-replyto { font-size: var(--font-size-small); color: var(--accent); }
|
||||
.dialog-body { font-family: var(--font-family-serif); line-height: 1.6; white-space: pre-wrap; }
|
||||
.dialog-actions { display: flex; gap: 0.8em; margin-top: 0.6em; }
|
||||
@@ -1355,31 +1367,23 @@ footer {
|
||||
background: var(--color-dark-panel);
|
||||
color: var(--color-dark-panel-text); /* hell & lesbar auf Schwarz */
|
||||
margin-top: 0;
|
||||
padding: 0.55rem 0; /* kompakt wie auf der Journal-Seite */
|
||||
/* voll-breit; horizontal bündig zum Journal-Karten-Inhalt (1.5rem) */
|
||||
padding: 0.55rem 1.5rem;
|
||||
border-top: none;
|
||||
/* inner grid aligns with content column, same trick as header */
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
1fr
|
||||
min(var(--container-width), 100% - 3.5rem)
|
||||
1fr;
|
||||
}
|
||||
footer > * { grid-column: 2; }
|
||||
footer a, footer a:hover, footer a:focus { border: none; border-bottom: none; text-decoration: none; }
|
||||
footer a { color: var(--color-dark-panel-text); }
|
||||
footer a:hover { color: var(--accent-soft); }
|
||||
footer p { margin: 0; }
|
||||
|
||||
/* Zwei Zeilen: oben Inhalts-Absatz (links) | Links (rechts),
|
||||
unten Lizenz/Copyright (links). */
|
||||
/* Lizenzen ganz links (linksbündig), Footer-Menü ganz rechts. */
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: start;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
column-gap: var(--spacing-lg);
|
||||
row-gap: 0.2rem;
|
||||
}
|
||||
.footer-legal { grid-row: 1; grid-column: 1; }
|
||||
.footer-legal { text-align: left; }
|
||||
.footer-licenses {
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 0.8rem;
|
||||
@@ -1389,14 +1393,13 @@ footer p { margin: 0; }
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-dark-panel-muted);
|
||||
margin-top: 0.35rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
grid-row: 1; grid-column: 2;
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 0.4rem 1.3rem;
|
||||
font-family: var(--font-family-display);
|
||||
font-size: 0.9rem;
|
||||
@@ -1408,14 +1411,12 @@ footer p { margin: 0; }
|
||||
|
||||
/* Mobile: alles linksbündig stapeln */
|
||||
@media (max-width: 720px) {
|
||||
.footer-grid { grid-template-columns: 1fr; }
|
||||
.footer-legal,
|
||||
.footer-links {
|
||||
grid-column: 1;
|
||||
justify-self: start;
|
||||
.footer-grid {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
.footer-legal { grid-row: 1; }
|
||||
.footer-links { grid-row: 2; }
|
||||
.footer-links { justify-content: flex-start; }
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user