From ec942b013a32f4b4015cd901e334ae706c1d2757 Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Mon, 24 Nov 2025 08:20:15 +0800 Subject: [PATCH 01/10] fix: remove alt in decorative images --- layouts/partials/article-link/_shortcode.html | 2 +- layouts/partials/article-link/card-related.html | 2 +- layouts/partials/article-link/card.html | 2 +- layouts/partials/article-link/simple.html | 2 +- layouts/partials/hero/background.html | 2 +- layouts/partials/hero/basic.html | 2 +- layouts/partials/hero/thumbAndBackground.html | 3 +-- 7 files changed, 7 insertions(+), 8 deletions(-) diff --git a/layouts/partials/article-link/_shortcode.html b/layouts/partials/article-link/_shortcode.html index c6cb2f03..b370039a 100644 --- a/layouts/partials/article-link/_shortcode.html +++ b/layouts/partials/article-link/_shortcode.html @@ -85,7 +85,7 @@
{{ with $target.Params.featuredImageAlt }}{{ . }}{{ else }}{{ $target.Title | emojify }}{{ end }} diff --git a/layouts/partials/article-link/card-related.html b/layouts/partials/article-link/card-related.html index 0e4fdfd7..e74f58db 100644 --- a/layouts/partials/article-link/card-related.html +++ b/layouts/partials/article-link/card-related.html @@ -56,7 +56,7 @@
{{ $page.Title }} {{ $page.Title | plainify }} diff --git a/layouts/partials/article-link/simple.html b/layouts/partials/article-link/simple.html index 0e6657ab..afde7cba 100644 --- a/layouts/partials/article-link/simple.html +++ b/layouts/partials/article-link/simple.html @@ -78,7 +78,7 @@
{{ $.Params.featuredImageAlt | default ($.Title | emojify) }} diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html index bc1cee73..afe1ae37 100644 --- a/layouts/partials/hero/background.html +++ b/layouts/partials/hero/background.html @@ -69,7 +69,7 @@ {{ $.Title }} {{ with $.Params.featureimagealt }}{{ . }}{{ else }}{{ with $.Title }}Featured image for {{ . }}{{ else }}Featured image{{ end }}{{ end }} {{ $.Title }} Date: Mon, 24 Nov 2025 02:54:55 +0800 Subject: [PATCH 02/10] style: add overlay for background blur --- assets/css/compiled/main.css | 20 +++++++++++++++++++ layouts/partials/hero/background.html | 2 +- layouts/partials/hero/thumbAndBackground.html | 2 +- layouts/partials/home/background.html | 2 +- 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 4a5b2722..a6bec22e 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -47,6 +47,7 @@ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --blur-sm: 8px; + --blur-xl: 24px; --blur-2xl: 40px; --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -1640,6 +1641,12 @@ background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent); } } + .bg-neutral-100\/75 { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 75%, transparent); + } + } .bg-neutral-300 { background-color: rgba(var(--color-neutral-300), 1); } @@ -2176,6 +2183,11 @@ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .backdrop-blur-xl { + --tw-backdrop-blur: blur(var(--blur-xl)); + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -3095,6 +3107,14 @@ } } } + .dark\:bg-neutral-800\/60 { + &:is(.dark *) { + background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 60%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 60%, transparent); + } + } + } .dark\:bg-neutral-900\/50 { &:is(.dark *) { background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent); diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html index afe1ae37..8f1f568d 100644 --- a/layouts/partials/hero/background.html +++ b/layouts/partials/hero/background.html @@ -84,7 +84,7 @@ {{ if $shouldBlur | default false }}
+ class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-xl bg-neutral-100/75 dark:bg-neutral-800/60">
{{ $backgroundBlur := resources.Get "js/background-blur.js" }} {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}