UniverseBow/wa2k.com-Website
1
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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>

33
www/style.css
View file

@ -3,10 +3,11 @@
body {
min-height: 100vh;
display: flex;
flex-direction: column; /* Stack banner and card top to bottom */
align-items: center; /* Keep card horizontally centered */
justify-content: flex-start; /* Stack from the top rather than centering vertically */
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: #0a0e1a url('background.png') center/cover no-repeat;
overflow-x: hidden;
}
.banner {
@ -104,17 +105,35 @@ p {
color: rgba(255, 255, 255, 0.52); /* Dimmed white — secondary text hierarchy */
}
/* ── Nav pill wrapper — fixed to top of viewport ── */
/* ── Nav pill wrapper — sits below banner, pins to top on scroll ── */
.nav-wrap {
align-self: stretch; /* Override body align-items:center — makes this child full width */
display: flex;
justify-content: center; /* Centre the pill inside the full-width container */
padding: 8px 0;
}
.nav-wrap.pinned {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 8px 0;
display: flex;
justify-content: center;
}
.nav-placeholder {
display: none;
align-self: stretch;
height: 60px;
}
.nav-placeholder.visible {
display: block;
}
/* ── The pill itself ── */
.nav-pill {
width: 160px;