Add site layout with header navigation and footer

2026-09-21 15:37:39 +02:00
1 parent c4c7ca2ee4
commit 6c5840ab8e
@@ -1,3 +1,33 @@
-@inherits LayoutComponentBase
+@inherits LayoutComponentBase

-@Body
+<div class="page">
+    <header class="site-header">
+        <div class="header-inner">
+            <a class="brand" href="/">Elternbeirat IGMH</a>
+            <nav class="main-nav">
+                <NavLink href="/" Match="NavLinkMatch.All">Start</NavLink>
+                <NavLink href="/vorstandsteam">Vorstandsteam</NavLink>
+                <NavLink href="/foerderverein">Förderverein</NavLink>
+                <NavLink href="/beitraege">Beiträge</NavLink>
+                <NavLink href="/faq">FAQ</NavLink>
+                <NavLink href="/downloads">Downloads</NavLink>
+                <NavLink href="/kontakt">Kontakt</NavLink>
+            </nav>
+        </div>
+    </header>
+
+    <main class="content">
+        @Body
+    </main>
+
+    <footer class="site-footer">
+        <div class="footer-inner">
+            <span>Elternbeirat der IGMH</span>
+            <nav class="footer-nav">
+                <a href="/kontakt">Kontakt</a>
+                <a href="/impressum">Impressum</a>
+                <a href="/datenschutz">Datenschutz</a>
+            </nav>
+        </div>
+    </footer>
+</div>
@@ -18,3 +18,100 @@
        right: 0.75rem;
        top: 0.5rem;
    }
+
+/* Page frame: header and footer stay put, the content grows and pushes the
+   footer to the bottom even on short pages. */
+.page {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Header */
+.site-header {
+    border-bottom: 1px solid #e0e0e0;
+    background: #fff;
+}
+
+.header-inner {
+    max-width: 60rem;
+    margin: 0 auto;
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.5rem 1.5rem;
+}
+
+.brand {
+    font-size: 1.35rem;
+    font-weight: 700;
+    color: #1f3a5f;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.main-nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 1.25rem;
+}
+
+.main-nav a {
+    color: #333;
+    text-decoration: none;
+    padding: 0.2rem 0;
+    border-bottom: 2px solid transparent;
+}
+
+.main-nav a:hover {
+    color: #1f3a5f;
+}
+
+/* NavLink adds .active to the link of the current route. */
+.main-nav a.active {
+    color: #1f3a5f;
+    border-bottom-color: #1f3a5f;
+}
+
+/* Content */
+.content {
+    flex: 1;
+    width: 100%;
+    max-width: 60rem;
+    margin: 0 auto;
+    padding: 1.5rem 1.25rem 3rem;
+}
+
+/* Footer */
+.site-footer {
+    border-top: 1px solid #e0e0e0;
+    background: #fafafa;
+    color: #555;
+    font-size: 0.9rem;
+}
+
+.footer-inner {
+    max-width: 60rem;
+    margin: 0 auto;
+    padding: 1rem 1.25rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.5rem 1.5rem;
+}
+
+.footer-nav {
+    display: flex;
+    gap: 1.25rem;
+}
+
+.footer-nav a {
+    color: #555;
+    text-decoration: none;
+}
+
+.footer-nav a:hover {
+    color: #1f3a5f;
+    text-decoration: underline;
+}