diff --git a/www/about.html b/www/about.html deleted file mode 100644 index 8dfcd71..0000000 --- a/www/about.html +++ /dev/null @@ -1,88 +0,0 @@ - - - - -WA2000 - About - - - - - - - - - - - -
- - - Icon description - - -
- - - - - -
- - - Icon description - - -
- - - - - - - - - - - - - - - - - - - - - - - -
-

waff waff!

-
-

tiny text!!!

-

wuff

-
- - - - - \ No newline at end of file diff --git a/www/android-chrome-192x192.png b/www/android-chrome-192x192.png deleted file mode 100644 index 3a41a87..0000000 Binary files a/www/android-chrome-192x192.png and /dev/null differ diff --git a/www/android-chrome-512x512.png b/www/android-chrome-512x512.png deleted file mode 100644 index 1d5d0ac..0000000 Binary files a/www/android-chrome-512x512.png and /dev/null differ diff --git a/www/apple-touch-icon.png b/www/apple-touch-icon.png deleted file mode 100644 index 71ff0c7..0000000 Binary files a/www/apple-touch-icon.png and /dev/null differ diff --git a/www/background.png b/www/background.png index 94fadad..0de7dbe 100644 Binary files a/www/background.png and b/www/background.png differ diff --git a/www/banner.png b/www/banner.png deleted file mode 100644 index b36d2d2..0000000 Binary files a/www/banner.png and /dev/null differ diff --git a/www/bannerold.png b/www/bannerold.png deleted file mode 100644 index 23c330b..0000000 Binary files a/www/bannerold.png and /dev/null differ diff --git a/www/favicon-16x16.png b/www/favicon-16x16.png deleted file mode 100644 index 04d910c..0000000 Binary files a/www/favicon-16x16.png and /dev/null differ diff --git a/www/favicon-32x32.png b/www/favicon-32x32.png deleted file mode 100644 index d1cfe9b..0000000 Binary files a/www/favicon-32x32.png and /dev/null differ diff --git a/www/favicon.ico b/www/favicon.ico deleted file mode 100644 index 4042e15..0000000 Binary files a/www/favicon.ico and /dev/null differ diff --git a/www/icon.png b/www/icon.png deleted file mode 100644 index 609bbab..0000000 Binary files a/www/icon.png and /dev/null differ diff --git a/www/index.html b/www/index.html index aea91cf..aefe784 100644 --- a/www/index.html +++ b/www/index.html @@ -1,101 +1,17 @@ - - -WA2000 - - - - - - - - + + + WA2000 + - - -
- - - Icon description - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
-

waff waff!

-
-

tiny text!!!

-

wuff

-
-
-
-

waff waff!

-
-

tiny text!!!

-

wuff

-
-
-

waff waff!

-
-

tiny text!!!

-

wuff

