Tom/Elternbeirat
1
0 Fork 0
Code Issues 23 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tleininger committed 2026-10-01 15:32:01 +02:00
1 parent d328adac5c
commit b2dc033de1
33 files changed
+1150 -206
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Elternbeirat.Web/wwwroot/app.css
+35 -84
View File
@@ -54,6 +54,11 @@
not --color-accent, so white text stays readable across the whole sweep. */
--gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #3a7a3e 100%);
/* The month band of the calendar sheet (CalendarSheet): the deep green of the
gradient's end, because it carries small white text -- on --color-accent that
would fall below AA. Same 5.2:1 as in the gradient. */
--color-calendar-band: #3a7a3e;
/* Buttons in editor content (a lone mail link, links in an "aufruf" box): a
filled blue with white text. Own tokens, not --color-brand, because in dark
mode --color-brand turns light for link text, and white on that light blue
@@ -165,6 +170,7 @@
yellow would glare on the dark page */
--gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #2f6b33 100%);
--color-calendar-band: #2f6b33; /* the gradient's dark-mode green, 6.4:1 with white */
--color-button: #266f9c; /* the header blue: deep enough for white
text, calm on the dark page */
@@ -289,6 +295,22 @@ h1:focus {
outline: none;
}
/* Text for screen readers only: off screen visually, still read aloud. For places
where the visible form is decoration (the calendar sheet) and the spoken form
must carry the full information. Not display:none -- that hides it from screen
readers too. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Icons (Shared/Icon.razor) sit inline next to text: nudged down to line up with the
letters instead of the baseline, and never squeezed when they share a flex row
with a long label. */
@@ -400,12 +422,12 @@ h1:focus {
}
}
/* --- Shared card styles for content lists --------------------------------------
Posts, events and FAQs appear both on their own page (PostList/EventList/
FaqList) AND embedded on the home page (the *Embed components), with the same
class names. These rules live here (global) so both places share one look
instead of duplicating the CSS per component. The card look: a white surface
lifted off the tinted page background with a soft shadow and a gentle hover. */
/* --- Lists of post and event cards ------------------------------------------------
Posts and events appear both on their own page (PostList/EventList) AND embedded
on the home page (the *Embed components). The cards themselves are components
(PostCard, EventCard) with their own scoped styles; only the list around them is
shared here: no bullets, one column with even gaps. A page may widen the grid
(the posts page goes to two columns). */
.post-list,
.event-list {
@@ -416,29 +438,6 @@ h1:focus {
gap: var(--space-3);
}
.post-list li,
.event-list li {
background: var(--color-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: box-shadow var(--transition);
}
.post-list li:hover,
.event-list li:hover {
box-shadow: var(--shadow-hover);
}
/* The whole card is one link. The <a> fills the card and carries the padding (so
the entire surface is clickable, not just the text), and resets link colour and
underline so the content inside -- title, date, location -- keeps its own look. */
.card-link {
display: block;
padding: var(--space-3) var(--space-4);
color: inherit;
text-decoration: none;
}
/* FAQ topics: each is a collapsible card. Its summary is the topic heading; open it
to reveal the optional intro and the questions (themselves collapsible .faq-item
cards). The topic marker is a rotating triangle, distinct from the +/- on the
@@ -456,7 +455,10 @@ h1:focus {
box-shadow: var(--shadow-hover);
}
.faq-topic > summary {
/* A <details> with class "disclosure": the browser's own marker is replaced by a
triangle that turns down when open. Shared by the FAQ topics and the past events,
so "click to open" looks the same everywhere. */
.disclosure > summary {
cursor: pointer;
font-size: 1.15rem;
font-weight: 600;
@@ -467,17 +469,17 @@ h1:focus {
gap: var(--space-2);
}
.faq-topic > summary::-webkit-details-marker {
.disclosure > summary::-webkit-details-marker {
display: none;
}
.faq-topic > summary::before {
.disclosure > summary::before {
content: "▸";
color: var(--color-accent-dark);
font-size: 0.9rem;
}
.faq-topic[open] > summary::before {
.disclosure[open] > summary::before {
content: "▾";
}
@@ -491,57 +493,6 @@ h1:focus {
color: var(--color-text-soft);
}
/* Post and event cards are built the same way, so they read as one style on the
home page where both appear: the title leads in the brand colour (the whole card
is the link, so the title itself is plain text), the date sits quietly beneath. */
.post-title,
.event-title {
display: block;
font-size: 1.15rem;
font-weight: 600;
color: var(--color-brand);
}
/* The date's small, softened look comes from PostDate.razor.css / EventDate; here
only the shared spacing: nudge it down from the title above. */
.post-list time,
.event-list time {
margin-top: var(--space-1);
}
/* The location sits on its own quiet line beneath the date. */
.event-location {
display: block;
margin-top: var(--space-1);
color: var(--color-text-soft);
}
.event-note {
margin: var(--space-2) 0 0;
color: var(--color-text);
}
/* Past events (only on the full events page): same cards, quieter and flat. */
.event-list-past li {
box-shadow: none;
border: 1px solid var(--color-border);
background: var(--color-surface);
}
.event-list-past li:hover {
box-shadow: none;
}
.event-list-past time {
color: var(--color-text-soft);
font-weight: 400;
}
.event-list-past .event-title {
font-weight: 400;
color: var(--color-text-soft);
}
/* FAQ: each question is an expandable card with an accent +/– marker. */
.faq-item {
background: var(--color-bg);