diff --git a/www/index.html b/www/index.html index bdda60d..081f3cc 100644 --- a/www/index.html +++ b/www/index.html @@ -3,15 +3,29 @@ WA2000 + + + + +
+ + + Icon description + + +
+ + + + +
+ + + Icon description + +
@@ -439,4 +463,4 @@ window.addEventListener('load', updateNavPin); - \ No newline at end of file + diff --git a/www/style.css b/www/style.css index 095ea85..0b653e9 100644 --- a/www/style.css +++ b/www/style.css @@ -11,6 +11,7 @@ body { } .banner { + position: relative; width: 99%; max-height: 280px; overflow: hidden; @@ -39,12 +40,12 @@ body { 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 */ + 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: ''; @@ -52,20 +53,20 @@ body { 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% - ); + 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: ''; @@ -76,11 +77,11 @@ body { 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); + 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; @@ -88,104 +89,109 @@ h1 { 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; + position: absolute; + top: -50%; + left: 50%; + transform: translate(-50%, -50%); display: flex; justify-content: center; - padding: 6px 0; /* scaled from 8px */ + 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: 0; - right: 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; - justify-content: center; + align-items: center; + line-height: 0; /* collapses inline whitespace that can add phantom height */ } - -.nav-placeholder { - display: none; - align-self: stretch; - height: 56px; /* scaled: 44px pill + 6px + 6px padding */ -} - -.nav-placeholder.visible { - display: block; -} - + /* ── The pill itself ── */ .nav-pill { - position: relative; /* anchor for the absolute dropdown */ + margin-top: 7px; width: 160px; border-radius: 999px; - position: relative; - z-index: 100; - background: rgba(242, 242, 243, 0.6); - border: 4px solid rgba(196, 214, 226, 0.9); + 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); - /* no overflow:hidden — that would clip the absolute dropdown */ + 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); + border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .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; + height: 40px; /* scaled from 44px */ 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; + opacity 0.25s ease 0.22s; } .nav-pill.open { @@ -199,44 +205,44 @@ p { 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; + 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; + 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; @@ -247,8 +253,8 @@ p { 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 */ -} \ No newline at end of file +} diff --git a/www/style.css.bak b/www/style.css.bak new file mode 100644 index 0000000..4e23e67 --- /dev/null +++ b/www/style.css.bak @@ -0,0 +1,266 @@ +* { 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/youtube.svg b/www/youtube.svg new file mode 100644 index 0000000..32e1425 --- /dev/null +++ b/www/youtube.svg @@ -0,0 +1,127 @@ + + + + + diff --git a/www/youtube.svg.bak b/www/youtube.svg.bak new file mode 100644 index 0000000..e10d7b2 --- /dev/null +++ b/www/youtube.svg.bak @@ -0,0 +1,45 @@ + + + + +