mirror of
https://gitee.com/butubb8/blowfish.git
synced 2025-12-05 14:17:50 +08:00
Merge pull request #2365 from ZhenShuo2021/feat/a11y-panel
✨ Feat: add setting panel for a11y
This commit is contained in:
Nuno C.
@@ -174,6 +174,69 @@ body.zen-mode-enable {
|
||||
.chroma .gl {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.a11y-panel-enter-active {
|
||||
animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
.a11y-panel-leave-active {
|
||||
animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
.ios-toggle {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background: #e5e5e5;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.ios-toggle input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.ios-toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
z-index: 0;
|
||||
}
|
||||
.ios-toggle input:checked + .toggle-track::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.ios-toggle input:checked + .toggle-track {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle input:checked ~ .ios-toggle-ball {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.ios-toggle.is-checked {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle:has(input:checked) {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
.ios-toggle:has(input:checked)::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
.dark .ios-toggle {
|
||||
background: #404040;
|
||||
}
|
||||
.dark .ios-toggle::after {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
@@ -428,6 +491,9 @@ body.zen-mode-enable {
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
.top-20 {
|
||||
top: calc(var(--spacing) * 20);
|
||||
}
|
||||
@@ -446,6 +512,9 @@ body.zen-mode-enable {
|
||||
.left-0 {
|
||||
left: calc(var(--spacing) * 0);
|
||||
}
|
||||
.left-1\/2 {
|
||||
left: calc(1/2 * 100%);
|
||||
}
|
||||
.left-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
|
||||
left: calc(max(-50vw, -800px) + 50%);
|
||||
}
|
||||
@@ -1245,6 +1314,9 @@ body.zen-mode-enable {
|
||||
.h-3 {
|
||||
height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
.h-6 {
|
||||
height: calc(var(--spacing) * 6);
|
||||
}
|
||||
@@ -1320,6 +1392,9 @@ body.zen-mode-enable {
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
.w-6 {
|
||||
width: calc(var(--spacing) * 6);
|
||||
}
|
||||
@@ -1335,6 +1410,9 @@ body.zen-mode-enable {
|
||||
.w-36 {
|
||||
width: calc(var(--spacing) * 36);
|
||||
}
|
||||
.w-80 {
|
||||
width: calc(var(--spacing) * 80);
|
||||
}
|
||||
.w-\[15\%\] {
|
||||
width: 15%;
|
||||
}
|
||||
@@ -1434,6 +1512,10 @@ body.zen-mode-enable {
|
||||
.border-collapse {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.-translate-x-1\/2 {
|
||||
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-x-full {
|
||||
--tw-translate-x: -100%;
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -1442,6 +1524,10 @@ body.zen-mode-enable {
|
||||
--tw-translate-x: 100%;
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-1\/2 {
|
||||
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
.-translate-y-8 {
|
||||
--tw-translate-y: calc(var(--spacing) * -8);
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
@@ -1533,6 +1619,13 @@ body.zen-mode-enable {
|
||||
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-5 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-10 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@@ -1755,6 +1848,9 @@ body.zen-mode-enable {
|
||||
.bg-neutral {
|
||||
background-color: rgba(var(--color-neutral), 1);
|
||||
}
|
||||
.bg-neutral-50 {
|
||||
background-color: rgba(var(--color-neutral-50), 1);
|
||||
}
|
||||
.bg-neutral-100 {
|
||||
background-color: rgba(var(--color-neutral-100), 1);
|
||||
}
|
||||
@@ -1956,6 +2052,9 @@ body.zen-mode-enable {
|
||||
.pr-0 {
|
||||
padding-right: calc(var(--spacing) * 0);
|
||||
}
|
||||
.pr-8 {
|
||||
padding-right: calc(var(--spacing) * 8);
|
||||
}
|
||||
.pr-\[24px\] {
|
||||
padding-right: 24px;
|
||||
}
|
||||
@@ -2570,6 +2669,13 @@ body.zen-mode-enable {
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-neutral-700 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: rgba(var(--color-neutral-700), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-primary-400 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -2668,6 +2774,11 @@ body.zen-mode-enable {
|
||||
translate: var(--tw-translate-x) var(--tw-translate-y);
|
||||
}
|
||||
}
|
||||
.focus\:border-primary-500 {
|
||||
&:focus {
|
||||
border-color: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
}
|
||||
.focus\:bg-primary-100 {
|
||||
&:focus {
|
||||
background-color: rgba(var(--color-primary-100), 1);
|
||||
@@ -2683,6 +2794,11 @@ body.zen-mode-enable {
|
||||
opacity: 90%;
|
||||
}
|
||||
}
|
||||
.focus\:ring-primary-500 {
|
||||
&:focus {
|
||||
--tw-ring-color: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
}
|
||||
.focus\:outline-2 {
|
||||
&:focus {
|
||||
outline-style: var(--tw-outline-style);
|
||||
@@ -3520,6 +3636,15 @@ body.zen-mode-enable {
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:text-neutral-200 {
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: rgba(var(--color-neutral-200), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:text-neutral-800 {
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
|
||||
77
assets/css/components/a11y.css
Normal file
77
assets/css/components/a11y.css
Normal file
@@ -0,0 +1,77 @@
|
||||
.a11y-panel-enter-active {
|
||||
animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
.a11y-panel-leave-active {
|
||||
animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
.ios-toggle {
|
||||
position: relative;
|
||||
width: 42px;
|
||||
height: 24px;
|
||||
background: #e5e5e5;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ios-toggle input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.ios-toggle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
background-color 0.3s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ios-toggle input:checked + .toggle-track::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
.ios-toggle input:checked + .toggle-track {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
|
||||
.ios-toggle input:checked ~ .ios-toggle-ball {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
.ios-toggle.is-checked {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
|
||||
.ios-toggle:has(input:checked) {
|
||||
background: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
|
||||
.ios-toggle:has(input:checked)::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
.dark .ios-toggle {
|
||||
background: #404040;
|
||||
}
|
||||
|
||||
.dark .ios-toggle::after {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
@import "./components/zen-mode.css";
|
||||
@import "./components/chroma.css";
|
||||
@import "./components/a11y.css";
|
||||
|
||||
@import "tailwindcss";
|
||||
@config "../../tailwind.config.js";
|
||||
|
||||
172
assets/js/a11y.js
Normal file
172
assets/js/a11y.js
Normal file
@@ -0,0 +1,172 @@
|
||||
const getA11ySettings = () => {
|
||||
const settings = localStorage.getItem("a11ySettings");
|
||||
return settings
|
||||
? JSON.parse(settings)
|
||||
: {
|
||||
disableBlur: false,
|
||||
disableImages: false,
|
||||
fontSize: "default",
|
||||
underlineLinks: false,
|
||||
};
|
||||
};
|
||||
|
||||
const saveA11ySettings = (settings) => {
|
||||
localStorage.setItem("a11ySettings", JSON.stringify(settings));
|
||||
};
|
||||
|
||||
const applyImageState = (imageElement, imageUrl, disableImages) => {
|
||||
if (!imageElement) return;
|
||||
if (disableImages) {
|
||||
imageElement.style.display = "none";
|
||||
} else {
|
||||
imageElement.style.display = "";
|
||||
if (imageUrl && !imageElement.getAttribute("src")) {
|
||||
imageElement.setAttribute("src", imageUrl);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const applyFontSize = (fontSizePx) => {
|
||||
const isDefaultSettings = localStorage.getItem("a11ySettings") === null;
|
||||
if (!isDefaultSettings && fontSizePx !== "default") {
|
||||
document.documentElement.style.fontSize = fontSizePx;
|
||||
}
|
||||
};
|
||||
|
||||
const applyUnderlineLinks = (enabled) => {
|
||||
let styleElement = document.getElementById("a11y-underline-links");
|
||||
if (enabled) {
|
||||
if (!styleElement) {
|
||||
styleElement = document.createElement("style");
|
||||
styleElement.id = "a11y-underline-links";
|
||||
styleElement.textContent = "a { text-decoration: underline !important; }";
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
} else {
|
||||
if (styleElement) {
|
||||
styleElement.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const applyA11ySettings = () => {
|
||||
const settings = getA11ySettings();
|
||||
document.querySelectorAll("script[data-target-id]").forEach((script) => {
|
||||
const targetId = script.getAttribute("data-target-id");
|
||||
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
|
||||
const imageId = script.getAttribute("data-image-id");
|
||||
const imageUrl = script.getAttribute("data-image-url");
|
||||
const isMenuBlur = targetId === "menu-blur";
|
||||
setBackgroundBlur(targetId, scrollDivisor, settings.disableBlur, isMenuBlur);
|
||||
applyImageState(document.getElementById(imageId), imageUrl, settings.disableImages);
|
||||
});
|
||||
applyFontSize(settings.fontSize);
|
||||
applyUnderlineLinks(settings.underlineLinks);
|
||||
};
|
||||
|
||||
const updateA11ySetting = (key, value) => {
|
||||
const settings = getA11ySettings();
|
||||
settings[key] = value;
|
||||
saveA11ySettings(settings);
|
||||
applyA11ySettings();
|
||||
};
|
||||
|
||||
const toggleA11yPanel = (prefix = "") => {
|
||||
const panel = document.getElementById(`${prefix}a11y-panel`);
|
||||
const overlay = document.getElementById(`${prefix}a11y-overlay`);
|
||||
const button = document.getElementById(`${prefix}a11y-toggle`);
|
||||
if (!panel || !overlay || !button) return;
|
||||
if (overlay.classList.contains("hidden")) {
|
||||
overlay.classList.remove("hidden");
|
||||
panel.classList.remove("hidden");
|
||||
button.setAttribute("aria-pressed", "true");
|
||||
button.setAttribute("aria-expanded", "true");
|
||||
} else {
|
||||
overlay.classList.add("hidden");
|
||||
panel.classList.add("hidden");
|
||||
button.setAttribute("aria-pressed", "false");
|
||||
button.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
};
|
||||
|
||||
const initA11yPanel = (prefix = "") => {
|
||||
const settings = getA11ySettings();
|
||||
const checkboxBlur = document.getElementById(`${prefix}disable-blur`);
|
||||
const checkboxImages = document.getElementById(`${prefix}disable-images`);
|
||||
const checkboxUnderline = document.getElementById(`${prefix}underline-links`);
|
||||
const fontSizeSelect = document.getElementById(`${prefix}font-size-select`);
|
||||
const toggleButton = document.getElementById(`${prefix}a11y-toggle`);
|
||||
const closeButton = document.getElementById(`${prefix}a11y-close`);
|
||||
const overlay = document.getElementById(`${prefix}a11y-overlay`);
|
||||
|
||||
if (
|
||||
!checkboxBlur ||
|
||||
!checkboxImages ||
|
||||
!checkboxUnderline ||
|
||||
!fontSizeSelect ||
|
||||
!toggleButton ||
|
||||
!closeButton ||
|
||||
!overlay
|
||||
) {
|
||||
console.warn(`One or more a11y elements not found for prefix: ${prefix}`);
|
||||
return;
|
||||
}
|
||||
|
||||
checkboxBlur.checked = settings.disableBlur;
|
||||
checkboxImages.checked = settings.disableImages;
|
||||
fontSizeSelect.value = settings.fontSize;
|
||||
checkboxUnderline.checked = settings.underlineLinks;
|
||||
|
||||
checkboxBlur.addEventListener("change", (e) => updateA11ySetting("disableBlur", e.target.checked));
|
||||
checkboxImages.addEventListener("change", (e) => updateA11ySetting("disableImages", e.target.checked));
|
||||
checkboxUnderline.addEventListener("change", (e) => updateA11ySetting("underlineLinks", e.target.checked));
|
||||
fontSizeSelect.addEventListener("change", (e) => {
|
||||
// Remove fontSize from localStorage when default is selected
|
||||
if (e.target.value === "default") {
|
||||
const settings = getA11ySettings();
|
||||
delete settings.fontSize;
|
||||
saveA11ySettings(settings);
|
||||
document.documentElement.style.fontSize = "";
|
||||
} else {
|
||||
updateA11ySetting("fontSize", e.target.value);
|
||||
}
|
||||
});
|
||||
|
||||
toggleButton.addEventListener("click", () => toggleA11yPanel(prefix));
|
||||
closeButton.addEventListener("click", () => toggleA11yPanel(prefix));
|
||||
overlay.addEventListener("click", (e) => {
|
||||
if (e.target === overlay) {
|
||||
toggleA11yPanel(prefix);
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll(`.ios-toggle${prefix ? `[id^="${prefix}"]` : ""}`).forEach((toggle) => {
|
||||
const checkbox = toggle.querySelector('input[type="checkbox"]');
|
||||
if (!checkbox) return;
|
||||
const newToggle = toggle.cloneNode(true);
|
||||
toggle.parentNode.replaceChild(newToggle, toggle);
|
||||
newToggle.addEventListener("click", () => {
|
||||
const newCheckbox = newToggle.querySelector('input[type="checkbox"]');
|
||||
if (newCheckbox) {
|
||||
newCheckbox.checked = !newCheckbox.checked;
|
||||
newCheckbox.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelectorAll("script[data-target-id]").forEach((script) => {
|
||||
const imageId = script.getAttribute("data-image-id");
|
||||
const imageUrl = script.getAttribute("data-image-url");
|
||||
const settings = getA11ySettings();
|
||||
applyImageState(document.getElementById(imageId), imageUrl, settings.disableImages);
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
applyA11ySettings();
|
||||
const allPanels = document.querySelectorAll('[id$="a11y-panel"]');
|
||||
allPanels.forEach((panel) => {
|
||||
const prefix = panel.id.replace("a11y-panel", "");
|
||||
initA11yPanel(prefix);
|
||||
});
|
||||
});
|
||||
@@ -1,80 +1,52 @@
|
||||
(() => {
|
||||
const scripts = document.querySelectorAll('script[data-target-id]');
|
||||
|
||||
const isA11yMode = () => {
|
||||
return localStorage.getItem("a11yMode") === "true";
|
||||
};
|
||||
|
||||
const getScrollOpacity = (scrollDivisor) => {
|
||||
const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
||||
return scrollY / scrollDivisor;
|
||||
};
|
||||
|
||||
const applyBlurState = (blurElement, scrollDivisor, targetId, imageElement, imageUrl) => {
|
||||
if (!blurElement) return;
|
||||
const isMenuBlur = targetId === "menu-blur";
|
||||
|
||||
if (isA11yMode()) {
|
||||
blurElement.setAttribute("aria-hidden", "true");
|
||||
if (!isMenuBlur) {
|
||||
blurElement.style.display = "none";
|
||||
blurElement.style.opacity = "0";
|
||||
} else {
|
||||
blurElement.style.display = "";
|
||||
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
|
||||
}
|
||||
// Hide image in a11y mode
|
||||
if (imageElement) {
|
||||
imageElement.style.display = "none";
|
||||
}
|
||||
function setBackgroundBlur(targetId, scrollDivisor = 300, disableBlur = false, isMenuBlur = false) {
|
||||
if (!targetId) {
|
||||
console.error("data-target-id is null");
|
||||
return;
|
||||
}
|
||||
const blurElement = document.getElementById(targetId);
|
||||
if (!blurElement) return;
|
||||
if (disableBlur) {
|
||||
blurElement.setAttribute("aria-hidden", "true");
|
||||
if (!isMenuBlur) {
|
||||
blurElement.style.display = "none";
|
||||
blurElement.style.opacity = "0";
|
||||
} else {
|
||||
blurElement.style.display = "";
|
||||
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
|
||||
blurElement.removeAttribute("aria-hidden");
|
||||
// Show image in normal mode
|
||||
if (imageElement) {
|
||||
imageElement.style.display = "";
|
||||
// Re-apply image source if it was removed
|
||||
if (imageUrl && !imageElement.getAttribute('src')) {
|
||||
imageElement.setAttribute('src', imageUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
blurElement.style.display = "";
|
||||
blurElement.removeAttribute("aria-hidden");
|
||||
}
|
||||
const updateBlur = () => {
|
||||
if (!disableBlur || isMenuBlur) {
|
||||
const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
|
||||
blurElement.style.opacity = scroll / scrollDivisor;
|
||||
}
|
||||
};
|
||||
blurElement.setAttribute("role", "presentation");
|
||||
blurElement.setAttribute("tabindex", "-1");
|
||||
window.addEventListener("scroll", updateBlur);
|
||||
updateBlur();
|
||||
}
|
||||
|
||||
scripts.forEach(script => {
|
||||
const targetId = script.getAttribute("data-target-id");
|
||||
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
|
||||
const imageId = script.getAttribute("data-image-id");
|
||||
const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
|
||||
document.querySelectorAll("script[data-target-id]").forEach((script) => {
|
||||
const targetId = script.getAttribute("data-target-id");
|
||||
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
|
||||
const isMenuBlur = targetId === "menu-blur";
|
||||
const settings = JSON.parse(localStorage.getItem("a11ySettings") || "{}");
|
||||
const disableBlur = settings.disableBlur || false;
|
||||
setBackgroundBlur(targetId, scrollDivisor, disableBlur, isMenuBlur);
|
||||
});
|
||||
|
||||
const blurElement = document.getElementById(targetId);
|
||||
const imageElement = imageId ? document.getElementById(imageId) : null;
|
||||
|
||||
if (blurElement) {
|
||||
blurElement.setAttribute("role", "presentation");
|
||||
blurElement.setAttribute("tabindex", "-1");
|
||||
applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
if (!isA11yMode() || targetId === "menu-blur") {
|
||||
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.toggleA11yMode = function() {
|
||||
localStorage.setItem("a11yMode", String(!isA11yMode()));
|
||||
scripts.forEach(script => {
|
||||
const targetId = script.getAttribute("data-target-id");
|
||||
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
|
||||
// Prevent disableImages FOUC
|
||||
// Note: I tried putting this in a11y.js but it did not work, and placing it here prevents FOUC
|
||||
(() => {
|
||||
const settings = JSON.parse(localStorage.getItem("a11ySettings") || "{}");
|
||||
if (settings.disableImages) {
|
||||
document.querySelectorAll("script[data-image-id]").forEach((script) => {
|
||||
const imageId = script.getAttribute("data-image-id");
|
||||
const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
|
||||
|
||||
const blurElement = document.getElementById(targetId);
|
||||
const imageElement = imageId ? document.getElementById(imageId) : null;
|
||||
applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
|
||||
const image = imageId && document.getElementById(imageId);
|
||||
if (image) image.style.display = "none";
|
||||
});
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -25,6 +25,12 @@ article:
|
||||
part: "جزء"
|
||||
this_article: "هذه المقالة"
|
||||
|
||||
a11y:
|
||||
disable_blur: "تعطيل التمويه"
|
||||
disable_images: "تعطيل الصور"
|
||||
show_link_underline: "إظهار خط تحت الروابط"
|
||||
font_size: "حجم الخط"
|
||||
|
||||
author:
|
||||
byline_title: "الناشر"
|
||||
|
||||
|
||||
@@ -26,6 +26,12 @@ article:
|
||||
this_article: "Тази Статия"
|
||||
related_articles: "Подобни"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Изключване на замъгляването"
|
||||
disable_images: "Изключване на изображенията"
|
||||
show_link_underline: "Показване на подчертаване на връзките"
|
||||
font_size: "Размер на шрифта"
|
||||
|
||||
author:
|
||||
byline_title: "Автор"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "Activar mode zen"
|
||||
disable: "Desactivar mode zen"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Desactiva el desenfocament"
|
||||
disable_images: "Desactiva les imatges"
|
||||
show_link_underline: "Mostra el subratllat dels enllaços"
|
||||
font_size: "Mida de la lletra"
|
||||
|
||||
author:
|
||||
byline_title: "Autor"
|
||||
|
||||
|
||||
@@ -26,6 +26,12 @@ article:
|
||||
this_article: "Tento článek"
|
||||
related_articles: "Related"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Zakázat rozmazání"
|
||||
disable_images: "Zakázat obrázky"
|
||||
show_link_underline: "Zobrazit podtržení odkazů"
|
||||
font_size: "Velikost písma"
|
||||
|
||||
author:
|
||||
byline_title: "Autor"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "Enable zen mode"
|
||||
disable: "Disable zen mode"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Disable blur"
|
||||
disable_images: "Disable images"
|
||||
show_link_underline: "Show link underline"
|
||||
font_size: "Font size"
|
||||
|
||||
author:
|
||||
byline_title: "Author"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "Ŝalti zen-reĝimon"
|
||||
disable: "Malŝalti zen-reĝimon"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Malŝalti malklarigon"
|
||||
disable_images: "Malŝalti bildojn"
|
||||
show_link_underline: "Montri substrekojn de ligiloj"
|
||||
font_size: "Tipara grandeco"
|
||||
|
||||
author:
|
||||
byline_title: "Aŭtoro"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "فعال کردن حالت تمام متن"
|
||||
disable: "غیر فعال کردن حالت تمام متن"
|
||||
|
||||
a11y:
|
||||
disable_blur: "غیرفعال کردن تاری"
|
||||
disable_images: "غیرفعال کردن تصاویر"
|
||||
show_link_underline: "نمایش زیرخط لینک"
|
||||
font_size: "اندازه فونت"
|
||||
|
||||
author:
|
||||
byline_title: "نویسنده"
|
||||
|
||||
|
||||
@@ -20,6 +20,12 @@ article:
|
||||
this_article: "This Article"
|
||||
related_articles: "Related"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Poista sumennus käytöstä"
|
||||
disable_images: "Poista kuvat käytöstä"
|
||||
show_link_underline: "Näytä linkkien alleviivaus"
|
||||
font_size: "Fonttikoko"
|
||||
|
||||
author:
|
||||
byline_title: "Kirjoittaja"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "Activar modo zen"
|
||||
disable: "Desactivar modo zen"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Desactivar o desenfoque"
|
||||
disable_images: "Desactivar as imaxes"
|
||||
show_link_underline: "Mostrar subliñado da ligazón"
|
||||
font_size: "Tamaño de letra"
|
||||
|
||||
author:
|
||||
byline_title: "Autor"
|
||||
|
||||
|
||||
@@ -20,6 +20,12 @@ article:
|
||||
this_article: "This Article"
|
||||
related_articles: "Related"
|
||||
|
||||
a11y:
|
||||
disable_blur: "השבת טשטוש"
|
||||
disable_images: "השבת תמונות"
|
||||
show_link_underline: "הצג קו תחתון לקישורים"
|
||||
font_size: "גודל גופן"
|
||||
|
||||
author:
|
||||
byline_title: "מחבר"
|
||||
|
||||
|
||||
@@ -20,6 +20,12 @@ article:
|
||||
this_article: "This Article"
|
||||
related_articles: "Related"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Elmosódás kikapcsolása"
|
||||
disable_images: "Képek kikapcsolása"
|
||||
show_link_underline: "Link aláhúzásának megjelenítése"
|
||||
font_size: "Betűméret"
|
||||
|
||||
author:
|
||||
byline_title: "Szerző"
|
||||
|
||||
|
||||
@@ -26,6 +26,12 @@ article:
|
||||
this_article: "Artikel ini"
|
||||
related_articles: "Terkait"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Nonaktifkan blur"
|
||||
disable_images: "Nonaktifkan gambar"
|
||||
show_link_underline: "Tampilkan garis bawah tautan"
|
||||
font_size: "Ukuran font"
|
||||
|
||||
author:
|
||||
byline_title: "Penulis"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "Zenモードを有効にする"
|
||||
disable: "Zenモードを無効にする"
|
||||
|
||||
a11y:
|
||||
disable_blur: "ぼかしを無効にする"
|
||||
disable_images: "画像を無効にする"
|
||||
show_link_underline: "リンクの下線を表示する"
|
||||
font_size: "フォントサイズ"
|
||||
|
||||
author:
|
||||
byline_title: "著者"
|
||||
|
||||
|
||||
@@ -26,6 +26,12 @@ article:
|
||||
this_article: "이 글"
|
||||
related_articles: "관련 글"
|
||||
|
||||
a11y:
|
||||
disable_blur: "흐림 효과 끄기"
|
||||
disable_images: "이미지 끄기"
|
||||
show_link_underline: "링크 밑줄 표시"
|
||||
font_size: "글꼴 크기"
|
||||
|
||||
author:
|
||||
byline_title: "작성자"
|
||||
|
||||
|
||||
@@ -26,6 +26,12 @@ article:
|
||||
this_article: "This Article"
|
||||
related_articles: "Related"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Wyłącz rozmycie"
|
||||
disable_images: "Wyłącz obrazy"
|
||||
show_link_underline: "Pokaż podkreślenie linków"
|
||||
font_size: "Rozmiar czcionki"
|
||||
|
||||
author:
|
||||
byline_title: "Autor"
|
||||
|
||||
|
||||
@@ -23,6 +23,12 @@ article:
|
||||
this_article: "Esse Artigo"
|
||||
related_articles: "Relacionados"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Desativar desfoque"
|
||||
disable_images: "Desativar imagens"
|
||||
show_link_underline: "Mostrar sublinhado de links"
|
||||
font_size: "Tamanho da fonte"
|
||||
|
||||
author:
|
||||
byline_title: "Autor"
|
||||
|
||||
|
||||
@@ -20,6 +20,12 @@ article:
|
||||
this_article: "This Article"
|
||||
related_articles: "Related"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Dezactivează estomparea"
|
||||
disable_images: "Dezactivează imaginile"
|
||||
show_link_underline: "Afișează sublinierea linkurilor"
|
||||
font_size: "Dimensiunea fontului"
|
||||
|
||||
author:
|
||||
byline_title: "Autor"
|
||||
|
||||
|
||||
@@ -26,6 +26,12 @@ article:
|
||||
this_article: "This Article"
|
||||
related_articles: "Related"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Отключить размытие"
|
||||
disable_images: "Отключить изображения"
|
||||
show_link_underline: "Показать подчеркивание ссылок"
|
||||
font_size: "Размер шрифта"
|
||||
|
||||
author:
|
||||
byline_title: "Автор"
|
||||
|
||||
|
||||
@@ -20,6 +20,12 @@ article:
|
||||
this_article: "Denna artikel"
|
||||
related_articles: "Relaterade"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Inaktivera suddighet"
|
||||
disable_images: "Inaktivera bilder"
|
||||
show_link_underline: "Visa länkunderstrykning"
|
||||
font_size: "Teckenstorlek"
|
||||
|
||||
author:
|
||||
byline_title: "Författare"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "เปิดโหมดเซน"
|
||||
disable: "ปิดโหมดเซน"
|
||||
|
||||
a11y:
|
||||
disable_blur: "ปิดการเบลอ"
|
||||
disable_images: "ปิดการแสดงรูปภาพ"
|
||||
show_link_underline: "แสดงเส้นใต้ลิงก์"
|
||||
font_size: "ขนาดตัวอักษร"
|
||||
|
||||
author:
|
||||
byline_title: "ผู้เขียน"
|
||||
|
||||
|
||||
@@ -33,6 +33,12 @@ article:
|
||||
enable: "Enable zen mode"
|
||||
disable: "Disable zen mode"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Вимкнути розмиття"
|
||||
disable_images: "Вимкнути зображення"
|
||||
show_link_underline: "Показати підкреслення посилань"
|
||||
font_size: "Розмір шрифту"
|
||||
|
||||
author:
|
||||
byline_title: "Автор"
|
||||
|
||||
|
||||
@@ -29,6 +29,12 @@ article:
|
||||
enable: "Bật zen mode"
|
||||
disable: "Tắt zen mode"
|
||||
|
||||
a11y:
|
||||
disable_blur: "Tắt làm mờ"
|
||||
disable_images: "Tắt hình ảnh"
|
||||
show_link_underline: "Hiển thị gạch chân liên kết"
|
||||
font_size: "Cỡ chữ"
|
||||
|
||||
author:
|
||||
byline_title: "Tác giả"
|
||||
|
||||
|
||||
@@ -19,6 +19,12 @@ article:
|
||||
this_article: "本文"
|
||||
related_articles: "相关文章"
|
||||
|
||||
a11y:
|
||||
disable_blur: "禁用模糊效果"
|
||||
disable_images: "禁用图片"
|
||||
show_link_underline: "显示链接下划线"
|
||||
font_size: "字体大小"
|
||||
|
||||
author:
|
||||
byline_title: "作者"
|
||||
|
||||
|
||||
@@ -19,6 +19,12 @@ article:
|
||||
this_article: "本文"
|
||||
related_articles: "相關文章"
|
||||
|
||||
a11y:
|
||||
disable_blur: "停用模糊效果"
|
||||
disable_images: "停用圖片"
|
||||
show_link_underline: "顯示連結底線"
|
||||
font_size: "字體大小"
|
||||
|
||||
author:
|
||||
byline_title: "作者"
|
||||
|
||||
|
||||
@@ -69,6 +69,13 @@
|
||||
type="text/javascript"
|
||||
src="{{ $jsAppearance.RelPermalink }}"
|
||||
integrity="{{ $jsAppearance.Data.Integrity }}"></script>
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ $jsA11y := resources.Get "js/a11y.js" }}
|
||||
{{ $jsA11y = $jsA11y | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
|
||||
<script
|
||||
src="{{ $jsA11y.RelPermalink }}"
|
||||
integrity="{{ $jsA11y.Data.Integrity }}"></script>
|
||||
{{ end }}
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
{{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }}
|
||||
{{ $jsSearch := resources.Get "js/search.js" }}
|
||||
|
||||
@@ -35,16 +35,7 @@
|
||||
|
||||
{{ 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>
|
||||
{{ template "HeaderA11y" (dict "prefix" "desktop-" "Site" .Site) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
@@ -82,18 +73,8 @@
|
||||
<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>
|
||||
{{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
@@ -178,6 +159,84 @@
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ define "HeaderA11y" }}
|
||||
{{- $prefix := .prefix | default "" -}}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="{{ $prefix }}a11y-toggle"
|
||||
aria-label="Open accessibility panel"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
role="button"
|
||||
aria-pressed="false">
|
||||
{{ partial "icon.html" "a11y" }}
|
||||
</button>
|
||||
|
||||
<div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
|
||||
|
||||
<div
|
||||
id="{{ $prefix }}a11y-panel"
|
||||
role="dialog"
|
||||
aria-labelledby="{{ $prefix }}a11y-panel-title"
|
||||
class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
|
||||
style="min-width: 20rem;">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3
|
||||
id="{{ $prefix }}a11y-panel-title"
|
||||
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
Accessibility settings
|
||||
</h3>
|
||||
<button
|
||||
id="{{ $prefix }}a11y-close"
|
||||
class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
aria-label="Close a11y panel">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
{{- $toggles := slice
|
||||
(dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur"))
|
||||
(dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images"))
|
||||
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
|
||||
-}}
|
||||
|
||||
|
||||
{{- range $toggles }}
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ .label }}
|
||||
</label>
|
||||
<div class="ios-toggle">
|
||||
<input type="checkbox" id="{{ .id }}">
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="{{ $prefix }}font-size-select"
|
||||
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ i18n "a11y.font_size" }}
|
||||
</label>
|
||||
<select
|
||||
id="{{ $prefix }}font-size-select"
|
||||
class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
|
||||
{{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
|
||||
{{ range $fontSizes }}
|
||||
<option value="{{ . }}">{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* ========== Render HTML ========== */}}
|
||||
<div
|
||||
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 pt-[2px] pr-0 pb-[3px] pl-0">
|
||||
@@ -198,7 +257,9 @@
|
||||
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<div
|
||||
class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3{{ if .Site.Params.Logo }} -mt-[15px]{{ end }}">
|
||||
class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 {{ if .Site.Params.Logo }}
|
||||
-mt-[15px]
|
||||
{{ end }}">
|
||||
<div class="hidden md:flex items-center space-x-5">
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
<a
|
||||
|
||||
@@ -6,60 +6,64 @@
|
||||
{{- if not $featured }}{{ $featured = $images.GetMatch "{*cover*,*thumbnail*}" }}{{ end -}}
|
||||
|
||||
{{ if and .Params.featureimage (not $featured) }}
|
||||
{{- $url:= .Params.featureimage -}}
|
||||
{{ $featured = resources.GetRemote $url }}
|
||||
{{- $url:= .Params.featureimage -}}
|
||||
{{ $featured = resources.GetRemote $url }}
|
||||
{{ end }}
|
||||
|
||||
{{- if not $featured }}
|
||||
{{ with .Site.Params.defaultBackgroundImage }}
|
||||
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
|
||||
{{ $featured = resources.GetRemote . }}
|
||||
{{ else }}
|
||||
{{ $featured = resources.Get . }}
|
||||
{{ with .Site.Params.defaultBackgroundImage }}
|
||||
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
|
||||
{{ $featured = resources.GetRemote . }}
|
||||
{{ else }}
|
||||
{{ $featured = resources.Get . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end -}}
|
||||
|
||||
{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
|
||||
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
|
||||
(and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
|
||||
(and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
|
||||
) }}
|
||||
{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or
|
||||
(and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList))
|
||||
(and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
|
||||
) }}
|
||||
{{ $isParentList := eq (.Scratch.Get "scope") "list" }}
|
||||
{{ $shouldBlur := $.Params.layoutBackgroundBlur | default (or
|
||||
(and ($.Site.Params.article.layoutBackgroundBlur | default true) (not $isParentList))
|
||||
(and ($.Site.Params.list.layoutBackgroundBlur | default true) ($isParentList))
|
||||
)
|
||||
}}
|
||||
{{ $shouldAddHeaderSpace := $.Params.layoutBackgroundHeaderSpace | default (or
|
||||
(and ($.Site.Params.article.layoutBackgroundHeaderSpace | default true) (not $isParentList))
|
||||
(and ($.Site.Params.list.layoutBackgroundHeaderSpace | default true) ($isParentList))
|
||||
)
|
||||
}}
|
||||
|
||||
{{- with $featured -}}
|
||||
|
||||
{{ if $shouldAddHeaderSpace | default true}}
|
||||
<div id="hero" class="h-[150px] md:h-[200px]"></div>
|
||||
{{ end }}
|
||||
|
||||
<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 }}
|
||||
{{ if $shouldAddHeaderSpace | default true }}
|
||||
<div id="hero" class="h-[150px] md:h-[200px]"></div>
|
||||
{{ end }}
|
||||
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
|
||||
{{ $imageURL := .RelPermalink }}
|
||||
{{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
|
||||
{{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
|
||||
{{ end }}
|
||||
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
|
||||
</div>
|
||||
<img
|
||||
id="background-image"
|
||||
src="{{ $imageURL }}"
|
||||
alt="Background Image"
|
||||
class="absolute inset-0 w-full h-full object-cover">
|
||||
<div
|
||||
class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal">
|
||||
</div>
|
||||
</div>
|
||||
{{ if $shouldBlur | default false }}
|
||||
<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"
|
||||
data-image-id="background-image"
|
||||
data-image-url="{{ .RelPermalink }}"
|
||||
></script>
|
||||
{{ end }}
|
||||
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-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div>
|
||||
</div>
|
||||
|
||||
{{ if $shouldBlur | default false }}
|
||||
<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"
|
||||
data-image-id="background-image"
|
||||
data-image-url="{{ .RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
{{- end -}}
|
||||
|
||||
Reference in New Issue
Block a user