From 02654c20d37fcb31220d7231b56e72489da41705 Mon Sep 17 00:00:00 2001 From: tleininger Date: Wed, 23 Sep 2026 19:26:35 +0200 Subject: [PATCH 1/3] Add a mobile nav and pin the header while scrolling --- .gitattributes | 5 + .../PocketBaseClientTests.cs | 4 +- Elternbeirat.Web.Tests/PocketBaseFixture.cs | 6 +- .../Components/Layout/MainLayout.razor | 24 +++- .../Components/Layout/MainLayout.razor.css | 109 ++++++++++++++++-- pb/pb_migrations/1727200000_dev_seed.js | 2 +- 6 files changed, 132 insertions(+), 18 deletions(-) diff --git a/.gitattributes b/.gitattributes index de4af22..572cb3f 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,3 +1,8 @@ # Shell-Skripte brauchen Unix-Zeilenenden (LF), sonst scheitert der #!-Aufruf # in bash. Unabhaengig von core.autocrlf auf Windows erzwingen. *.sh text eol=lf + +# PocketBase-Migration und -Schema laufen im Linux-Container. LF erzwingen, damit +# core.autocrlf=true auf Windows sie nicht bei jeder Beruehrung als geaendert +# markiert (staendige "LF will be replaced by CRLF"-Warnung). +pb/** text eol=lf diff --git a/Elternbeirat.Web.Tests/PocketBaseClientTests.cs b/Elternbeirat.Web.Tests/PocketBaseClientTests.cs index 03ddc45..a7b999b 100644 --- a/Elternbeirat.Web.Tests/PocketBaseClientTests.cs +++ b/Elternbeirat.Web.Tests/PocketBaseClientTests.cs @@ -85,7 +85,9 @@ public sealed class PocketBaseClientTests(PocketBaseFixture pocketBase) var home = pages.Single(p => p.Slug == "home"); home.Embed.ShouldBe(["posts", "events"], ignoreOrder: true); - home.Location.ShouldBe("header"); + // Home has no menu slot: the brand is the home link, so a "Start" nav + // entry would be redundant. NavBuilder filters it out via this empty value. + home.Location.ShouldBe(""); } [Fact] diff --git a/Elternbeirat.Web.Tests/PocketBaseFixture.cs b/Elternbeirat.Web.Tests/PocketBaseFixture.cs index 21ba87e..2972f4a 100644 --- a/Elternbeirat.Web.Tests/PocketBaseFixture.cs +++ b/Elternbeirat.Web.Tests/PocketBaseFixture.cs @@ -222,10 +222,12 @@ public sealed class PocketBaseFixture : IAsyncLifetime // Pages that the route smoke tests reach through the navigation, the // footer or the FAQ hub. Header pages carry a location+order; the FAQ // sub-pages are plain content pages without a menu slot. All public. + // The home page has no menu slot (location ""): the site brand is the home + // link, so a separate "Start" nav entry would be redundant. await CreateRecordAsync(http, "pages", new { - title = "Startseite", body = "# Willkommen", location = "header", - order = 1, slug = "home", embed = new[] { "posts", "events" }, @public = true, + title = "Startseite", body = "# Willkommen", location = "", + order = 0, slug = "home", embed = new[] { "posts", "events" }, @public = true, }); await CreateRecordAsync(http, "pages", new { diff --git a/Elternbeirat.Web/Components/Layout/MainLayout.razor b/Elternbeirat.Web/Components/Layout/MainLayout.razor index 175f8a5..64c52f3 100644 --- a/Elternbeirat.Web/Components/Layout/MainLayout.razor +++ b/Elternbeirat.Web/Components/Layout/MainLayout.razor @@ -1,10 +1,29 @@ @inherits LayoutComponentBase -
-
+@* Header, main and footer are plain block children of , which is the page's + scroll root. The header is position:sticky and, because it is NOT a flex/grid + child (a stretched flex item never sticks -- it fills its cell and unsticks + immediately), it pins to the top and stays there while the page scrolls. The + footer is kept at the bottom on short pages by a min-height on
, not by a + flex wrapper -- see MainLayout.razor.css. *@ +
Elternbeirat IGMH + + @* CSS-only mobile menu: the hidden checkbox holds the open/closed + state, the label is the hamburger button, and :checked reveals the + nav below (see MainLayout.razor.css). No JavaScript, no @@rendermode + -- works under static SSR. *@ + + +
-
diff --git a/Elternbeirat.Web/Components/Layout/MainLayout.razor.css b/Elternbeirat.Web/Components/Layout/MainLayout.razor.css index 6932f38..be871ed 100644 --- a/Elternbeirat.Web/Components/Layout/MainLayout.razor.css +++ b/Elternbeirat.Web/Components/Layout/MainLayout.razor.css @@ -19,18 +19,17 @@ 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 */ +/* Header: pinned to the top while the page scrolls, so the brand and (on mobile) + the hamburger button are always reachable. It is a plain block child of + (NOT a flex item) -- a stretched flex child fills its cell and never sticks. + z-index keeps it above the content; the opaque background stops content showing + through as it scrolls underneath. */ .site-header { border-bottom: 1px solid #e0e0e0; background: #fff; + position: sticky; + top: 0; + z-index: 20; } .header-inner { @@ -57,6 +56,15 @@ gap: 0.25rem 1.25rem; } +/* The hamburger button, its state checkbox, and the mobile-only home link are + hidden on wide screens; the media query below turns them on for narrow ones. + (On wide screens the brand is the home link, so a "Start" entry is redundant.) */ +.nav-toggle, +.nav-toggle-label, +.nav-home-mobile { + display: none; +} + .main-nav a { color: #333; text-decoration: none; @@ -74,9 +82,13 @@ border-bottom-color: #1f3a5f; } -/* Content */ +/* 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. */ .content { - flex: 1; + min-height: calc(100dvh - 4rem); + box-sizing: border-box; width: 100%; max-width: 60rem; margin: 0 auto; @@ -115,3 +127,78 @@ color: #1f3a5f; text-decoration: underline; } + +/* 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. */ +@media (max-width: 40rem) { + /* The brand stays on the left, the hamburger goes to the right, and the nav + occupies its own full-width row below both. */ + .header-inner { + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + } + + /* Show the hamburger button. */ + .nav-toggle-label { + display: block; + cursor: pointer; + padding: 0.5rem; + margin: -0.5rem; /* keep the tap target large without shifting layout */ + } + + /* The three-bar icon, drawn with one element plus its ::before/::after. */ + .nav-toggle-bar, + .nav-toggle-bar::before, + .nav-toggle-bar::after { + display: block; + width: 1.5rem; + height: 2px; + background: #1f3a5f; + content: ""; + } + + .nav-toggle-bar::before { + transform: translateY(-6px); + } + + .nav-toggle-bar::after { + transform: translateY(4px); /* 6px minus the bar's own 2px height */ + } + + /* The nav takes its own row and is hidden until the checkbox is checked. */ + .main-nav { + flex-basis: 100%; + flex-direction: column; + gap: 0; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease; + } + + /* Checked state: reveal the stacked links. The max-height caps the open menu + to the space below the sticky header; a longer list scrolls inside it + instead of running off the screen. */ + .nav-toggle:checked ~ .main-nav { + max-height: 70vh; + overflow-y: auto; + margin-top: 0.5rem; + } + + /* The mobile-only home link reappears as the first entry in the menu. */ + .nav-home-mobile { + display: block; + } + + .main-nav a { + padding: 0.6rem 0; + border-bottom: 1px solid #eee; + } + + /* The active link keeps its colour but not the desktop underline, which would + clash with the row separators. */ + .main-nav a.active { + border-bottom-color: #eee; + } +} diff --git a/pb/pb_migrations/1727200000_dev_seed.js b/pb/pb_migrations/1727200000_dev_seed.js index 14e0548..856c952 100644 --- a/pb/pb_migrations/1727200000_dev_seed.js +++ b/pb/pb_migrations/1727200000_dev_seed.js @@ -21,7 +21,7 @@ migrate((app) => { const schema = JSON.parse(toString($os.readFile("/pb_migrations/collections_schema.json"))) const records = { - pages: [{"body":"# Vorstandsteam\n\nDer Elternbeirat der IGMH vertritt die Interessen aller Eltern gegenüber der Schulleitung und dem Kollegium. Wir treffen uns regelmäßig, bringen Anliegen aus der Elternschaft ein und begleiten das Schulleben aktiv.\n\n## Vorstand\n\n- **Vorsitz** — Anke Berger\n- **Stellvertretung** — Murat Yılmaz\n- **Kasse** — Sabine Krause\n- **Schriftführung** — Thomas Heinrich\n\n## So erreichen Sie uns\n\nAm schnellsten per Mail über unsere [Kontaktseite](/contact). Zu unseren öffentlichen Sitzungen sind alle Eltern herzlich eingeladen — die Termine finden Sie unter [Termine](/events).","embed":[],"location":"header","order":2,"public":true,"slug":"board","title":"Vorstandsteam"},{"body":"# Förderverein\n\nDer Förderverein der IGMH unterstützt Projekte, für die im regulären Schulhaushalt kein Geld vorgesehen ist: von der Ausstattung der Bibliothek über Pausenspielgeräte bis zu Zuschüssen für Klassenfahrten, damit kein Kind aus finanziellen Gründen zurückbleibt.\n\n## Mitglied werden\n\nDer Jahresbeitrag beträgt 24 € — jeder Euro fließt direkt in die Arbeit an der Schule. Den Aufnahmeantrag finden Sie unter [Downloads](/downloads).\n\n## Spenden\n\nSpenden sind jederzeit willkommen und werden auf Wunsch mit einer Zuwendungsbestätigung quittiert. Sprechen Sie uns über die [Kontaktseite](/contact) an.","embed":[],"location":"header","order":3,"public":true,"slug":"patrons","title":"Förderverein"},{"body":"# Häufige Fragen\n\nHier beantworten wir die Fragen, die uns am häufigsten erreichen. Ausführliche Antworten gibt es auf den Unterseiten:\n\n- [Mensa und Mittagessen](/faq-mensa)\n- [Schließfächer](/faq-schliessfach)\n- [Eltern-Euro](/faq-elterneuro)\n- [Elternarbeit und Mitmachen](/faq-elternarbeit)\n\nIhre Frage ist nicht dabei? Schreiben Sie uns über die [Kontaktseite](/contact).","embed":[],"location":"header","order":6,"public":true,"slug":"faqs","title":"FAQ"},{"body":"# Downloads\n\nFormulare und Dokumente zum Herunterladen:\n\n- Aufnahmeantrag Förderverein\n- Einzugsermächtigung\n- Erstattungsformular Klassenkasse\n\nFehlt ein Dokument? Melden Sie sich über die [Kontaktseite](/contact).","embed":[],"location":"header","order":7,"public":true,"slug":"downloads","title":"Downloads"},{"body":"# Kontakt\n\nSie erreichen den Elternbeirat der IGMH per E-Mail:\n\n**elternbeirat@igmh.example**\n\nWir antworten in der Regel innerhalb weniger Tage. Bei dringenden schulischen Angelegenheiten wenden Sie sich bitte direkt an das Sekretariat der Schule.","embed":[],"location":"footer","order":1,"public":true,"slug":"contact","title":"Kontakt"},{"body":"# Impressum\n\nAngaben gemäß § 5 DDG\n\n**Elternbeirat der IGMH**\nVertreten durch den Vorstand\n\nKontakt: siehe [Kontaktseite](/contact)\n\nVerantwortlich für den Inhalt nach § 18 Abs. 2 MStV: der Vorstand des Elternbeirats.","embed":[],"location":"footer","order":2,"public":true,"slug":"imprint","title":"Impressum"},{"body":"# Datenschutz\n\nDer Schutz Ihrer Daten ist uns wichtig. Diese Website kommt ohne externe Dienste aus: keine Analysewerkzeuge, keine eingebundenen Karten oder Videos, keine Schriften von fremden Servern.\n\n## Server-Logs\n\nBeim Aufruf werden technisch notwendige Zugriffsdaten (IP-Adresse, Zeitpunkt, aufgerufene Seite) kurzzeitig verarbeitet, um den Betrieb sicherzustellen. Eine Zusammenführung mit anderen Daten findet nicht statt.\n\n## Ihre Rechte\n\nFragen zum Datenschutz richten Sie bitte an die [Kontaktseite](/contact).","embed":[],"location":"footer","order":3,"public":true,"slug":"privacy","title":"Datenschutz"},{"body":"# Mensa und Mittagessen\n\n## Wie melde ich mein Kind zum Mittagessen an?\n\nDie Anmeldung läuft über das Bestellsystem der Schule. Die Zugangsdaten erhalten Sie zu Schuljahresbeginn über die Klassenleitung.\n\n## Was kostet ein Essen?\n\nEin Mittagessen kostet aktuell 4,20 €. Für Familien mit Anspruch auf Leistungen nach dem Bildungs- und Teilhabepaket ist das Essen kostenfrei — sprechen Sie das Sekretariat an.\n\n## Gibt es vegetarische Gerichte?\n\nJa, täglich steht mindestens ein vegetarisches Gericht zur Wahl.\n\nWeitere Fragen? [Schreiben Sie uns.](/contact)","embed":[],"location":"","order":0,"public":true,"slug":"faq-mensa","title":"Mensa und Mittagessen"},{"body":"# Schließfächer\n\n## Wie bekommt mein Kind ein Schließfach?\n\nSchließfächer werden über einen externen Anbieter gemietet. Das Anmeldeformular liegt bei den [Downloads](/downloads).\n\n## Was kostet die Miete?\n\nDie Miete beträgt rund 15 € pro Schuljahr zuzüglich einer Kaution, die bei Rückgabe erstattet wird.\n\n## Der Schlüssel ist weg — was nun?\n\nWenden Sie sich an den Anbieter; die Kontaktdaten stehen auf dem Mietvertrag. Bei Fragen hilft auch der [Elternbeirat](/contact).","embed":[],"location":"","order":0,"public":true,"slug":"faq-schliessfach","title":"Schließfächer"},{"body":"# Eltern-Euro\n\n## Was ist der Eltern-Euro?\n\nDer Eltern-Euro ist ein freiwilliger Beitrag, mit dem kleinere Anschaffungen für die Klassen unkompliziert finanziert werden — etwa Bastelmaterial oder Ausflüge.\n\n## Ist der Beitrag verpflichtend?\n\nNein. Der Beitrag ist ausdrücklich freiwillig, und niemand wird bei Nichtzahlung benachteiligt.\n\n## Wohin fließt das Geld?\n\nIn die jeweilige Klassenkasse, verwaltet von den gewählten Klassenelternvertretungen. Fragen dazu über die [Kontaktseite](/contact).","embed":[],"location":"","order":0,"public":true,"slug":"faq-elterneuro","title":"Eltern-Euro"},{"body":"# Elternarbeit und Mitmachen\n\n## Wie kann ich mich engagieren?\n\nOb Schulfest, Basar oder eine helfende Hand bei Ausflügen — über jede Unterstützung freuen wir uns. Melden Sie sich einfach über die [Kontaktseite](/contact).\n\n## Muss ich in den Elternbeirat gewählt sein?\n\nNein. Viele Aufgaben erledigen Eltern, die einfach mithelfen möchten, ganz ohne Amt.\n\n## Wann finden die Sitzungen statt?\n\nDie öffentlichen Sitzungen und weitere Termine finden Sie unter [Termine](/events).","embed":[],"location":"","order":0,"public":true,"slug":"faq-elternarbeit","title":"Elternarbeit und Mitmachen"},{"body":"# Willkommen beim Elternbeirat der IGMH","embed":["posts","events"],"location":"header","order":1,"public":true,"slug":"home","title":"Startseite"},{"body":"# Beiträge","embed":[],"location":"header","order":4,"public":true,"slug":"posts","title":"Beiträge"},{"body":"# Termine","embed":[],"location":"header","order":5,"public":true,"slug":"events","title":"Termine"}] + pages: [{"body":"# Vorstandsteam\n\nDer Elternbeirat der IGMH vertritt die Interessen aller Eltern gegenüber der Schulleitung und dem Kollegium. Wir treffen uns regelmäßig, bringen Anliegen aus der Elternschaft ein und begleiten das Schulleben aktiv.\n\n## Vorstand\n\n- **Vorsitz** — Anke Berger\n- **Stellvertretung** — Murat Yılmaz\n- **Kasse** — Sabine Krause\n- **Schriftführung** — Thomas Heinrich\n\n## So erreichen Sie uns\n\nAm schnellsten per Mail über unsere [Kontaktseite](/contact). Zu unseren öffentlichen Sitzungen sind alle Eltern herzlich eingeladen — die Termine finden Sie unter [Termine](/events).","embed":[],"location":"header","order":2,"public":true,"slug":"board","title":"Vorstandsteam"},{"body":"# Förderverein\n\nDer Förderverein der IGMH unterstützt Projekte, für die im regulären Schulhaushalt kein Geld vorgesehen ist: von der Ausstattung der Bibliothek über Pausenspielgeräte bis zu Zuschüssen für Klassenfahrten, damit kein Kind aus finanziellen Gründen zurückbleibt.\n\n## Mitglied werden\n\nDer Jahresbeitrag beträgt 24 € — jeder Euro fließt direkt in die Arbeit an der Schule. Den Aufnahmeantrag finden Sie unter [Downloads](/downloads).\n\n## Spenden\n\nSpenden sind jederzeit willkommen und werden auf Wunsch mit einer Zuwendungsbestätigung quittiert. Sprechen Sie uns über die [Kontaktseite](/contact) an.","embed":[],"location":"header","order":3,"public":true,"slug":"patrons","title":"Förderverein"},{"body":"# Häufige Fragen\n\nHier beantworten wir die Fragen, die uns am häufigsten erreichen. Ausführliche Antworten gibt es auf den Unterseiten:\n\n- [Mensa und Mittagessen](/faq-mensa)\n- [Schließfächer](/faq-schliessfach)\n- [Eltern-Euro](/faq-elterneuro)\n- [Elternarbeit und Mitmachen](/faq-elternarbeit)\n\nIhre Frage ist nicht dabei? Schreiben Sie uns über die [Kontaktseite](/contact).","embed":[],"location":"header","order":6,"public":true,"slug":"faqs","title":"FAQ"},{"body":"# Downloads\n\nFormulare und Dokumente zum Herunterladen:\n\n- Aufnahmeantrag Förderverein\n- Einzugsermächtigung\n- Erstattungsformular Klassenkasse\n\nFehlt ein Dokument? Melden Sie sich über die [Kontaktseite](/contact).","embed":[],"location":"header","order":7,"public":true,"slug":"downloads","title":"Downloads"},{"body":"# Kontakt\n\nSie erreichen den Elternbeirat der IGMH per E-Mail:\n\n**elternbeirat@igmh.example**\n\nWir antworten in der Regel innerhalb weniger Tage. Bei dringenden schulischen Angelegenheiten wenden Sie sich bitte direkt an das Sekretariat der Schule.","embed":[],"location":"footer","order":1,"public":true,"slug":"contact","title":"Kontakt"},{"body":"# Impressum\n\nAngaben gemäß § 5 DDG\n\n**Elternbeirat der IGMH**\nVertreten durch den Vorstand\n\nKontakt: siehe [Kontaktseite](/contact)\n\nVerantwortlich für den Inhalt nach § 18 Abs. 2 MStV: der Vorstand des Elternbeirats.","embed":[],"location":"footer","order":2,"public":true,"slug":"imprint","title":"Impressum"},{"body":"# Datenschutz\n\nDer Schutz Ihrer Daten ist uns wichtig. Diese Website kommt ohne externe Dienste aus: keine Analysewerkzeuge, keine eingebundenen Karten oder Videos, keine Schriften von fremden Servern.\n\n## Server-Logs\n\nBeim Aufruf werden technisch notwendige Zugriffsdaten (IP-Adresse, Zeitpunkt, aufgerufene Seite) kurzzeitig verarbeitet, um den Betrieb sicherzustellen. Eine Zusammenführung mit anderen Daten findet nicht statt.\n\n## Ihre Rechte\n\nFragen zum Datenschutz richten Sie bitte an die [Kontaktseite](/contact).","embed":[],"location":"footer","order":3,"public":true,"slug":"privacy","title":"Datenschutz"},{"body":"# Mensa und Mittagessen\n\n## Wie melde ich mein Kind zum Mittagessen an?\n\nDie Anmeldung läuft über das Bestellsystem der Schule. Die Zugangsdaten erhalten Sie zu Schuljahresbeginn über die Klassenleitung.\n\n## Was kostet ein Essen?\n\nEin Mittagessen kostet aktuell 4,20 €. Für Familien mit Anspruch auf Leistungen nach dem Bildungs- und Teilhabepaket ist das Essen kostenfrei — sprechen Sie das Sekretariat an.\n\n## Gibt es vegetarische Gerichte?\n\nJa, täglich steht mindestens ein vegetarisches Gericht zur Wahl.\n\nWeitere Fragen? [Schreiben Sie uns.](/contact)","embed":[],"location":"","order":0,"public":true,"slug":"faq-mensa","title":"Mensa und Mittagessen"},{"body":"# Schließfächer\n\n## Wie bekommt mein Kind ein Schließfach?\n\nSchließfächer werden über einen externen Anbieter gemietet. Das Anmeldeformular liegt bei den [Downloads](/downloads).\n\n## Was kostet die Miete?\n\nDie Miete beträgt rund 15 € pro Schuljahr zuzüglich einer Kaution, die bei Rückgabe erstattet wird.\n\n## Der Schlüssel ist weg — was nun?\n\nWenden Sie sich an den Anbieter; die Kontaktdaten stehen auf dem Mietvertrag. Bei Fragen hilft auch der [Elternbeirat](/contact).","embed":[],"location":"","order":0,"public":true,"slug":"faq-schliessfach","title":"Schließfächer"},{"body":"# Eltern-Euro\n\n## Was ist der Eltern-Euro?\n\nDer Eltern-Euro ist ein freiwilliger Beitrag, mit dem kleinere Anschaffungen für die Klassen unkompliziert finanziert werden — etwa Bastelmaterial oder Ausflüge.\n\n## Ist der Beitrag verpflichtend?\n\nNein. Der Beitrag ist ausdrücklich freiwillig, und niemand wird bei Nichtzahlung benachteiligt.\n\n## Wohin fließt das Geld?\n\nIn die jeweilige Klassenkasse, verwaltet von den gewählten Klassenelternvertretungen. Fragen dazu über die [Kontaktseite](/contact).","embed":[],"location":"","order":0,"public":true,"slug":"faq-elterneuro","title":"Eltern-Euro"},{"body":"# Elternarbeit und Mitmachen\n\n## Wie kann ich mich engagieren?\n\nOb Schulfest, Basar oder eine helfende Hand bei Ausflügen — über jede Unterstützung freuen wir uns. Melden Sie sich einfach über die [Kontaktseite](/contact).\n\n## Muss ich in den Elternbeirat gewählt sein?\n\nNein. Viele Aufgaben erledigen Eltern, die einfach mithelfen möchten, ganz ohne Amt.\n\n## Wann finden die Sitzungen statt?\n\nDie öffentlichen Sitzungen und weitere Termine finden Sie unter [Termine](/events).","embed":[],"location":"","order":0,"public":true,"slug":"faq-elternarbeit","title":"Elternarbeit und Mitmachen"},{"body":"# Willkommen beim Elternbeirat der IGMH","embed":["posts","events"],"location":"","order":0,"public":true,"slug":"home","title":"Startseite"},{"body":"# Beiträge","embed":[],"location":"header","order":4,"public":true,"slug":"posts","title":"Beiträge"},{"body":"# Termine","embed":[],"location":"header","order":5,"public":true,"slug":"events","title":"Termine"}] , posts: [{"body":"## Neuer Vorstand gewählt\n\nAuf der Mitgliederversammlung wurde der Vorstand des Elternbeirats für das Schuljahr **2026/27** neu gewählt. Wir danken dem bisherigen Team für sein Engagement und freuen uns auf die gemeinsame Arbeit.\n\nDie neuen Ansprechpartnerinnen und Ansprechpartner finden Sie auf der Seite [Vorstandsteam](/board).","date":"2026-09-24 18:00:00.000Z","public":true,"slug":"new-board-2026","title":"Neuer Vorstand für das Schuljahr 2026/27 gewählt"},{"body":"## Herbstbasar am 22. November\n\nAm **22. November** findet wieder unser beliebter Herbstbasar statt. Es gibt selbst gebackene Kuchen, Bastelstände und ein Bühnenprogramm der Klassen.\n\nWer einen Stand betreuen oder etwas beisteuern möchte, meldet sich bitte bis zum 10. November über das [Kontaktformular](/contact) an. Wir freuen uns über jede helfende Hand!","date":"2026-09-18 09:30:00.000Z","public":true,"slug":"herbstbasar-2026","title":"Herbstbasar am 22. November – jetzt anmelden"},{"body":"## Mehr Auswahl beim Mittagessen\n\nAb den Herbstferien erweitert der Caterer das Angebot in der Mensa: Es gibt künftig **täglich ein zusätzliches vegetarisches Gericht** sowie eine größere Salatauswahl.\n\nRückmeldungen zum Essen nehmen wir gerne über den Elternbeirat auf – sprechen Sie uns an.","date":"2026-09-10 12:15:00.000Z","public":true,"slug":"mensa-mehr-auswahl","title":"Mehr Auswahl beim Mittagessen ab den Herbstferien"},{"body":"## Besuchen Sie unseren Stand\n\nAm kommenden **Elternsprechtag** ist der Elternbeirat mit einem Info-Stand im Foyer vertreten. Kommen Sie vorbei – wir beantworten Fragen rund um die Elternarbeit und freuen uns über neue Mitstreiterinnen und Mitstreiter.\n\nAlle Termine finden Sie unter [Termine](/events).","date":"2026-09-02 08:00:00.000Z","public":true,"slug":"elternsprechtag-stand","title":"Elternbeirat am Elternsprechtag – besuchen Sie unseren Stand"},{"body":"## Neue Spielgeräte für den Pausenhof\n\nDank der Einnahmen aus dem letzten Basar und der Unterstützung des [Fördervereins](/patrons) konnten neue Spielgeräte für den Pausenhof angeschafft werden.\n\nDie Kinder haben die Klettergerüste bereits begeistert in Beschlag genommen.","date":"2026-08-28 16:45:00.000Z","public":true,"slug":"neue-spielgeraete","title":"Neue Spielgeräte für den Pausenhof"}] , -- 2.54.0 From fa49f80d657ec0bb0fb4526bc4e3d7628920e45c Mon Sep 17 00:00:00 2001 From: tleininger Date: Wed, 23 Sep 2026 20:28:15 +0200 Subject: [PATCH 2/3] Give the site a warm design system with card-based content lists --- .../Components/Layout/MainLayout.razor.css | 70 ++--- .../Features/Embeds/EventsEmbed.razor | 2 +- .../Features/Embeds/EventsEmbed.razor.css | 34 +- .../Features/Embeds/FaqsEmbed.razor | 2 +- .../Features/Embeds/FaqsEmbed.razor.css | 19 +- .../Features/Embeds/PostsEmbed.razor | 2 +- .../Features/Embeds/PostsEmbed.razor.css | 25 +- .../Features/Events/EventList.razor.css | 44 +-- .../Features/Faqs/FaqList.razor.css | 22 +- .../Features/Posts/PostList.razor.css | 22 +- Elternbeirat.Web/wwwroot/app.css | 296 +++++++++++++++++- 11 files changed, 338 insertions(+), 200 deletions(-) diff --git a/Elternbeirat.Web/Components/Layout/MainLayout.razor.css b/Elternbeirat.Web/Components/Layout/MainLayout.razor.css index be871ed..4096c06 100644 --- a/Elternbeirat.Web/Components/Layout/MainLayout.razor.css +++ b/Elternbeirat.Web/Components/Layout/MainLayout.razor.css @@ -25,27 +25,30 @@ z-index keeps it above the content; the opaque background stops content showing through as it scrolls underneath. */ .site-header { - border-bottom: 1px solid #e0e0e0; - background: #fff; + /* Brand-blue bar with a warm accent underline -- the strongest, most visible + cue that carries the friendly tone across every page. */ + background: var(--color-brand); + border-bottom: 3px solid var(--color-accent); + box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; } .header-inner { - max-width: 60rem; + max-width: var(--content-width); margin: 0 auto; - padding: 1rem 1.25rem; + padding: var(--space-3) 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; - gap: 0.5rem 1.5rem; + gap: var(--space-2) var(--space-4); } .brand { font-size: 1.35rem; font-weight: 700; - color: #1f3a5f; + color: #fff; text-decoration: none; white-space: nowrap; } @@ -65,22 +68,9 @@ display: none; } -.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; -} +/* The link colours/states for .main-nav a live in the GLOBAL app.css, not here. + Reason: NavLink renders plain elements that carry no scoped-CSS attribute + (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 @@ -90,41 +80,41 @@ min-height: calc(100dvh - 4rem); box-sizing: border-box; width: 100%; - max-width: 60rem; + max-width: var(--content-width); margin: 0 auto; - padding: 1.5rem 1.25rem 3rem; + padding: var(--space-4) 1.25rem var(--space-6); } /* Footer */ .site-footer { - border-top: 1px solid #e0e0e0; - background: #fafafa; - color: #555; + border-top: 1px solid var(--color-border); + background: var(--color-surface); + color: var(--color-text-soft); font-size: 0.9rem; } .footer-inner { - max-width: 60rem; + max-width: var(--content-width); margin: 0 auto; - padding: 1rem 1.25rem; + padding: var(--space-3) 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; - gap: 0.5rem 1.5rem; + gap: var(--space-2) var(--space-4); } .footer-nav { display: flex; - gap: 1.25rem; + gap: var(--space-4); } .footer-nav a { - color: #555; + color: var(--color-text-soft); text-decoration: none; } .footer-nav a:hover { - color: #1f3a5f; + color: var(--color-brand); text-decoration: underline; } @@ -155,7 +145,7 @@ display: block; width: 1.5rem; height: 2px; - background: #1f3a5f; + background: #fff; /* on the blue header bar */ content: ""; } @@ -191,14 +181,6 @@ display: block; } - .main-nav a { - padding: 0.6rem 0; - border-bottom: 1px solid #eee; - } - - /* The active link keeps its colour but not the desktop underline, which would - clash with the row separators. */ - .main-nav a.active { - border-bottom-color: #eee; - } + /* Mobile per-link spacing/separators for .main-nav a are in the global app.css + too, for the same scoped-attribute reason as above. */ } diff --git a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor index cae3aa3..080ed5e 100644 --- a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor +++ b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor @@ -20,6 +20,6 @@ } -

Alle Termine →

+

Alle Termine

} diff --git a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.css b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.css index 9c51138..afcd19b 100644 --- a/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.css +++ b/Elternbeirat.Web/Features/Embeds/EventsEmbed.razor.css @@ -1,33 +1,5 @@ +/* Card styles for .event-list are shared with the full events page and live in the + global app.css. Only the embed's spacing on the home page is specific here. */ .embed-events { - margin-top: 2rem; -} - -.event-list { - list-style: none; - padding: 0; -} - -.event-list li { - padding: 0.75rem 0; - border-bottom: 1px solid #eee; -} - -.event-list time { - display: block; - color: #777; - font-size: 0.85rem; -} - -.event-title { - font-size: 1.1rem; - font-weight: 600; -} - -.event-location::before { - content: " · "; - color: #777; -} - -.event-location { - color: #555; + margin-top: var(--space-5); } diff --git a/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor b/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor index 9460bdb..278e395 100644 --- a/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor +++ b/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor @@ -16,6 +16,6 @@ } -

Alle Fragen →

+

Alle Fragen

} diff --git a/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor.css b/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor.css index 1022fd7..4a084e8 100644 --- a/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor.css +++ b/Elternbeirat.Web/Features/Embeds/FaqsEmbed.razor.css @@ -1,18 +1,5 @@ +/* Card styles for .faq-item are shared with the full FAQ page and live in the + global app.css. Only the embed's spacing on the home page is specific here. */ .embed-faqs { - margin-top: 2rem; -} - -.faq-item { - border-bottom: 1px solid #eee; - padding: 0.5rem 0; -} - -.faq-item summary { - cursor: pointer; - font-weight: 600; -} - -.faq-answer { - padding: 0.5rem 0 0.25rem; - color: #333; + margin-top: var(--space-5); } diff --git a/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor b/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor index c4de3dc..a70df14 100644 --- a/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor +++ b/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor @@ -18,6 +18,6 @@ } -

Alle Beiträge →

+

Alle Beiträge

} diff --git a/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor.css b/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor.css index 9f4fa3b..357ec35 100644 --- a/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor.css +++ b/Elternbeirat.Web/Features/Embeds/PostsEmbed.razor.css @@ -1,24 +1,5 @@ +/* Card styles for .post-list are shared with the full posts page and live in the + global app.css. Only the embed's spacing on the home page is specific here. */ .embed-posts { - margin-top: 2rem; -} - -.post-list { - list-style: none; - padding: 0; -} - -.post-list li { - padding: 0.75rem 0; - border-bottom: 1px solid #eee; -} - -.post-list a { - font-size: 1.1rem; - text-decoration: none; -} - -.post-list time { - display: block; - color: #777; - font-size: 0.85rem; + margin-top: var(--space-5); } diff --git a/Elternbeirat.Web/Features/Events/EventList.razor.css b/Elternbeirat.Web/Features/Events/EventList.razor.css index 1b33ecc..f95fa43 100644 --- a/Elternbeirat.Web/Features/Events/EventList.razor.css +++ b/Elternbeirat.Web/Features/Events/EventList.razor.css @@ -1,42 +1,2 @@ -.event-list { - list-style: none; - padding: 0; -} - -.event-list li { - padding: 0.75rem 0; - border-bottom: 1px solid #eee; -} - -.event-list time { - display: block; - color: #777; - font-size: 0.85rem; -} - -.event-title { - font-size: 1.1rem; - font-weight: 600; -} - -.event-location::before { - content: " · "; - color: #777; -} - -.event-location { - color: #555; -} - -.event-note { - margin: 0.25rem 0 0; - color: #444; -} - -.event-list-past { - color: #777; -} - -.event-list-past .event-title { - font-weight: 400; -} +/* The .event-list card styles (including past-event styling) are shared with the + home-page embed and live in the global app.css. Nothing page-specific here. */ diff --git a/Elternbeirat.Web/Features/Faqs/FaqList.razor.css b/Elternbeirat.Web/Features/Faqs/FaqList.razor.css index d8d3670..6bb2570 100644 --- a/Elternbeirat.Web/Features/Faqs/FaqList.razor.css +++ b/Elternbeirat.Web/Features/Faqs/FaqList.razor.css @@ -1,22 +1,10 @@ +/* The .faq-item card styles are shared with the home-page embed and live in the + global app.css. Only the topic grouping is specific to this full page (the + embed shows a flat list without topic headings). */ .faq-topic { - margin-bottom: 2rem; + margin-bottom: var(--space-5); } .faq-topic h2 { - margin-bottom: 0.5rem; -} - -.faq-item { - border-bottom: 1px solid #eee; - padding: 0.5rem 0; -} - -.faq-item summary { - cursor: pointer; - font-weight: 600; -} - -.faq-answer { - padding: 0.5rem 0 0.25rem; - color: #333; + margin-bottom: var(--space-3); } diff --git a/Elternbeirat.Web/Features/Posts/PostList.razor.css b/Elternbeirat.Web/Features/Posts/PostList.razor.css index ac756fa..88fbef8 100644 --- a/Elternbeirat.Web/Features/Posts/PostList.razor.css +++ b/Elternbeirat.Web/Features/Posts/PostList.razor.css @@ -1,20 +1,2 @@ -.post-list { - list-style: none; - padding: 0; -} - -.post-list li { - padding: 0.75rem 0; - border-bottom: 1px solid #eee; -} - -.post-list a { - font-size: 1.1rem; - text-decoration: none; -} - -.post-list time { - display: block; - color: #777; - font-size: 0.85rem; -} +/* The .post-list card styles are shared with the home-page embed and live in the + global app.css. This page needs no extra styling of its own. */ diff --git a/Elternbeirat.Web/wwwroot/app.css b/Elternbeirat.Web/wwwroot/app.css index e49babf..ac95a71 100644 --- a/Elternbeirat.Web/wwwroot/app.css +++ b/Elternbeirat.Web/wwwroot/app.css @@ -1,27 +1,313 @@ +/* Design tokens: one place for colours, spacing, radius, shadow and type. Every + component pulls from these variables (var(--...)), so the whole site shares one + look and a change here ripples everywhere. Warm-friendly palette: the brand blue + plus a warm accent. No external anything -- just CSS custom properties. */ +:root { + /* Brand blue and two derived shades (darker for hover, lighter for tints). */ + --color-brand: #1f3a5f; + --color-brand-dark: #16293f; + --color-brand-tint: #eef2f7; + + /* Warm accent for highlights (active nav, event dates, call-outs). */ + --color-accent: #e8a13a; + --color-accent-dark: #c9821c; + + /* Text and surfaces. */ + --color-text: #222; + --color-text-soft: #555; + --color-bg: #fff; /* cards / content surface */ + --color-page: #f4f1ea; /* soft warm page background behind the content */ + --color-surface: #fafafa; + --color-border: #e0e0e0; + + /* Spacing scale -- use these instead of ad-hoc rem values so gaps stay even. */ + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 1rem; + --space-4: 1.5rem; + --space-5: 2rem; + --space-6: 3rem; + + /* Rounded corners and a soft shadow for cards, matching the friendly tone. */ + --radius: 12px; + --radius-sm: 6px; + --shadow: 0 1px 3px rgba(31, 58, 95, 0.08), 0 4px 12px rgba(31, 58, 95, 0.06); + --shadow-hover: 0 2px 6px rgba(31, 58, 95, 0.12), 0 8px 20px rgba(31, 58, 95, 0.1); + + /* One transition speed for hovers/focus across the site. */ + --transition: 0.15s ease; + + /* Reading width, so long text lines never get uncomfortably wide. */ + --content-width: 60rem; +} + /* Base styles. Self-hosted system font stack — no external fonts, for privacy. */ html { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; - line-height: 1.6; - color: #222; + line-height: 1.65; + color: var(--color-text); + /* Smooth-scroll for in-page anchors, with room so headings clear the sticky + header instead of hiding under it. */ + scroll-padding-top: 5rem; } body { margin: 0; + /* A soft tinted page background so white cards/content lift off it. */ + background: var(--color-page); + color: var(--color-text); } a { - color: #1f3a5f; + color: var(--color-brand); + text-underline-offset: 2px; + transition: color var(--transition); } -h1, h2, h3 { +a:hover { + color: var(--color-brand-dark); +} + +/* Headings: clear hierarchy and a touch more air above them than below, so + sections read as groups. */ +h1, h2, h3, h4 { line-height: 1.25; - color: #1f3a5f; + color: var(--color-brand); + margin: var(--space-5) 0 var(--space-3); +} + +h1 { + font-size: 2rem; + margin-top: 0; /* the first heading on a page needs no gap above */ +} + +h2 { + font-size: 1.5rem; +} + +h3 { + font-size: 1.2rem; +} + +/* Comfortable paragraph rhythm and a capped line length for readability. */ +p { + margin: 0 0 var(--space-3); + max-width: 42rem; } h1:focus { outline: none; } +/* Header navigation links. These live here (global), not in MainLayout.razor.css: + NavLink renders plain elements without a scoped-CSS attribute, so a scoped + ".main-nav a" rule would not match them -- the links would fall back to the + global link colour (dark blue) and become unreadable on the blue header bar. */ +.main-nav a { + color: rgba(255, 255, 255, 0.85); + text-decoration: none; + padding: var(--space-1) 0; + border-bottom: 2px solid transparent; + transition: color var(--transition), border-color var(--transition); +} + +.main-nav a:hover { + color: #fff; +} + +/* NavLink adds .active to the current route's link; a warm accent underline marks + where the visitor is on the blue bar. */ +.main-nav a.active { + color: #fff; + border-bottom-color: var(--color-accent); +} + +/* Mobile: stacked links inside the collapsed menu get row separators. Same global + placement, same NavLink reason as above. Scoped to the narrow layout via the + media query so it does not affect the desktop row. */ +@media (max-width: 40rem) { + .main-nav a { + padding: 0.6rem 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); + } + + .main-nav a.active { + border-bottom-color: rgba(255, 255, 255, 0.15); + } +} + +/* --- 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. */ + +.post-list, +.event-list { + list-style: none; + padding: 0; + margin: 0; + display: grid; + gap: var(--space-3); +} + +.post-list li, +.event-list li { + background: var(--color-bg); + border-radius: var(--radius); + box-shadow: var(--shadow); + padding: var(--space-3) var(--space-4); + transition: box-shadow var(--transition), transform var(--transition); +} + +.post-list li:hover, +.event-list li:hover { + box-shadow: var(--shadow-hover); + transform: translateY(-2px); +} + +/* Posts */ +.post-list a { + font-size: 1.15rem; + font-weight: 600; + text-decoration: none; +} + +.post-list time { + display: block; + margin-top: var(--space-1); + color: var(--color-text-soft); + font-size: 0.85rem; +} + +/* 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; +} + +.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); +} + +.event-location { + 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 { + transform: none; + 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); + border-radius: var(--radius); + box-shadow: var(--shadow); + padding: var(--space-3) var(--space-4); + margin-bottom: var(--space-3); + transition: box-shadow var(--transition); +} + +.faq-item:hover { + box-shadow: var(--shadow-hover); +} + +.faq-item summary { + cursor: pointer; + font-weight: 600; + color: var(--color-brand); + list-style: none; + display: flex; + align-items: baseline; + gap: var(--space-2); +} + +.faq-item summary::-webkit-details-marker { + display: none; +} + +.faq-item summary::before { + content: "+"; + color: var(--color-accent-dark); + font-weight: 700; + font-size: 1.2rem; + line-height: 1; +} + +.faq-item[open] summary::before { + content: "–"; +} + +.faq-answer { + 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); +} + +.embed-more a span { + transition: transform var(--transition); +} + +.embed-more a:hover span { + transform: translateX(3px); +} + .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } -- 2.54.0 From d7e708a7175303901d5fb726bb84ef7958d3babc Mon Sep 17 00:00:00 2001 From: tleininger Date: Wed, 23 Sep 2026 21:05:52 +0200 Subject: [PATCH 3/3] Follow the OS dark mode with a softer, readable palette --- .run/DevEnvironment.run.xml | 2 +- .../Components/Layout/MainLayout.razor.css | 5 +- Elternbeirat.Web/Features/Home/Home.razor.css | 4 +- .../Features/Posts/PostDetail.razor.css | 2 +- Elternbeirat.Web/wwwroot/app.css | 49 ++++++++++++++++++- 5 files changed, 56 insertions(+), 6 deletions(-) diff --git a/.run/DevEnvironment.run.xml b/.run/DevEnvironment.run.xml index 8f98fd7..9cc274a 100644 --- a/.run/DevEnvironment.run.xml +++ b/.run/DevEnvironment.run.xml @@ -25,7 +25,7 @@