diff --git a/package.json b/package.json index 88e49b7..8ef60d9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app.css b/src/app.css index 388131b..c25ec29 100644 --- a/src/app.css +++ b/src/app.css @@ -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
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;
+ }
}
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index d8c4afe..0b366ca 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -100,7 +100,7 @@
"{block.quote ?? ""}"
+ {block.quote ?? ""}
+
-
+
+
{/snippet}
{#if bare}
- {@render quoteMarkup()}
-{:else}
-