Broken ausgabe

This commit is contained in:
Simon Martens
2025-09-22 09:02:58 +02:00
parent 350631f6b4
commit 0307bd9c9c
11 changed files with 144 additions and 66 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,4 +1,4 @@
<div class="pb-16 mx-auto bg-slate-50 w-full border-t-8 border-slate-600 ">
<div class="pb-6 mx-auto bg-slate-50 w-full border-t-8 border-slate-600 ">
<header class="mx-auto w-fit mt-12">
<a href="/" class="no-underline">
<h1 class="text-2xl">Königsberger gelehrte und politische Zeitungen</h1>

View File

@@ -6,9 +6,9 @@
<!-- Three-column layout -->
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
<!-- Column 1: Sticky Inhaltsverzeichnis -->
<div class="lg:w-1/4 xl:w-1/4 flex-shrink-0 bg-slate-50 px-8 py-4">
<div class="lg:sticky lg:top-8 lg:overflow-y-auto">
<div class="bg-slate-50">
<div class="lg:w-1/4 xl:w-1/4 flex-shrink-0 bg-slate-50 px-4 py-4">
<div class="sticky top-0 max-h-screen overflow-y-auto overscroll-contain bg-slate-50">
<div class="mb-4">
{{ template "_title_nav" . }}
</div>
<div class="">

View File

@@ -1,13 +1,10 @@
{{ $model := .model }}
<div class="w-full hyphens-auto">
<div class="hyphens-auto mx-3">
{{- if $model.Pieces.Pages -}}
<div class="space-y-4">
<div class="flex items-center gap-2 mb-4">
<i class="ri-file-list-3-line text-slate-600"></i>
<h3 class="text-base font-semibold text-slate-800">Inhalt</h3>
</div>
<div class="mb-4"></div>
{{ range $page := $model.Pieces.Pages }}
{{ $pageItems := (index $model.Pieces.Items $page) }}
{{ $firstItem := "" }}

View File

@@ -1,7 +1,7 @@
{{ $model := .model }}
{{ $date := .model.Datum.When }}
<!-- Header with year link left, nav buttons right -->
<div class="flex items-center justify-between mb-3">
<div class="flex items-center justify-between mb-3 mx-3">
<a
href="/jahrgang/{{- $date.Year -}}"
class="inline-flex items-center gap-1 text-black hover:text-slate-700 text-base font-medium">
@@ -30,11 +30,14 @@
</div>
</div>
<!-- Issue title and date -->
<div class="border-t border-slate-200 pt-3 mb-4">
<!-- Compact issue title with Inhalt header -->
<div class="border-t border-slate-200 pt-3 mb-4 mx-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<h1 class="text-lg font-semibold text-slate-800">
<div class="flex items-center gap-2">
<i class="ri-file-list-3-line text-slate-600"></i>
<span class="text-lg font-bold font-serif text-slate-800">Inhalt</span>
<span class="text-slate-400">•</span>
<h1 class="text-lg font-semibold font-serif text-slate-800">
{{ $model.Number.No }}&#8201;/&#8201;{{ $date.Year }}
</h1>
</div>

View File

@@ -48,7 +48,7 @@
{{ " " }}{{- range $groupIndex, $groupItem := $groupedItems -}}
{{- range $issueIndex, $issue := $groupItem.Item.IssueRefs -}}
{{- if or (gt $groupIndex 0) (gt $issueIndex 0) }}, {{ end -}}
{{ template "_citation" $issue }}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{ template "_citation" $issue }}</span>
{{- end -}}
{{- end -}}
{{- /* Add "Ganzer Beitrag" link if piece spans multiple issues */ -}}

View File

@@ -182,7 +182,7 @@
{{ " " }}{{- range $pieceIndex, $p := $categoryPieces -}}
{{- range $issueIndex, $issue := $p.Item.IssueRefs -}}
{{- if or (gt $pieceIndex 0) (gt $issueIndex 0) }}, {{ end -}}
{{ template "_citation" $issue }}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{ template "_citation" $issue }}</span>
{{- end -}}
{{- end -}}
{{- /* Add "Ganzer Beitrag" link if piece spans multiple issues */ -}}
@@ -304,7 +304,7 @@
{{ " " }}{{- range $pieceIndex, $p := $categoryPieces -}}
{{- range $issueIndex, $issue := $p.Item.IssueRefs -}}
{{- if or (gt $pieceIndex 0) (gt $issueIndex 0) }}, {{ end -}}
{{ template "_citation" $issue }}
<span class="text-blue-600 hover:text-blue-700 underline decoration-dotted hover:decoration-solid [&>a]:text-blue-600 [&>a:hover]:text-blue-700">{{ template "_citation" $issue }}</span>
{{- end -}}
{{- end -}}
{{- /* Add "Ganzer Beitrag" link if piece spans multiple issues */ -}}

