feat: add a11y panel

assets/css/compiled/main.css

@@ -174,6 +174,69 @@ body.zen-mode-enable {
 .chroma .gl {
   text-decoration-line: underline;
 }
+.a11y-panel-enter-active {
+  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.a11y-panel-leave-active {
+  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.ios-toggle {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  background: #e5e5e5;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  pointer-events: auto;
+}
+.ios-toggle input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.ios-toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  z-index: 0;
+}
+.ios-toggle input:checked + .toggle-track::after {
+  transform: translateX(18px);
+}
+.ios-toggle input:checked + .toggle-track {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle input:checked ~ .ios-toggle-ball {
+  transform: translateX(18px);
+}
+.ios-toggle.is-checked {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle:has(input:checked) {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle:has(input:checked)::after {
+  transform: translateX(18px);
+}
+.dark .ios-toggle {
+  background: #404040;
+}
+.dark .ios-toggle::after {
+  background: #f5f5f5;
+}
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -428,6 +491,9 @@ body.zen-mode-enable {
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
   .top-20 {
     top: calc(var(--spacing) * 20);
   }
@@ -446,6 +512,9 @@ body.zen-mode-enable {
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
   .left-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
     left: calc(max(-50vw, -800px) + 50%);
   }
@@ -1245,6 +1314,9 @@ body.zen-mode-enable {
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -1320,6 +1392,9 @@ body.zen-mode-enable {
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -1335,6 +1410,9 @@ body.zen-mode-enable {
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
   .w-\[15\%\] {
     width: 15%;
   }
@@ -1434,6 +1512,10 @@ body.zen-mode-enable {
   .border-collapse {
     border-collapse: collapse;
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-full {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1442,6 +1524,10 @@ body.zen-mode-enable {
     --tw-translate-x: 100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-8 {
     --tw-translate-y: calc(var(--spacing) * -8);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1533,6 +1619,13 @@ body.zen-mode-enable {
       margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-10 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1755,6 +1848,9 @@ body.zen-mode-enable {
   .bg-neutral {
     background-color: rgba(var(--color-neutral), 1);
   }
+  .bg-neutral-50 {
+    background-color: rgba(var(--color-neutral-50), 1);
+  }
   .bg-neutral-100 {
     background-color: rgba(var(--color-neutral-100), 1);
   }
@@ -1956,6 +2052,9 @@ body.zen-mode-enable {
   .pr-0 {
     padding-right: calc(var(--spacing) * 0);
   }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
   .pr-\[24px\] {
     padding-right: 24px;
   }
@@ -2563,6 +2662,13 @@ body.zen-mode-enable {
       }
     }
   }
+  .hover\:text-neutral-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: rgba(var(--color-neutral-700), 1);
+      }
+    }
+  }
   .hover\:text-primary-400 {
     &:hover {
       @media (hover: hover) {
@@ -2661,6 +2767,11 @@ body.zen-mode-enable {
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .focus\:border-primary-500 {
+    &:focus {
+      border-color: rgba(var(--color-primary-500), 1);
+    }
+  }
   .focus\:bg-primary-100 {
     &:focus {
       background-color: rgba(var(--color-primary-100), 1);
@@ -2676,6 +2787,11 @@ body.zen-mode-enable {
       opacity: 90%;
     }
   }
+  .focus\:ring-primary-500 {
+    &:focus {
+      --tw-ring-color: rgba(var(--color-primary-500), 1);
+    }
+  }
   .focus\:outline-2 {
     &:focus {
       outline-style: var(--tw-outline-style);
@@ -3513,6 +3629,15 @@ body.zen-mode-enable {
       }
     }
   }
+  .dark\:hover\:text-neutral-200 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: rgba(var(--color-neutral-200), 1);
+        }
+      }
+    }
+  }
   .dark\:hover\:text-neutral-800 {
     &:is(.dark *) {
       &:hover {
@@ -3721,44 +3846,29 @@ a {
 pre {
   text-align: left;
 }
+.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
 .thumbnail {
   min-width: 300px;
   height: 180px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card {
   height: 200px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card_related {
   height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card_term {
   height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-.single_hero_basic {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .single_hero_round {
   max-height: 50vh;
   object-fit: cover;
 }
 .single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
   z-index: -10;
 }
 .hero_gradient {

assets/css/components/a11y.css

@@ -0,0 +1,77 @@
+.a11y-panel-enter-active {
+  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.a11y-panel-leave-active {
+  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.ios-toggle {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  background: #e5e5e5;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  pointer-events: auto;
+}
+
+.ios-toggle input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.ios-toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition:
+    transform 0.3s ease,
+    background-color 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  z-index: 0;
+}
+
+.ios-toggle input:checked + .toggle-track::after {
+  transform: translateX(18px);
+}
+
+.ios-toggle input:checked + .toggle-track {
+  background: rgba(var(--color-primary-500), 1);
+}
+
+.ios-toggle input:checked ~ .ios-toggle-ball {
+  transform: translateX(18px);
+}
+
+.ios-toggle.is-checked {
+  background: rgba(var(--color-primary-500), 1);
+}
+
+.ios-toggle:has(input:checked) {
+  background: rgba(var(--color-primary-500), 1);
+}
+
+.ios-toggle:has(input:checked)::after {
+  transform: translateX(18px);
+}
+
+.dark .ios-toggle {
+  background: #404040;
+}
+
+.dark .ios-toggle::after {
+  background: #f5f5f5;
+}

assets/css/main.css

@@ -2,6 +2,7 @@
 
 @import "./components/zen-mode.css";
 @import "./components/chroma.css";
+@import "./components/a11y.css";
 
 @import "tailwindcss";
 @config "../../tailwind.config.js";

assets/js/background-blur.js

@@ -1,8 +1,20 @@
 (() => {
-  const scripts = document.querySelectorAll('script[data-target-id]');
+  const scripts = document.querySelectorAll("script[data-target-id]");
 
-  const isA11yMode = () => {
+  const getA11ySettings = () => {
-    return localStorage.getItem("a11yMode") === "true";
+    const settings = localStorage.getItem("a11ySettings");
+    return settings
+      ? JSON.parse(settings)
+      : {
+          disableBlur: false,
+          disableImages: false,
+          fontSize: "16px",
+          underlineLinks: false,
+        };
+  };
+
+  const saveA11ySettings = (settings) => {
+    localStorage.setItem("a11ySettings", JSON.stringify(settings));
   };
 
   const getScrollOpacity = (scrollDivisor) => {
@@ -12,9 +24,10 @@
 
   const applyBlurState = (blurElement, scrollDivisor, targetId, imageElement, imageUrl) => {
     if (!blurElement) return;
+    const settings = getA11ySettings();
     const isMenuBlur = targetId === "menu-blur";
 
-    if (isA11yMode()) {
+    if (settings.disableBlur) {
       blurElement.setAttribute("aria-hidden", "true");
       if (!isMenuBlur) {
         blurElement.style.display = "none";
@@ -23,30 +36,139 @@
         blurElement.style.display = "";
         blurElement.style.opacity = getScrollOpacity(scrollDivisor);
       }
-      // Hide image in a11y mode
-      if (imageElement) {
-        imageElement.style.display = "none";
-      }
     } else {
       blurElement.style.display = "";
       blurElement.style.opacity = getScrollOpacity(scrollDivisor);
       blurElement.removeAttribute("aria-hidden");
-      // Show image in normal mode
+    }
+
     if (imageElement) {
+      if (settings.disableImages) {
+        imageElement.style.display = "none";
+      } else {
         imageElement.style.display = "";
-        // Re-apply image source if it was removed
+        if (imageUrl && !imageElement.getAttribute("src")) {
-        if (imageUrl && !imageElement.getAttribute('src')) {
+          imageElement.setAttribute("src", imageUrl);
-          imageElement.setAttribute('src', imageUrl);
         }
       }
     }
   };
 
-  scripts.forEach(script => {
+  const applyFontSize = (fontSizePx) => {
+    document.documentElement.style.fontSize = fontSizePx;
+  };
+
+  const applyUnderlineLinks = (enabled) => {
+    let styleElement = document.getElementById("a11y-underline-links");
+    if (enabled) {
+      if (!styleElement) {
+        styleElement = document.createElement("style");
+        styleElement.id = "a11y-underline-links";
+        styleElement.textContent = "a { text-decoration: underline !important; }";
+        document.head.appendChild(styleElement);
+      }
+    } else {
+      if (styleElement) {
+        styleElement.remove();
+      }
+    }
+  };
+
+  const applyA11ySettings = () => {
+    const settings = getA11ySettings();
+
+    scripts.forEach((script) => {
       const targetId = script.getAttribute("data-target-id");
       const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
       const imageId = script.getAttribute("data-image-id");
-    const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
+      const imageUrl = script.getAttribute("data-image-url");
+
+      const blurElement = document.getElementById(targetId);
+      const imageElement = imageId ? document.getElementById(imageId) : null;
+      applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
+    });
+
+    applyFontSize(settings.fontSize);
+    applyUnderlineLinks(settings.underlineLinks);
+  };
+
+  const updateA11ySetting = (key, value) => {
+    const settings = getA11ySettings();
+    settings[key] = value;
+    saveA11ySettings(settings);
+    applyA11ySettings();
+  };
+
+  const toggleA11yPanel = () => {
+    const panel = document.getElementById("a11y-panel");
+    const overlay = document.getElementById("a11y-overlay");
+    const button = document.getElementById("a11y-toggle");
+
+    if (overlay.classList.contains("hidden")) {
+      overlay.classList.remove("hidden");
+      panel.classList.remove("hidden");
+      button.setAttribute("aria-pressed", "true");
+      button.setAttribute("aria-expanded", "true");
+    } else {
+      overlay.classList.add("hidden");
+      panel.classList.add("hidden");
+      button.setAttribute("aria-pressed", "false");
+      button.setAttribute("aria-expanded", "false");
+    }
+  };
+
+  const initA11yPanel = () => {
+    const settings = getA11ySettings();
+
+    document.getElementById("disable-blur").checked = settings.disableBlur;
+    document.getElementById("disable-images").checked = settings.disableImages;
+
+    const fontSizeSelect = document.getElementById("font-size-select");
+    fontSizeSelect.value = settings.fontSize;
+
+    document.getElementById("underline-links").checked = settings.underlineLinks;
+
+    document.getElementById("disable-blur").addEventListener("change", (e) => {
+      updateA11ySetting("disableBlur", e.target.checked);
+    });
+
+    document.getElementById("disable-images").addEventListener("change", (e) => {
+      updateA11ySetting("disableImages", e.target.checked);
+    });
+
+    document.getElementById("font-size-select").addEventListener("change", (e) => {
+      updateA11ySetting("fontSize", e.target.value);
+    });
+
+    document.getElementById("underline-links").addEventListener("change", (e) => {
+      updateA11ySetting("underlineLinks", e.target.checked);
+    });
+
+    document.querySelectorAll(".ios-toggle").forEach((toggle) => {
+      toggle.addEventListener("click", () => {
+        const checkbox = toggle.querySelector('input[type="checkbox"]');
+        checkbox.checked = !checkbox.checked;
+        checkbox.dispatchEvent(new Event("change"));
+      });
+    });
+
+    document.addEventListener("click", (e) => {
+      const overlay = document.getElementById("a11y-overlay");
+      const button = document.getElementById("a11y-toggle");
+      if (e.target === overlay) {
+        overlay.classList.add("hidden");
+        document.getElementById("a11y-panel").classList.add("hidden");
+        button.setAttribute("aria-pressed", "false");
+        button.setAttribute("aria-expanded", "false");
+      }
+    });
+  };
+
+  scripts.forEach((script) => {
+    const targetId = script.getAttribute("data-target-id");
+    const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
+    const imageId = script.getAttribute("data-image-id");
+    const imageUrl = script.getAttribute("data-image-url");
 
     const blurElement = document.getElementById(targetId);
     const imageElement = imageId ? document.getElementById(imageId) : null;
@@ -57,24 +179,20 @@
       applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
 
       window.addEventListener("scroll", () => {
-        if (!isA11yMode() || targetId === "menu-blur") {
+        const settings = getA11ySettings();
+        if (!settings.disableBlur || targetId === "menu-blur") {
           blurElement.style.opacity = getScrollOpacity(scrollDivisor);
         }
       });
     }
   });
 
-  window.toggleA11yMode = function() {
+  window.toggleA11yPanel = toggleA11yPanel;
-    localStorage.setItem("a11yMode", String(!isA11yMode()));
-    scripts.forEach(script => {
-      const targetId = script.getAttribute("data-target-id");
-      const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
-      const imageId = script.getAttribute("data-image-id");
-      const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
 
-      const blurElement = document.getElementById(targetId);
+  document.addEventListener("DOMContentLoaded", () => {
-      const imageElement = imageId ? document.getElementById(imageId) : null;
+    applyA11ySettings();
-      applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
+    if (document.getElementById("a11y-panel")) {
+      initA11yPanel();
+    }
   });
-  };
 })();

layouts/partials/header/basic.html

@@ -35,16 +35,7 @@
 
     {{ partial "translations.html" . }}
     {{ if .Site.Params.enableA11y | default false }}
-      <button
+      {{ template "HeaderA11y" . }}
-        id="a11y-toggle"
-        aria-label="Toggle accessibility background animation"
-        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        onclick="toggleA11yMode()"
-        role="button"
-        aria-pressed="false">
-        {{ partial "icon.html" "a11y" }}
-      </button>
     {{ end }}
 
     {{ if .Site.Params.enableSearch | default false }}
@@ -82,18 +73,8 @@
     <span></span>
 
     {{ partial "translations.html" . }}
-
     {{ if .Site.Params.enableA11y | default false }}
-      <button
+      {{ template "HeaderA11y" . }}
-        id="a11y-toggle"
-        aria-label="Toggle accessibility background animation"
-        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        onclick="toggleA11yMode()"
-        role="button"
-        aria-pressed="false">
-        {{ partial "icon.html" "a11y" }}
-      </button>
     {{ end }}
 
     {{ if .Site.Params.enableSearch | default false }}
@@ -178,6 +159,79 @@
   </div>
 {{ end }}
 
+{{ define "HeaderA11y" }}
+  <div class="flex items-center">
+    <button
+      id="a11y-toggle"
+      aria-label="Open accessibility panel"
+      aria-expanded="false"
+      type="button"
+      class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+      onclick="toggleA11yPanel()"
+      role="button"
+      aria-pressed="false">
+      {{ partial "icon.html" "a11y" }}
+    </button>
+
+    <div id="a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
+
+    <div
+      id="a11y-panel"
+      role="dialog"
+      aria-labelledby="a11y-panel-title"
+      class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
+      style="min-width: 20rem;">
+      <div class="flex items-center justify-between mb-6">
+        <h3 id="a11y-panel-title" class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+          Accessibility settings
+        </h3>
+        <button
+          onclick="toggleA11yPanel()"
+          class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+          aria-label="Close a11y panel">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="space-y-5">
+        {{ $toggles := slice
+          (dict "id" "disable-blur" "label" "Disable background blur")
+          (dict "id" "disable-images" "label" "Disable background image")
+          (dict "id" "underline-links" "label" "Show link underline")
+        }}
+
+        {{ range $toggles }}
+          <div class="flex items-center justify-between">
+            <label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              {{ .label }}
+            </label>
+            <div class="ios-toggle">
+              <input type="checkbox" id="{{ .id }}">
+            </div>
+          </div>
+        {{ end }}
+
+
+        <div class="flex items-center justify-between">
+          <label for="font-size-select" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Font size
+          </label>
+          <select
+            id="font-size-select"
+            class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
+            {{ $fontSizes := slice "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
+            {{ range $fontSizes }}
+              <option value="{{ . }}">{{ . }}</option>
+            {{ end }}
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+{{ end }}
+
 {{/* ========== Render HTML ========== */}}
 <div
   class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 pt-[2px] pr-0 pb-[3px] pl-0">
@@ -198,7 +252,9 @@
 
 {{ if .Site.Menus.subnavigation }}
   <div
-    class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3{{ if .Site.Params.Logo }} -mt-[15px]{{ end }}">
+    class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 {{ if .Site.Params.Logo }}
+      -mt-[15px]
+    {{ end }}">
     <div class="hidden md:flex items-center space-x-5">
       {{ range .Site.Menus.subnavigation }}
         <a