ui(archiv+library): Section-Header, mehr Spalten, Kategorie-Pills
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:
+19
-8
@@ -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
|
||||
|
||||
+24
-23
@@ -132,30 +132,31 @@
|
||||
</section>
|
||||
|
||||
{{ else }}
|
||||
{{/* Archiv-Unterseite (Rubrik): chronologisch */}}
|
||||
{{ $section := path.Base .RelPermalink }}
|
||||
<header class="section-header" data-section="{{ $section }}">
|
||||
{{/* Archiv-Unterseite (Rubrik): gleiche Optik wie Übersichten */}}
|
||||
<div class="collection" style="--section-color: var(--palette-kusa)">
|
||||
<p class="section-rubric">Archiv</p>
|
||||
<h1 class="section-title">{{ .Title }}</h1>
|
||||
{{ with .Params.description }}<p class="section-description">{{ . }}</p>{{ end }}
|
||||
</header>
|
||||
{{ .Content }}
|
||||
<div class="time-list" data-section="{{ $section }}">
|
||||
<ul>
|
||||
{{ range .RegularPages.ByDate.Reverse }}
|
||||
<li class="list-item">
|
||||
<div class="list-title-row">
|
||||
<div class="list-title">
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
{{ with .Params.summary }}
|
||||
<div class="list-summary text-muted">{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="list-meta">{{ partial "date.html" .Date }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
<h1 class="collection-title">{{ .Title }}</h1>
|
||||
<div class="collection-inner">
|
||||
{{ with .Params.description }}<p class="section-description">{{ . }}</p>{{ end }}
|
||||
{{ .Content }}
|
||||
<div class="time-list">
|
||||
<ul>
|
||||
{{ range .RegularPages.ByDate.Reverse }}
|
||||
<li class="list-item">
|
||||
<div class="list-title-row">
|
||||
<div class="list-title">
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
{{ with .Params.summary }}
|
||||
<div class="list-summary text-muted">{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="list-meta">{{ partial "date.html" .Date }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
+27
-34
@@ -7,37 +7,30 @@
|
||||
{{ $pages := where site.RegularPages "Section" "library" }}
|
||||
|
||||
{{ if $pages }}
|
||||
{{/* A-Z Buchstaben aus vorhandenen Titeln */}}
|
||||
{{ $letters := slice }}
|
||||
{{ range $pages }}
|
||||
{{ $first := substr (upper .Title) 0 1 }}
|
||||
{{ $first = replace $first "Ä" "A" }}
|
||||
{{ $first = replace $first "Ö" "O" }}
|
||||
{{ $first = replace $first "Ü" "U" }}
|
||||
{{ if not (in $letters $first) }}{{ $letters = $letters | append $first }}{{ end }}
|
||||
{{ end }}
|
||||
{{ $letters = sort $letters }}
|
||||
|
||||
<div class="lib-filter">
|
||||
<input id="lib-search" class="lib-search" type="search" placeholder="Suchen …" autocomplete="off" spellcheck="false">
|
||||
<div class="lib-az">
|
||||
<button class="lib-az-all active" data-letter="">Alle</button>
|
||||
{{ range $letters }}<button data-letter="{{ lower . }}">{{ . }}</button>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Gruppen aufbauen */}}
|
||||
{{/* Gruppen sammeln + sortieren */}}
|
||||
{{ $groups := dict }}
|
||||
{{ range $pages }}
|
||||
{{ $g := .Params.group | default "Allgemein" }}
|
||||
{{ $existing := index $groups $g | default slice }}
|
||||
{{ $groups = merge $groups (dict $g ($existing | append .)) }}
|
||||
{{ end }}
|
||||
{{ $groupNames := slice }}
|
||||
{{ range $g, $_ := $groups }}{{ $groupNames = $groupNames | append $g }}{{ end }}
|
||||
{{ $groupNames = sort $groupNames }}
|
||||
|
||||
<section class="atlas">
|
||||
{{ range $g, $ps := $groups }}
|
||||
<article class="atlas-section">
|
||||
<h2>{{ $g }}</h2>
|
||||
<div class="lib-filter">
|
||||
<input id="lib-search" class="lib-search" type="search" placeholder="Suchen …" autocomplete="off" spellcheck="false">
|
||||
<div class="lib-pills">
|
||||
<button class="lib-pill active" data-group="">Alle</button>
|
||||
{{ range $groupNames }}<button class="lib-pill" data-group="{{ . }}">{{ . }}</button>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="atlas atlas--grid2">
|
||||
{{ range $groupNames }}
|
||||
{{ $ps := index $groups . }}
|
||||
<article class="atlas-section" data-group="{{ . }}">
|
||||
<h2>{{ . }}</h2>
|
||||
<ul class="atlas-list">
|
||||
{{ range sort $ps "Title" }}
|
||||
{{ $norm := lower .Title }}
|
||||
@@ -58,31 +51,31 @@
|
||||
<script>
|
||||
(function(){
|
||||
var input = document.getElementById('lib-search');
|
||||
var azBtns = document.querySelectorAll('.lib-az button');
|
||||
var activeLetter = '';
|
||||
var pills = document.querySelectorAll('.lib-pill');
|
||||
var activeGroup = '';
|
||||
|
||||
function filter() {
|
||||
var q = input.value.trim().toLowerCase()
|
||||
.replace(/ä/g,'a').replace(/ö/g,'o').replace(/ü/g,'u').replace(/ß/g,'ss');
|
||||
document.querySelectorAll('.atlas-section').forEach(function(sec) {
|
||||
var groupMatch = !activeGroup || sec.dataset.group === activeGroup;
|
||||
if (!groupMatch) { sec.style.display = 'none'; return; }
|
||||
var visible = 0;
|
||||
sec.querySelectorAll('li[data-title]').forEach(function(li) {
|
||||
var t = li.dataset.title;
|
||||
var matchQ = !q || t.indexOf(q) !== -1;
|
||||
var matchL = !activeLetter || t.charAt(0) === activeLetter;
|
||||
if (matchQ && matchL) { li.style.display = ''; visible++; }
|
||||
else li.style.display = 'none';
|
||||
var matchQ = !q || li.dataset.title.indexOf(q) !== -1;
|
||||
li.style.display = matchQ ? '' : 'none';
|
||||
if (matchQ) visible++;
|
||||
});
|
||||
sec.style.display = visible ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
input.addEventListener('input', filter);
|
||||
azBtns.forEach(function(btn) {
|
||||
pills.forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
azBtns.forEach(function(b){ b.classList.remove('active'); });
|
||||
pills.forEach(function(b){ b.classList.remove('active'); });
|
||||
this.classList.add('active');
|
||||
activeLetter = this.dataset.letter || '';
|
||||
activeGroup = this.dataset.group || '';
|
||||
filter();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user