updating background and logic for new background setting.

This commit is contained in:
2026-06-07 15:01:17 +00:00
Unverified
parent af4b69db1b
commit 711ddfb3d1
7 changed files with 9687 additions and 36 deletions

View File

@@ -49,6 +49,15 @@ The Blowfish theme is fully **decoupled/vendored** into this project's root fold
* No theme submodules are used, protecting the site from upstream updates breaking the build. * No theme submodules are used, protecting the site from upstream updates breaking the build.
* Custom styling and layouts can be edited directly in the root directories. * Custom styling and layouts can be edited directly in the root directories.
### Global Background Injection
The framework injects a diffused global background image natively into `layouts/_default/baseof.html` using a conditional logic block directly in the body template.
- It pulls the image source from `defaultBackgroundImage` in `config/_default/params.toml`.
- It dynamically applies a `has-global-bg` CSS class to the `<body>` element. This class forces the standard Blowfish solid background colors to become transparent (handled in `assets/css/custom.css`), allowing the background div to show through.
- **Bypass Logic**: The template logic automatically bypasses rendering the global background if the page is explicitly configured to use the Blowfish `background` or `hero` layouts (e.g. `layout = "background"` on the homepage or `heroStyle = "background"` on an article). This ensures the framework's native full-page feature images are never broken or layered incorrectly.
- The global background mimics the exact structure of the native homepage `background` layout, utilizing a `h-[1000px]` fixed height container with `object-cover` and honoring the `imagePosition` parameter from `params.toml` for pixel-perfect consistency.
- Project cards (using `layout: card`) have their styling overridden in `assets/css/custom.css` to use a darker, semi-transparent "dark web" palette to contrast nicely with the diffused background.
--- ---
## 🚀 CI/CD Pipeline & Deployment ## 🚀 CI/CD Pipeline & Deployment

View File

