From 5acb05d7cfc633e606e29c059e1bc96ef1c5d5a0 Mon Sep 17 00:00:00 2001 From: cole-maxwell1 Date: Tue, 8 Sep 2026 11:24:47 -0500 Subject: [PATCH] fix(theme): correct typography and logo accessibility Declare the Alro heading font with its intended 700 weight and explicitly apply that weight to branded headings. Preserve the homepage logo image in the accessibility tree while rendering the theme-specific visual artwork. Update repository guidance to document the self-contained theme architecture, Gitea 1.27.3 synchronization requirements, production asset hashing, and the complete six-theme verification matrix. --- AGENTS.md | 6 +++--- README.md | 19 +++++++++++-------- public/assets/css/branding.css | 11 ++++++++++- .../assets/css/theme-codecraftsmen-dark.css | 3 ++- .../assets/css/theme-codecraftsmen-light.css | 3 ++- 5 files changed, 28 insertions(+), 14 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index aa30027..11e20d9 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -3,12 +3,12 @@ ## Scope - This repository is a static overlay copied into Gitea's custom path; it has no local build, lint, or automated test toolchain. -- Target Gitea 1.27.x. Treat upstream theme variables and template structure as version-coupled behavior. +- Target Gitea 1.27.x; the current files are synchronized with Gitea 1.27.3. Treat upstream theme variables and template structure as version-coupled behavior. ## Themes -- `theme-codecraftsmen-light.css` and `theme-codecraftsmen-dark.css` intentionally import Gitea-provided `theme-gitea-*.css` files that are absent from this repository. -- Keep custom themes as overrides of upstream themes so newly added Gitea defaults continue to apply. +- `theme-codecraftsmen-light.css` and `theme-codecraftsmen-dark.css` are self-contained copies of the Gitea 1.27 theme variable sets with CodeCraftsmen overrides. +- Keep their variable names synchronized with the built-in themes from the exact target release. Production Gitea theme assets are hashed, so custom themes must not import built-in theme filenames directly. - `theme-codecraftsmen-auto.css` selects the custom light and dark themes with `prefers-color-scheme`; verify changes in all three theme modes. - Keep font and image URLs relative to `public/assets/css/` (`../fonts/...` and `../img/...`) because Gitea serves these files below `/assets/`. - Preserve `gitea-theme-meta-info`, including both display name and color scheme, so Gitea can discover each theme correctly. diff --git a/README.md b/README.md index 9ea1773..a381f79 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,11 @@ Custom themes and branding for the CodeCraftsmen Gitea instance. ## Compatibility -The theme supports Gitea 1.27.x. Each custom theme imports the matching built-in -Gitea theme and overrides only the CodeCraftsmen palette, typography, and logo. -This allows new upstream theme variables to retain their Gitea defaults. +The theme supports Gitea 1.27.x and is currently synchronized with Gitea 1.27.3. +The light and dark themes are self-contained copies of the matching built-in +theme variable sets with CodeCraftsmen palette and typography overrides. The +auto theme conditionally imports those two local theme files according to the +user's preferred color scheme. The repository intentionally avoids overriding Gitea's internal templates. The navbar logo is replaced through theme CSS so Gitea template changes are applied @@ -29,11 +31,12 @@ repository being available from the Gitea instance. ## Upgrade Process -1. Update the imported Gitea version locally. -2. Compare the custom palette with the built-in light and dark themes for that - exact release. -3. Test anonymous, authenticated, and administrator pages with light, dark, and - auto themes. +1. Compare the custom light and dark variable sets with the built-in themes from + the exact target release. +2. Add, remove, or rename variables to match that release while preserving the + CodeCraftsmen palette values. +3. Test anonymous, authenticated, and administrator pages with all six themes, + including both system color schemes for the two auto themes. 4. Synchronize the reviewed files into the homelab Gitea role. ## Assets diff --git a/public/assets/css/branding.css b/public/assets/css/branding.css index 0027cb6..7004631 100644 --- a/public/assets/css/branding.css +++ b/public/assets/css/branding.css @@ -39,7 +39,16 @@ html:is( ) .page-content.home img.logo { - display: none; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + white-space: nowrap; + border: 0; } html:is( diff --git a/public/assets/css/theme-codecraftsmen-dark.css b/public/assets/css/theme-codecraftsmen-dark.css index a221870..6197574 100644 --- a/public/assets/css/theme-codecraftsmen-dark.css +++ b/public/assets/css/theme-codecraftsmen-dark.css @@ -13,7 +13,7 @@ gitea-theme-meta-info { @font-face { font-family: "alro"; src: url("../fonts/alro-bold-700.woff2") format("woff2"); - font-weight: 400; + font-weight: 700; font-style: normal; font-display: swap; } @@ -392,6 +392,7 @@ h6, .page-title, .repository .ui.header { font-family: var(--cc-font-heading); + font-weight: 700; letter-spacing: 0.02em; } diff --git a/public/assets/css/theme-codecraftsmen-light.css b/public/assets/css/theme-codecraftsmen-light.css index f9b3d33..a12959b 100644 --- a/public/assets/css/theme-codecraftsmen-light.css +++ b/public/assets/css/theme-codecraftsmen-light.css @@ -13,7 +13,7 @@ gitea-theme-meta-info { @font-face { font-family: "alro"; src: url("../fonts/alro-bold-700.woff2") format("woff2"); - font-weight: 400; + font-weight: 700; font-style: normal; font-display: swap; } @@ -366,6 +366,7 @@ h6, .page-title, .repository .ui.header { font-family: var(--cc-font-heading); + font-weight: 700; letter-spacing: 0.02em; }