View File

@@ -24,14 +24,14 @@
/{{ $issue.Von }}
{{- end -}}
{{- end -}}"
class="citation-link text-slate-700 no-underline hover:text-slate-900"
class="citation-link no-underline"
data-citation-url="{{ $url }}">
{{- if $issueData -}}
{{ $issueData.Datum.When.Day }}.{{ $issueData.Datum.When.Month }}.{{ $issueData.Datum.When.Year }}/{{ $issue.Nr }}
{{- else -}}
{{ $issue.When.Year }}/{{ $issue.Nr }}
{{- end -}}
{{- if $issue.Von }}, {{ if $issue.Beilage }}Beil. {{ end }}{{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) -}}
{{- if $issue.Von }}, {{ if $issue.Beilage }}Beil. {{ else }}S. {{ end }}{{ $issue.Von }}{{- if and $issue.Bis (ne $issue.Von $issue.Bis) -}}
-{{ $issue.Bis }}
{{- end -}}
{{- end -}}
@@ -68,13 +68,11 @@ function updateCitationLinks() {
if (isCurrentPage) {
// Style as current page: red text, no underline, not clickable
link.classList.remove('text-slate-700', 'hover:text-slate-900');
link.classList.add('text-red-700', 'pointer-events-none');
link.setAttribute('aria-current', 'page');
} else {
// Reset to default styling for non-current pages
link.classList.remove('text-red-700', 'pointer-events-none');
link.classList.add('text-slate-700', 'hover:text-slate-900');
link.removeAttribute('aria-current');
}
});

View File

@@ -6,8 +6,8 @@
<!-- Two-column layout for piece view -->
<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
<!-- Column 1: Table of Contents ONLY -->
<div class="lg:w-1/4 xl:w-1/4 flex-shrink-0 bg-slate-50 px-8 py-4">
<div class="lg:sticky lg:top-8 lg:overflow-y-auto">
<div class="lg:w-1/4 xl:w-1/4 flex-shrink-0 bg-slate-50 px-4 py-4">
<div class="sticky top-0 max-h-screen overflow-y-auto overscroll-contain bg-slate-50">
{{ template "_piece_inhaltsverzeichnis" . }}
</div>
</div>

View File

@@ -1,6 +1,6 @@
{{ $model := .model }}
<div class="w-full hyphens-auto">
<div class="hyphens-auto mx-3">
<div class="space-y-4">
<!-- Header with icon and type -->
<div class="flex items-center gap-2 mb-4">

View File

