Add post and event cards, shared calendar sheet and per-event ICS; rework past events and next-event card

2026-10-01 15:32:01 +02:00
1 parent d328adac5c
commit b2dc033de1
@@ -0,0 +1,87 @@
+/* The event card: a white surface on the tinted page, sheet left, text right. The
+   card fills its list cell, so the cards of a row are equally tall. */
+.event-card {
+    box-sizing: border-box;
+    display: flex;
+    gap: var(--space-3);
+    align-items: flex-start;
+    height: 100%;
+    padding: var(--space-3) var(--space-4);
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    background: var(--color-bg);
+    box-shadow: var(--shadow);
+    color: var(--color-text);
+}
+
+/* Only the linked card reacts to hover: a card that leads nowhere must not look
+   clickable. Hover = stronger shadow and a blue edge, nothing moves. */
+.event-card-link {
+    text-decoration: none;
+    transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+.event-card-link:hover {
+    border-color: var(--color-brand);
+    box-shadow: var(--shadow-hover);
+    color: var(--color-text);
+}
+
+.event-card-link:focus-visible {
+    outline: 3px solid var(--color-focus);
+    outline-offset: 2px;
+}
+
+.event-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;   /* lets a long title wrap instead of widening the card */
+}
+
+.event-title {
+    color: var(--color-brand);
+    font-size: 1.15rem;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+/* Time and place: icon and text on one quiet line each. The icon belongs to Icon's
+   own scope, so it is reached through ::deep. */
+.event-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    color: var(--color-text-soft);
+    font-size: 0.9rem;
+}
+
+.event-meta ::deep .icon {
+    color: var(--color-accent-dark);
+}
+
+.event-note {
+    margin-top: var(--space-1);
+    font-size: 0.95rem;
+}
+
+/* In the linked card (home embed) the note is only a teaser: cut after two lines,
+   so a long note does not stretch the card next to short ones. The full note is
+   on the events page. */
+.event-card-link .event-note {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+}
+
+.event-ics {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    align-self: flex-start;
+    margin-top: var(--space-2);
+    font-size: 0.9rem;
+    font-weight: 600;
+}