dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2362 from ZhenShuo2021/feat/a11y-toggle

Browse Source 
✨ Feat: support a11y toggle button
This commit is contained in:
Nuno C.
2025-08-03 01:37:40 +01:00
committed by GitHub
parent ca181417cc dc778836f1
commit 4eb9d037e4
12 changed files with 159 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
layouts/partials/header/basic.html
View File

@@ -34,6 +34,18 @@
{{ end }}
{{ partial "translations.html" . }}
{{ if .Site.Params.enableA11y | default false }}
<button
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 }}
<button
@@ -70,6 +82,20 @@
<span></span>
{{ partial "translations.html" . }}
{{ if .Site.Params.enableA11y | default false }}
<button
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 }}
<button
id="search-button-mobile"

25
layouts/partials/hero/background.html
View File

@@ -35,17 +35,16 @@
<div id="hero" class="h-[150px] md:h-[200px]"></div>
{{ end }}
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
{{ with . }}
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
{{ with . }}
<img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
{{ end }}
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
{{ end }}
{{ end }}
<div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
</div>
@@ -57,6 +56,10 @@
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}"
data-target-id="background-blur"
data-image-id="background-image"
data-image-url="{{ .RelPermalink }}"
></script>
{{ end }}
{{- end -}}

49
layouts/partials/hero/thumbAndBackground.html
View File

@@ -58,30 +58,29 @@
{{- with $background -}}
{{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
{{ with . }}
<div
class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
<div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
<div
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
</div>
<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
{{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
{{ with . }}
<img
id="background-image-main"
src="{{ .RelPermalink }}"
alt="Background Image"
class="absolute inset-0 h-full w-full object-cover">
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<img
id="background-image-main"
src="{{ .RelPermalink }}"
alt="Background Image"
class="absolute inset-0 h-full w-full object-cover">
{{ end }}
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<div
class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
<div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
<div
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
</div>
{{ end }}
{{ end }}
<div
class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
<div
class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
</div>
{{- end -}}
{{ if $shouldBlur | default false }}
@@ -94,5 +93,7 @@
type="text/javascript"
src="{{ $backgroundBlur.RelPermalink }}"
integrity="{{ $backgroundBlur.Data.Integrity }}"
data-target-id="background-blur"></script>
data-target-id="background-blur"
data-image-id="background-image-main"
{{ with $background }}data-image-url="{{ .RelPermalink }}"{{ end }}></script>
{{ end }}

19
layouts/partials/home/background.html
View File

@@ -1,5 +1,5 @@
{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
<article class="max-w-full prose dark:prose-invert">
<article class="prose dark:prose-invert max-w-full">
<div class="relative">
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
<div class="mx-auto max-w-7xl p-0">
@@ -22,16 +22,17 @@
{{ end }}
{{ if $homepageImage }}
<img
class="w-full h-[1000px] object-cover nozoom mt-0 mr-0 mb-0 ml-0"
id="homepage-background-image"
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
src="{{ $homepageImage.RelPermalink }}"
role="presentation">
<div
class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
<div
class="opacity-60 absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div>
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-neutral-100 opacity-60 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800"></div>
{{ end }}
</div>
<div class="relative px-1 py-1 flex flex-col items-center justify-center text-center">
<div class="relative flex flex-col items-center justify-center px-1 py-1 text-center">
{{ with .Site.Params.Author.image }}
{{ $authorImage := "" }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -44,7 +45,7 @@
{{ $authorImage = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
{{ end }}
<img
class="mb-2 rounded-full h-36 w-36"
class="mb-2 h-36 w-36 rounded-full"
width="144"
height="144"
alt="{{ $.Site.Params.Author.name | default " Author" }}"
@@ -65,7 +66,7 @@
{{ range $links := . }}
{{ range $name, $url := $links }}
<a
class="px-1 hover:text-primary-400 text-primary-800 dark:text-primary-200"
class="hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
href="{{ $url }}"
target="_blank"
aria-label="{{ $name | title }}"
@@ -98,5 +99,7 @@
type="text/javascript"
src="{{ $backgroundBlur.RelPermalink }}"
integrity="{{ $backgroundBlur.Data.Integrity }}"
data-target-id="background-blur"></script>
data-target-id="background-blur"
data-image-id="homepage-background-image"
{{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
{{ end }}