diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-15 21:42:04 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-15 21:42:04 +0200 |
| commit | 9934e042c1e97765ac839f6c3f06d30f02b5d9d0 (patch) | |
| tree | cf102ee79caf5d304e303956a1becd5fb680ca39 /themes/danix-xyz-hacker/layouts/_default | |
| parent | eb8a17482fc138c861db685f9efc86871bf2d7d2 (diff) | |
| download | danixxyz-9934e042c1e97765ac839f6c3f06d30f02b5d9d0.tar.gz danixxyz-9934e042c1e97765ac839f6c3f06d30f02b5d9d0.zip | |
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>
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/_default')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/baseof.html | 5 | ||||
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/single.html | 4 |
2 files changed, 7 insertions, 2 deletions
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 @@ <link rel="stylesheet" href="{{ $chroma.RelPermalink }}"> </head> <body class="bg-bg text-text antialiased"> + <!-- Skip to main content link --> + <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-accent focus:text-white focus:rounded"> + {{ i18n "skipToContent" }} + </a> + <!-- Dot grid background pattern --> <div class="fixed inset-0 pointer-events-none opacity-5 dot-grid" style=" background-image: radial-gradient(circle, currentColor 1px, transparent 1px); diff --git a/themes/danix-xyz-hacker/layouts/_default/single.html b/themes/danix-xyz-hacker/layouts/_default/single.html index 3269dec..60cf03d 100644 --- a/themes/danix-xyz-hacker/layouts/_default/single.html +++ b/themes/danix-xyz-hacker/layouts/_default/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -<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 }} |