From 43e6ed77437d92f7c9f0007145766096352275cd Mon Sep 17 00:00:00 2001 From: tleininger Date: Wed, 30 Sep 2026 21:52:59 +0200 Subject: [PATCH] Unify post and event cards to one style on the home page --- .../Features/Embeds/EventsEmbed.razor | 15 ++-- .../Features/Embeds/PostsEmbed.razor | 7 +- .../Features/Events/EventDate.razor.css | 9 +++ .../Features/Events/EventList.razor | 36 +++++----- .../Features/Posts/PostList.razor | 6 +- Elternbeirat.Web/wwwroot/app.css | 70 ++++++------------- 6 files changed, 67 insertions(+), 76 deletions(-) create mode 100644 Elternbeirat.Web/Features/Events/EventDate.razor.css diff --git a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor index 6cdc561..54818cb 100644 --- a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor +++ b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor @@ -7,15 +7,16 @@ @foreach (var ev in _upcomingEvents) {
  • - - @ev.Title - @if (!string.IsNullOrWhiteSpace(ev.Location)) - { - @ev.Location - } + + @ev.Title + + @if (!string.IsNullOrWhiteSpace(ev.Location)) + { + @ev.Location + } +
    • } -

    Alle Termine

    } diff --git a/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor b/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor index f50c856..dbb81d2 100644 --- a/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor +++ b/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor @@ -7,11 +7,12 @@ @foreach (var post in _latest) {
  • - @post.Title - + + @post.Title + +
    • } -

    Alle Beiträge

    } diff --git a/Elternbeirat.Web/Features/Events/EventDate.razor.css b/Elternbeirat.Web/Features/Events/EventDate.razor.css new file mode 100644 index 0000000..dc6f9c4 --- /dev/null +++ b/Elternbeirat.Web/Features/Events/EventDate.razor.css @@ -0,0 +1,9 @@ +/* The date's own look: small and softened, matching so post and event + cards read as one style. Lives with the component so every place that renders + (list, home embed) shows the date the same way. Positioning (margin + to neighbours) is NOT set here -- that is the surrounding list's job. */ +time { + display: block; + color: var(--color-text-soft); /* token, so it adapts in dark mode */ + font-size: 0.85rem; +} diff --git a/Elternbeirat.Web/Features/Events/EventList.razor b/Elternbeirat.Web/Features/Events/EventList.razor index 3a78f04..3193cdf 100644 --- a/Elternbeirat.Web/Features/Events/EventList.razor +++ b/Elternbeirat.Web/Features/Events/EventList.razor @@ -39,16 +39,18 @@ else @foreach (var ev in _upcomingEvents) {
  • - - @ev.Title - @if (!string.IsNullOrWhiteSpace(ev.Location)) - { - @ev.Location - } - @if (!string.IsNullOrWhiteSpace(ev.Note)) - { -

    @ev.Note

    - } + + @ev.Title + + @if (!string.IsNullOrWhiteSpace(ev.Location)) + { + @ev.Location + } + @if (!string.IsNullOrWhiteSpace(ev.Note)) + { +

    @ev.Note

    + } +
    • } @@ -61,12 +63,14 @@ else @foreach (var ev in _pastEvents) {
  • - - @ev.Title - @if (!string.IsNullOrWhiteSpace(ev.Location)) - { - @ev.Location - } + + @ev.Title + + @if (!string.IsNullOrWhiteSpace(ev.Location)) + { + @ev.Location + } +
    • } diff --git a/Elternbeirat.Web/Features/Posts/PostList.razor b/Elternbeirat.Web/Features/Posts/PostList.razor index bbdd30f..a879961 100644 --- a/Elternbeirat.Web/Features/Posts/PostList.razor +++ b/Elternbeirat.Web/Features/Posts/PostList.razor @@ -29,8 +29,10 @@ else @foreach (var post in _posts) {
  • - @post.Title - + + @post.Title + +
    • } diff --git a/Elternbeirat.Web/wwwroot/app.css b/Elternbeirat.Web/wwwroot/app.css index 64a2b73..d77750e 100644 --- a/Elternbeirat.Web/wwwroot/app.css +++ b/Elternbeirat.Web/wwwroot/app.css @@ -219,7 +219,6 @@ h1:focus { background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow); - padding: var(--space-3) var(--space-4); transition: box-shadow var(--transition); } @@ -228,6 +227,16 @@ h1:focus { box-shadow: var(--shadow-hover); } +/* The whole card is one link. The 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 @@ -280,41 +289,28 @@ h1:focus { color: var(--color-text-soft); } -/* Posts */ -.post-list a { - font-size: 1.15rem; - font-weight: 600; - text-decoration: none; -} - -/* The date's look (small, softened) comes from PostDate.razor.css. Here only the - list-specific spacing: nudge the date down from the post's title link above. */ -.post-list time { - margin-top: var(--space-1); -} - -/* Events: the date leads in the warm accent colour. */ -.event-list time { - display: block; - color: var(--color-accent-dark); - font-weight: 600; - font-size: 0.9rem; -} - +/* 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; - margin-top: var(--space-1); font-size: 1.15rem; font-weight: 600; color: var(--color-brand); } -.event-location::before { - content: " · "; - color: var(--color-text-soft); +/* 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); } @@ -388,25 +384,3 @@ h1:focus { padding-top: var(--space-2); color: var(--color-text); } - -/* "Alle Beiträge/Termine/Fragen →" links below an embedded list on the home page. - Set apart from the cards with extra space above, and styled as a distinct call - to action in the accent colour rather than looking like body text. The arrow - nudges right on hover for a subtle bit of life. */ -.embed-more { - margin-top: var(--space-4); - max-width: none; /* override the global paragraph reading cap */ -} - -.embed-more a { - display: inline-flex; - align-items: center; - gap: var(--space-2); - font-weight: 600; - color: var(--color-accent-dark); - text-decoration: none; -} - -.embed-more a:hover { - color: var(--color-brand); -}