refactor(calendar): stack layout, wider grid, fixed cell height
- 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:
+35
-28
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user