From 6aa88a07a60187c84656506ba7f0d45f42cafe1e Mon Sep 17 00:00:00 2001 From: karim Date: Tue, 2 Jun 2026 02:19:27 +0200 Subject: [PATCH] =?UTF-8?q?ui:=20Artikel-Fu=C3=9F=20neu=20=E2=80=94=20ziti?= =?UTF-8?q?eren=20als=20Link,=20Tags=20neben=20Dialog,=20Versionen-Liste?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - zitieren: schlichter Link direkt unter den Quellen (statt Pill); klappt eine dezente, gesamthaft kopierbare Quellenangabe auf — wahlweise APA oder DIN - Tags raus von unter den Quellen → in die Aktionsreihe, ganz rechts neben Dialog - „Versionen" als Link eine Zeile darunter; Liste in voller Inhaltsbreite und normaler Schrift/Größe (statt mono-Box). Auswahl öffnet Diff/Fassung oben. Co-Authored-By: Claude Opus 4.8 --- assets/css/custom.css | 150 ++++++++++++++---------------- layouts/_default/single.html | 17 ++-- layouts/_partials/provenance.html | 138 ++++++++++++++++----------- static/version-history.js | 4 +- 4 files changed, 162 insertions(+), 147 deletions(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index d72fab7..6daa447 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1475,106 +1475,92 @@ img:hover { filter: grayscale(0%); } Herkunft / Zitieren — „lebendes Dokument": Version (→ Commit), Verlauf, Zitieren-Knopf. Dezent unter dem Beitrag. ------------------------------------------------------------------------ */ -.provenance { +/* ------------------------------------------------------------------------ + Artikel-Fuß: zitieren (Link + dezente Angabe), Aktionsreihe, Versionen. + ------------------------------------------------------------------------ */ +/* Zitieren: schlichter Link direkt unter den Quellen. */ +.cite { margin-top: var(--spacing-md); } +.cite-toggle, +.versions-toggle, +.cite-copy { + font: inherit; + font-size: var(--font-size-small); + color: var(--color-text-muted); + background: none; + border: none; + padding: 0; + cursor: pointer; + text-decoration: underline; + text-underline-offset: 0.2em; +} +.cite-toggle:hover, +.versions-toggle:hover, +.versions-toggle[aria-expanded="true"], +.cite-copy:hover { color: var(--accent); } + +.cite-box { margin-top: 0.7em; } +.cite-text { + margin: 0 0 0.5em; + font-family: var(--font-family-serif); + font-size: var(--font-size-small); + line-height: 1.6; + color: var(--color-text-muted); + user-select: all; /* ein Klick markiert die ganze Angabe */ +} +.cite-actions { display: flex; align-items: center; gap: 0.9em; font-size: var(--font-size-small); } +.cite-fmt { + font: inherit; + font-size: var(--font-size-small); + color: var(--color-text-muted); + background: none; + border: none; + padding: 0; + cursor: pointer; +} +.cite-fmt:hover { color: var(--accent); } +.cite-fmt.is-active { color: var(--accent); font-weight: 600; } +.cite-status { color: var(--color-text-muted); } + +/* Aktionsreihe: Dialog links, Tags ganz rechts; darüber eine Trennlinie. */ +.article-actions { display: flex; flex-wrap: wrap; align-items: center; - gap: 0.5em; + justify-content: space-between; + gap: 0.8em 1em; margin-top: var(--spacing-lg); - padding-top: var(--spacing-sm); + padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); - font-family: var(--font-family-mono); - font-size: var(--font-size-small); - color: var(--color-text-muted); -} -/* Version/Zitieren im Tag-Look (gefüllt, weich); Dialog separat (Akzent-Outline). */ -.prov-version, -.prov-cite { - display: inline-block; - padding: 0.35rem 0.85rem; - line-height: 1.3; - font-family: var(--font-family-display); - font-size: 0.78rem; - font-weight: 500; - letter-spacing: 0.02em; - text-transform: lowercase; - color: var(--color-text-primary); - background: color-mix(in oklab, var(--section-color, var(--accent)) 14%, transparent); - border: none; - border-radius: 999px; - text-decoration: none; - cursor: pointer; -} -.prov-version:hover, -.prov-cite:hover, -.prov-version[aria-expanded="true"], -.prov-cite[aria-expanded="true"] { - background: color-mix(in oklab, var(--section-color, var(--accent)) 30%, transparent); } +.article-actions .tag-pills { margin: 0; } -/* Aufklappendes Zitat-Panel: zeigt die Quellenangabe lesbar + Kopieren. */ -.prov-citation { - margin-top: var(--spacing-sm); - padding: var(--spacing-sm) var(--spacing-md); - border: 1px solid var(--color-border); - border-radius: 8px; - background: var(--color-bg-secondary); -} -.prov-citation-text { - margin: 0 0 0.6em; - font-family: var(--font-family-serif); - font-size: var(--font-size-small); - line-height: 1.5; - user-select: all; /* ein Klick markiert die ganze Angabe */ -} -.prov-citation-actions { display: flex; align-items: center; gap: 0.8em; } -.prov-citation-copy { - font-family: var(--font-family-mono); - font-size: var(--font-size-small); - color: var(--color-text-primary); - background: none; - border: 1px solid var(--color-border); - border-radius: 6px; - padding: 0.2em 0.7em; - cursor: pointer; -} -.prov-citation-copy:hover { border-color: var(--accent); color: var(--accent); } -.prov-citation-status { - font-family: var(--font-family-mono); - font-size: var(--font-size-small); - color: var(--color-text-muted); -} +/* Versionen: eine Zeile darunter, öffnet die Liste auf der Seite. */ +.article-versions { margin-top: var(--spacing-sm); } -/* ------------------------------------------------------------------------ - Versions-Marke + Verlauf — alte Fassungen direkt auf der Seite anzeigen. - ------------------------------------------------------------------------ */ -.version-panel { - margin-top: 0.5rem; - border: 1px solid var(--color-border); - border-radius: 8px; - background: var(--color-bg-secondary); - padding: 0.3rem; -} +/* Versionsliste: volle Inhaltsbreite, normale Schrift/Größe wie der Text. */ +.version-panel { margin-top: 0.8rem; } .version-list { list-style: none; margin: 0; padding: 0; } .version-list button { display: flex; - gap: 0.9em; + gap: 1em; width: 100%; text-align: left; - font-family: var(--font-family-mono); - font-size: var(--font-size-small); + font-family: var(--font-family-serif); + font-size: 1rem; + line-height: 1.5; color: var(--color-text-primary); background: none; border: none; - border-radius: 6px; - padding: 0.45em 0.6em; + border-bottom: 1px solid var(--color-border); + padding: 0.7em 0; cursor: pointer; } -.version-list button:hover { background: var(--color-bg-primary); } -.version-list .v-date { white-space: nowrap; } -.version-list .v-subject { flex: 1; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.version-list .v-hash { white-space: nowrap; color: var(--color-text-muted); } -.version-empty { margin: 0.4rem 0.6rem; font-size: var(--font-size-small); color: var(--color-text-muted); } +.version-list li:first-child button { border-top: 1px solid var(--color-border); } +.version-list button:hover { color: var(--accent); } +.version-list .v-date { white-space: nowrap; min-width: 6em; } +.version-list .v-subject { flex: 1; color: var(--color-text-muted); } +.version-list .v-hash { white-space: nowrap; color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: 0.85em; } +.version-empty { margin: 0.6rem 0; color: var(--color-text-muted); } .version-banner { display: flex; diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9f20f54..7870c17 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -60,14 +60,17 @@ {{ .Content }} - {{/* Tags as small pills at the bottom — Republik-style, no hash symbol */}} - {{- with .Params.tags }} - - {{- end }} + {{/* Tags: bei Seiten (nicht-Library) wie bisher unter dem Text. Bei Library + wandern sie in die Aktionsreihe (rechts neben Dialog) im Partial. */}} + {{ if ne .Section "library" }} + {{- with .Params.tags }} + + {{- end }} + {{ end }} - {{/* Herkunft/Zitieren/Dialog — nur bei Library-Beiträgen (lebendes Dokument). */}} + {{/* Artikel-Fuß (zitieren, Dialog, Tags, Versionen) — nur bei Library. */}} {{ if eq .Section "library" }} {{ partial "provenance.html" . }} diff --git a/layouts/_partials/provenance.html b/layouts/_partials/provenance.html index 980d5bb..a506d26 100644 --- a/layouts/_partials/provenance.html +++ b/layouts/_partials/provenance.html @@ -1,74 +1,100 @@ -{{/* Herkunft eines Beitrags: Version (→ Commit), Verlauf, Zitieren. - Version/Verlauf nur, wenn Git-Info da ist (enableGitInfo) und repoURL gesetzt. - „Zitieren" kopiert eine Quellenangabe in die Zwischenablage. */}} +{{/* Artikel-Fuß für Library-Beiträge: Quellenangabe (zitieren), Aktionsreihe + (Dialog links, Tags rechts) und der Versionsverlauf (eine Zeile darunter). */}} {{ $author := .Params.author | default site.Params.author.name }} -
- {{/* Dialog: gleiche Pill-Reihe, sticht durch Pfeil + Akzentfarbe hervor. */}} - → Dialog - {{/* „Version vom " öffnet den Verlauf direkt auf der Seite (Diff rot/grün). */}} - - + - + +{{/* Aktionsreihe: Dialog links, Tags ganz rechts. */}} +
+ → Dialog + {{ with .Params.tags }} +
    + {{- range . -}}
  • {{ . }}
    • {{- end -}} +
+ {{ end }} +
+ +{{/* Versionen: eine Zeile darunter; öffnet den Verlauf direkt auf der Seite. */}} +
+ +
+ diff --git a/static/version-history.js b/static/version-history.js index eccd209..d0dc172 100644 --- a/static/version-history.js +++ b/static/version-history.js @@ -109,8 +109,8 @@ }); panel.appendChild(ol); } - var prov = trigger.closest('.provenance') || trigger; - prov.parentNode.insertBefore(panel, prov.nextSibling); + var host = trigger.closest('.article-versions') || trigger; + host.parentNode.insertBefore(panel, host.nextSibling); trigger.setAttribute('aria-expanded', 'true'); }); }