cry/wa2k.com
1
0
Fork 0
forked from UniverseBow/wa2k.com-Website
Code Pull requests Activity

blah blah

Browse source
This commit is contained in:
UniverseBow 2026-03-15 16:28:54 -07:00
parent b22976bf85
commit e2c343c49d
2 changed files with 80 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

74
www/index.html
View file

@ -11,25 +11,6 @@
<img src="banner.png" alt="banner" />
</div>
<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
<defs>
<filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="nav-disp-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="nav-spec-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
<filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="displacement-map-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="specular-map-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
</defs>
</svg>
<div class="nav-wrap">
<div class="nav-pill" id="nav-pill">
<div class="nav-pill-bar" id="nav-pill-bar">
@ -48,13 +29,47 @@
</div>
</div>
<div class="nav-placeholder" id="nav-placeholder"></div>
<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
<defs>
<filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="nav-disp-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="nav-spec-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
<filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="displacement-map-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="specular-map-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
</defs>
</svg>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<br>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<script>
// ─── Configuration ────────────────────────────────────────────────────────────
const CONFIG = {
@ -387,6 +402,25 @@ document.addEventListener('click', (e) => {
setTimeout(applyNavGlass, CLOSE_WIDTH_DELAY + CLOSE_WIDTH_MS + 50);
}
});
// ─── Nav pin on scroll ────────────────────────────────────────────────────────
const navWrap = document.querySelector('.nav-wrap');
const navPlaceholder = document.getElementById('nav-placeholder');
function updateNavPin() {
navWrap.classList.remove('pinned');
navPlaceholder.classList.remove('visible');
const offsetTop = navWrap.offsetTop;
if (window.scrollY > offsetTop) {
navWrap.classList.add('pinned');
navPlaceholder.classList.add('visible');
}
}
window.addEventListener('scroll', updateNavPin);
window.addEventListener('load', updateNavPin);
</script>
</body>