From 9934e042c1e97765ac839f6c3f06d30f02b5d9d0 Mon Sep 17 00:00:00 2001 From: "Danilo M." 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
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 --- themes/danix-xyz-hacker/layouts/_default/baseof.html | 5 +++++ themes/danix-xyz-hacker/layouts/_default/single.html | 4 ++-- themes/danix-xyz-hacker/layouts/articles/single.html | 4 ++-- themes/danix-xyz-hacker/layouts/index.html | 1 + themes/danix-xyz-hacker/layouts/partials/article-header.html | 4 +--- themes/danix-xyz-hacker/layouts/partials/article-list-item.html | 5 +---- themes/danix-xyz-hacker/layouts/partials/article-types/photo.html | 1 + themes/danix-xyz-hacker/layouts/partials/article-types/quote.html | 2 +- themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html | 3 ++- themes/danix-xyz-hacker/layouts/partials/header.html | 8 ++++++-- 10 files changed, 22 insertions(+), 15 deletions(-) (limited to 'themes/danix-xyz-hacker/layouts') diff --git a/themes/danix-xyz-hacker/layouts/_default/baseof.html b/themes/danix-xyz-hacker/layouts/_default/baseof.html index f0a9283..2849562 100644 --- a/themes/danix-xyz-hacker/layouts/_default/baseof.html +++ b/themes/danix-xyz-hacker/layouts/_default/baseof.html @@ -28,6 +28,11 @@ + + + {{ i18n "skipToContent" }} + +
+
@@ -37,5 +37,5 @@ {{ partial "sidebar.html" . }}
-
+
{{ end }} 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 }} -
+
@@ -37,5 +37,5 @@ {{ partial "sidebar.html" . }}
-
+
{{ end }} diff --git a/themes/danix-xyz-hacker/layouts/index.html b/themes/danix-xyz-hacker/layouts/index.html index ed151cb..d1efc53 100644 --- a/themes/danix-xyz-hacker/layouts/index.html +++ b/themes/danix-xyz-hacker/layouts/index.html @@ -7,6 +7,7 @@ {{ .Site.Params.author }}
diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html index 10808f9..b759909 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-header.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-header.html @@ -6,9 +6,7 @@ {{ if $typeData }} {{ i18n $articleType }} diff --git a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html index 652e171..1065f0b 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html @@ -1,8 +1,6 @@ {{ $articleType := .Params.type | default "life" }} {{ $typeConfig := .Site.Params.articleTypes }} {{ $typeData := index $typeConfig $articleType }} -{{ $isDark := strings.Contains (os.Getenv "THEME") "dark" }} -{{ $color := cond $isDark $typeData.color_dark $typeData.color_light }} {{ if $typeData }} {{ i18n $articleType }} diff --git a/themes/danix-xyz-hacker/layouts/partials/article-types/photo.html b/themes/danix-xyz-hacker/layouts/partials/article-types/photo.html index f4ccf06..743e02a 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-types/photo.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-types/photo.html @@ -3,6 +3,7 @@ {{ .Title }} {{ if .Params.featured_image_caption }} diff --git a/themes/danix-xyz-hacker/layouts/partials/article-types/quote.html b/themes/danix-xyz-hacker/layouts/partials/article-types/quote.html index 3df7327..f27d189 100644 --- a/themes/danix-xyz-hacker/layouts/partials/article-types/quote.html +++ b/themes/danix-xyz-hacker/layouts/partials/article-types/quote.html @@ -1,4 +1,4 @@ -
+
"{{ .Params.quote_text }}"
diff --git a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html index bdcbca9..666db78 100644 --- a/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html +++ b/themes/danix-xyz-hacker/layouts/partials/hamburger-menu.html @@ -3,7 +3,8 @@ class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-200 z-40" >