From cd02f43e82fa8012aa7446839259542ca863313c Mon Sep 17 00:00:00 2001
From: kbenestad <kristian@benestad.net>
Date: Tue, 19 May 2026 13:28:51 +0700
Subject: [PATCH] Fix category font not reverting when switching to a no-font
 category (#23)

* Fix category picker and hamburger using page colours instead of nav colours

Both elements render against --bg-nav but were using --font-colour (the page
text colour). Switch to --nav-link-colour / --nav-section-heading-colour /
--nav-link-active-colour so they remain legible when nav-background is set to
a colour that contrasts with the page text colour (e.g. dark blue nav with
white nav-link text).

https://claude.ai/code/session_01MA8V1FvCmxjkCYyTxseaxB

* Fix category font not reverting when switching to a no-font category

maybeLoadCategoryFont applied a font-family to document.body but never
cleared it when switching to a category with no font defined. The inline
style overrides the CSS --font-body variable, so the category font
persisted indefinitely.

Fix: reset document.body.style.fontFamily to '' when the target category
has no font (letting --font-body take effect), and re-apply the family
string when switching back to an already-loaded font category.

https://claude.ai/code/session_01MA8V1FvCmxjkCYyTxseaxB

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 app/index.html | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/index.html b/app/index.html
index ab6d934..3f05de6 100644
--- a/app/index.html
+++ b/app/index.html
@@ -1094,9 +1094,16 @@ body {
 
   async function maybeLoadCategoryFont(code) {
     const cat = categoriesByCode[code];
-    if (!cat || !cat.font || loadedFonts.has(cat.font)) return;
-    showFontLoadingBanner();
+    if (!cat || !cat.font) {
+      document.body.style.fontFamily = '';
+      return;
+    }
     const family = 'mdcms-cat-' + code;
+    if (loadedFonts.has(cat.font)) {
+      document.body.style.fontFamily = `"${family}", ${getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim()}`;
+      return;
+    }
+    showFontLoadingBanner();
     const css = `@font-face { font-family: "${family}"; src: url("assets/fonts/${cat.font}"); }`;
     const style = document.createElement('style');
     style.textContent = css;
@@ -1106,8 +1113,7 @@ body {
       await face.load();
       document.fonts.add(face);
       loadedFonts.add(cat.font);
-      // Apply font to body for this session
-      document.body.style.fontFamily = `"${family}", ${getComputedStyle(document.body).fontFamily}`;
+      document.body.style.fontFamily = `"${family}", ${getComputedStyle(document.documentElement).getPropertyValue('--font-body').trim()}`;
     } catch (e) {
       console.warn('Font load failed:', e);
     }