@@ -5,8 +5,6 @@
margin: 0 auto; margin: 0 auto;
} }
/* --- 2. Absolute Isolation Layout --- */ /* --- 2. Absolute Isolation Layout --- */
.single-post-wrapper { .single-post-wrapper {
display: flex; display: flex;
@@ -49,49 +47,31 @@ img[src$='#floatleft']{ float:left; margin: 0.7rem; }
img[src$='#floatright']{ float:right; margin: 0.7rem; } img[src$='#floatright']{ float:right; margin: 0.7rem; }
.homepage .content { text-align: left; } .homepage .content { text-align: left; }
/* Force transparency so global-background shows */
body.has-global-bg,
/* Page background with Diffusion Layer */ body.has-global-bg .bg-neutral,
body::before { body.has-global-bg .bg-neutral-50,
content: ""; body.has-global-bg .dark\:bg-neutral-800,
position: fixed; body.has-global-bg .dark\:bg-neutral-900 {
top: 0; background-color: transparent !important;
left: 0;
width: 100%;
height: 100%;
background-image: url('/images/backgrounds/default.gif');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: -10;
/* Diffusion / Overlay layer */
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: overlay;
filter: blur(5px); /* This adds the diffusion */
transform: scale(1.05); /* Avoid white edges from blur */
} }
/* Ensure background sits behind everything */ #main-content {
body { background-color: transparent !important;
position: relative;
z-index: 1;
} }
/* Card background color (Default Dark Web style) */ /* Card styling (Dark Web) */
article.relative.flex.flex-col.h-full.overflow-hidden.rounded-lg.border.border-neutral-300 { article.relative.flex.flex-col.h-full.overflow-hidden.rounded-lg.border.border-neutral-300 {
background-image: none !important; /* Revert gif from cards */ background-image: none !important;
background-color: rgba(26, 26, 26, 0.9) !important; /* Dark web color */ background-color: rgba(26, 26, 26, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important;
} }
/* Dark mode adjustment for card background */
.dark article.relative.flex.flex-col.h-full.overflow-hidden.rounded-lg.border.border-neutral-300 { .dark article.relative.flex.flex-col.h-full.overflow-hidden.rounded-lg.border.border-neutral-300 {
background-color: rgba(13, 17, 23, 0.9) !important; background-color: rgba(13, 17, 23, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important;
} }
/* Hide any TOC link that points to an element with the 'no-toc' class */ /* Hide any TOC link that points to an element with the 'no-toc' class */
.toc-right a.no-toc-link, .toc-right a.no-toc-link,
.toc-inside a.no-toc-link { .toc-inside a.no-toc-link {

8788
card-test.html Normal file

File diff suppressed because it is too large Load Diff

831
homepage-test.html Normal file
View File

@@ -0,0 +1,831 @@
<!doctype html>
<html
lang="en"
dir="ltr"
class="scroll-smooth"
data-default-appearance="dark"
data-auto-appearance="true"><head>
<meta name="generator" content="Hugo 0.162.1"><script src="/absproxy/1313/livereload.js?mindelay=10&amp;v=2&amp;port=443&amp;path=absproxy/1313/livereload" data-no-instant defer></script>
<meta charset="utf-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color">
<title>wiki.wompmacho.com</title>
<meta name="title" content="wiki.wompmacho.com">
<meta name="description" content="This is just the beginning...">
<link rel="canonical" href="https://dev.wompmacho.com/absproxy/1313/">
<link rel="alternate" type="application/rss+xml" href="/absproxy/1313/index.xml" title="wiki.wompmacho.com" />
<link rel="alternate" type="application/json" href="/absproxy/1313/index.json" title="wiki.wompmacho.com" />
<meta name="author" content="Michael">
<meta property="og:url" content="https://dev.wompmacho.com/absproxy/1313/">
<meta property="og:site_name" content="wiki.wompmacho.com">
<meta property="og:title" content="HOME">
<meta property="og:description" content="This is just the beginning...">
<meta property="og:locale" content="en">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HOME">
<meta name="twitter:description" content="This is just the beginning...">
<link
type="text/css"
rel="stylesheet"
href="/absproxy/1313/css/main.bundle.min.18308e5a2f023ba8f00e0d110e318859fd733149ffb9c27475a386e95cd63ec5bf43522b73295c7b9beec5abfdce6cdfd44567beb3e2d4d8fcddc6f1bb303ed6.css"
integrity="sha512-GDCOWi8CO6jwDg0RDjGIWf1zMUn/ucJ0daOG6VzWPsW/Q1Ircylce5vuxav9zmzf1EVnvrPi1Nj83cbxuzA&#43;1g==">
<script
type="text/javascript"
src="/absproxy/1313/js/appearance.min.6f41174b3a05b680820fe08cadbfa5fb7a7ca347b76a0955cdc68b9d8aca1ce24f0547e138cea33bcc7904d551a90afcb1cc7f2d9fe8557075d501419046c08c.js"
integrity="sha512-b0EXSzoFtoCCD&#43;CMrb&#43;l&#43;3p8o0e3aglVzcaLnYrKHOJPBUfhOM6jO8x5BNVRqQr8scx/LZ/oVXB11QFBkEbAjA=="></script>
<script src="/absproxy/1313/lib/zoom/zoom.min.umd.a527109b68c082a70f3697716dd72a9d5aa8b545cf800cecbbc7399f2ca6f6e0ce3e431f2062b48bbfa47c9ea42822714060bef309be073f49b9c0e30d318d7b.js" integrity="sha512-pScQm2jAgqcPNpdxbdcqnVqotUXPgAzsu8c5nyym9uDOPkMfIGK0i7&#43;kfJ6kKCJxQGC&#43;8wm&#43;Bz9JucDjDTGNew=="></script>
<script
defer
type="text/javascript"
id="script-bundle"
src="/absproxy/1313/js/main.bundle.min.8f75559c3b0987cc436337d462a0b075ebdd214d92a8eac880da424282daeece8759e586481872b873dc2eaa92c6a66f083e3be96ab847d926aea25777dfb292.js"
integrity="sha512-j3VVnDsJh8xDYzfUYqCwdevdIU2SqOrIgNpCQoLa7s6HWeWGSBhyuHPcLqqSxqZvCD476Wq4R9kmrqJXd9&#43;ykg=="
data-copy="Copy"
data-copied="Copied"></script>
<link rel="icon" type="image/svg+xml" href="/icons/icon.svg">
<link rel="apple-touch-icon" href="/icons/icon.svg">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"@id": "https://dev.wompmacho.com/absproxy/1313/",
"name": "wiki.wompmacho.com",
"description": "my personal wiki",
"inLanguage": "en",
"url": "https://dev.wompmacho.com/absproxy/1313/",
"publisher" : {
"@type": "Person",
"name": "Michael"
}
}
</script>
</head>
<body class="flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32 text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral bf-scrollbar">
<div id="the-top" class="absolute flex self-center">
<a
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
href="#main-content">
<span class="font-bold text-primary-600 pe-2 dark:text-primary-400">&darr;</span>
Skip to main content
</a>
</div>
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl bg-neutral/25 dark:bg-neutral-800/25"></div>
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
<div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
<a href="/absproxy/1313/" class="text-base font-medium truncate min-w-0 shrink">
wiki.wompmacho.com
</a>
<div class="flex items-center ms-auto">
<div class="hidden md:flex">
<nav class="flex items-center gap-x-5 h-12">
<a
href="/absproxy/1313/projects/"
class="flex items-center bf-icon-color-hover"
aria-label="projects"
title="Projects">
<span class="text-base font-medium break-normal">
projects
</span>
</a>
<a
href="/absproxy/1313/posts/"
class="flex items-center bf-icon-color-hover"
aria-label="posts"
title="Posts">
<span class="text-base font-medium break-normal">
posts
</span>
</a>
<a
href="/absproxy/1313/stream/"
class="flex items-center bf-icon-color-hover"
aria-label="stream"
title="Stream">
<span class="text-base font-medium break-normal">
stream
</span>
</a>
<button
id="search-button"
aria-label="Search"
class="text-base bf-icon-color-hover"
title="Search (/)">
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</button>
<div class="flex items-center">
<button
id="appearance-switcher"
aria-label="Dark mode switcher"
type="button"
class="text-base bf-icon-color-hover">
<div class="flex items-center justify-center dark:hidden">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>
</span>
</div>
<div class="items-center justify-center hidden dark:flex">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>
</span>
</div>
</button>
</div>
</nav>
</div>
<div class="flex md:hidden">
<div class="flex items-center h-14 gap-4">
<button
id="search-button-mobile"
aria-label="Search"
class="flex items-center justify-center bf-icon-color-hover"
title="Search (/)">
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</button>
<button
id="appearance-switcher-mobile"
type="button"
aria-label="Dark mode switcher"
class="flex items-center justify-center text-neutral-900 hover:text-primary-600 dark:text-neutral-200 dark:hover:text-primary-400">
<div class="dark:hidden">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"/></svg>
</span>
</div>
<div class="hidden dark:block">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"/></svg>
</span>
</div>
</button>
<input type="checkbox" id="mobile-menu-toggle" autocomplete="off" class="hidden peer">
<label for="mobile-menu-toggle" class="flex items-center justify-center cursor-pointer bf-icon-color-hover">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>
</span>
</label>
<div
role="dialog"
aria-modal="true"
style="scrollbar-gutter: stable;"
class="fixed inset-0 z-50 invisible overflow-y-auto px-6 py-20 opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100 bg-neutral-50/97 dark:bg-neutral-900/99
bf-scrollbar">
<label
for="mobile-menu-toggle"
class="fixed end-8 top-5 flex items-center justify-center z-50 h-12 w-12 cursor-pointer select-none rounded-full bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
</span>
</label>
<nav class="mx-auto max-w-md space-y-6">
<div class="px-2">
<a
href="/absproxy/1313/projects/"
aria-label="projects"
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
<span title="Projects" class="text-2xl font-bold tracking-tight">
projects
</span>
</a>
</div>
<div class="px-2">
<a
href="/absproxy/1313/posts/"
aria-label="posts"
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
<span title="Posts" class="text-2xl font-bold tracking-tight">
posts
</span>
</a>
</div>
<div class="px-2">
<a
href="/absproxy/1313/stream/"
aria-label="stream"
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
<span title="Stream" class="text-2xl font-bold tracking-tight">
stream
</span>
</a>
</div>
<div class="flex flex-wrap gap-4 mt-8 pt-8 border-t bf-border-color">
<a
href="/absproxy/1313/projects/homelab/homelab_infra/"
aria-label="homelab"
class="inline-flex items-center gap-2 px-2 py-2 bf-icon-color-hover rounded-full text-sm">
<span title="Homelab Infrastructure">homelab</span>
</a>
<a
href="/absproxy/1313/quotes/"
aria-label="quotes"
class="inline-flex items-center gap-2 px-2 py-2 bf-icon-color-hover rounded-full text-sm">
<span title="Quotes">quotes</span>
</a>
<a
href="/absproxy/1313/resume/"
aria-label="resume"
class="inline-flex items-center gap-2 px-2 py-2 bf-icon-color-hover rounded-full text-sm">
<span title="Resume">resume</span>
</a>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<div
class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 ">
<div class="hidden md:flex items-center space-x-5">
<a
href="/absproxy/1313/projects/homelab/homelab_infra/"
class="flex items-center bf-icon-color-hover">
<span class="text-xs font-light" title="Homelab Infrastructure">
homelab
</span>
</a>
<a
href="/absproxy/1313/quotes/"
class="flex items-center bf-icon-color-hover">
<span class="text-xs font-light" title="Quotes">
quotes
</span>
</a>
<a
href="/absproxy/1313/resume/"
class="flex items-center bf-icon-color-hover">
<span class="text-xs font-light" title="Resume">
resume
</span>
</a>
</div>
</div>
</div>
</div>
<script
type="text/javascript"
src="/absproxy/1313/js/background-blur.min.605b3b942818f0ab5a717ae446135ec46b8ee5a2ad12ae56fb90dc2a76ce30c388f9fec8bcc18db15bd47e3fa8a09d779fa12aa9c184cf614a315bc72c6c163d.js"
integrity="sha512-YFs7lCgY8KtacXrkRhNexGuO5aKtEq5W&#43;5DcKnbOMMOI&#43;f7IvMGNsVvUfj&#43;ooJ13n6EqqcGEz2FKMVvHLGwWPQ=="
data-blur-id="menu-blur"></script>
<div class="relative flex flex-col grow">
<main id="main-content" class="grow">
<article class="prose dark:prose-invert max-w-full">
<div class="relative">
<div class="absolute inset-x-0 bottom-0 h-1/2"></div>
<div class="mx-auto max-w-7xl p-0">
<div class="relative sm:overflow-hidden">
<div class="fixed inset-x-0 top-0 -z-10">
<img
id="background-image"
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
src="/absproxy/1313/me/bjw3071o7xi21.gif"
role="presentation"
>
<div
class="absolute inset-0 bg-neutral/60 dark:bg-neutral-800/60 mix-blend-normal"></div>
</div>
<div class="relative flex flex-col items-center justify-center px-1 py-1 text-center">
<img
class="mb-2 h-36 w-36 rounded-full"
width="144"
height="144"
alt="Michael"
src="/absproxy/1313/me/wampyDance_hu_69da3be68ac1013b.gif"
data-zoom-src="/absproxy/1313/me/wampyDance_hu_d23924b08cd0700b.gif">
<h1 class="mb-2 text-4xl font-extrabold text-neutral-800 dark:text-neutral-200">
Michael
</h1>
<h2 class="mt-0 mb-0 text-xl text-neutral-800 dark:text-neutral-300">
aka <code>Mitch</code> / aka <code>WompMacho</code>
</h2>
<div class="mt-3 mb-10 text-2xl">
</div>
</div>
<div class="relative flex flex-col w-full px-1 py-1 text-left">
<section class="prose dark:prose-invert mx-auto w-full">
<h1 class="relative group">Hi there 👋
<div id="hi-there-" class="anchor"></div>
<span
class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
<a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#hi-there-" aria-label="Anchor">#</a>
</span>
</h1>
<p>The goal of this site is to document my home apps, services, infrastructure and other projects I am working on. Additionally I am using it as a learning tool, to document things I already know, fill in some gaps, add to that knowledge and further refine my understanding on complicated topics. I find its much easier to master something if you are forced to explain it to someone else. With that spirit in mind, lemme see what I can float your way.</p>
<div class="admonition relative overflow-hidden rounded-lg border-l-4 my-3 px-4 py-3 shadow-sm" data-type="success">
<div class="flex items-center gap-2 font-semibold text-inherit">
<div class="flex shrink-0 h-5 w-5 items-center justify-center text-lg"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/></svg>
</span></div>
<div class="grow">
Favorite Quote
</div>
</div><div class="admonition-content mt-3 text-base leading-relaxed text-inherit"><p>Never attribute to malice what can be explained by incompetence</p></div></div>
</section>
</div>
</div>
</div>
</div>
</article>
<section>
</section>
<div
id="scroll-to-top"
class="fixed bottom-6 end-6 z-50 transform translate-y-4 opacity-0 duration-200">
<a
href="#the-top"
class="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
aria-label="Scroll to top"
title="Scroll to top">
&uarr;
</a>
</div>
</main><footer id="site-footer" class="py-10 print:hidden">
<div class="flex items-center justify-between">
<p class="text-sm text-neutral-500 dark:text-neutral-400">
&copy;
2026
Michael
</p>
<p class="text-xs text-neutral-500 dark:text-neutral-400">
Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500"
href="https://gohugo.io/" target="_blank" rel="noopener noreferrer">Your Mom</a>
</p>
</div>
<script>
mediumZoom(document.querySelectorAll("img:not(.nozoom)"), {
margin: 24,
background: "rgba(0,0,0,0.5)",
scrollOffset: 0,
});
</script>
</footer>
<div
id="search-wrapper"
class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh] z-500"
data-url="https://dev.wompmacho.com/absproxy/1313/">
<div
id="search-modal"
class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800">
<header class="relative z-10 flex items-center justify-between flex-none px-2">
<form class="flex items-center flex-auto min-w-0">
<div class="flex items-center justify-center w-8 h-8 text-neutral-400">
<span class="relative block icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
</span>
</div>
<input
type="search"
id="search-query"
class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent"
placeholder="Search"
tabindex="0">
</form>
<button
id="close-search-button"
class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
title="Close (Esc)">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
</span>
</button>
</header>
<section class="flex-auto px-2 overflow-auto">
<ul id="search-results">
</ul>
</section>
</div>
</div>
</div>
</body>
</html>

View File

@@ -9,8 +9,52 @@
{{- partialCached "init.html" . -}} {{- partialCached "init.html" . -}}
{{ $bodyLayout := "flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32" }} {{ $bodyLayout := "flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32" }}
{{/* Global Background Logic */}}
{{ $useGlobalBg := false }}
{{ $bgImage := "" }}
{{ if site.Params.defaultBackgroundImage }}
{{ $useGlobalBg = true }}
{{ $bgImage = site.Params.defaultBackgroundImage }}
{{ if .IsHome }}
{{ if or (eq .Site.Params.homepage.layout "background") (eq .Site.Params.homepage.layout "hero") }}
{{ if .Site.Params.homepage.homepageImage }}{{ $useGlobalBg = false }}{{ end }}
{{ end }}
{{ else if .IsPage }}
{{ $heroStyle := .Params.heroStyle | default (.Site.Params.article.heroStyle | default "basic") }}
{{ if or (eq $heroStyle "background") (eq $heroStyle "hero") }}
{{ if .Params.featureimage }}{{ $useGlobalBg = false }}{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ $bodyColor := "text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral" }} {{ $bodyColor := "text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral" }}
<body class="{{ $bodyLayout }} {{ $bodyColor }} {{ with .Params.bodyClass }}{{ . }}{{ end }} {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}"> {{ if $useGlobalBg }}
{{ $bodyColor = "text-lg text-neutral-900 dark:text-neutral" }}
{{ end }}
{{ $globalBgClass := cond $useGlobalBg "has-global-bg" "" }}
<body class="{{ $bodyLayout }} {{ $bodyColor }} {{ with .Params.bodyClass }}{{ . }}{{ end }} {{ $globalBgClass }} {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
{{ if $useGlobalBg }}
{{ $bgURL := "" }}
{{ if or (strings.HasPrefix $bgImage "http:") (strings.HasPrefix $bgImage "https:") }}
{{ $bgURL = $bgImage }}
{{ else }}
{{ $bgURL = $bgImage | absURL }}
{{ end }}
<div id="global-background" class="fixed inset-0 overflow-hidden pointer-events-none single_hero_background nozoom" style="z-index: -1;">
{{ $style := "" }}
{{ $defaultPosition := site.Params.imagePosition | default false }}
{{ if $defaultPosition }}
{{ $style = printf "object-position: %s;" $defaultPosition }}
{{ end }}
<img src="{{ $bgURL }}" class="absolute inset-0 w-full h-[1000px] md:h-[1200px] object-cover" role="presentation" {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
<div class="absolute inset-0 h-[1000px] md:h-[1200px] bg-neutral/60 dark:bg-neutral-800/60 mix-blend-normal"></div>
</div>
{{ end }}
<div id="the-top" class="absolute flex self-center"> <div id="the-top" class="absolute flex self-center">
<a <a
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600" class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"

View File

@@ -36,9 +36,7 @@
role="presentation" role="presentation"
{{ if $style }}style="{{ $style | safeCSS }}"{{ end }}> {{ if $style }}style="{{ $style | safeCSS }}"{{ end }}>
<div <div
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div> class="absolute inset-0 bg-neutral/60 dark:bg-neutral-800/60 mix-blend-normal"></div>
<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 }} {{ end }}
</div> </div>

1
test-bg.sh Normal file
View File

@@ -0,0 +1 @@
# quick script to test logic