refactor(calendar): stack layout, wider grid, fixed cell height
Deploy / verify (push) Successful in 53s
Deploy / deploy (push) Successful in 57s

- Calendar widget stays stacked (calendar above events list)
- Grid widens to max-w-2xl with fixed h-10 cells (no aspect-square height growth)
- Gap between cells: 0.5 → 1.5
- Button system extracted to shared btn-* utility classes in app.css
- Replaced Google Calendar link + Google Maps with OSM
- Removed google icon from iconify subset

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-08 09:56:40 +02:00
parent b491e3767a
commit 8db68e073c
5 changed files with 162 additions and 188 deletions
+35 -28
View File
@@ -279,12 +279,12 @@ h4 {
}
/* Content-Links: Himmel (Design System Links) */
main a:not(.no-underline) {
main a:not(.no-underline):not([class*="btn"]) {
color: var(--color-link);
text-decoration: underline;
}
main a:not(.no-underline):hover {
main a:not(.no-underline):not([class*="btn"]):hover {
color: var(--color-himmel-600);
}
@@ -317,9 +317,17 @@ main ol:not(.not-prose) li {
list-style-type: decimal;
}
/* Buttons gemeinsame Basis */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-outline {
@apply inline-flex items-center gap-1 no-underline whitespace-nowrap transition-colors duration-200 font-medium px-4 py-2 rounded-xs;
}
/* 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 shadow-sm bg-btn-bg text-btn-txt;
}
.btn-primary:hover {
@@ -328,13 +336,36 @@ main ol:not(.not-prose) li {
/* 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 border border-stein-300 bg-white text-stein-700 shadow-sm;
}
.btn-secondary:hover {
@apply bg-stein-100 border-stein-400;
}
/* Buttons Himmel (Tertiary) */
.btn-tertiary {
@apply shadow-sm bg-himmel-700 text-white;
}
.btn-tertiary:hover {
@apply bg-himmel-800;
}
/* Buttons Stein-Border klein (Outline) */
.btn-outline {
@apply border border-stein-300 text-stein-700;
}
.btn-outline:hover {
@apply bg-stein-100;
}
/* Größen-Modifier — nach den btn-* definiert damit override greift */
.btn-sm {
@apply px-2 py-1 text-xs gap-1;
}
/* 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. */
@@ -571,30 +602,6 @@ footer a:hover,
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 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);
}
}
/* ── Print rules ────────────────────────────────────────────────────────────
Goal: print only the article. `print:hidden` on chrome (header/footer/
banner/breadcrumbs/comments) handles structural removal. The rules below