admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): deadline banner with gradient blob bg, swap Lora→Aleo
Deploy / verify (push) Failing after 17s
Details
Deploy / deploy (push) Has been skipped
Details

Browse Source 
- DeadlineBannerBlock: redesign nach Tailwind-UI-Vorlage (gray-50, blurry blobs, dismiss button)
- new .gradient-blob-bg utility (radial-gradient blobs via ::before/::after)
- apply blob bg to Header
- @theme: register --font-sans (Inter) + --font-serif (Aleo)
- replace @fontsource-variable/lora with /aleo for blockquote font
- Header: simplify active nav-link styling
- QuoteBlock: formatting + drop borderClass

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-05 16:17:08 +02:00
parent 3f62473c32
commit 44197429d6
6 changed files with 2842 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -37,7 +37,7 @@
"vitest": "^2.1.9"
},
"dependencies": {
"@fontsource-variable/lora": "^5.2.8",
"@fontsource-variable/aleo": "^5.2.7",
"@fontsource-variable/rubik": "^5.2.8",
"@fontsource/inter": "^5.2.8",
"@iconify/svelte": "^5.2.1",
src/app.css
+358 -320
View File
@@ -6,7 +6,7 @@
@import "@fontsource/inter/latin-500.css";
@import "@fontsource/inter/latin-600.css";
@import "@fontsource/inter/latin-700.css";
@import "@fontsource-variable/lora";
@import "@fontsource-variable/aleo";
@import "tailwindcss";
@@ -15,327 +15,366 @@
========================================================================== */
@theme {
/* Palette: Wald (Primary) */
--color-wald-50: #f0f5f1;
--color-wald-100: #d9e8dc;
--color-wald-200: #b3d1b9;
--color-wald-300: #7fb58a;
--color-wald-400: #4a9960;
--color-wald-500: #2d7a45;
--color-wald-600: #236335;
--color-wald-700: #1a4d28;
--color-wald-800: #12361c;
--color-wald-900: #0a2011;
/* Palette: Wald (Primary) */
--color-wald-50: #f0f5f1;
--color-wald-100: #d9e8dc;
--color-wald-200: #b3d1b9;
--color-wald-300: #7fb58a;
--color-wald-400: #4a9960;
--color-wald-500: #2d7a45;
--color-wald-600: #236335;
--color-wald-700: #1a4d28;
--color-wald-800: #12361c;
--color-wald-900: #0a2011;
/* Palette: Erde (Secondary) */
--color-erde-50: #faf6f1;
--color-erde-100: #f0e6d6;
--color-erde-200: #e0ccad;
--color-erde-300: #c9a87a;
--color-erde-400: #b08a52;
--color-erde-500: #8b6d3f;
--color-erde-600: #6e5530;
--color-erde-700: #524023;
--color-erde-800: #372b18;
--color-erde-900: #1c160c;
/* Palette: Erde (Secondary) */
--color-erde-50: #faf6f1;
--color-erde-100: #f0e6d6;
--color-erde-200: #e0ccad;
--color-erde-300: #c9a87a;
--color-erde-400: #b08a52;
--color-erde-500: #8b6d3f;
--color-erde-600: #6e5530;
--color-erde-700: #524023;
--color-erde-800: #372b18;
--color-erde-900: #1c160c;
/* Palette: Himmel (Accent / Links) */
--color-himmel-50: #f2f5f7;
--color-himmel-100: #dce4ea;
--color-himmel-200: #b8c9d4;
--color-himmel-300: #8aaabb;
--color-himmel-400: #5e8ba2;
--color-himmel-500: #436e85;
--color-himmel-600: #34576a;
--color-himmel-700: #264150;
--color-himmel-800: #1a2c36;
--color-himmel-900: #0e181e;
/* Palette: Himmel (Accent / Links) */
--color-himmel-50: #f2f5f7;
--color-himmel-100: #dce4ea;
--color-himmel-200: #b8c9d4;
--color-himmel-300: #8aaabb;
--color-himmel-400: #5e8ba2;
--color-himmel-500: #436e85;
--color-himmel-600: #34576a;
--color-himmel-700: #264150;
--color-himmel-800: #1a2c36;
--color-himmel-900: #0e181e;
/* Palette: Fire (Tertiary) */
--color-fire-50: #fdf2f1;
--color-fire-100: #fbe5e3;
--color-fire-200: #f7c9c5;
--color-fire-300: #f2a8a2;
--color-fire-400: #eb8078;
--color-fire-500: #e35651;
--color-fire-600: #d93d36;
--color-fire-700: #c82e27;
--color-fire-800: #b5231e;
--color-fire-900: #981b18;
--color-fire-950: #5d0f0b;
/* Palette: Fire (Tertiary) */
--color-fire-50: #fdf2f1;
--color-fire-100: #fbe5e3;
--color-fire-200: #f7c9c5;
--color-fire-300: #f2a8a2;
--color-fire-400: #eb8078;
--color-fire-500: #e35651;
--color-fire-600: #d93d36;
--color-fire-700: #c82e27;
--color-fire-800: #b5231e;
--color-fire-900: #981b18;
--color-fire-950: #5d0f0b;
/* Palette: Stein (Neutrals) */
--color-stein-0: #ffffff;
--color-stein-50: #f7f8f7;
--color-stein-100: #eceeed;
--color-stein-200: #d5d8d6;
--color-stein-300: #b0b5b2;
--color-stein-400: #868c89;
--color-stein-500: #636966;
--color-stein-600: #4a4f4c;
--color-stein-700: #333735;
--color-stein-800: #1f2221;
--color-stein-900: #0f1110;
/* Palette: Stein (Neutrals) */
--color-stein-0: #ffffff;
--color-stein-50: #f7f8f7;
--color-stein-100: #eceeed;
--color-stein-200: #d5d8d6;
--color-stein-300: #b0b5b2;
--color-stein-400: #868c89;
--color-stein-500: #636966;
--color-stein-600: #4a4f4c;
--color-stein-700: #333735;
--color-stein-800: #1f2221;
--color-stein-900: #0f1110;
/* Semantic: Success, Warning, Error, Info */
--color-success: var(--color-wald-500);
--color-success-subtle: var(--color-wald-50);
--color-warning: #a6780a;
--color-warning-subtle: #fdf8ec;
--color-error: #b53629;
--color-error-subtle: #fdf2f1;
--color-info: var(--color-himmel-500);
--color-info-subtle: var(--color-himmel-50);
/* Semantic: Success, Warning, Error, Info */
--color-success: var(--color-wald-500);
--color-success-subtle: var(--color-wald-50);
--color-warning: #a6780a;
--color-warning-subtle: #fdf8ec;
--color-error: #b53629;
--color-error-subtle: #fdf2f1;
--color-info: var(--color-himmel-500);
--color-info-subtle: var(--color-himmel-50);
/* Button (Primary = Wald) – für @apply bg-btn-bg, text-btn-txt, bg-btn-hover-bg */
--color-btn-bg: var(--color-wald-500);
--color-btn-hover-bg: var(--color-wald-600);
--color-btn-txt: #fff;
/* Button (Primary = Wald) – für @apply bg-btn-bg, text-btn-txt, bg-btn-hover-bg */
--color-btn-bg: var(--color-wald-500);
--color-btn-hover-bg: var(--color-wald-600);
--color-btn-txt: #fff;
/* Link (Himmel) – für @apply text-link */
--color-link: var(--color-himmel-500);
/* Link (Himmel) – für @apply text-link */
--color-link: var(--color-himmel-500);
/* Fonts – Tailwind-Utilities: font-sans (Inter, default), font-serif (Aleo, Zitate) */
--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: "Aleo Variable", Aleo, Georgia, "Times New Roman", serif;
}
:root {
/* Typography – Inter (primary), Lora (Zitate) */
--font-body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-secondary: "Lora Variable", Lora, Georgia, "Times New Roman", serif;
/* Typography – Inter (primary), Aleo (Zitate) */
--font-body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-secondary: "Aleo Variable", Aleo, Georgia, "Times New Roman", serif;
/* Semantic (nur Light Theme) */
--bg-primary: #ffffff;
--bg-secondary: #f7f8f7;
--bg-tertiary: #eceeed;
--bg-elevated: #ffffff;
--text-primary: #1f2221;
--text-secondary: #636966;
--text-tertiary: #868c89;
--border-default: #d5d8d6;
--border-strong: #b0b5b2;
--accent: #2d7a45;
--accent-hover: #236335;
--link: #436e85;
/* Semantic (nur Light Theme) */
--bg-primary: #ffffff;
--bg-secondary: #f7f8f7;
--bg-tertiary: #eceeed;
--bg-elevated: #ffffff;
--text-primary: #1f2221;
--text-secondary: #636966;
--text-tertiary: #868c89;
--border-default: #d5d8d6;
--border-strong: #b0b5b2;
--accent: #2d7a45;
--accent-hover: #236335;
--link: #436e85;
/* Legacy / App-Aliase (weiterverwendet) */
--color-font: var(--text-primary);
--color-headings: var(--text-primary);
--color-font-highlight: var(--color-error);
--color-navigation: var(--color-stein-0);
--background-color: var(--bg-primary);
--color-text: var(--text-primary);
--color-link: var(--link);
--color-btn-bg: var(--accent);
--color-btn-hover-bg: var(--accent-hover);
--color-btn-txt: #fff;
/* Breakout-Bereich: Verlauf Wald-50 → Wald-100 */
--color-container-breakout: linear-gradient(
to bottom,
white,
var(--color-wald-50)
);
/* Legacy / App-Aliase (weiterverwendet) */
--color-font: var(--text-primary);
--color-headings: var(--text-primary);
--color-font-highlight: var(--color-error);
--color-navigation: var(--color-stein-0);
--background-color: var(--bg-primary);
--color-text: var(--text-primary);
--color-link: var(--link);
--color-btn-bg: var(--accent);
--color-btn-hover-bg: var(--accent-hover);
--color-btn-txt: #fff;
/* Breakout-Bereich: Verlauf Wald-50 → Wald-100 */
--color-container-breakout: linear-gradient(
to bottom,
white,
var(--color-wald-50)
);
font-family: var(--font-body);
font-size: 1.125rem; /* 18px – Body Large laut Design System */
line-height: 1.556;
color: var(--color-font);
font-family: var(--font-body);
font-size: 1.125rem; /* 18px – Body Large laut Design System */
line-height: 1.556;
color: var(--color-font);
}
html {
background: var(--background-color);
background: var(--background-color);
}
main {
background: var(--bg-primary);
background: var(--bg-primary);
}
/* ==========================================================================
Typography – Type Scale (02-typography.md)
Erlaubte Gewichte: 300, 400, 500, 600, 700. Inter primary, Lora nur Zitate.
Erlaubte Gewichte: 300, 400, 500, 600, 700. Inter primary, Aleo nur Zitate.
========================================================================== */
h1,
h2,
h3,
h4 {
color: var(--color-headings);
color: var(--color-headings);
}
/* Mobile first, dann Tablet (768px), Desktop (1024px) */
h1 {
font-size: 1.75rem;
line-height: 2.125rem;
font-weight: 700;
letter-spacing: -0.015em;
font-size: 1.75rem;
line-height: 2.125rem;
font-weight: 700;
letter-spacing: -0.015em;
}
h2 {
font-size: 1.375rem;
line-height: 1.75rem;
font-weight: 700;
letter-spacing: -0.01em;
font-size: 1.375rem;
line-height: 1.75rem;
font-weight: 700;
letter-spacing: -0.01em;
}
h3 {
font-size: 1.25rem;
line-height: 1.625rem;
font-weight: 600;
letter-spacing: -0.005em;
font-size: 1.25rem;
line-height: 1.625rem;
font-weight: 600;
letter-spacing: -0.005em;
}
h4 {
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 600;
font-size: 1.125rem;
line-height: 1.5rem;
font-weight: 600;
}
@media (min-width: 768px) {
h1 {
font-size: 2.125rem;
line-height: 2.625rem;
}
h2 {
font-size: 1.5rem;
line-height: 2rem;
}
h3 {
font-size: 1.375rem;
line-height: 1.875rem;
}
h4 {
font-size: 1.125rem;
line-height: 1.625rem;
}
h1 {
font-size: 2.125rem;
line-height: 2.625rem;
}
h2 {
font-size: 1.5rem;
line-height: 2rem;
}
h3 {
font-size: 1.375rem;
line-height: 1.875rem;
}
h4 {
font-size: 1.125rem;
line-height: 1.625rem;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 2.5rem;
line-height: 3rem;
}
h2 {
font-size: 1.75rem;
line-height: 2.25rem;
}
h3 {
font-size: 1.5rem;
line-height: 2rem;
}
h1 {
font-size: 2.5rem;
line-height: 3rem;
}
h2 {
font-size: 1.75rem;
line-height: 2.25rem;
}
h3 {
font-size: 1.5rem;
line-height: 2rem;
}
}
/* Page-Titel (wie www.windwiderstand.de) */
.pageTitle h1 {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.pageTitle h2 {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
}
.pageTitle h1,
.pageTitle h2 {
text-wrap: balance;
word-break: break-word;
overflow-wrap: break-word;
text-wrap: balance;
word-break: break-word;
overflow-wrap: break-word;
}
.pageTitle strong {
font-weight: 700;
font-weight: 700;
}
@media (min-width: 768px) {
.pageTitle h1 {
font-size: 2.25rem;
line-height: 2.5rem;
}
.pageTitle h2 {
font-size: 1.5rem;
line-height: 2rem;
padding-left: 0.25rem;
}
.pageTitle h1 {
font-size: 2.25rem;
line-height: 2.5rem;
}
.pageTitle h2 {
font-size: 1.5rem;
line-height: 2rem;
padding-left: 0.25rem;
}
}
@media (min-width: 1024px) {
.pageTitle h1 {
font-size: 3.75rem;
line-height: 1.14;
font-weight: 700;
letter-spacing: -0.02em;
}
.pageTitle h2 {
font-size: 1.875rem;
line-height: 2.25rem;
padding-left: 0.25rem;
}
.pageTitle h1 {
font-size: 3.75rem;
line-height: 1.14;
font-weight: 700;
letter-spacing: -0.02em;
}
.pageTitle h2 {
font-size: 1.875rem;
line-height: 2.25rem;
padding-left: 0.25rem;
}
}
/* Content-Links: Himmel (Design System – Links) */
main a:not(.no-underline) {
color: var(--color-link);
text-decoration: underline;
color: var(--color-link);
text-decoration: underline;
}
main a:not(.no-underline):hover {
color: var(--color-himmel-600);
color: var(--color-himmel-600);
}
/* Lange URLs umbrechen, damit sie nicht über den Bildschirmrand ragen */
main a,
.markdown a {
overflow-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;
word-break: break-all;
}
main strong {
font-weight: 600;
font-weight: 600;
}
main ul:not(.not-prose) {
margin-left: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-bottom: 1em;
}
main ul:not(.not-prose) li {
list-style: disc;
list-style: disc;
}
main ol:not(.not-prose) {
margin-left: 1.1em;
margin-bottom: 1em;
margin-left: 1.1em;
margin-bottom: 1em;
}
main ol:not(.not-prose) li {
list-style-type: decimal;
list-style-type: decimal;
}
/* Buttons – Wald (Primary) */
.btn-primary {
@apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs shadow-sm bg-btn-bg text-btn-txt;
@apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs shadow-sm bg-btn-bg text-btn-txt;
}
.btn-primary:hover {
@apply bg-btn-hover-bg;
@apply bg-btn-hover-bg;
}
/* Buttons – Stein outline (Secondary) */
.btn-secondary {
@apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs border border-stein-300 bg-white text-stein-700 shadow-sm;
@apply inline-block no-underline transition-colors duration-200 font-medium px-4 py-2 rounded-xs border border-stein-300 bg-white text-stein-700 shadow-sm;
}
.btn-secondary:hover {
@apply bg-stein-100 border-stein-400;
@apply bg-stein-100 border-stein-400;
}
/* Dekorativer Hintergrund mit zwei verschwommenen Verlaufs-Blobs (Wald → Erde).
Nutzung: Container mit relativer Positionierung; Blobs sitzen in ::before/::after.
Inhalt sollte z-Index >= 0 haben (Standard); Blobs liegen unter Stacking-Kontext. */
.gradient-blob-bg {
@apply relative isolate overflow-hidden;
}
.gradient-blob-bg::before,
.gradient-blob-bg::after {
content: "";
position: absolute;
top: 50%;
z-index: -10;
width: 36rem;
aspect-ratio: 577 / 310;
transform: translate3d(0, -50%, 0);
background: radial-gradient(
ellipse at center,
var(--color-himmel-400) 0%,
var(--color-himmel-200) 45%,
transparent 70%
);
opacity: 0.35;
filter: blur(40px);
pointer-events: none;
}
.gradient-blob-bg::before {
left: max(-7rem, calc(50% - 52rem));
}
.gradient-blob-bg::after {
left: max(45rem, calc(50% + 8rem));
}
/* Globaler Focus-Ring – wald-Akzent für Tastatur-Nutzer (a11y + Polish) */
*:focus-visible {
outline: 2px solid var(--color-wald-500);
outline-offset: 2px;
border-radius: 2px;
outline: 2px solid var(--color-wald-500);
outline-offset: 2px;
border-radius: 2px;
}
/* Lead-Paragraph: erstes <p> in einem Top-Level MarkdownBlock innerhalb
@@ -343,53 +382,53 @@ main ol:not(.not-prose) li {
damit weder Cards (.markdown in Callouts) noch Footer-MarkdownBlocks
mit Copyright-Text getroffen werden. */
article [data-block-type="markdown"] .markdown > p:first-child {
font-size: 1.25rem;
line-height: 1.55;
font-weight: 300;
color: var(--text-secondary);
margin-bottom: 1.25em;
font-size: 1.25rem;
line-height: 1.55;
font-weight: 300;
color: var(--text-secondary);
margin-bottom: 1.25em;
}
@media (min-width: 768px) {
article [data-block-type="markdown"] .markdown > p:first-child {
font-size: 1.375rem;
}
article [data-block-type="markdown"] .markdown > p:first-child {
font-size: 1.375rem;
}
}
/* Content-Row-Trenner: subtiler wald-Verlauf zwischen content-rows (Forest-Identität) */
.content-row + .content-row {
position: relative;
margin-top: 2rem;
position: relative;
margin-top: 2rem;
}
.content-row + .content-row::before {
content: "";
display: block;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--color-wald-200),
transparent
);
margin: 0 auto 2rem;
max-width: 50%;
content: "";
display: block;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--color-wald-200),
transparent
);
margin: 0 auto 2rem;
max-width: 50%;
}
/* Content-Blöcke */
.content p {
@apply mb-4;
@apply mb-4;
}
.content h1,
.content h2,
.content h3,
.content h4 {
@apply mb-2;
@apply mb-2;
}
/* Markdown: Abstände, Listen, Bilder, Tabellen (Stein-Palette) */
.markdown {
@apply min-w-0 overflow-x-auto;
@apply min-w-0 overflow-x-auto;
}
.markdown h1,
@@ -397,164 +436,163 @@ article [data-block-type="markdown"] .markdown > p:first-child {
.markdown h3,
.markdown h4,
.markdown hr {
@apply mt-4 mb-3;
@apply mt-4 mb-3;
}
.markdown hr {
@apply border-stein-200 border-dotted mb-4;
@apply border-stein-200 border-dotted mb-4;
}
.markdown li,
.markdown li p {
@apply mt-0 mb-0;
@apply mt-0 mb-0;
}
.markdown p {
@apply mb-4;
@apply mb-4;
}
.markdown ul,
.markdown ol {
@apply mt-0 mb-4;
@apply mt-0 mb-4;
}
.markdown li ul,
.markdown li ol {
@apply mb-0;
@apply mb-0;
}
/* Markdown-Bilder: /cms-images-Transform, max-height begrenzt Höhe; Link öffnet Bild in neuem Tab */
.markdown img {
@apply max-w-full w-full my-2 border border-stein-200 rounded-xs bg-stein-200 shadow-sm inline-block;
max-height: 30vh;
@apply max-w-full w-full my-2 border border-stein-200 rounded-xs bg-stein-200 shadow-sm inline-block;
max-height: 30vh;
}
.markdown .markdown-image-link {
@apply inline-block;
@apply inline-block;
}
.markdown table {
@apply w-full min-w-max border-collapse text-left text-sm mb-4;
@apply w-full min-w-max border-collapse text-left text-sm mb-4;
}
.markdown thead {
@apply bg-stein-100;
@apply bg-stein-100;
}
.markdown th {
@apply px-3 py-2 font-medium border border-stein-200;
@apply px-3 py-2 font-medium border border-stein-200;
}
.markdown td {
@apply px-3 py-2 border border-stein-200;
@apply px-3 py-2 border border-stein-200;
}
.markdown tbody tr:nth-child(even) {
@apply bg-stein-50;
@apply bg-stein-50;
}
.markdown tbody tr:hover {
@apply bg-stein-100;
@apply bg-stein-100;
}
.markdown table a {
@apply text-link underline underline-offset-2 break-all;
@apply text-link underline underline-offset-2 break-all;
}
.markdown table a:hover {
@apply text-himmel-600;
@apply text-himmel-600;
}
/* Code: Inline und Block (pre/code) – lesbare Größe, Stein-Palette */
main code,
.content code,
.markdown code {
@apply font-mono bg-stein-100 text-stein-800 border border-stein-200;
@apply text-sm px-1.5 py-0.5;
@apply font-mono bg-stein-100 text-stein-800 border border-stein-200;
@apply text-sm px-1.5 py-0.5;
}
main pre,
.content pre,
.markdown pre {
@apply mt-3 mb-4 overflow-x-auto rounded-xs border border-stein-200 bg-stein-100 px-4 py-3 text-stein-800 leading-normal;
@apply mt-3 mb-4 overflow-x-auto rounded-xs border border-stein-200 bg-stein-100 px-4 py-3 text-stein-800 leading-normal;
}
main pre code,
.content pre code,
.markdown pre code {
@apply border-0 bg-transparent p-0 text-inherit;
@apply border-0 bg-transparent p-0 text-inherit;
}
/* Container */
.container-custom {
@apply w-full mx-auto px-4 md:px-6;
@apply w-full mx-auto px-4 md:px-6;
}
@media (min-width: 768px) {
.container-custom {
max-width: 768px;
}
.container-custom {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container-custom {
max-width: 1024px;
}
.container-custom {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container-custom {
max-width: 1280px;
}
.container-custom {
max-width: 1280px;
}
}
/* Zitate: Lora (Design System – nur für Zitate) */
/* Zitate: Aleo (Design System – nur für Zitate) */
blockquote[data-block-type="quote"],
blockquote[data-block-type="quote"] p,
blockquote[data-block-type="quote"] cite {
font-family: var(--font-secondary);
font-family: var(--font-secondary);
}
/* Footer */
footer a,
.content-footer a {
color: var(--color-link);
color: var(--color-link);
}
footer a:hover,
.content-footer a:hover {
color: var(--color-himmel-600);
color: var(--color-himmel-600);
}
.container-breakout {
margin-left: calc(50% - 50vw + 0.01rem);
margin-right: calc(50% - 50vw + 0.01rem);
background: var(--color-container-breakout);
margin-left: calc(50% - 50vw + 0.01rem);
margin-right: calc(50% - 50vw + 0.01rem);
background: var(--color-container-breakout);
}
/* Kalender: Container Query – links Kalender, rechts Eventblock ab ~500px Containerbreite */
.calendar-block {
container-type: inline-size;
container-name: calendar;
container-type: inline-size;
container-name: calendar;
}
@container calendar (min-width: 600px) {
.calendar-block .calendar-grid-wrapper {
grid-template-columns: auto 1fr;
}
.calendar-block .calendar-column {
min-width: 300px;
max-width: 450px;
}
.calendar-block .calendar-events-wrapper {
position: relative;
}
.calendar-block .calendar-events-panel {
position: absolute;
inset: 0;
border-top: none;
border-left: 1px solid var(--color-stein-200);
}
.calendar-block .calendar-grid-wrapper {
grid-template-columns: auto 1fr;
}
.calendar-block .calendar-column {
min-width: 300px;
max-width: 450px;
}
.calendar-block .calendar-events-wrapper {
position: relative;
}
.calendar-block .calendar-events-panel {
position: absolute;
inset: 0;
border-top: none;
border-left: 1px solid var(--color-stein-200);
}
}
/* ── Print rules ────────────────────────────────────────────────────────────
@@ -563,35 +601,35 @@ footer a:hover,
set page margins, force black-on-white, expand links, and keep images
inside the page break. */
@media print {
@page {
margin: 1.5cm;
}
html,
body {
background: white \!important;
color: black \!important;
font-size: 11pt;
}
/* Show the URL after each anchor inside the article so printed pages stay
@page {
margin: 1.5cm;
}
html,
body {
background: white \!important;
color: black \!important;
font-size: 11pt;
}
/* Show the URL after each anchor inside the article so printed pages stay
useful when the screen-only links are gone. */
article a[href]:not([href^="#"])::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
word-break: break-all;
}
/* Don't break inside images, keep figures together with their captions. */
img,
figure {
break-inside: avoid;
max-width: 100% \!important;
height: auto \!important;
}
/* Keep headings with the next paragraph. */
h1,
h2,
h3,
h4 {
break-after: avoid;
}
article a[href]:not([href^="#"])::after {
content: " (" attr(href) ")";
font-size: 0.85em;
color: #555;
word-break: break-all;
}
/* Don't break inside images, keep figures together with their captions. */
img,
figure {
break-inside: avoid;
max-width: 100% \!important;
height: auto \!important;
}
/* Keep headings with the next paragraph. */
h1,
h2,
h3,
h4 {
break-after: avoid;
}
}
src/lib/components/Header.svelte
+7 -6
View File
@@ -100,7 +100,7 @@
<header
id="horizontal-navigation"
class="sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-wald-50"
class="gradient-blob-bg sticky top-0 z-20 border-b border-white/30 shadow-2xl backdrop-blur-md bg-wald-50"
>
<div class="flex items-center justify-between container-custom py-2">
<a
@@ -129,9 +129,7 @@
{@const active = isActiveLink(link.href, $page.url.pathname)}
<a
href={link.href}
class="text-[.7rem] py-1 transition-colors hover:text-wald-700 {active
? 'font-bold text-wald-700 border-b-2 border-wald-600'
: 'border-b-2 border-transparent'}"
class="text-[.7rem] py-1 {active ? 'font-bold ' : ''}"
aria-current={active ? "page" : undefined}
>
{link.label}
@@ -242,13 +240,16 @@
aria-label={t(T.header_nav_aria)}
>
{#each links as link}
{@const active = isActiveLink(link.href, $page.url.pathname)}
{@const active = isActiveLink(
link.href,
$page.url.pathname,
)}
<a
href={link.href}
class="block py-4 px-3 rounded-xs transition-colors text-base {active
? 'font-bold text-wald-300 bg-wald-700/20 border-l-4 border-wald-400'
: 'text-stein-100 hover:text-stein-0 hover:bg-stein-0/10 border-l-4 border-transparent'}"
aria-current={active ? 'page' : undefined}
aria-current={active ? "page" : undefined}
onclick={closeMenu}
>
{link.label}
src/lib/components/blocks/DeadlineBannerBlock.svelte
+133 -135
View File
@@ -1,149 +1,147 @@
<script lang="ts">
import { getBlockLayoutClasses } from "$lib/block-layout";
import type { DeadlineBannerBlockData } from "$lib/block-types";
import Icon from "@iconify/svelte";
import "$lib/iconify-offline";
import { getBlockLayoutClasses } from "$lib/block-layout";
import type { DeadlineBannerBlockData } from "$lib/block-types";
import Icon from "@iconify/svelte";
import "$lib/iconify-offline";
let { block }: { block: DeadlineBannerBlockData } = $props();
let { block }: { block: DeadlineBannerBlockData } = $props();
const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
const variant = $derived(block.variant ?? "accent");
const showCountdown = $derived(block.showCountdown !== false);
const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
const showCountdown = $derived(block.showCountdown !== false);
type ResolvedItem = {
title?: string;
terminZeit?: string;
description?: string;
link?: DeadlineBannerBlockData["link"];
};
let dismissed = $state(false);
const autoItem = $derived.by((): ResolvedItem | null => {
if (block.mode !== "auto") return null;
const now = Date.now();
const items = (block.items ?? [])
.filter(
(x): x is ResolvedItem =>
typeof x === "object" && x !== null && "terminZeit" in x,
)
.map((x): { x: ResolvedItem; ts: number } => ({ x, ts: Date.parse(x.terminZeit ?? "") }))
.filter(({ ts }) => !isNaN(ts) && ts >= now)
.sort((a, b) => a.ts - b.ts);
return items[0]?.x ?? null;
});
type ResolvedItem = {
title?: string;
terminZeit?: string;
description?: string;
link?: DeadlineBannerBlockData["link"];
};
const text = $derived(
block.mode === "auto" ? autoItem?.title ?? "" : block.text ?? "",
);
const dateIso = $derived(
block.mode === "auto" ? autoItem?.terminZeit ?? "" : block.date ?? "",
);
const linkValue = $derived(
block.mode === "auto" ? autoItem?.link : block.link,
);
const dateObj = $derived.by(() => {
if (!dateIso) return null;
const d = new Date(dateIso);
return isNaN(d.getTime()) ? null : d;
});
const dateStr = $derived.by(() => {
if (!dateObj) return "";
return dateObj.toLocaleDateString("de-DE", {
day: "numeric",
month: "long",
const autoItem = $derived.by((): ResolvedItem | null => {
if (block.mode !== "auto") return null;
const now = Date.now();
const items = (block.items ?? [])
.filter(
(x): x is ResolvedItem =>
typeof x === "object" && x !== null && "terminZeit" in x,
)
.map((x): { x: ResolvedItem; ts: number } => ({
x,
ts: Date.parse(x.terminZeit ?? ""),
}))
.filter(({ ts }) => !isNaN(ts) && ts >= now)
.sort((a, b) => a.ts - b.ts);
return items[0]?.x ?? null;
});
});
const daysLeft = $derived.by(() => {
if (!dateObj) return null;
const ms = dateObj.getTime() - Date.now();
if (ms < 0) return null;
return Math.ceil(ms / (1000 * 60 * 60 * 24));
});
const text = $derived(
block.mode === "auto" ? (autoItem?.title ?? "") : (block.text ?? ""),
);
const dateIso = $derived(
block.mode === "auto"
? (autoItem?.terminZeit ?? "")
: (block.date ?? ""),
);
const linkValue = $derived(
block.mode === "auto" ? autoItem?.link : block.link,
);
const countdownStr = $derived.by(() => {
if (!showCountdown || daysLeft == null) return "";
if (daysLeft === 0) return "Heute";
if (daysLeft === 1) return "Morgen";
return `Noch ${daysLeft} Tage`;
});
const dateObj = $derived.by(() => {
if (!dateIso) return null;
const d = new Date(dateIso);
return isNaN(d.getTime()) ? null : d;
});
function getHref(link: DeadlineBannerBlockData["link"]): string {
if (typeof link === "string" && link) return link;
if (link && typeof link === "object" && link.url) return link.url;
return "";
}
const href = $derived(getHref(linkValue));
const newTab = $derived(
linkValue && typeof linkValue === "object" ? !!linkValue.newTab : false,
);
const dateStr = $derived.by(() => {
if (!dateObj) return "";
return dateObj.toLocaleDateString("de-DE", {
day: "numeric",
month: "long",
});
});
const variantClasses = $derived(
variant === "urgent"
? "bg-erde-100 text-erde-900"
: variant === "info"
? "bg-himmel-100 text-himmel-900"
: "bg-wald-500 text-wald-50",
);
const iconName = $derived(
variant === "urgent" ? "mdi:alert-circle" : "mdi:calendar-clock",
);
const hasContent = $derived(!!(text || dateStr || countdownStr));
const daysLeft = $derived.by(() => {
if (!dateObj) return null;
const ms = dateObj.getTime() - Date.now();
if (ms < 0) return null;
return Math.ceil(ms / (1000 * 60 * 60 * 24));
});
const countdownStr = $derived.by(() => {
if (!showCountdown || daysLeft == null) return "";
if (daysLeft === 0) return "Heute";
if (daysLeft === 1) return "Morgen";
return `Noch ${daysLeft} Tage`;
});
function getHref(link: DeadlineBannerBlockData["link"]): string {
if (typeof link === "string" && link) return link;
if (link && typeof link === "object" && link.url) return link.url;
return "";
}
const href = $derived(getHref(linkValue));
const newTab = $derived(
linkValue && typeof linkValue === "object" ? !!linkValue.newTab : false,
);
const ctaLabel = $derived(
linkValue && typeof linkValue === "object" && linkValue.linkName
? linkValue.linkName
: "Mehr erfahren",
);
const sentence = $derived.by(() => {
const parts: string[] = [];
if (text) parts.push(text);
if (dateStr) parts.push(`am ${dateStr}`);
return parts.join(" ");
});
const hasContent = $derived(!!(sentence || countdownStr));
</script>
{#if hasContent}
<div
class="deadline-banner {layoutClasses}"
data-block-type="deadline_banner"
data-block-slug={block._slug}
>
{#snippet inner()}
<div class="container-custom flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-1 px-4 py-2 text-xs sm:text-sm">
{#if dateStr}
<span class="inline-flex items-center rounded-xs bg-white/50 text-wald-900 px-2 py-0.5 text-sm sm:text-base font-bold whitespace-nowrap shrink-0">
<span class="inline-flex items-center gap-1.5">
<Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
{dateStr}
</span>
{#if countdownStr}
<span
class="ml-0 inline-flex min-w-0 max-w-0 scale-[0.96] items-center overflow-hidden whitespace-nowrap rounded-xs border border-transparent py-0.5 text-[0.6rem] font-semibold uppercase tracking-wide opacity-0 transition-[max-width,margin,opacity,transform,padding,border-color] duration-200 ease-out group-hover:ml-2 group-hover:max-w-48 group-hover:border-wald-900 group-hover:px-2 group-hover:opacity-100 group-hover:scale-100 group-focus-within:ml-2 group-focus-within:max-w-48 group-focus-within:border-wald-900 group-focus-within:px-2 group-focus-within:opacity-100 group-focus-within:scale-100"
>
{countdownStr}
</span>
{/if}
</span>
{:else}
<span class="inline-flex items-center gap-0 shrink-0">
<Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
{#if countdownStr}
<span
class="ml-0 inline-flex min-w-0 max-w-0 shrink-0 scale-[0.96] items-center overflow-hidden whitespace-nowrap rounded-full px-0 py-0.5 text-xs font-semibold uppercase tracking-wide opacity-0 transition-[max-width,margin,opacity,transform,padding] duration-200 ease-out group-hover:ml-2 group-hover:max-w-48 group-hover:px-2 group-hover:opacity-100 group-hover:scale-100 group-focus-within:ml-2 group-focus-within:max-w-48 group-focus-within:px-2 group-focus-within:opacity-100 group-focus-within:scale-100"
>
{countdownStr}
</span>
{/if}
</span>
{/if}
{#if text}
<span class="min-w-0 wrap-break-word line-clamp-2 sm:line-clamp-1 font-semibold text-shadow-sm">{text}</span>
{/if}
</div>
{/snippet}
{#if href}
<a
href={href}
target={newTab ? "_blank" : undefined}
rel={newTab ? "noopener noreferrer" : undefined}
class="group block no-underline text-inherit hover:no-underline transition-all hover:brightness-95 {variantClasses}"
>
{@render inner()}
</a>
{:else}
<div class="group {variantClasses}">
{@render inner()}
</div>
{/if}
</div>
{#if hasContent && !dismissed}
<div
class="deadline-banner {layoutClasses}"
data-block-type="deadline_banner"
data-block-slug={block._slug}
>
<div
class="gradient-blob-bg flex items-center gap-x-6 bg-gray-50 px-6 py-2.5 sm:px-3.5"
>
<span class="hidden flex-1 sm:block" aria-hidden="true"></span>
<p class="my-0! text-sm/6 text-gray-900">
{sentence}{#if countdownStr}{sentence ? " · " : ""}<span
class="font-semibold">{countdownStr}</span
>{/if}{#if href}
{" "}<a
{href}
target={newTab ? "_blank" : undefined}
rel={newTab ? "noopener noreferrer" : undefined}
class="font-semibold whitespace-nowrap text-gray-900 hover:text-gray-700"
>
{ctaLabel}&nbsp;<Icon
icon="mdi:arrow-right"
class="inline-block size-4 align-[-0.15em]"
aria-hidden="true"
/>
</a>
{/if}
</p>
<div class="flex flex-1 justify-end">
<button
type="button"
onclick={() => (dismissed = true)}
class="-m-3 p-3 focus-visible:-outline-offset-4"
>
<span class="sr-only">Schließen</span>
<Icon
icon="mdi:close"
class="size-5 text-gray-900"
aria-hidden="true"
/>
</button>
</div>
</div>
</div>
{/if}
src/lib/components/blocks/QuoteBlock.svelte
+36 -23
View File
@@ -1,34 +1,47 @@
<script lang="ts">
import { getBlockLayoutClasses } from "$lib/block-layout";
import type { QuoteBlockData } from "$lib/block-types";
import { getBlockLayoutClasses } from "$lib/block-layout";
import type { QuoteBlockData } from "$lib/block-types";
let {
block,
bare = false,
extraClass = "",
}: { block: QuoteBlockData; bare?: boolean; extraClass?: string } = $props();
let {
block,
bare = false,
extraClass = "",
}: {
block: QuoteBlockData;
bare?: boolean;
extraClass?: string;
} = $props();
const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
const isCenter = $derived(block.variant === "center");
const alignClass = $derived(
isCenter ? "text-center" : block.variant === "right" ? "text-right" : "text-left",
);
const borderClass = $derived(isCenter ? "" : "border-l-4 border-wald-700 pl-4");
const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
const isCenter = $derived(block.variant === "center");
const alignClass = $derived(
isCenter
? "text-center"
: block.variant === "right"
? "text-right"
: "text-left",
);
</script>
{#snippet quoteMarkup()}
<blockquote class="{borderClass} {alignClass} {extraClass}">
<p class="text-lg text-stein-700 mb-2! ">"{block.quote ?? ""}"</p>
{#if block.author}
<cite class="mt-1 block not-italic text-xs text-stein-400">{block.author}</cite>
{/if}
</blockquote>
<blockquote class="{alignClass} {extraClass}">
<p class="text-lg mb-2! font-serif">
{block.quote ?? ""}
</p>
{#if block.author}
<cite class="mt-1 block not-italic text-xs">{block.author}</cite>
{/if}
</blockquote>
{/snippet}
{#if bare}
{@render quoteMarkup()}
{:else}
<div class={layoutClasses} data-block-type="quote" data-block-slug={block._slug}>
{@render quoteMarkup()}
</div>
{:else}
<div
class={layoutClasses}
data-block-type="quote"
data-block-slug={block._slug}
>
{@render quoteMarkup()}
</div>
{/if}
yarn.lock
+2307
View File
File diff suppressed because it is too large Load Diff