-
- - - - - \ No newline at end of file + + diff --git a/www/script.js b/www/script.js deleted file mode 100644 index fe0168a..0000000 --- a/www/script.js +++ /dev/null @@ -1,364 +0,0 @@ -// ─── Configuration ──────────────────────────────────────────────────────────── -const CONFIG = { - bezelWidth: 0.18, - glassThickness: 2.0, - ior: 1.65, - scaleRatio: 1.6, - specularAngle: -55, - specularOpacity: 0.9, - specularSaturation: 6, - borderRadius: 50, -}; - -// ─── Maths helpers ──────────────────────────────────────────────────────────── - -function surfaceHeight(t) { - return Math.pow(1 - Math.pow(1 - t, 4), 0.25); -} - -function surfaceNormal(t) { - const d = 0.001; - const y1 = surfaceHeight(Math.max(0, t - d)); - const y2 = surfaceHeight(Math.min(1, t + d)); - const derivative = (y2 - y1) / (2 * d); - return { x: -derivative, y: 1 }; -} - -function refract(incidentDir, normal, n1, n2) { - const nLen = Math.hypot(normal.x, normal.y); - const nx = normal.x / nLen; - const ny = normal.y / nLen; - const ratio = n1 / n2; - const cosI = -(incidentDir.x * nx + incidentDir.y * ny); - const sinT2 = ratio * ratio * (1 - cosI * cosI); - if (sinT2 > 1) return null; - const cosT = Math.sqrt(1 - sinT2); - return { - x: ratio * incidentDir.x + (ratio * cosI - cosT) * nx, - y: ratio * incidentDir.y + (ratio * cosI - cosT) * ny, - }; -} - -// ─── Rounded rect helper ────────────────────────────────────────────────────── - -function roundedRectInfo(px, py, width, height, r) { - const radius = Math.min(r, width / 2, height / 2); - - const inCornerZone = - (px < radius || px > width - radius) && - (py < radius || py > height - radius); - - let dist, nx, ny; - - if (inCornerZone) { - const corners = [ - { cx: radius, cy: radius }, - { cx: width - radius, cy: radius }, - { cx: radius, cy: height - radius }, - { cx: width - radius, cy: height - radius }, - ]; - let best = corners[0], bestD = Math.hypot(px - corners[0].cx, py - corners[0].cy); - for (let i = 1; i < corners.length; i++) { - const d = Math.hypot(px - corners[i].cx, py - corners[i].cy); - if (d < bestD) { bestD = d; best = corners[i]; } - } - dist = radius - bestD; - const len = bestD || 1; - nx = (best.cx - px) / len; - ny = (best.cy - py) / len; - } else { - const dLeft = px; - const dRight = width - 1 - px; - const dTop = py; - const dBottom = height - 1 - py; - const minD = Math.min(dLeft, dRight, dTop, dBottom); - dist = minD; - if (minD === dLeft) { nx = 1; ny = 0; } - else if (minD === dRight) { nx = -1; ny = 0; } - else if (minD === dTop) { nx = 0; ny = 1; } - else { nx = 0; ny = -1; } - } - - return { dist, nx, ny }; -} - -// ─── Displacement map generation ───────────────────────────────────────────── - -function buildDisplacementMap(width, height) { - const bezel = CONFIG.bezelWidth * Math.min(width, height); - const samples = 128; - - const magnitudes = new Float32Array(samples); - const incident = { x: 0, y: 1 }; - - for (let i = 0; i < samples; i++) { - const t = i / (samples - 1); - const normal = surfaceNormal(t); - const refracted = refract(incident, normal, 1.0, CONFIG.ior); - magnitudes[i] = refracted - ? (refracted.x - incident.x) * CONFIG.glassThickness * bezel - : 0; - } - - const maxDisp = Math.max(...magnitudes) || 1; - const data = new Uint8ClampedArray(width * height * 4); - - for (let py = 0; py < height; py++) { - for (let px = 0; px < width; px++) { - const idx = (py * width + px) * 4; - const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius); - - let dispX = 0, dispY = 0; - - if (dist >= 0 && dist < bezel) { - const t = dist / bezel; - const sampleIdx = Math.min(samples - 1, Math.floor(t * (samples - 1))); - const rawMag = magnitudes[sampleIdx] / maxDisp; - const smooth = t * t * (3 - 2 * t); - const mag = rawMag * (1 - smooth); - dispX = nx * mag; - dispY = ny * mag; - } - - data[idx] = Math.round(128 + dispX * 127); - data[idx + 1] = Math.round(128 + dispY * 127); - data[idx + 2] = 128; - data[idx + 3] = 255; - } - } - - return { - imageData: new ImageData(data, width, height), - maxDisplacement: maxDisp * CONFIG.scaleRatio, - }; -} - -// ─── Specular highlight map generation ─────────────────────────────────────── - -function buildSpecularMap(width, height) { - const canvas = document.createElement('canvas'); - canvas.width = width; - canvas.height = height; - const ctx = canvas.getContext('2d'); - - const bezel = CONFIG.bezelWidth * Math.min(width, height); - const lightAngleRad = (CONFIG.specularAngle * Math.PI) / 180; - const lightDir = { x: Math.cos(lightAngleRad), y: Math.sin(lightAngleRad) }; - - const imageData = ctx.createImageData(width, height); - const data = imageData.data; - - for (let py = 0; py < height; py++) { - for (let px = 0; px < width; px++) { - const idx = (py * width + px) * 4; - const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius); - - let intensity = 0; - - if (dist >= 0 && dist < bezel) { - const t = dist / bezel; - const dot = nx * lightDir.x + ny * lightDir.y; - const rim = Math.max(0, dot); - const slope = Math.abs(surfaceNormal(t).x); - const smooth = t * t * (3 - 2 * t); - const raw = rim * slope * (1 - smooth); - intensity = Math.pow(raw, 0.5); - } - - data[idx] = Math.round(235 * intensity); - data[idx + 1] = Math.round(245 * intensity); - data[idx + 2] = Math.round(255 * intensity); - data[idx + 3] = Math.round(CONFIG.specularOpacity * 255 * intensity); - } - } - - ctx.putImageData(imageData, 0, 0); - return canvas.toDataURL(); -} - -// ─── ImageData → data URL ───────────────────────────────────────────────────── - -function imageDataToDataURL(imageData) { - const canvas = document.createElement('canvas'); - canvas.width = imageData.width; - canvas.height = imageData.height; - canvas.getContext('2d').putImageData(imageData, 0, 0); - return canvas.toDataURL(); -} - -// ─── Apply filter to card ───────────────────────────────────────────────────── - -function applyLiquidGlass() { - const card = document.getElementById('card'); - - // offsetWidth/Height for map generation (unaffected by zoom) - const w = card.offsetWidth; - const h = card.offsetHeight; - 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 dispDataURL = imageDataToDataURL(imageData); - const specularDataURL = buildSpecularMap(w, h); - - const dispImg = document.getElementById('displacement-map-img'); - const specImg = document.getElementById('specular-map-img'); - 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('width', fw); - dispImg.setAttribute('height', fh); - specImg.setAttribute('href', specularDataURL); - specImg.setAttribute('width', fw); - specImg.setAttribute('height', fh); - dispFilter.setAttribute('scale', maxDisplacement); - - const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent); - if (isChrome) { - card.style.backdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; - card.style.webkitBackdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; - } -} - -// ─── Nav glass ──────────────────────────────────────────────────────────────── - -// Phase durations in ms — keep in sync with CSS transitions -const OPEN_WIDTH_MS = 250; // width/radius expand duration -const OPEN_DROPDOWN_MS = 300; // dropdown slide-down duration -const OPEN_DROPDOWN_DELAY = 220; // CSS delay before dropdown opens -const CLOSE_DROPDOWN_MS = 200; // dropdown collapse duration (no CSS delay) -const CLOSE_WIDTH_MS = 250; // width/radius collapse duration -const CLOSE_WIDTH_DELAY = 200; // wait for dropdown to finish before collapsing width - -// Build and apply nav glass maps at a specific border-radius -function applyNavGlassAt(radius) { - const pill = document.getElementById('nav-pill'); - const w = pill.offsetWidth; - const h = pill.offsetHeight; - 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 savedScale = CONFIG.scaleRatio; - const savedRadius = CONFIG.borderRadius; - CONFIG.bezelWidth = 0.35; - CONFIG.scaleRatio = 1.6; - CONFIG.borderRadius = Math.min(radius, w / 2, h / 2); - - const { imageData, maxDisplacement } = buildDisplacementMap(w, h); - const dispDataURL = imageDataToDataURL(imageData); - const specularDataURL = buildSpecularMap(w, h); - - CONFIG.bezelWidth = savedBezel; - CONFIG.scaleRatio = savedScale; - CONFIG.borderRadius = savedRadius; - - document.getElementById('nav-disp-img').setAttribute('href', dispDataURL); - document.getElementById('nav-disp-img').setAttribute('width', fw); - document.getElementById('nav-disp-img').setAttribute('height', fh); - document.getElementById('nav-spec-img').setAttribute('href', specularDataURL); - document.getElementById('nav-spec-img').setAttribute('width', fw); - document.getElementById('nav-spec-img').setAttribute('height', fh); - document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement); - - const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent); - if (isChrome) { - pill.style.backdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)'; - pill.style.webkitBackdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)'; - } -} - -// Animate refraction maps across a time window -function scheduleNavGlassFrames(startRadius, targetRadius, delayMs, durationMs, steps = 14) { - for (let i = 1; i <= steps; i++) { - const t = i / steps; - const eased = 1 - Math.pow(1 - t, 3); - const radius = startRadius + (targetRadius - startRadius) * eased; - setTimeout(() => applyNavGlassAt(radius), delayMs + t * durationMs); - } -} - -function applyNavGlass() { - const pill = document.getElementById('nav-pill'); - const radius = parseFloat(getComputedStyle(pill).borderRadius) || 999; - applyNavGlassAt(radius); -} - -// ─── Event listeners ────────────────────────────────────────────────────────── - -window.addEventListener('load', () => { applyLiquidGlass(); applyNavGlass(); }); -window.addEventListener('resize', () => { applyLiquidGlass(); applyNavGlass(); }); - -let lastDPR = window.devicePixelRatio; -setInterval(() => { - if (window.devicePixelRatio !== lastDPR) { - lastDPR = window.devicePixelRatio; - applyLiquidGlass(); - applyNavGlass(); - } -}, 250); - -// ─── Nav pill interactions ──────────────────────────────────────────────────── - -const navPill = document.getElementById('nav-pill'); -const navBar = document.getElementById('nav-pill-bar'); - -navBar.addEventListener('click', () => { - const opening = !navPill.classList.contains('open'); - navPill.classList.toggle('open'); - - if (opening) { - // Phase 1: width expands (0 → OPEN_WIDTH_MS) - scheduleNavGlassFrames(999, 25, 0, OPEN_WIDTH_MS); - // Phase 2: dropdown falls (OPEN_DROPDOWN_DELAY → +OPEN_DROPDOWN_MS) - // refraction height grows as the pill gets taller — track it live - scheduleNavGlassFrames(25, 25, OPEN_DROPDOWN_DELAY, OPEN_DROPDOWN_MS); - // Final settle - setTimeout(applyNavGlass, OPEN_DROPDOWN_DELAY + OPEN_DROPDOWN_MS + 50); - } else { - // Phase 1: dropdown collapses (0 → CLOSE_DROPDOWN_MS) - scheduleNavGlassFrames(25, 25, 0, CLOSE_DROPDOWN_MS); - // Phase 2: width shrinks after dropdown finishes - scheduleNavGlassFrames(25, 999, CLOSE_WIDTH_DELAY, CLOSE_WIDTH_MS); - // Final settle - setTimeout(applyNavGlass, CLOSE_WIDTH_DELAY + CLOSE_WIDTH_MS + 50); - } -}); - -document.addEventListener('click', (e) => { - if (!navPill.contains(e.target) && navPill.classList.contains('open')) { - navPill.classList.remove('open'); - scheduleNavGlassFrames(25, 25, 0, CLOSE_DROPDOWN_MS); - scheduleNavGlassFrames(25, 999, CLOSE_WIDTH_DELAY, CLOSE_WIDTH_MS); - 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); diff --git a/www/site.webmanifest b/www/site.webmanifest deleted file mode 100644 index 45dc8a2..0000000 --- a/www/site.webmanifest +++ /dev/null @@ -1 +0,0 @@ -{"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"} \ No newline at end of file diff --git a/www/style.css b/www/style.css index ed39baf..d465a46 100644 --- a/www/style.css +++ b/www/style.css @@ -1,261 +1,47 @@ -* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */ -body { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - background: #0a0e1a url('background.png') center/cover no-repeat; - overflow-x: hidden; -} +* { margin: 0; padding: 0; box-sizing: border-box; } -.banner { - position: relative; - width: 99%; - overflow: hidden; - margin: 5px 5px 10px 5px; - border-radius: 25px; - display: flex; - border: 4px solid rgba(196, 214, 226, 0.9); - align-items: center; - max-height: 30vh; /* % of the viewport height */ -} + body { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: #0a0e1a url('background.png') center/cover no-repeat; + } -.banner img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center center; - display: block; -} + .card { + width: min(520px, 88%); + padding: 52px; + border-radius: 24px; + text-align: center; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.14); + backdrop-filter: blur(32px) saturate(1.4); + box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45); + } -.card { - width: min(880px, 88%); - height: 320px; /* scaled from 540px proportionally for 480px monitor */ - padding: 28px; /* scaled from 40px */ - border-radius: 25px; /* matches eww .box border-radius */ - text-align: center; - background: rgba(242, 242, 243, 0.6); /* eww .box background-color */ - border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */ - 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), /* eww notification box-shadow */ - inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww .box inset shadow */ - position: relative; - overflow: hidden; -} + h1 { + font-size: clamp(36px, 6vw, 52px); + font-weight: 300; + line-height: 1.1; + color: rgba(255, 255, 255, 0.92); + } -/* ── Main specular: top-left corner catch ── */ -.card::before { - content: ''; - position: absolute; - inset: 0; - border-radius: inherit; - background: - radial-gradient( - ellipse 60% 30% at 10% -5%, - rgba(255, 255, 255, 0.35) 0%, /* brighter on light bg */ - transparent 55% - ), - linear-gradient( - 128deg, - rgba(255, 255, 255, 0.20) 0%, - rgba(255, 255, 255, 0.08) 30%, - transparent 55% - ); - pointer-events: none; -} + h1 em { + font-style: italic; + color: rgba(180, 210, 255, 0.85); + } -/* ── Glass rim: inset edge highlights — matches eww border colour ── */ -.card::after { - content: ''; - position: absolute; - inset: 0; - border-radius: inherit; - background: transparent; - border: 1px solid transparent; - border-image: none; - box-shadow: - 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.08); - pointer-events: none; -} + .divider { + width: 40px; + height: 0.5px; + background: rgba(255, 255, 255, 0.2); + margin: 22px auto; + } -h1 { - font-size: clamp(24px, 5vw, 38px); /* scaled down for smaller monitor */ - font-weight: 300; - line-height: 1.1; - 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 { - font-style: italic; - color: rgba(137, 180, 250, 0.9); /* eww $primary-neon #89b4fa */ -} - -.divider { - width: 40px; - height: 0.5px; - background: rgba(196, 214, 226, 0.8); /* eww border colour */ - margin: 16px auto; /* scaled from 22px */ -} - -p { - font-size: 14px; /* scaled from 15px */ - font-weight: 300; - line-height: 1.75; - color: rgba(35, 38, 41, 0.52); /* eww $text-color at reduced opacity */ -} - -/* ── Nav pill wrapper ── */ -.nav-wrap { - position: absolute; - top: -50%; - left: 50%; - transform: translate(-50%, -50%); - display: flex; - justify-content: center; - align-items: flex-start; - padding: 6px 0; - z-index: 10; -} - -.nav-wrap > a { - display: flex; - align-items: flex-end; - line-height: 0; - height: 65px; /* match .nav-pill-bar height */ - overflow: hidden; -} - -.nav-wrap > a img { - height: 67px; /* whatever size looks right */ - width: auto; -} - -.nav-wrap.pinned { - position: fixed; - top: 0; - left: 50%; - transform: translateX(-50%); - z-index: 100; - padding: 6px 0; -} - - - -.nav-pill-bar img, -.nav-pill-bar svg { - height: 20px; /* adjust to taste */ - width: auto; - flex-shrink: 0; -} - -.nav-pill-bar a { - display: flex; - align-items: center; - line-height: 0; /* collapses inline whitespace that can add phantom height */ -} - -/* ── The pill itself ── */ -.nav-pill { - margin-top: 7px; - width: 160px; - border-radius: 999px; - background: rgba(242, 242, 243, 0.6); /* eww .box background */ - border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */ - 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), - inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww inset shadow */ - overflow: hidden; - transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), - border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1); -} - -.nav-pill-bar { - display: flex; - align-items: center; - justify-content: space-between; - height: 40px; /* scaled from 44px */ - padding: 0 16px; - cursor: pointer; - user-select: none; -} - -.nav-dropdown { - max-height: 0; - opacity: 0; - overflow: hidden; - transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s, - opacity 0.25s ease 0.22s; -} - -.nav-pill.open { - border-radius: 22px; - width: 200px; -} - -.nav-logo { - font-size: 13px; - font-weight: 400; - color: rgba(35, 38, 41, 0.88); /* eww $text-color */ - letter-spacing: 0.06em; -} - -.nav-chevron { - width: 14px; - height: 14px; - flex-shrink: 0; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Restyle chevron stroke to dark to match eww theme */ -.nav-chevron polyline { - stroke: rgba(35, 38, 41, 0.7); /* eww $text-color */ -} - -.nav-pill.open .nav-chevron { - transform: rotate(180deg); -} - -.nav-pill.open .nav-dropdown { - max-height: 300px; - opacity: 1; -} - -.nav-pill:not(.open) .nav-dropdown { - transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.15s ease; -} - -.nav-pill:not(.open) { - 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; -} - -.nav-divider { - height: 1px; - background: rgba(196, 214, 226, 0.8); /* eww .spacer border colour */ - margin: 0 12px; -} - -.nav-link { - display: block; - padding: 10px 16px; - font-size: 13px; - font-weight: 300; - text-align: center; - color: rgba(35, 38, 41, 0.75); /* eww $text-color */ - text-decoration: none; - transition: color 0.15s ease, background 0.15s ease; -} - -.nav-link:hover { - color: rgb(0, 0, 0); /* eww $primary-neon on hover */ - background: rgba(196, 214, 226, 0.25); /* soft eww border colour tint */ -} + p { + font-size: 15px; + font-weight: 300; + line-height: 1.75; + color: rgba(255, 255, 255, 0.52); + } diff --git a/www/style.css.bak b/www/style.css.bak deleted file mode 100644 index 4e23e67..0000000 --- a/www/style.css.bak +++ /dev/null @@ -1,266 +0,0 @@ -* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */ - -body { - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - background: #0a0e1a url('background.png') center/cover no-repeat; - overflow-x: hidden; -} - -.banner { - position: relative; - width: 99%; - max-height: 280px; - overflow: hidden; - margin: 5px 5px 10px 5px; - 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 { - width: 100%; - object-fit: cover; - object-position: center center; - display: block; -} - -.card { - width: min(880px, 88%); - height: 320px; /* scaled from 540px proportionally for 480px monitor */ - padding: 28px; /* scaled from 40px */ - border-radius: 25px; /* matches eww .box border-radius */ - text-align: center; - background: rgba(242, 242, 243, 0.6); /* eww .box background-color */ - border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */ - 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), /* eww notification box-shadow */ - inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww .box inset shadow */ - position: relative; - overflow: hidden; -} - -/* ── Main specular: top-left corner catch ── */ -.card::before { - content: ''; - position: absolute; - inset: 0; - border-radius: inherit; - background: - radial-gradient( - ellipse 60% 30% at 10% -5%, - rgba(255, 255, 255, 0.35) 0%, /* brighter on light bg */ - transparent 55% - ), - linear-gradient( - 128deg, - rgba(255, 255, 255, 0.20) 0%, - rgba(255, 255, 255, 0.08) 30%, - transparent 55% - ); - pointer-events: none; -} - -/* ── Glass rim: inset edge highlights — matches eww border colour ── */ -.card::after { - content: ''; - position: absolute; - inset: 0; - border-radius: inherit; - background: transparent; - border: 1px solid transparent; - border-image: none; - box-shadow: - 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.08); - pointer-events: none; -} - -h1 { - font-size: clamp(24px, 5vw, 38px); /* scaled down for smaller monitor */ - font-weight: 300; - line-height: 1.1; - 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 { - font-style: italic; - color: rgba(137, 180, 250, 0.9); /* eww $primary-neon #89b4fa */ -} - -.divider { - width: 40px; - height: 0.5px; - background: rgba(196, 214, 226, 0.8); /* eww border colour */ - margin: 16px auto; /* scaled from 22px */ -} - -p { - font-size: 14px; /* scaled from 15px */ - font-weight: 300; - line-height: 1.75; - color: rgba(35, 38, 41, 0.52); /* eww $text-color at reduced opacity */ -} - -/* ── Nav pill wrapper ── */ -.nav-wrap { - align-self: stretch; - display: flex; - justify-content: center; - align-items: flex-start; /* add this */ - padding: 6px 0; -} - -.nav-wrap > a { - display: flex; - align-items: flex-end; - line-height: 0; - height: 65px; /* match .nav-pill-bar height */ - overflow: hidden; -} - -.nav-wrap > a img { - height: 67px; /* whatever size looks right */ - width: auto; -} - -.nav-wrap.pinned { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 100; - padding: 6px 0; - display: flex; - justify-content: center; -} - -.nav-placeholder { - display: none; - align-self: stretch; - height: 56px; /* scaled: 44px pill + 6px + 6px padding */ -} - -.nav-placeholder.visible { - display: block; -} - -.nav-pill-bar img, -.nav-pill-bar svg { - height: 20px; /* adjust to taste */ - width: auto; - flex-shrink: 0; -} - -.nav-pill-bar a { - display: flex; - align-items: center; - line-height: 0; /* collapses inline whitespace that can add phantom height */ -} - -/* ── The pill itself ── */ -.nav-pill { - margin-top: 7px; - width: 160px; - border-radius: 999px; - background: rgba(242, 242, 243, 0.6); /* eww .box background */ - border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */ - 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), - inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww inset shadow */ - overflow: hidden; - transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), - border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1); -} - -.nav-pill-bar { - display: flex; - align-items: center; - justify-content: space-between; - height: 40px; /* scaled from 44px */ - padding: 0 16px; - cursor: pointer; - user-select: none; -} - -.nav-dropdown { - max-height: 0; - opacity: 0; - overflow: hidden; - transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s, - opacity 0.25s ease 0.22s; -} - -.nav-pill.open { - border-radius: 22px; - width: 200px; -} - -.nav-logo { - font-size: 13px; - font-weight: 400; - color: rgba(35, 38, 41, 0.88); /* eww $text-color */ - letter-spacing: 0.06em; -} - -.nav-chevron { - width: 14px; - height: 14px; - flex-shrink: 0; - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Restyle chevron stroke to dark to match eww theme */ -.nav-chevron polyline { - stroke: rgba(35, 38, 41, 0.7); /* eww $text-color */ -} - -.nav-pill.open .nav-chevron { - transform: rotate(180deg); -} - -.nav-pill.open .nav-dropdown { - max-height: 300px; - opacity: 1; -} - -.nav-pill:not(.open) .nav-dropdown { - transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1), - opacity 0.15s ease; -} - -.nav-pill:not(.open) { - 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; -} - -.nav-divider { - height: 1px; - background: rgba(196, 214, 226, 0.8); /* eww .spacer border colour */ - margin: 0 12px; -} - -.nav-link { - display: block; - padding: 10px 16px; - font-size: 13px; - font-weight: 300; - text-align: center; - color: rgba(35, 38, 41, 0.75); /* eww $text-color */ - text-decoration: none; - transition: color 0.15s ease, background 0.15s ease; -} - -.nav-link:hover { - color: rgba(137, 180, 250, 1); /* eww $primary-neon on hover */ - background: rgba(196, 214, 226, 0.25); /* soft eww border colour tint */ -} diff --git a/www/test.png b/www/test.png deleted file mode 100644 index a8848ce..0000000 Binary files a/www/test.png and /dev/null differ diff --git a/www/youtube.svg b/www/youtube.svg deleted file mode 100644 index 7d4c6ab..0000000 --- a/www/youtube.svg +++ /dev/null @@ -1,164 +0,0 @@ - - - - - diff --git a/www/youtube.svg.bak b/www/youtube.svg.bak deleted file mode 100644 index e10d7b2..0000000 --- a/www/youtube.svg.bak +++ /dev/null @@ -1,45 +0,0 @@ - - - - -