From 9934e042c1e97765ac839f6c3f06d30f02b5d9d0 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Wed, 15 Apr 2026 21:42:04 +0200
Subject: Fix design system compliance: CSS variables, accessibility, and theme
 system

Core CSS improvements:
- Add --surface-rgb, --type-* (tech, life, quote, link, photo) custom properties
- Add --type-* semantic color classes for article badges
- Convert article badges from inline styles to CSS variable system
- Add prefers-color-scheme light fallback for no-JS users
- Add prefers-reduced-motion support to respect user accessibility settings
- Replace *:focus with *:focus-visible (keyboard-only outlines)
- Add clamp() fluid typography for hero-title and section-title
- Refactor container rules to mobile-first with 1060px breakpoint

Theme & Icon fixes:
- Fix theme toggle icon display with Alpine.js (was broken with Tailwind dark: classes)
- Add aria-hidden="true" to icon elements
- Update header with proper ARIA attributes on menu toggle

Accessibility enhancements:
- Add skip-to-main-content link in baseof.html
- Update hamburger menu with aria-expanded, aria-controls, aria-hidden
- Implement focus trap (Tab loops) within mobile menu
- Return focus to trigger button on menu close
- Add menu open/close state management with proper ARIA

Semantic HTML:
- Wrap article pages in <article> element (articles/single.html, _default/single.html)
- Fix quote article to use --type-quote border color instead of generic accent

Image optimization:
- Add loading="lazy" to profile image in index.html
- Add loading="lazy" to featured image in photo.html

Template fixes:
- Remove broken os.Getenv "THEME" runtime check from article-list-item.html
- Replace inline color styles with semantic .type-* classes
- Add 1060px lg: breakpoint to tailwind.config.js

i18n updates:
- Add skipToContent translations (en, it)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 themes/danix-xyz-hacker/layouts/articles/single.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'themes/danix-xyz-hacker/layouts/articles')

diff --git a/themes/danix-xyz-hacker/layouts/articles/single.html b/themes/danix-xyz-hacker/layouts/articles/single.html
index 67e8a2f..c5d51e7 100644
--- a/themes/danix-xyz-hacker/layouts/articles/single.html
+++ b/themes/danix-xyz-hacker/layouts/articles/single.html
@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{ $articleType := .Params.type | default "life" }}
 {{ $template := printf "article-types/%s.html" $articleType }}
-<div class="mx-auto px-4 py-12">
+<article class="mx-auto px-4 py-12">
   <div class="grid md:grid-cols-3 gap-8">
     <!-- Article section -->
     <div class="md:col-span-2">
@@ -37,5 +37,5 @@
     <!-- Sidebar -->
     {{ partial "sidebar.html" . }}
   </div>
-</div>
+</article>
 {{ end }}
-- 
cgit v1.2.3