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

Refresh header and footer with signet, gradient, nav pills and three-column footer; fix box-sizing of design boxes

Browse Source
This commit is contained in:
tleininger committed 2026-10-01 13:36:26 +02:00
1 parent a641beab16
commit d539fde09d
10 files changed
+407 -59
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Elternbeirat.Web/Components/Layout/MainLayout.razor
+51 -8
View File
@@ -8,7 +8,15 @@
flex wrapper -- see MainLayout.razor.css. *@
<header class="site-header">
<div class="header-inner">
<a class="brand" href="/">Elternbeirat IGMH</a>
@* Two-line lettering next to the signet: the body's name large, the
school small below it. One link, so the whole mark leads home. *@
<a class="brand" href="/">
<Signet />
<span class="brand-text">
<span class="brand-name">Elternbeirat</span>
<span class="brand-school">IGMH Mannheim</span>
</span>
</a>
@* CSS-only mobile menu: the hidden checkbox holds the open/closed
state, the label is the hamburger button, and :checked reveals the
@@ -37,13 +45,48 @@
</main>
<footer class="site-footer">
@* A soft wave as the transition from the page into the dark footer. Pure
decoration, so hidden from screen readers; it is filled with the footer
colour and stretched to the full width (preserveAspectRatio="none"). *@
<svg class="footer-wave" viewBox="0 0 1440 48" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<path d="M0 24C240 48 480 48 720 28S1200 0 1440 20V48H0z" />
</svg>
<div class="footer-inner">
<span>Elternbeirat der IGMH</span>
<nav class="footer-nav">
@foreach (var link in _footer)
{
<a href="@link.Href">@link.Title</a>
}
</nav>
<div class="footer-brand">
<Signet />
<span>Elternbeirat der IGMH</span>
</div>
@* Both link columns come from PocketBase like the header. An empty list
(no such pages, or PocketBase down) renders nothing -- no lone
heading above an empty column. *@
@if (_header.Count > 0)
{
<nav class="footer-nav" aria-label="Schnellzugriff">
<h2 class="footer-heading">Schnellzugriff</h2>
<ul>
@foreach (var link in _header)
{
<li><a href="@link.Href">@link.Title</a></li>
}
</ul>
</nav>
}
@if (_footer.Count > 0)
{
<nav class="footer-nav" aria-label="Weiteres">
<h2 class="footer-heading">Weiteres</h2>
<ul>
@foreach (var link in _footer)
{
<li><a href="@link.Href">@link.Title</a></li>
}
</ul>
</nav>
}
</div>
<p class="footer-copyright">© @_year Elternbeirat der IGMH</p>
</footer>
Elternbeirat.Web/Components/Layout/MainLayout.razor.cs
+3
View File
@@ -23,6 +23,9 @@ public partial class MainLayout
private IReadOnlyList<NavLinkItem> _header = [];
private IReadOnlyList<NavLinkItem> _footer = [];
// Berlin's year, not the server's (UTC) -- see FooterYear.
private readonly int _year = FooterYear.For(TimeProvider.System.GetUtcNow());
protected override async Task OnInitializedAsync()
{
try
Elternbeirat.Web/Components/Layout/MainLayout.razor.css
+153 -33
View File
@@ -25,11 +25,12 @@
z-index keeps it above the content; the opaque background stops content showing
through as it scrolls underneath. */
.site-header {
/* Brand-blue bar with a warm accent underline -- the strongest, most visible
cue that carries the friendly tone across every page. Uses its own header
token so it stays deep blue in dark mode too (see app.css). */
background: var(--color-header);
border-bottom: 3px solid var(--color-accent);
/* The brand gradient, blue into green -- the strongest, most visible cue that
carries the school's colours across every page. Built on --color-header, so
it stays deep in dark mode too (see app.css). No accent underline any more:
the gradient already ends in green, and the active menu item carries the
green stroke. */
background: var(--gradient-brand);
box-shadow: var(--shadow);
position: sticky;
top: 0;
@@ -42,22 +43,57 @@
padding: var(--space-3) 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: baseline;
align-items: center;
gap: var(--space-2) var(--space-4);
}
/* Signet and two-line lettering side by side. The lettering is a column of its
own, so the name and the school line up on the left edge. */
.brand {
font-size: 1.35rem;
font-weight: 700;
color: #fff;
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-on-header);
text-decoration: none;
white-space: nowrap;
}
.brand:hover {
color: var(--color-on-header);
}
/* The signet lives in its own component (Signet.razor), so its <svg> carries that
component's scope attribute, not this one's; ::deep reaches it from here. */
.brand ::deep .signet {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.brand-name {
font-size: 1.35rem;
font-weight: var(--font-weight-heading);
letter-spacing: var(--letter-spacing-heading);
}
.brand-school {
font-size: 0.85rem;
font-weight: 600;
}
/* The links are pills with their own padding (see app.css), so the gap between
them can stay small. */
.main-nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
align-items: center;
gap: var(--space-1) var(--space-2);
}
/* The hamburger button and its state checkbox are hidden on wide screens; the
@@ -72,11 +108,12 @@
(b-xxxxx), so a scoped rule ".main-nav a" would not match them. See app.css. */
/* Content: at least tall enough that the footer sits at the bottom of the viewport
on short pages. 100dvh - 4rem leaves room for the header (which sits above in
normal flow); dvh follows the mobile browser's shrinking toolbar. On long pages
the content simply grows past this and pushes the footer down naturally. */
on short pages. 100dvh - 5rem leaves room for the header with its signet (which
sits above in normal flow); dvh follows the mobile browser's shrinking toolbar.
On long pages the content simply grows past this and pushes the footer down
naturally. */
.content {
min-height: calc(100dvh - 4rem);
min-height: calc(100dvh - 5rem);
box-sizing: border-box;
width: 100%;
max-width: var(--content-width);
@@ -84,39 +121,101 @@
padding: var(--space-4) 1.25rem var(--space-6);
}
/* Footer */
/* Footer: a dark brand-blue band with light text, so the page visibly ends here.
Its own tokens (--color-footer, --color-on-footer...) keep it dark in both
colour schemes, like the header. position:relative anchors the wave. */
.site-footer {
border-top: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-soft);
font-size: 0.9rem;
position: relative;
margin-top: var(--space-6);
background: var(--color-footer);
color: var(--color-on-footer-soft);
font-size: 0.95rem;
}
/* The wave sits just above the footer's top edge (bottom: 100%), drawn over the
page background in the footer colour, so the band seems to rise softly instead
of starting with a hard line. Fixed height, full width: on a phone it simply
flattens out. Overlapped by 1px so no hairline gap shows between wave and band
when the browser rounds. */
.footer-wave {
position: absolute;
bottom: calc(100% - 1px);
left: 0;
display: block;
width: 100%;
height: 2.5rem;
fill: var(--color-footer);
}
/* Three columns: brand, quick links, further pages. The brand gets a bit more room
because it holds the signet. A missing link column simply leaves its cell empty,
so the others keep their place. */
.footer-inner {
max-width: var(--content-width);
margin: 0 auto;
padding: var(--space-3) 1.25rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
}
.footer-nav {
display: flex;
padding: var(--space-5) 1.25rem var(--space-4);
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: var(--space-4);
}
.footer-brand {
display: flex;
align-items: center;
align-self: start;
gap: var(--space-2);
color: var(--color-on-footer);
font-weight: 700;
}
.footer-brand ::deep .signet {
flex-shrink: 0;
width: 3rem;
height: 3rem;
}
/* Column headings label the lists; they are not a second page heading, so they
stay small and quiet. */
.footer-heading {
margin: 0 0 var(--space-2);
color: var(--color-on-footer);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav li + li {
margin-top: var(--space-1);
}
.footer-nav a {
color: var(--color-text-soft);
color: var(--color-on-footer-soft);
text-decoration: none;
}
.footer-nav a:hover {
color: var(--color-brand);
color: var(--color-on-footer);
text-decoration: underline;
}
/* Copyright: a thin rule separates it from the columns. The rule spans the content
width, not the whole window, so it lines up with the columns above. */
.footer-copyright {
box-sizing: border-box;
max-width: var(--content-width);
margin: 0 auto;
padding: var(--space-3) 1.25rem;
border-top: 1px solid var(--color-footer-border);
font-size: 0.85rem;
}
/* Mobile: on narrow screens the nav collapses behind a hamburger button. This is
pure CSS -- the #nav-toggle checkbox holds the open/closed state and its
:checked state reveals the nav. No JavaScript, so it works under static SSR. */
@@ -144,8 +243,9 @@
display: block;
width: 1.5rem;
height: 2px;
background: #fff; /* on the blue header bar */
background: var(--color-on-header);
content: "";
transition: transform var(--transition), background-color var(--transition);
}
.nav-toggle-bar::before {
@@ -156,6 +256,21 @@
transform: translateY(4px); /* 6px minus the bar's own 2px height */
}
/* Open: the hamburger turns into an X. The middle bar fades out and the outer
two meet in the middle and cross. Only the icon changes shape; nothing around
it moves. The checkbox sits right before the label, hence the + combinator. */
.nav-toggle:checked + .nav-toggle-label .nav-toggle-bar {
background-color: transparent;
}
.nav-toggle:checked + .nav-toggle-label .nav-toggle-bar::before {
transform: rotate(45deg);
}
.nav-toggle:checked + .nav-toggle-label .nav-toggle-bar::after {
transform: translateY(-2px) rotate(-45deg); /* back up by its own height */
}
/* The nav takes its own row and is hidden until the checkbox is checked. */
.main-nav {
flex-basis: 100%;
@@ -175,6 +290,11 @@
margin-top: 0.5rem;
}
/* Mobile per-link spacing/separators for .main-nav a are in the global app.css
too, for the same scoped-attribute reason as above. */
/* Mobile per-link spacing for .main-nav a is in the global app.css too, for
the same scoped-attribute reason as above. */
/* The footer columns stack: one column, brand on top. */
.footer-inner {
grid-template-columns: 1fr;
}
}