jeremy/karsttech.com
jeremy/karsttech.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added see-through content when the background effect is triggered.

Browse source
This commit is contained in:
Jeremy Karst 2026-01-07 02:17:41 -05:00
parent ade7a11d0b
commit 62aa8d018d
3 changed files with 27 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
assets/css/custom.css
View file

@ -6,16 +6,38 @@
.glass {
background: rgba(18, 47, 101, 0.6);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
animation: backdropShift 10s linear infinite;
animation-delay: 2s;
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(18, 47, 101, 0.45);
padding: 2rem;
filter: saturate(0.8) brightness(0.9);
opacity: 1;
transition: opacity 1s ease-in-out, background 1s ease-in-out, backdrop-filter 1s ease-in-out, -webkit-backdrop-filter 1s ease-in-out, filter 1s ease-in-out;
z-index: 2;
}
@keyframes backdropShift {
0% {
backdrop-filter: blur(8px) hue-rotate(-10deg);
}
50% {
backdrop-filter: blur(8px) hue-rotate(10deg);
}
100% {
backdrop-filter: blur(8px) hue-rotate(-10deg);
}
}
.glass-unblurred {
background: rgba(18, 47, 101, 0.05) !important;
backdrop-filter: blur(0) hue-rotate(0deg) !important;
-webkit-backdrop-filter: blur(0) hue-rotate(0deg) !important;
filter: saturate(1.0) brightness(1.0) !important;
opacity: 0.6 !important;
}
.toc:has(#TableOfContents) {
background-color: rgba(25, 25, 35, 0.3);
border-radius: 10px;
@ -145,18 +167,6 @@ header button[id^="search-button"]:hover {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
@keyframes backdropShift {
0% {
backdrop-filter: blur(8px) hue-rotate(-10deg);
}
50% {
backdrop-filter: blur(8px) hue-rotate(10deg);
}
100% {
backdrop-filter: blur(8px) hue-rotate(-10deg);
}
}
/* TOC link styling */
#TableOfContents a {
color: rgba(255, 255, 255, 0.8);

2
layouts/partials/background-images.html
View file

@ -64,6 +64,7 @@
circle.classList.remove('active');
circle.classList.add('fade-out');
fullImg.classList.add('unblurred');
document.querySelectorAll('.glass').forEach(el => el.classList.add('glass-unblurred'));
isRevealed = true;
}, 4000);
}, 1000);
@ -82,6 +83,7 @@
resetTimer();
circle.classList.remove('fade-out');
fullImg.classList.remove('unblurred');
document.querySelectorAll('.glass').forEach(el => el.classList.remove('glass-unblurred'));
isRevealed = false;
};

2
layouts/partials/home/page.html
View file

@ -56,6 +56,7 @@
circle.classList.remove('active');
circle.classList.add('fade-out');
fullImg.classList.add('unblurred');
document.querySelectorAll('.glass').forEach(el => el.classList.add('glass-unblurred'));
isRevealed = true;
}, 4000);
}, 1000);
@ -74,6 +75,7 @@
resetTimer();
circle.classList.remove('fade-out');
fullImg.classList.remove('unblurred');
document.querySelectorAll('.glass').forEach(el => el.classList.remove('glass-unblurred'));
isRevealed = false;
};