From e153830e318d09405051d4bbf6678e73fe183831 Mon Sep 17 00:00:00 2001 From: Eric Bouchut Date: Tue, 28 Jul 2026 16:51:38 +0200 Subject: [PATCH 1/2] feat(frontend): Add an inline SVG brand mark to the header The brand was text only. The header now carries an original geometric mark that reads as both an open book and code: two chevrons as the pages, a short center stroke as the spine. The mark is inline SVG rather than an img so stroke=currentColor can inherit the primary token and follow both themes automatically, including any future contrast retuning; an SVG referenced through img cannot see CSS custom properties. It stays aria-hidden with focusable false, so the visible text keeps being the accessible name of the brand link (RGAA 1.1). The brand anchor becomes an inline flex row to align mark and wordmark on their vertical centers. Refs #120 --- src/main/resources/static/css/base.css | 9 +++++++++ src/main/resources/templates/fragments/layout.html | 12 +++++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/main/resources/static/css/base.css b/src/main/resources/static/css/base.css index 4e016a5..d233f1b 100644 --- a/src/main/resources/static/css/base.css +++ b/src/main/resources/static/css/base.css @@ -160,6 +160,8 @@ main:focus { } .site-header__brand { + display: inline-flex; + align-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-lg); @@ -167,6 +169,13 @@ main:focus { text-decoration: none; } +.site-header__logo { + width: 1.35em; + height: 1.35em; + margin-right: var(--space-2); + color: var(--color-primary); +} + .site-header__brand-mark { color: var(--color-primary); } diff --git a/src/main/resources/templates/fragments/layout.html b/src/main/resources/templates/fragments/layout.html index 56af4b5..34b463b 100644 --- a/src/main/resources/templates/fragments/layout.html +++ b/src/main/resources/templates/fragments/layout.html @@ -27,7 +27,17 @@
- learn-dev + + learn-dev