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

new styles, borders, and fixed dropdown menu

Browse source
This commit is contained in:
UniverseBow 2026-03-15 21:43:33 -07:00
parent 9bcabfe5e7
commit 82724d5ee1
8 changed files with 162 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
www/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
www/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
www/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
www/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 686 B

BIN
www/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

36
www/index.html
View file

@ -3,11 +3,6 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WA2000</title> <title>WA2000</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link type="text/css" rel="stylesheet" href="./style.css"> <link type="text/css" rel="stylesheet" href="./style.css">
</head> </head>
<body> <body>
@ -268,10 +263,20 @@ function imageDataToDataURL(imageData) {
function applyLiquidGlass() { function applyLiquidGlass() {
const card = document.getElementById('card'); const card = document.getElementById('card');
// offsetWidth/Height for map generation (unaffected by zoom)
const w = card.offsetWidth; const w = card.offsetWidth;
const h = card.offsetHeight; const h = card.offsetHeight;
if (w === 0 || h === 0) return; if (w === 0 || h === 0) return;
// getBoundingClientRect for SVG filter dimensions — these must match the
// actual rendered pixel size that backdrop-filter sees at current zoom level
const rect = card.getBoundingClientRect();
const fw = Math.round(rect.width);
const fh = Math.round(rect.height);
CONFIG.borderRadius = parseFloat(getComputedStyle(card).borderRadius) || 25;
const { imageData, maxDisplacement } = buildDisplacementMap(w, h); const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
const dispDataURL = imageDataToDataURL(imageData); const dispDataURL = imageDataToDataURL(imageData);
const specularDataURL = buildSpecularMap(w, h); const specularDataURL = buildSpecularMap(w, h);
@ -280,12 +285,13 @@ function applyLiquidGlass() {
const specImg = document.getElementById('specular-map-img'); const specImg = document.getElementById('specular-map-img');
const dispFilter = document.getElementById('displacement-map-filter'); const dispFilter = document.getElementById('displacement-map-filter');
// Set filter image dimensions to the zoomed rect size so the map aligns correctly
dispImg.setAttribute('href', dispDataURL); dispImg.setAttribute('href', dispDataURL);
dispImg.setAttribute('width', w); dispImg.setAttribute('width', fw);
dispImg.setAttribute('height', h); dispImg.setAttribute('height', fh);
specImg.setAttribute('href', specularDataURL); specImg.setAttribute('href', specularDataURL);
specImg.setAttribute('width', w); specImg.setAttribute('width', fw);
specImg.setAttribute('height', h); specImg.setAttribute('height', fh);
dispFilter.setAttribute('scale', maxDisplacement); dispFilter.setAttribute('scale', maxDisplacement);
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent); const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
@ -312,6 +318,10 @@ function applyNavGlassAt(radius) {
const h = pill.offsetHeight; const h = pill.offsetHeight;
if (w === 0 || h === 0) return; if (w === 0 || h === 0) return;
const rect = pill.getBoundingClientRect();
const fw = Math.round(rect.width);
const fh = Math.round(rect.height);
const savedBezel = CONFIG.bezelWidth; const savedBezel = CONFIG.bezelWidth;
const savedScale = CONFIG.scaleRatio; const savedScale = CONFIG.scaleRatio;
const savedRadius = CONFIG.borderRadius; const savedRadius = CONFIG.borderRadius;
@ -328,11 +338,11 @@ function applyNavGlassAt(radius) {
CONFIG.borderRadius = savedRadius; CONFIG.borderRadius = savedRadius;
document.getElementById('nav-disp-img').setAttribute('href', dispDataURL); document.getElementById('nav-disp-img').setAttribute('href', dispDataURL);
document.getElementById('nav-disp-img').setAttribute('width', w); document.getElementById('nav-disp-img').setAttribute('width', fw);
document.getElementById('nav-disp-img').setAttribute('height', h); document.getElementById('nav-disp-img').setAttribute('height', fh);
document.getElementById('nav-spec-img').setAttribute('href', specularDataURL); document.getElementById('nav-spec-img').setAttribute('href', specularDataURL);
document.getElementById('nav-spec-img').setAttribute('width', w); document.getElementById('nav-spec-img').setAttribute('width', fw);
document.getElementById('nav-spec-img').setAttribute('height', h); document.getElementById('nav-spec-img').setAttribute('height', fh);
document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement); document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement);
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent); const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);

1
www/site.webmanifest Normal file
View file

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

259
www/style.css
View file

@ -14,187 +14,206 @@ body {
width: 99%; width: 99%;
max-height: 280px; max-height: 280px;
overflow: hidden; overflow: hidden;
margin: 5px 5px 10px 5px; /* 5px on top/left/right, 10px on bottom */ margin: 5px 5px 10px 5px;
border-radius: 35px; /* Rounded corners */ border-radius: 25px;
display: flex;
border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
align-items: center; /* Vertically centre the image within the container */
} }
.banner img { .banner img {
width: 100%; /* Stretch image to fill the banner width */ width: 100%;
height: 100%; /* Fill the banner height */ object-fit: cover;
object-fit: cover; /* Crop and center the image rather than squishing it */ object-position: center center;
object-position: center top; /* Anchor to the top so the most important part of the image stays visible */ display: block;
display: block; /* Remove the default inline gap below images */
} }
.card { .card {
width: min(880px, 88%); /* Cap width at 880px, but shrink to 88% of viewport on small screens */ width: min(880px, 88%);
height: 540px; /* Fixed height */ height: 320px; /* scaled from 540px proportionally for 480px monitor */
padding: 40px; /* Inner spacing on all sides */ padding: 28px; /* scaled from 40px */
border-radius: 50px; /* Rounded corners */ border-radius: 25px; /* matches eww .box border-radius */
text-align: center; /* Center all text content */ text-align: center;
background: rgba(255, 255, 255, 0.08); /* Very subtle white tint — more transparent than before so the background breathes through */ background: rgba(242, 242, 243, 0.6); /* eww .box background-color */
border: 2px solid rgba(255, 255, 255, 1); /* Slightly brighter border for a crisper glass edge */ border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Firefox fallback — blur, colour boost, and slight brightness lift; Chrome overrides this via JS with the SVG refraction filter */ backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Webkit prefix for Safari compatibility */ -webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
box-shadow: box-shadow:
0 24px 60px rgba(0, 0, 0, 0.35), /* Large soft drop shadow for depth/lift */ 0 2px 8px rgba(0, 0, 0, 0.15), /* eww notification box-shadow */
0 0 0 1px rgba(255, 255, 255, 0.08); /* Hairline outer glow ring */ inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww .box inset shadow */
position: relative; /* Required so ::before/::after pseudo-elements position relative to the card */ position: relative;
overflow: hidden; /* Clip pseudo-elements to the card's rounded corners */ overflow: hidden;
} }
/* ── Main specular: top-left corner catch ── */ /* ── Main specular: top-left corner catch ── */
.card::before { .card::before {
content: ''; /* Required to render a pseudo-element with no text */ content: '';
position: absolute; /* Layer it on top of the card without affecting layout */ position: absolute;
inset: 0; /* Stretch to fill all four edges of the card */ inset: 0;
border-radius: inherit; /* Match the card's rounded corners */ border-radius: inherit;
background: background:
radial-gradient( radial-gradient(
ellipse 60% 30% at 10% -5%, /* Tighter ellipse originating just above the top-left corner */ ellipse 60% 30% at 10% -5%,
rgba(255, 255, 255, 0.28) 0%, /* Bright white at the light source center */ rgba(255, 255, 255, 0.35) 0%, /* brighter on light bg */
transparent 55% /* Fade out before reaching the middle of the card */ transparent 55%
), ),
linear-gradient( linear-gradient(
128deg, /* Diagonal direction: top-left → bottom-right */ 128deg,
rgba(255, 255, 255, 0.13) 0%, /* Broad glancing sheen starting at the top-left corner */ rgba(255, 255, 255, 0.20) 0%,
rgba(255, 255, 255, 0.04) 30%, /* Dim mid-point to keep the fade gradual */ rgba(255, 255, 255, 0.08) 30%,
transparent 55% /* Fades out before the center */ transparent 55%
); );
pointer-events: none; /* Prevent this overlay from blocking mouse interaction */ pointer-events: none;
} }
/* ── Glass rim: inset edge highlights ── */ /* ── Glass rim: inset edge highlights — matches eww border colour ── */
.card::after { .card::after {
content: ''; /* Required to render the pseudo-element */ content: '';
position: absolute; /* Layer over the card without shifting layout */ position: absolute;
inset: 0; /* Fill the card edge to edge */ inset: 0;
border-radius: inherit; /* Match card rounding */ border-radius: inherit;
background: transparent; /* No fill — only the inset shadow matters here */ background: transparent;
border: 1px solid transparent; /* Placeholder border so box-shadow inset renders correctly on all sides */ border: 1px solid transparent;
border-image: none; /* Ensure no gradient border overrides the transparent border */ border-image: none;
box-shadow: box-shadow:
inset 1px 1px 0 rgba(218, 218, 218, 0.55), /* Bright top and left inner edge — simulates light hitting the glass rim */ inset 1px 1px 0 rgba(196, 214, 226, 0.8), /* eww border colour as rim light */
inset -1px -1px 0 rgba(0, 0, 0, 0.12); /* Darker bottom and right inner edge — simulates shadow on the far side */ inset -1px -1px 0 rgba(0, 0, 0, 0.08);
pointer-events: none; /* Let clicks pass through to card content */ pointer-events: none;
} }
h1 { h1 {
font-size: clamp(36px, 6vw, 52px); /* Fluid size: min 36px, scales with viewport, max 52px */ font-size: clamp(24px, 5vw, 38px); /* scaled down for smaller monitor */
font-weight: 300; /* Light weight for an elegant look */ font-weight: 300;
line-height: 1.1; /* Tight leading for large display text */ line-height: 1.1;
color: rgba(255, 255, 255, 0.92); /* Near-white, slightly transparent */ color: rgba(35, 38, 41, 0.92); /* eww $text-color #232629 */
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* eww label.time text-shadow */
} }
h1 em { h1 em {
font-style: italic; /* Standard italic for emphasis */ font-style: italic;
color: rgba(180, 210, 255, 0.85); /* Cool blue tint for italicised words */ color: rgba(137, 180, 250, 0.9); /* eww $primary-neon #89b4fa */
} }
.divider { .divider {
width: 40px; /* Short horizontal rule */ width: 40px;
height: 0.5px; /* Hairline thickness */ height: 0.5px;
background: rgba(255, 255, 255, 0.2); /* Faint white line */ background: rgba(196, 214, 226, 0.8); /* eww border colour */
margin: 22px auto; /* Vertical spacing + horizontal centering */ margin: 16px auto; /* scaled from 22px */
} }
p { p {
font-size: 15px; font-size: 14px; /* scaled from 15px */
font-weight: 300; /* Light weight to match the heading style */ font-weight: 300;
line-height: 1.75; /* Generous leading for readability */ line-height: 1.75;
color: rgba(255, 255, 255, 0.52); /* Dimmed white — secondary text hierarchy */ color: rgba(35, 38, 41, 0.52); /* eww $text-color at reduced opacity */
} }
/* ── Nav pill wrapper — sits below banner, pins to top on scroll ── */ /* ── Nav pill wrapper ── */
.nav-wrap { .nav-wrap {
align-self: stretch; /* Override body align-items:center — makes this child full width */ align-self: stretch;
display: flex; display: flex;
justify-content: center; /* Centre the pill inside the full-width container */ justify-content: center;
padding: 8px 0; padding: 6px 0; /* scaled from 8px */
} }
.nav-wrap.pinned { .nav-wrap.pinned {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 100; z-index: 100;
padding: 8px 0; padding: 6px 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.nav-placeholder { .nav-placeholder {
display: none; display: none;
align-self: stretch; align-self: stretch;
height: 60px; height: 56px; /* scaled: 44px pill + 6px + 6px padding */
} }
.nav-placeholder.visible { .nav-placeholder.visible {
display: block; display: block;
} }
/* ── The pill itself ── */ /* ── The pill itself ── */
.nav-pill { .nav-pill {
position: relative; /* anchor for the absolute dropdown */
width: 160px; width: 160px;
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.08); position: relative;
border: 1px solid rgba(255, 255, 255, 0.30); z-index: 100;
backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); background: rgba(242, 242, 243, 0.6);
-webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); border: 4px solid rgba(196, 214, 226, 0.9);
backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
box-shadow: box-shadow:
0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15),
inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 2px rgba(0, 0, 0, 0.2);
inset -1px -1px 0 rgba(0, 0, 0, 0.10); /* no overflow:hidden — that would clip the absolute dropdown */
overflow: hidden;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
} }
/* ── Pill expands and corners soften when open ── */ .nav-pill-bar {
overflow: hidden; /* clip bar content to pill border-radius */
border-radius: inherit;
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 0 16px;
cursor: pointer;
user-select: none;
}
.nav-dropdown {
position: absolute; /* float over page — doesn't push content down */
top: calc(100% + 4px); /* gap between pill bar and dropdown */
left: 50%;
transform: translateX(-50%); /* centre under the pill */
width: 100%; /* match pill width */
max-height: 0;
opacity: 0;
overflow: hidden;
background: rgba(242, 242, 243, 0.6);
border: 4px solid rgba(196, 214, 226, 0.9);
border-radius: 22px;
backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 101;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s,
opacity 0.25s ease 0.22s;
}
.nav-pill.open { .nav-pill.open {
border-radius: 22px; border-radius: 22px;
width: 200px; width: 200px;
} }
/* ── The always-visible top bar: logo + chevron ── */
.nav-pill-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 18px;
cursor: pointer;
user-select: none;
}
.nav-logo { .nav-logo {
font-size: 14px; font-size: 13px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.88); color: rgba(35, 38, 41, 0.88); /* eww $text-color */
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
/* ── Chevron rotates 180° when open ── */
.nav-chevron { .nav-chevron {
width: 16px; width: 14px;
height: 16px; height: 14px;
flex-shrink: 0; flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.nav-pill.open .nav-chevron { /* Restyle chevron stroke to dark to match eww theme */
transform: rotate(180deg); .nav-chevron polyline {
stroke: rgba(35, 38, 41, 0.7); /* eww $text-color */
} }
/* ── Dropdown — hidden by default, slides down when open ── */ .nav-pill.open .nav-chevron {
.nav-dropdown { transform: rotate(180deg);
max-height: 0;
opacity: 0;
overflow: hidden;
/* Opening: wait for width to finish first, then drop down */
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s,
opacity 0.25s ease 0.22s;
} }
.nav-pill.open .nav-dropdown { .nav-pill.open .nav-dropdown {
@ -202,13 +221,11 @@ p {
opacity: 1; opacity: 1;
} }
/* Closing: dropdown collapses immediately (no delay), width waits after */
.nav-pill:not(.open) .nav-dropdown { .nav-pill:not(.open) .nav-dropdown {
transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1), transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s ease; opacity 0.15s ease;
} }
/* Width/radius collapse waits for dropdown to finish */
.nav-pill:not(.open) { .nav-pill:not(.open) {
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
@ -216,22 +233,22 @@ p {
.nav-divider { .nav-divider {
height: 1px; height: 1px;
background: rgba(255, 255, 255, 0.12); background: rgba(196, 214, 226, 0.8); /* eww .spacer border colour */
margin: 0 14px; margin: 0 12px;
} }
.nav-link { .nav-link {
display: block; display: block;
padding: 11px 18px; padding: 10px 16px;
font-size: 14px; font-size: 13px;
font-weight: 300; font-weight: 300;
color: rgba(255, 255, 255, 0.70); text-align: center;
color: rgba(35, 38, 41, 0.75); /* eww $text-color */
text-decoration: none; text-decoration: none;
transition: color 0.15s ease, transition: color 0.15s ease, background 0.15s ease;
background 0.15s ease;
} }
.nav-link:hover { .nav-link:hover {
color: rgba(255, 255, 255, 0.95); color: rgba(137, 180, 250, 1); /* eww $primary-neon on hover */
background: rgba(255, 255, 255, 0.06); background: rgba(196, 214, 226, 0.25); /* soft eww border colour tint */
} }