divineforge-com · divineforge · Jun 12, 2026
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -0,0 +1 @@
+## 2024-06-12 - [Focus-Within for Navigation Menus]\n**Learning:** Dropdowns that rely only on `:hover` for visibility cause accessibility issues for keyboard users. Adding `:focus-within` alongside `:hover` ensures that tabbing through the navigation menu properly expands the dropdown menu and makes its links accessible.\n**Action:** Always include `:focus-within` on the parent container when building hover-based dropdowns to maintain keyboard accessibility.
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -33,7 +33,8 @@ html::before {
   animation: gzen-breathing-bg 22s ease-in-out infinite alternate;
 }
 
-body, .prose {
+body,
+.prose {
   font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
   line-height: 1.8;
 }
@@ -62,7 +63,9 @@ body {
 }
 
 /* Long-form article content uses serif for readability */
-.prose h1, .prose h2, .prose h3 {
+.prose h1,
+.prose h2,
+.prose h3 {
   font-family: "Noto Serif SC", "Noto Sans SC", serif;
   font-weight: 500;
 }
@@ -171,7 +174,9 @@ body {
   line-height: 1.2;
   padding: 0.45rem 0.65rem;
   text-decoration: none;
-  transition: background-color 160ms ease, color 160ms ease;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease;
 }
 
 .gzen-nav a:hover,
@@ -243,7 +248,10 @@ body {
   line-height: 1;
   padding: 0.82rem 1.1rem;
   text-decoration: none;
-  transition: transform 160ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 160ms ease, box-shadow 160ms ease;
+  transition:
+    transform 160ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    background-color 160ms ease,
+    box-shadow 160ms ease;
 }
 
 .gzen-primary-link:hover {
@@ -276,7 +284,10 @@ body {
   box-shadow: 0 2px 8px rgba(74, 44, 26, 0.02);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
-  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
+  transition:
+    transform 180ms ease,
+    box-shadow 180ms ease,
+    background-color 180ms ease;
 }
 
 .gzen-hero-aside span:hover {
@@ -456,7 +467,9 @@ header .logo {
   align-items: center;
   gap: 0.2rem;
   font-family: inherit;
-  transition: background-color 160ms ease, color 160ms ease;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease;
 }
 
 .gzen-nav-dropdown:hover .gzen-nav-dropdown-trigger,
@@ -471,7 +484,8 @@ header .logo {
   transition: transform 180ms ease;
 }
 
-.gzen-nav-dropdown:hover .gzen-dropdown-arrow {
+.gzen-nav-dropdown:hover .gzen-dropdown-arrow,
+.gzen-nav-dropdown:focus-within .gzen-dropdown-arrow {
   transform: rotate(180deg);
 }
 
@@ -492,11 +506,14 @@ header .logo {
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
-  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
+  transition:
+    opacity 180ms ease,
+    transform 180ms ease,
+    visibility 180ms ease;
 }
 
 .gzen-nav-dropdown:hover .gzen-nav-dropdown-menu,
-.gzen-nav-dropdown-menu:focus-within {
+.gzen-nav-dropdown:focus-within .gzen-nav-dropdown-menu {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
@@ -551,7 +568,11 @@ header .logo {
   color: inherit;
   position: relative;
   overflow: hidden;
-  transition: transform 180ms cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
+  transition:
+    transform 180ms cubic-bezier(0.165, 0.84, 0.44, 1),
+    box-shadow 180ms ease,
+    background-color 180ms ease,
+    border-color 180ms ease;
 }
 
 .gzen-card::before {
@@ -650,7 +671,8 @@ header .logo {
     padding: 0.5rem 0.75rem;
   }
 
-  .gzen-nav-dropdown:hover .gzen-dropdown-arrow {
+  .gzen-nav-dropdown:hover .gzen-dropdown-arrow,
+  .gzen-nav-dropdown:focus-within .gzen-dropdown-arrow {
     transform: none;
   }
 
@@ -669,7 +691,7 @@ header .logo {
   }
 
   .gzen-nav-dropdown:hover .gzen-nav-dropdown-menu,
-  .gzen-nav-dropdown-menu:focus-within {
+  .gzen-nav-dropdown:focus-within .gzen-nav-dropdown-menu {
     display: flex;
     opacity: 1;
     visibility: visible;
@@ -760,7 +782,7 @@ header .logo {
     grid-template-columns: 1fr;
     gap: 2.5rem;
   }
-  
+
   .gzen-footer-links {
     justify-content: space-between;
   }
@@ -771,12 +793,10 @@ header .logo {
     flex-direction: column;
     gap: 1.8rem;
   }
-  
+
   .gzen-footer-bottom {
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
   }
 }
-
-
diff --git a/assets/css/schemes/gzen.css b/assets/css/schemes/gzen.css
@@ -10,52 +10,52 @@
 :root,
 html.light {
   /* Primary accent: warm saffron #d97845 */
-  --color-primary-50:  255 248 245;
+  --color-primary-50: 255 248 245;
   --color-primary-100: 255 237 220;
   --color-primary-200: 250 210 174;
   --color-primary-300: 240 176 124;
-  --color-primary-400: 226 139  78;
-  --color-primary-500: 217 120  69;
-  --color-primary-600: 188  91  47;
-  --color-primary-700: 148  68  36;
-  --color-primary-800: 111  49  29;
-  --color-primary-900:  82  36  24;
-  --color-primary-950:  52  23  15;
+  --color-primary-400: 226 139 78;
+  --color-primary-500: 217 120 69;
+  --color-primary-600: 188 91 47;
+  --color-primary-700: 148 68 36;
+  --color-primary-800: 111 49 29;
+  --color-primary-900: 82 36 24;
+  --color-primary-950: 52 23 15;
 
   /* Neutral scale: warm brown → cream */
-  --color-neutral-50:  255 250 244;
+  --color-neutral-50: 255 250 244;
   --color-neutral-100: 250 241 229;
   --color-neutral-200: 235 218 198;
   --color-neutral-300: 210 184 154;
-  --color-neutral-400: 168 132  96;
-  --color-neutral-500: 126  92  62;
-  --color-neutral-600:  98  69  45;
-  --color-neutral-700:  72  49  32;
-  --color-neutral-800:  50  34  24;
-  --color-neutral-900:  36  25  18;
-  --color-neutral-950:  24  16  11;
+  --color-neutral-400: 168 132 96;
+  --color-neutral-500: 126 92 62;
+  --color-neutral-600: 98 69 45;
+  --color-neutral-700: 72 49 32;
+  --color-neutral-800: 50 34 24;
+  --color-neutral-900: 36 25 18;
+  --color-neutral-950: 24 16 11;
 }
 
 /* Dark mode: keep warm tones even in dark (graceful fallback) */
 html.dark {
-  --color-primary-50:   74  44  26;
-  --color-primary-100:  98  60  34;
-  --color-primary-200: 130  82  50;
-  --color-primary-300: 160 106  68;
-  --color-primary-400: 196 128  88;
+  --color-primary-50: 74 44 26;
+  --color-primary-100: 98 60 34;
+  --color-primary-200: 130 82 50;
+  --color-primary-300: 160 106 68;
+  --color-primary-400: 196 128 88;
   --color-primary-500: 232 149 109;
   --color-primary-600: 240 172 138;
   --color-primary-700: 246 198 172;
   --color-primary-800: 251 224 208;
   --color-primary-900: 253 240 232;
   --color-primary-950: 255 248 245;
 
-  --color-neutral-50:   28  16   8;
-  --color-neutral-100:  48  30  16;
-  --color-neutral-200:  74  48  28;
-  --color-neutral-300: 100  70  44;
-  --color-neutral-400: 130  92  62;
-  --color-neutral-500: 160 116  84;
+  --color-neutral-50: 28 16 8;
+  --color-neutral-100: 48 30 16;
+  --color-neutral-200: 74 48 28;
+  --color-neutral-300: 100 70 44;
+  --color-neutral-400: 130 92 62;
+  --color-neutral-500: 160 116 84;
   --color-neutral-600: 190 145 108;
   --color-neutral-700: 210 175 145;
   --color-neutral-800: 230 208 186;

diff --git a/content/en/yijing/observing-yin-yang.md b/content/en/yijing/observing-yin-yang.md
@@ -19,6 +19,7 @@ This exhausting loop of "too much or too little" leaves us drained. We try to co
 ## Principle
 
 The core theory of the I Ching is the unity and cyclical transition of **Yin and Yang**. Yin and Yang are not static symbols; they represent two fundamental states of life energy (Qi/Ki):
+
 - **Yang**: Represents active, bright, movement, expression, creation, and expenditure.
 - **Yin**: Represents receptive, dark, rest, listening, holding, and accumulation.
 

diff --git a/content/ja/yijing/observing-yin-yang.md b/content/ja/yijing/observing-yin-yang.md
@@ -19,6 +19,7 @@ categories: ["易経"]
 ## 原則
 
 『易経』の核心的な理論は、**陰陽**の対立と統一、循環する消長（満ち欠け）です。陰と陽は静止した記号ではなく、生命エネルギー（気）の二つの基本状態を表しています：
+
 - **陽（Yáng）**：能動、光、行動、表現、創造、そしてエネルギーの消費。
 - **陰（Yīn）**：受容、闇、休整、傾聴、維持、そしてエネルギーの蓄積。
 

diff --git a/content/zh/yijing/observing-yin-yang.md b/content/zh/yijing/observing-yin-yang.md
@@ -19,6 +19,7 @@ categories: ["易经"]
 ## 原则
 
 《易经》的核心理论即是**阴阳**的对立统一与循环消长。阴与阳不是静止的符号，而是生命能量（气）的两种基本状态：
+
 - **阳（Yáng）**：代表主动、光明、行动、表达、创造与消耗。
 - **阴（Yīn）**：代表被动、黑暗、休整、倾听、承载与蓄积。
 

diff --git a/layouts/partials/extend-head.html b/layouts/partials/extend-head.html
@@ -1,4 +1,6 @@
 {{/* CJK typography — loaded once, cached */}}
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;500&display=swap">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;500&display=swap" />
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -8,15 +8,32 @@
           <small>{{ .Site.Language.Params.subtitle | default "善聚慧生" }}</small>
         </span>
       </div>
-      <p class="gzen-footer-tagline">{{ .Site.Language.Params.description | default .Site.Params.brandTagline }}</p>
+      <p class="gzen-footer-tagline">
+        {{ .Site.Language.Params.description | default .Site.Params.brandTagline }}
+      </p>
     </div>
 
     <div class="gzen-footer-links">
       <div class="gzen-footer-col">
         <h4>{{ i18n "nav_ecosystem" | default "生态" }}</h4>
-        <a href="{{ .Site.Params.ecosystem.ki | default "https://ki.gzen.io" }}" target="_blank" rel="noopener">ki.gzen.io</a>
-        <a href="{{ .Site.Params.ecosystem.learn | default "https://learn.gzen.io" }}" target="_blank" rel="noopener">learn.gzen.io</a>
-        <a href="{{ .Site.Params.ecosystem.invest | default "https://invest.gzen.io" }}" target="_blank" rel="noopener">invest.gzen.io</a>
+        <a
+          href="{{ .Site.Params.ecosystem.ki | default "https://ki.gzen.io" }}"
+          target="_blank"
+          rel="noopener"
+          >ki.gzen.io</a
+        >
+        <a
+          href="{{ .Site.Params.ecosystem.learn | default "https://learn.gzen.io" }}"
+          target="_blank"
+          rel="noopener"
+          >learn.gzen.io</a
+        >
+        <a
+          href="{{ .Site.Params.ecosystem.invest | default "https://invest.gzen.io" }}"
+          target="_blank"
+          rel="noopener"
+          >invest.gzen.io</a
+        >
       </div>
       <div class="gzen-footer-col">
         <h4>{{ i18n "nav_origin" | default "起源" }}</h4>
@@ -28,7 +45,8 @@ <h4>{{ i18n "nav_origin" | default "起源" }}</h4>
 
   <div class="gzen-footer-bottom">
     <p class="gzen-copyright">
-      &copy; {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved. Spawned from divineforge.com.
+      &copy; {{ now.Format "2006" }} {{ .Site.Title }}. All rights reserved. Spawned from
+      divineforge.com.
     </p>
   </div>
 
@@ -37,8 +55,8 @@ <h4>{{ i18n "nav_origin" | default "起源" }}</h4>
       mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
         margin: 24,
         background: "rgba(0,0,0,0.5)",
-        scrollOffset: 0,
-      });
+        scrollOffset: 0
+      })
     </script>
   {{ end }}
 

diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
@@ -6,6 +6,7 @@
   (dict "key" "library" "path" "library")
 }}
 
+
 <header class="gzen-header">
   <a class="gzen-brand" href="{{ "" | relLangURL }}" aria-label="{{ .Site.Title }}">
     <span class="gzen-brand-mark" aria-hidden="true">善</span>
@@ -24,23 +25,34 @@
         {{ i18n "nav_ecosystem" | default "生态" }} <span class="gzen-dropdown-arrow">▾</span>
       </button>
       <div class="gzen-nav-dropdown-menu" role="menu">
-        <a href="{{ .Site.Params.ecosystem.ki | default "https://ki.gzen.io" }}" target="_blank" rel="noopener" role="menuitem">
+        <a
+          href="{{ .Site.Params.ecosystem.ki | default "https://ki.gzen.io" }}"
+          target="_blank"
+          rel="noopener"
+          role="menuitem">
           <strong>ki.gzen.io</strong>
           <span>{{ i18n "ecosystem_ki_title" | default "机与器" }}</span>
         </a>
-        <a href="{{ .Site.Params.ecosystem.learn | default "https://learn.gzen.io" }}" target="_blank" rel="noopener" role="menuitem">
+        <a
+          href="{{ .Site.Params.ecosystem.learn | default "https://learn.gzen.io" }}"
+          target="_blank"
+          rel="noopener"
+          role="menuitem">
           <strong>learn.gzen.io</strong>
           <span>{{ i18n "ecosystem_learn_title" | default "知与学" }}</span>
         </a>
-        <a href="{{ .Site.Params.ecosystem.invest | default "https://invest.gzen.io" }}" target="_blank" rel="noopener" role="menuitem">
+        <a
+          href="{{ .Site.Params.ecosystem.invest | default "https://invest.gzen.io" }}"
+          target="_blank"
+          rel="noopener"
+          role="menuitem">
           <strong>invest.gzen.io</strong>
           <span>{{ i18n "ecosystem_invest_title" | default "资与财" }}</span>
         </a>
       </div>
     </div>
   </nav>
 
-
   {{ if .IsTranslated }}
     <nav class="gzen-languages" aria-label="{{ i18n "read_in" | default "Languages" }}">
       {{ range sort .AllTranslations "Language.Weight" }}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		## 2024-06-12 - [Focus-Within for Navigation Menus]\nLearning: Dropdowns that rely only on `:hover` for visibility cause accessibility issues for keyboard users. Adding `:focus-within` alongside `:hover` ensures that tabbing through the navigation menu properly expands the dropdown menu and makes its links accessible.\nAction: Always include `:focus-within` on the parent container when building hover-based dropdowns to maintain keyboard accessibility.