From ab4a1dd8fce38dc569b97f8b5eea1625423778bb Mon Sep 17 00:00:00 2001 From: tleininger Date: Fri, 25 Sep 2026 16:26:13 +0200 Subject: [PATCH] Apply IGMH brand colours, shrink subheadings, show page title as h1 - app.css: adopt the school's own colours (IGMH blue for header/links/headings, IGMH green as accent), light/dark; cooler near-neutral page bg - app.css: reduce h2/h3 and give h4 its own size for a calmer heading scale - ContentPage: render the page title as a visible

, not only Co-Authored-By: Claude Opus 4.8 --- .../Features/Pages/ContentPage.razor | 1 + Elternbeirat.Web/wwwroot/app.css | 63 ++++++++++++------- 2 files changed, 40 insertions(+), 24 deletions(-) diff --git a/Elternbeirat.Web/Features/Pages/ContentPage.razor b/Elternbeirat.Web/Features/Pages/ContentPage.razor index 022b071..2bdae4f 100644 --- a/Elternbeirat.Web/Features/Pages/ContentPage.razor +++ b/Elternbeirat.Web/Features/Pages/ContentPage.razor @@ -8,6 +8,7 @@ else if (_page is not null) { @_page.Title +

@_page.Title

@Body
} diff --git a/Elternbeirat.Web/wwwroot/app.css b/Elternbeirat.Web/wwwroot/app.css index 93eb5f7..fa622ef 100644 --- a/Elternbeirat.Web/wwwroot/app.css +++ b/Elternbeirat.Web/wwwroot/app.css @@ -1,30 +1,39 @@ /* 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. */ + look and a change here ripples everywhere. Palette follows the school's own + colours (IGMH): its blue for the header, links and headings, its green as the + 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; + /* Brand blue and two derived shades (darker for hover, lighter for tints). This + is the IGMH blue (#328fc6) darkened so it stays legible as link/heading text + on white; the header keeps the brighter original via --color-header below. */ + --color-brand: #2b6f9c; + --color-brand-dark: #1f5477; + --color-brand-tint: #eaf3f9; - /* The header bar's background. Its own token (not --color-brand) so it stays a - deep blue in dark mode, where --color-brand is lightened for text/links. */ - --color-header: #1f3a5f; + /* The header bar's background: the IGMH blue at full strength. Its own token + (not --color-brand) both because it only ever carries white text (so it needs + no darkening) and because it must stay a deep blue in dark mode, where + --color-brand is lightened for text/links. */ + --color-header: #328fc6; - /* Warm accent for highlights (active nav, event dates, call-outs). */ - --color-accent: #e8a13a; - --color-accent-dark: #c9821c; + /* Accent for highlights (active nav, event dates, call-outs): the IGMH green. + The -dark shade is darkened enough to keep small text and the FAQ marker + legible on a white card. */ + --color-accent: #6db863; + --color-accent-dark: #4f9247; /* Headings. Its own token (not --color-brand) so headings and links can differ: in dark mode headings become a soft white while links keep the brand blue. */ - --color-heading: #1f3a5f; + --color-heading: #2b6f9c; /* 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-page: #f4f6f4; /* near-neutral page background with a faint cool + tint, so white cards lift off it without the old + warm beige clashing with the cool blue */ --color-surface: #fafafa; --color-border: #e0e0e0; @@ -58,16 +67,16 @@ light shadows are invisible on a dark background. The header keeps its deep blue. */ @media (prefers-color-scheme: dark) { :root { - --color-brand: #7fb0e6; /* headings/links need to stay bright enough - to read on the dark page background, not - just on the lighter card surface */ - --color-brand-dark: #a3c8f0; /* hover goes lighter, not darker, on dark */ - --color-brand-tint: #232a35; + --color-brand: #7cc0ec; /* the IGMH blue lightened: headings/links need + to stay bright enough to read on the dark + page background, not just on the card */ + --color-brand-dark: #a3d5f4; /* hover goes lighter, not darker, on dark */ + --color-brand-tint: #223038; - --color-header: #1a2a3f; /* a hair deeper, to sit calmly on dark */ + --color-header: #266f9c; /* the IGMH blue eased down, to sit calmly on dark */ - --color-accent: #f0b45c; - --color-accent-dark: #f0b45c; /* no darkening needed on a dark surface */ + --color-accent: #86c97d; /* the IGMH green nudged brighter for dark */ + --color-accent-dark: #86c97d; /* no darkening needed on a dark surface */ --color-heading: #c9ced6; /* soft white, kept a step brighter than the body text so headings still lead the page */ @@ -129,11 +138,17 @@ h1 { } h2 { - font-size: 1.3rem; + font-size: 1.2rem; } h3 { - font-size: 1.15rem; + font-size: 1.05rem; +} + +/* h4 gets its own size so it stays a step below h3 instead of falling back to the + browser default, which can render as large as (or larger than) a small h3. */ +h4 { + font-size: 0.95rem; } /* Comfortable paragraph rhythm and a capped line length for readability. */ -- 2.54.0