diff options
Diffstat (limited to 'themes/danix-xyz-hacker/layouts')
10 files changed, 22 insertions, 15 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 }} 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 }} 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 @@ <img src="{{ .Params.image }}" alt="{{ .Site.Params.author }}" + loading="lazy" class="w-32 h-32 md:w-48 md:h-48 rounded-full border-4 border-accent object-cover" > </div> 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 @@ <!-- Type badge --> {{ if $typeData }} <span - class="inline-flex items-center px-3 py-1 rounded text-sm font-semibold mb-4 transition-colors" - style="color: {{ $typeData.color_light }}; background-color: {{ $typeData.color_light }}20;" - data-theme-dark-color="{{ $typeData.color_dark }}" + class="inline-flex items-center px-3 py-1 rounded text-sm font-semibold mb-4 transition-colors type-{{ $articleType }}" > {{ i18n $articleType }} </span> 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 }} <a href="{{ .RelPermalink }}" @@ -30,8 +28,7 @@ <!-- Type badge --> {{ if $typeData }} <span - class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors" - style="color: {{ $color }}; background-color: {{ $color }}20;" + class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors type-{{ $articleType }}" > {{ i18n $articleType }} </span> 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 @@ <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" + loading="lazy" class="w-full h-auto rounded-lg border border-border/30" /> {{ 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 @@ -<blockquote class="mb-8 pl-6 border-l-4 border-accent italic text-2xl text-text"> +<blockquote class="mb-8 pl-6 border-l-4 border-[--type-quote] italic text-2xl text-text"> "{{ .Params.quote_text }}" </blockquote> 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" > <div - id="menu-panel" + id="hamburger-menu" + aria-hidden="true" class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform translate-x-full transition-transform duration-300 z-50" > <!-- Close button --> diff --git a/themes/danix-xyz-hacker/layouts/partials/header.html b/themes/danix-xyz-hacker/layouts/partials/header.html index 2ddb2e3..7f99748 100644 --- a/themes/danix-xyz-hacker/layouts/partials/header.html +++ b/themes/danix-xyz-hacker/layouts/partials/header.html @@ -48,17 +48,21 @@ <!-- Theme toggle button --> <button id="theme-toggle" + x-data="{ theme: localStorage.getItem('theme') || 'dark' }" + @click="theme = theme === 'dark' ? 'light' : 'dark'; document.documentElement.className = 'theme-' + theme; localStorage.setItem('theme', theme)" aria-label="{{ i18n "toggleTheme" }}" class="p-2 rounded hover:bg-surface transition-colors" > - <i data-feather="sun" class="w-5 h-5 hidden dark:block"></i> - <i data-feather="moon" class="w-5 h-5 block dark:hidden"></i> + <i x-show="theme === 'dark'" data-feather="sun" class="w-5 h-5" aria-hidden="true"></i> + <i x-show="theme === 'light'" data-feather="moon" class="w-5 h-5" aria-hidden="true"></i> </button> <!-- Hamburger menu button (mobile only) --> <button id="menu-toggle" aria-label="{{ i18n "toggleMenu" }}" + aria-expanded="false" + aria-controls="hamburger-menu" class="md:hidden p-2 rounded hover:bg-surface transition-colors" > <i data-feather="menu" class="w-5 h-5"></i> |