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

Unify post and event cards to one style on the home page

Browse Source
This commit is contained in:
tleininger committed 2026-09-30 21:52:59 +02:00
1 parent 4fa17429b5
commit 43e6ed7743
6 files changed
+46 -55
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Elternbeirat.Web/Features/Embeds/EventsEmbed.razor
+3 -2
View File
@@ -7,15 +7,16 @@
@foreach (var ev in _upcomingEvents)
{
<li>
<EventDate Value="ev" />
<a class="card-link" href="/events">
<span class="event-title">@ev.Title</span>
<EventDate Value="ev" />
@if (!string.IsNullOrWhiteSpace(ev.Location))
{
<span class="event-location">@ev.Location</span>
}
</a>
</li>
}
</ul>
<p class="embed-more"><a href="/events">Alle Termine <span aria-hidden="true">&rarr;</span></a></p>
</section>
}
Elternbeirat.Web/Features/Embeds/PostsEmbed.razor
+3 -2
View File
@@ -7,11 +7,12 @@
@foreach (var post in _latest)
{
<li>
<a href="@($"/posts/{post.Slug}")">@post.Title</a>
<a class="card-link" href="@($"/posts/{post.Slug}")">
<span class="post-title">@post.Title</span>
<PostDate Value="post.Date" />
</a>
</li>
}
</ul>
<p class="embed-more"><a href="/posts">Alle Beiträge <span aria-hidden="true">&rarr;</span></a></p>
</section>
}
Elternbeirat.Web/Features/Events/EventDate.razor.css
+9
View File
@@ -0,0 +1,9 @@
/* The date's own look: small and softened, matching <PostDate> so post and event
cards read as one style. Lives with the component so every place that renders
<EventDate> (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;
}
Elternbeirat.Web/Features/Events/EventList.razor
+6 -2
View File
@@ -39,8 +39,9 @@ else
@foreach (var ev in _upcomingEvents)
{
<li>
<EventDate Value="ev" />
<a class="card-link" href="/events">
<span class="event-title">@ev.Title</span>
<EventDate Value="ev" />
@if (!string.IsNullOrWhiteSpace(ev.Location))
{
<span class="event-location">@ev.Location</span>
@@ -49,6 +50,7 @@ else
{
<p class="event-note">@ev.Note</p>
}
</a>
</li>
}
</ul>
@@ -61,12 +63,14 @@ else
@foreach (var ev in _pastEvents)
{
<li>
<EventDate Value="ev" />
<a class="card-link" href="/events">
<span class="event-title">@ev.Title</span>
<EventDate Value="ev" />
@if (!string.IsNullOrWhiteSpace(ev.Location))
{
<span class="event-location">@ev.Location</span>
}
</a>
</li>
}
</ul>
Elternbeirat.Web/Features/Posts/PostList.razor
+3 -1
View File
@@ -29,8 +29,10 @@ else
@foreach (var post in _posts)
{
<li>
<a href="@($"/posts/{post.Slug}")">@post.Title</a>
<a class="card-link" href="@($"/posts/{post.Slug}")">
<span class="post-title">@post.Title</span>
<PostDate Value="post.Date" />
</a>
</li>
}
</ul>
Elternbeirat.Web/wwwroot/app.css
+22 -48
View File
@@ -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 <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
@@ -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);
}