feat(ui): deadline banner with gradient blob bg, swap Lora→Aleo
- 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
+358
-320
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user