@@ -39,11 +39,21 @@ body::before {
/* Backdrop animation */
@keyframes backdrop-drift {
0% { transform: rotate(15deg) skew(25deg) scale(4); }
25% { transform: rotate(20deg) skew(30deg) scale(4.1); }
50% { transform: rotate(10deg) skew(20deg) scale(3.9); }
75% { transform: rotate(18deg) skew(28deg) scale(4.05); }
100% { transform: rotate(15deg) skew(25deg) scale(4); }
0% {
transform: rotate(15deg) skew(25deg) scale(4);
}
25% {
transform: rotate(20deg) skew(30deg) scale(4.1);
}
50% {
transform: rotate(10deg) skew(20deg) scale(3.9);
}
75% {
transform: rotate(18deg) skew(28deg) scale(4.05);
}
100% {
transform: rotate(15deg) skew(25deg) scale(4);
}
}
/* Page-specific backdrop variations with animations */
@@ -77,59 +87,129 @@ body.page-edition::before {
/* Page-specific keyframes */
@keyframes backdrop-drift-akteure {
0% { transform: rotate(-35deg) skew(-40deg) scale(4.2); }
25% { transform: rotate(-30deg) skew(-35deg) scale(4.0); }
50% { transform: rotate(-40deg) skew(-45deg) scale(4.4); }
75% { transform: rotate(-32deg) skew(-38deg) scale(4.1); }
100% { transform: rotate(-35deg) skew(-40deg) scale(4.2); }
0% {
transform: rotate(-35deg) skew(-40deg) scale(4.2);
}
25% {
transform: rotate(-30deg) skew(-35deg) scale(4);
}
50% {
transform: rotate(-40deg) skew(-45deg) scale(4.4);
}
75% {
transform: rotate(-32deg) skew(-38deg) scale(4.1);
}
100% {
transform: rotate(-35deg) skew(-40deg) scale(4.2);
}
}
@keyframes backdrop-drift-ausgabe {
0% { transform: rotate(40deg) skew(15deg) scale(4.5); }
25% { transform: rotate(45deg) skew(20deg) scale(4.3); }
50% { transform: rotate(35deg) skew(10deg) scale(4.7); }
75% { transform: rotate(42deg) skew(18deg) scale(4.4); }
100% { transform: rotate(40deg) skew(15deg) scale(4.5); }
0% {
transform: rotate(40deg) skew(15deg) scale(4.5);
}
25% {
transform: rotate(45deg) skew(20deg) scale(4.3);
}
50% {
transform: rotate(35deg) skew(10deg) scale(4.7);
}
75% {
transform: rotate(42deg) skew(18deg) scale(4.4);
}
100% {
transform: rotate(40deg) skew(15deg) scale(4.5);
}
}
@keyframes backdrop-drift-search {
0% { transform: rotate(0deg) skew(45deg) scale(3.8); }
25% { transform: rotate(5deg) skew(50deg) scale(3.6); }
50% { transform: rotate(-5deg) skew(40deg) scale(4.0); }
75% { transform: rotate(2deg) skew(48deg) scale(3.7); }
100% { transform: rotate(0deg) skew(45deg) scale(3.8); }
0% {
transform: rotate(0deg) skew(45deg) scale(3.8);
}
25% {
transform: rotate(5deg) skew(50deg) scale(3.6);
}
50% {
transform: rotate(-5deg) skew(40deg) scale(4);
}
75% {
transform: rotate(2deg) skew(48deg) scale(3.7);
}
100% {
transform: rotate(0deg) skew(45deg) scale(3.8);
}
}
@keyframes backdrop-drift-ort {
0% { transform: rotate(60deg) skew(-30deg) scale(4.8); }
25% { transform: rotate(65deg) skew(-25deg) scale(4.6); }
50% { transform: rotate(55deg) skew(-35deg) scale(5.0); }
75% { transform: rotate(62deg) skew(-28deg) scale(4.7); }
100% { transform: rotate(60deg) skew(-30deg) scale(4.8); }
0% {
transform: rotate(60deg) skew(-30deg) scale(4.8);
}
25% {
transform: rotate(65deg) skew(-25deg) scale(4.6);
}
50% {
transform: rotate(55deg) skew(-35deg) scale(5);
}
75% {
transform: rotate(62deg) skew(-28deg) scale(4.7);
}
100% {
transform: rotate(60deg) skew(-30deg) scale(4.8);
}
}
@keyframes backdrop-drift-kategorie {
0% { transform: rotate(-25deg) skew(50deg) scale(4.1); }
25% { transform: rotate(-20deg) skew(55deg) scale(3.9); }
50% { transform: rotate(-30deg) skew(45deg) scale(4.3); }
75% { transform: rotate(-22deg) skew(52deg) scale(4.0); }
100% { transform: rotate(-25deg) skew(50deg) scale(4.1); }
0% {
transform: rotate(-25deg) skew(50deg) scale(4.1);
}
25% {
transform: rotate(-20deg) skew(55deg) scale(3.9);
}
50% {
transform: rotate(-30deg) skew(45deg) scale(4.3);
}
75% {
transform: rotate(-22deg) skew(52deg) scale(4);
}
100% {
transform: rotate(-25deg) skew(50deg) scale(4.1);
}
}
@keyframes backdrop-drift-piece {
0% { transform: rotate(45deg) skew(-25deg) scale(4.3); }
25% { transform: rotate(50deg) skew(-20deg) scale(4.1); }
50% { transform: rotate(40deg) skew(-30deg) scale(4.5); }
75% { transform: rotate(47deg) skew(-22deg) scale(4.2); }
100% { transform: rotate(45deg) skew(-25deg) scale(4.3); }
0% {
transform: rotate(45deg) skew(-25deg) scale(4.3);
}
25% {
transform: rotate(50deg) skew(-20deg) scale(4.1);
}
50% {
transform: rotate(40deg) skew(-30deg) scale(4.5);
}
75% {
transform: rotate(47deg) skew(-22deg) scale(4.2);
}
100% {
transform: rotate(45deg) skew(-25deg) scale(4.3);
}
}
@keyframes backdrop-drift-edition {
0% { transform: rotate(-50deg) skew(35deg) scale(3.9); }
25% { transform: rotate(-45deg) skew(40deg) scale(3.7); }
50% { transform: rotate(-55deg) skew(30deg) scale(4.1); }
75% { transform: rotate(-48deg) skew(38deg) scale(3.8); }
100% { transform: rotate(-50deg) skew(35deg) scale(3.9); }
0% {
transform: rotate(-50deg) skew(35deg) scale(3.9);
}
25% {
transform: rotate(-45deg) skew(40deg) scale(3.7);
}
50% {
transform: rotate(-55deg) skew(30deg) scale(4.1);
}
75% {
transform: rotate(-48deg) skew(38deg) scale(3.8);
}
100% {
transform: rotate(-50deg) skew(35deg) scale(3.9);
}
}
/*
@@ -156,7 +236,7 @@ body.page-edition::before {
@layer components {
html {
font-size: 18px;
font-size: 17px;
}
body {