karim/OPENBUREAU
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(archiv+library): Section-Header, mehr Spalten, Kategorie-Pills

Browse Source 
Archiv-Unterseiten (Büroführung etc.): .collection-Wrapper mit
--palette-kusa, .collection-title statt .section-header — gleiche
Optik wie Archiv/Library-Übersichten. Artikel-Grid: auto-fill
minmax(220px) → 3+ Spalten. Datum unter Titel (card-layout).

Archiv-Toggle-Pills: font-family-display (wie Dialog-Pill), margin
von spacing-md → 0.5em.

Library-Übersicht: A-Z-Index → Kategorie-Pills (Gruppe ausgeschrieben,
aktiv = ichigo), Atlas als 2-Spalten-Grid (.atlas--grid2), Suche
kombiniert mit Gruppe-Filter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
karim
2026-06-06 02:08:02 +02:00
parent 1709dc093c
commit 42f2823ff0
3 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/custom.css
+19 -8
View File
@@ -745,16 +745,21 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
.entry-links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.entry-links-label { font-size: var(--font-size-small); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* Library-Übersicht: Suchfeld + A-Z-Index */
/* Library-Übersicht: Suchfeld + Kategorie-Pills */
.lib-filter { margin-bottom: var(--spacing-md); display: flex; flex-direction: column; gap: 0.6em; }
.lib-search { width: 100%; padding: 0.45em 0.8em; border: 1px solid var(--color-border); border-radius: 6px;
background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: var(--font-size-base); font-family: inherit; }
.lib-search:focus { outline: none; border-color: var(--section-color, var(--accent)); }
.lib-az { display: flex; flex-wrap: wrap; gap: 0.25em; }
.lib-az button { padding: 0.15em 0.45em; border: 1px solid var(--color-border); border-radius: 4px;
background: transparent; color: var(--color-text-muted); font-size: var(--font-size-small); cursor: pointer; font-family: inherit; line-height: 1.5; }
.lib-az button:hover { border-color: var(--section-color, var(--accent)); color: var(--color-text-primary); }
.lib-az button.active { background: var(--section-color, var(--accent)); border-color: var(--section-color, var(--accent)); color: white; }
.lib-pills { display: flex; flex-wrap: wrap; gap: 0.3em; }
.lib-pill { font-family: var(--font-family-display); font-size: var(--font-size-small); cursor: pointer;
padding: 0.28em 0.85em; border-radius: 999px;
background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.lib-pill:hover { border-color: var(--section-color, var(--accent)); color: var(--color-text-primary); }
.lib-pill.active { background: var(--section-color, var(--accent)); border-color: var(--section-color, var(--accent)); color: white; }
/* Library-Atlas: zwei Kategorien nebeneinander */
.atlas--grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); align-items: start; }
@media (max-width: 600px) { .atlas--grid2 { grid-template-columns: 1fr; } }
/* ── Software-Landing: Werkzeuge getrennt von Texten ── */
.software-h { font-family: var(--font-family-serif); margin: var(--spacing-md) 0 var(--spacing-sm); }
@@ -1149,6 +1154,7 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
.collection { margin-top: var(--spacing-sm); }
.collection-title,
.collection-inner { max-width: 48.5rem; margin-inline: auto; }
.collection .section-rubric { max-width: 48.5rem; margin-inline: auto; margin-top: var(--spacing-sm); }
.collection-title {
text-align: left;
font-family: var(--font-family-serif);
@@ -1163,9 +1169,9 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
}
/* Archiv-Umschalter (Kategorie ↔ Jahr) */
.archiv-toggle { display: inline-flex; gap: 0.3em; margin: 0 0 var(--spacing-md); }
.archiv-toggle { display: inline-flex; gap: 0.3em; margin: 0 0 0.5em; }
.archiv-toggle button {
font: inherit; font-size: var(--font-size-small); cursor: pointer;
font-family: var(--font-family-display); font-size: var(--font-size-small); cursor: pointer;
padding: 0.3em 0.95em; border-radius: 999px;
background: none; border: 1px solid var(--color-border); color: var(--color-text-muted);
}
@@ -1180,6 +1186,8 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
.time-list ul {
list-style: none;
margin-left: 0;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.25rem;
}
.list-item {
border-top: 1px solid var(--color-border);
@@ -1212,6 +1220,9 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
font-style: italic;
line-height: 1.45;
}
/* Im Grid: Datum unter dem Titel, keine Trennlinie zwischen Cards */
.time-list .list-title-row { flex-direction: column; align-items: flex-start; gap: 0.2em; }
.time-list .list-item, .time-list .list-item:last-child { border-top: none; border-bottom: none; }
/* ------------------------------------------------------------------------
Software showcase