From 48d15f8ab169bd6a6f6be2607701b74ca0169c93 Mon Sep 17 00:00:00 2001 From: alwaysmesmerizingyou Date: Sun, 8 Nov 2026 21:22:32 -0800 Subject: [PATCH] updated a bit --- home.txt | 113 +++-- index.html | 49 +-- src/assets/css/themes.css | 574 -------------------------- src/{assets => }/css/404.css | 0 src/{assets => }/css/components.css | 0 src/{assets => }/css/features.css | 7 +- src/{assets => }/css/highlight.css | 0 src/{assets => }/css/layout.css | 0 src/{assets => }/css/overlay.css | 0 src/{assets => }/css/prose.css | 0 src/{assets => }/css/roots.css | 3 +- src/css/themes.css | 250 +++++++++++ src/{assets => }/js/api/contribute.js | 0 src/{assets => }/js/api/download.js | 0 src/{assets => }/js/api/release.js | 0 src/js/glass.js | 123 ++++++ src/{assets => }/js/main.js | 225 +++++----- src/{assets => }/js/main/settings.js | 7 +- 18 files changed, 571 insertions(+), 780 deletions(-) delete mode 100644 src/assets/css/themes.css rename src/{assets => }/css/404.css (100%) rename src/{assets => }/css/components.css (100%) rename src/{assets => }/css/features.css (97%) rename src/{assets => }/css/highlight.css (100%) rename src/{assets => }/css/layout.css (100%) rename src/{assets => }/css/overlay.css (100%) rename src/{assets => }/css/prose.css (100%) rename src/{assets => }/css/roots.css (99%) create mode 100644 src/css/themes.css rename src/{assets => }/js/api/contribute.js (100%) rename src/{assets => }/js/api/download.js (100%) rename src/{assets => }/js/api/release.js (100%) create mode 100644 src/js/glass.js rename src/{assets => }/js/main.js (92%) rename src/{assets => }/js/main/settings.js (94%) diff --git a/home.txt b/home.txt index 8563e4a..983f100 100644 --- a/home.txt +++ b/home.txt @@ -10,7 +10,7 @@ .home-header { position: relative; width: 100vw; - height: 80vh; + height: 70vh; min-height: 400px; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); @@ -87,31 +87,74 @@ gap: 10px; } - .btn-primary { +.btn-primary, + .btn-secondary { + position: relative; display: inline-flex; align-items: center; - gap: 6px; - padding: 10px 22px; + justify-content: center; + overflow: hidden; border-radius: 100px; - background: var(--btn-primary-bg); - color: var(--btn-primary-text) !important; - font-size: 13.5px; - font-weight: 600; text-decoration: none !important; - transition: transform 0.15s ease; + transition: transform 0.2s ease, opacity 0.26s ease-out; + } + + .btn-primary { + color: light-dark(#000000, #ffffff) !important; } .btn-secondary { - display: inline-flex; + color: var(--text) !important; + } + + .btn-primary:hover, + .btn-secondary:hover { + transform: translateY(-1px); + } + + .glass-surface__filter { + width: 100%; + height: 100%; + pointer-events: none; + position: absolute; + inset: 0; + opacity: 0; + z-index: -1; + } + + .glass-surface__content { + width: 100%; + height: 100%; + display: flex; align-items: center; - padding: 10px 20px; - border-radius: 100px; + justify-content: center; + gap: 6px; + padding: 10px 22px; + border-radius: inherit; + position: relative; + z-index: 1; font-size: 13.5px; font-weight: 600; - text-decoration: none !important; - backdrop-filter: blur(25px) saturate(2); - -webkit-backdrop-filter: blur(25px) saturate(2); - transition: transform 0.15s ease; + } + + .btn-secondary .glass-surface__content { + padding: 10px 20px; + } + + .glass-surface--svg { + background: transparent !important; + border: none !important; + box-shadow: none !important; + backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1)) !important; + -webkit-backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1)) !important; + } + + .glass-surface--fallback { + background: transparent!important; + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + border: transparent !important; + box-shadow: none !important; } @keyframes fadeVideoBg { @@ -247,18 +290,24 @@ opacity: 0.75; } - .hero-greeting { - margin: 0 0 14px; - padding: 6px 16px; - border-radius: 100px; - background: var(--hover-bg); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - color: var(--text); - font-size: 13px; - font-weight: 600; - letter-spacing: 0.01em; -} +.hero-greeting { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + margin: 0 0 14px; + border-radius: 100px; + color: var(--text); + letter-spacing: 0.01em; + } + + .hero-greeting .glass-surface__content { + padding: 6px 16px; + font-size: 13px; + font-weight: 600; + letter-spacing: 0.01em; + } .hero-resume { max-width: min(90vw, 360px); @@ -319,15 +368,15 @@
+ src="">
-
+ src="">
@@ -341,7 +390,7 @@
- + Get Started diff --git a/index.html b/index.html index 54cb32e..a64f4d9 100644 --- a/index.html +++ b/index.html @@ -75,16 +75,16 @@ } - - - - - - - - - - + + + + + + + + + + @@ -105,21 +105,6 @@ - - - - - -
- - - - - + + + + + + diff --git a/src/assets/css/themes.css b/src/assets/css/themes.css deleted file mode 100644 index 3e8e15c..0000000 --- a/src/assets/css/themes.css +++ /dev/null @@ -1,574 +0,0 @@ -:root[data-theme="halloween"] { - --bg: #0a0604; - --text: #f5ebe6; - --text: #ff7518; - --muted: #a37559; - --border: #3d1c0c; - --bg-elevated: rgba(255, 117, 24, 0.12); - --bg-card: rgba(28, 14, 8, 0.6); - --bg-card-hover: rgba(46, 21, 10, 0.85); - --bg-code: #050201; - --code-inline-bg: rgba(255, 117, 24, 0.15); - --code-inline-text: #ff944d; - --code-text: #fed7aa; - --bg-menu: #0e0704; - --bg-modal: rgba(10, 6, 4, 0.92); - --hover-bg: rgba(255, 117, 24, 0.12); - --search-bg: rgba(255, 117, 24, 0.08); - --search-panel-bg: rgba(14, 7, 4, 0.95); - --code-group-bg: #1c0e07; - --code-group-panel-bg: #0a0604; - --code-tab-active: #ff7518; - --footer-border: #3d1c0c; - --border-subtle: rgba(255, 117, 24, 0.15); - --btn-primary-bg: #ff7518; - --btn-primary-text: #000000; - --btn-home-bg: #ff7518; - --btn-home-text: #000000; - --callout-note-bg: rgba(255, 117, 24, 0.14); - --callout-info-bg: rgba(168, 85, 247, 0.15); - --callout-warning-bg: rgba(255, 154, 77, 0.18); - --callout-warning-text: #ffaa5e; - --body-radial-tint: rgba(10, 6, 4, 0.85); - --skeleton-pulse-1: rgba(255, 117, 24, 0.06); - --skeleton-pulse-2: rgba(255, 117, 24, 0.18); - --spider-display: block; - --cobweb-display: block; - --spider-thread: rgba(255, 154, 77, 0.4); - - --hl-comment: #7c4f34; - --hl-punct: #fed7aa; - --hl-func: #ff944d; - --hl-keyword: #a855f7; - --hl-string: #84cc16; - --hl-var: #ff7518; - --hl-op: #a855f7; - --hl-num: #f59e0b; - --hl-param: #ffedd5; - --hl-class: #c084fc; - --hl-tag: #ff7518; - --hl-deleted-color: #ef4444; - --hl-deleted-bg: rgba(239, 68, 68, 0.2); - --hl-inserted-color: #84cc16; - --hl-inserted-bg: rgba(132, 204, 22, 0.2); -} - -:root[data-theme="christmas"] { - --bg: #07110c; - --text: #f4efe6; - --text: #ff5c5c; - --muted: #8fa89a; - --border: #1f3a2b; - --bg-elevated: rgba(255, 92, 92, 0.1); - --bg-card: rgba(10, 26, 18, 0.6); - --bg-card-hover: rgba(18, 44, 30, 0.85); - --bg-code: #040a07; - --code-inline-bg: rgba(245, 196, 81, 0.14); - --code-inline-text: #f5c451; - --code-text: #e8f5e9; - --bg-menu: #09150e; - --bg-modal: rgba(7, 17, 12, 0.9); - --hover-bg: rgba(255, 92, 92, 0.12); - --search-bg: rgba(245, 196, 81, 0.08); - --search-panel-bg: rgba(9, 21, 14, 0.95); - --code-group-bg: #11261a; - --code-group-panel-bg: #07110c; - --code-tab-active: #ff5c5c; - --footer-border: #1f3a2b; - --border-subtle: rgba(245, 196, 81, 0.14); - --btn-primary-bg: #d92d3a; - --btn-primary-text: #ffffff; - --btn-home-bg: #d92d3a; - --btn-home-text: #ffffff; - --callout-note-bg: rgba(47, 191, 113, 0.14); - --callout-info-bg: rgba(245, 196, 81, 0.14); - --callout-warning-bg: rgba(255, 92, 92, 0.18); - --callout-warning-text: #ff9a9a; - --body-radial-tint: rgba(7, 17, 12, 0.85); - --skeleton-pulse-1: rgba(245, 196, 81, 0.06); - --skeleton-pulse-2: rgba(245, 196, 81, 0.16); - --snow-display: block; - --lights-display: block; - - --hl-comment: #5f8a72; - --hl-punct: #e8f5e9; - --hl-func: #f5c451; - --hl-keyword: #ff6b6b; - --hl-string: #5fd68f; - --hl-var: #ff9f68; - --hl-op: #ff6b6b; - --hl-num: #f5c451; - --hl-param: #fdf2d0; - --hl-class: #7fe3b0; - --hl-tag: #ff6b6b; - --hl-deleted-color: #ff6b6b; - --hl-deleted-bg: rgba(255, 107, 107, 0.18); - --hl-inserted-color: #5fd68f; - --hl-inserted-bg: rgba(95, 214, 143, 0.18); -} - -:root[data-theme="autumn"] { - --bg: #1a0f08; - --text: #f7ead7; - --text: #f4b942; - --muted: #a68a6d; - --border: #3a2412; - --bg-elevated: rgba(244, 185, 66, 0.1); - --bg-card: rgba(40, 23, 11, 0.6); - --bg-card-hover: rgba(58, 36, 18, 0.85); - --bg-code: #0e0703; - --code-inline-bg: rgba(244, 185, 66, 0.14); - --code-inline-text: #f4b942; - --code-text: #fde7c0; - --bg-menu: #1a0f08; - --bg-modal: rgba(26, 15, 8, 0.9); - --hover-bg: rgba(244, 185, 66, 0.12); - --search-bg: rgba(244, 185, 66, 0.08); - --search-panel-bg: rgba(26, 15, 8, 0.95); - --code-group-bg: #28170b; - --code-group-panel-bg: #1a0f08; - --code-tab-active: #f4b942; - --footer-border: #3a2412; - --border-subtle: rgba(244, 185, 66, 0.14); - --btn-primary-bg: #f4b942; - --btn-primary-text: #1a0f08; - --btn-home-bg: #f4b942; - --btn-home-text: #1a0f08; - --callout-note-bg: rgba(200, 69, 44, 0.16); - --callout-info-bg: rgba(132, 160, 60, 0.16); - --callout-warning-bg: rgba(244, 185, 66, 0.18); - --callout-warning-text: #f8cf7a; - --body-radial-tint: rgba(26, 15, 8, 0.85); - --skeleton-pulse-1: rgba(244, 185, 66, 0.06); - --skeleton-pulse-2: rgba(244, 185, 66, 0.17); - --leaf-display: block; - - --hl-comment: #8a6a4a; - --hl-punct: #fde7c0; - --hl-func: #f4b942; - --hl-keyword: #e0643f; - --hl-string: #a3b94a; - --hl-var: #e8913a; - --hl-op: #e0643f; - --hl-num: #f4b942; - --hl-param: #fdf0d8; - --hl-class: #d9a35b; - --hl-tag: #e0643f; - --hl-deleted-color: #e0643f; - --hl-deleted-bg: rgba(224, 100, 63, 0.18); - --hl-inserted-color: #a3b94a; - --hl-inserted-bg: rgba(163, 185, 74, 0.18); -} - -:root[data-theme="winter"] { - --bg: #0d1b2a; - --text: #e6f0fa; - --text: #d6ecff; - --muted: #7f98b3; - --border: #1b2c44; - --bg-elevated: rgba(138, 209, 255, 0.1); - --bg-card: rgba(16, 32, 52, 0.6); - --bg-card-hover: rgba(26, 48, 76, 0.85); - --bg-code: #08121e; - --code-inline-bg: rgba(138, 209, 255, 0.14); - --code-inline-text: #8ad1ff; - --code-text: #cfe4f7; - --bg-menu: #0d1b2a; - --bg-modal: rgba(13, 27, 42, 0.88); - --hover-bg: rgba(138, 209, 255, 0.1); - --search-bg: rgba(138, 209, 255, 0.08); - --search-panel-bg: rgba(13, 27, 42, 0.95); - --code-group-bg: #132640; - --code-group-panel-bg: #0d1b2a; - --code-tab-active: #8ad1ff; - --footer-border: #1b2c44; - --border-subtle: rgba(138, 209, 255, 0.14); - --btn-primary-bg: #8ad1ff; - --btn-primary-text: #06101c; - --btn-home-bg: #8ad1ff; - --btn-home-text: #06101c; - --callout-note-bg: rgba(138, 209, 255, 0.14); - --callout-info-bg: rgba(185, 166, 255, 0.14); - --callout-warning-bg: rgba(255, 214, 138, 0.16); - --callout-warning-text: #ffd68a; - --body-radial-tint: rgba(13, 27, 42, 0.85); - --skeleton-pulse-1: rgba(138, 209, 255, 0.06); - --skeleton-pulse-2: rgba(138, 209, 255, 0.16); - --snow-display: block; - - --hl-comment: #5b7491; - --hl-punct: #cfe4f7; - --hl-func: #8ad1ff; - --hl-keyword: #b9a6ff; - --hl-string: #9be7d4; - --hl-var: #ffb4c7; - --hl-op: #8ad1ff; - --hl-num: #ffd68a; - --hl-param: #e6f0fa; - --hl-class: #a9e4ff; - --hl-tag: #b9a6ff; - --hl-deleted-color: #ff8fa3; - --hl-deleted-bg: rgba(255, 143, 163, 0.18); - --hl-inserted-color: #9be7d4; - --hl-inserted-bg: rgba(155, 231, 212, 0.18); -} - -.cobweb { - display: var(--cobweb-display); - position: fixed; - width: 160px; - height: 160px; - pointer-events: none; - z-index: 35; - opacity: 0.8; -} - -.cobweb-top-left { - top: 0; - left: 0; - transform: scaleX(-1); -} - -.cobweb-top-right { - top: 0; - right: 0; -} - -.cobweb-media { - width: 100%; - height: 100%; - object-fit: contain; - display: block; -} - -.spider-container { - display: var(--spider-display); - position: fixed; - top: 0; - right: 12%; - pointer-events: none; - z-index: 100; - animation: spiderDescend 10s ease-in-out infinite; -} - -.spider-thread { - width: 1.5px; - height: 100vh; - position: absolute; - bottom: 24px; - left: 50%; - transform: translateX(-50%); - background: var(--spider-thread); -} - -.spider-body { - position: relative; - width: 48px; - height: 48px; - margin-top: 100px; - pointer-events: auto; - cursor: pointer; - animation: spiderSway 3s ease-in-out infinite alternate; -} - -.spider-media { - width: 100%; - height: 100%; - object-fit: contain; - display: block; - scale: 2; - padding-top: 20px; -} - -@keyframes spiderDescend { - 0% { - transform: translateY(-80px); - } - - 45% { - transform: translateY(240px); - } - - 55% { - transform: translateY(240px); - } - - 90% { - transform: translateY(10px); - } - - 100% { - transform: translateY(-80px); - } -} - -@keyframes spiderSway { - 0% { - transform: rotate(-10deg); - } - - 100% { - transform: rotate(10deg); - } -} - -@keyframes spiderDrop { - from { - transform: translateY(240px); - } - - to { - transform: translateY(130vh); - } -} - -:root { - --snow-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='22' cy='38' r='2.4' fill-opacity='.9'/%3E%3Ccircle cx='96' cy='126' r='1.8' fill-opacity='.7'/%3E%3Ccircle cx='168' cy='28' r='3' fill-opacity='.85'/%3E%3Ccircle cx='236' cy='204' r='2' fill-opacity='.75'/%3E%3Ccircle cx='272' cy='92' r='2.8' fill-opacity='.9'/%3E%3Ccircle cx='58' cy='252' r='2.2' fill-opacity='.8'/%3E%3Ccircle cx='196' cy='282' r='1.6' fill-opacity='.7'/%3E%3Ccircle cx='140' cy='190' r='2.4' fill-opacity='.85'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='.9' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath transform='translate(126 72)' d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4'/%3E%3Cpath transform='translate(246 150)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3Cpath transform='translate(40 160)' d='M0 -7V7M-6 -3.5L6 3.5M-6 3.5L6 -3.5'/%3E%3Cpath transform='translate(210 250)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3C/g%3E%3C/svg%3E"); - --leaf-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg transform='translate(50 60) rotate(25) scale(1.2)' fill='%23e8710a'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(190 40) rotate(-40)' fill='%23c2410c'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(300 130) rotate(70) scale(1.3)' fill='%23eab308'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(120 200) rotate(-15) scale(1.1)' fill='%23b45309'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(250 280) rotate(140) scale(1.2)' fill='%23d97706'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(40 310) rotate(-80)' fill='%23ca8a04'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); - --lights-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cpath d='M0 4Q40 32 80 4Q120 32 160 4' fill='none' stroke='%23245c3a' stroke-width='1.6'/%3E%3Cg fill='%23222'%3E%3Crect x='18' y='13' width='4' height='4'/%3E%3Crect x='38' y='17' width='4' height='4'/%3E%3Crect x='58' y='13' width='4' height='4'/%3E%3Crect x='98' y='13' width='4' height='4'/%3E%3Crect x='118' y='17' width='4' height='4'/%3E%3Crect x='138' y='13' width='4' height='4'/%3E%3C/g%3E%3Cellipse cx='20' cy='22' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='40' cy='26' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3Cellipse cx='60' cy='22' rx='4' ry='5.5' fill='%234dff88'/%3E%3Cellipse cx='100' cy='22' rx='4' ry='5.5' fill='%234da6ff'/%3E%3Cellipse cx='120' cy='26' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='140' cy='22' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3C/svg%3E"); -} - -.snowfall, -.leaf-fall { - position: fixed; - inset: 0; - overflow: hidden; - pointer-events: none; - z-index: 30; -} - -.snowfall { - display: var(--snow-display); -} - -.leaf-fall { - display: var(--leaf-display); -} - -.snowfall::before, -.snowfall::after, -.leaf-fall::before, -.leaf-fall::after { - content: ""; - position: absolute; - background-repeat: repeat; - will-change: transform; -} - -.snowfall::before { - top: -600px; - left: 0; - right: 0; - bottom: 0; - background-image: var(--snow-tile); - background-size: 300px 300px; - opacity: 0.9; - animation: snowFallNear 18s linear infinite; -} - -.snowfall::after { - top: -500px; - left: 0; - right: 0; - bottom: 0; - background-image: var(--snow-tile); - background-size: 500px 500px; - opacity: 0.6; - animation: snowFallFar 30s linear infinite; -} - -.leaf-fall::before { - top: -720px; - left: 0; - right: -360px; - bottom: 0; - background-image: var(--leaf-tile); - background-size: 360px 360px; - opacity: 0.9; - animation: leafFallNear 26s linear infinite; -} - -.leaf-fall::after { - top: -540px; - left: -540px; - right: 0; - bottom: 0; - background-image: var(--leaf-tile); - background-size: 540px 540px; - opacity: 0.7; - animation: leafFallFar 40s linear infinite; -} - -.light-string { - display: var(--lights-display); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 56px; - pointer-events: none; - z-index: 100; - background-image: var(--lights-tile); - background-repeat: repeat-x; - background-size: 160px 56px; - animation: lightTwinkle 2.6s ease-in-out infinite alternate; -} - -@keyframes snowFallNear { - from { - transform: translate3d(0, 0, 0); - } - - to { - transform: translate3d(0, 600px, 0); - } -} - -@keyframes snowFallFar { - from { - transform: translate3d(0, 0, 0); - } - - to { - transform: translate3d(0, 500px, 0); - } -} - -@keyframes leafFallNear { - from { - transform: translate3d(0, 0, 0); - } - - to { - transform: translate3d(-360px, 720px, 0); - } -} - -@keyframes leafFallFar { - from { - transform: translate3d(0, 0, 0); - } - - to { - transform: translate3d(540px, 540px, 0); - } -} - -@keyframes lightTwinkle { - from { - opacity: 0.65; - filter: drop-shadow(0 0 3px rgba(255, 214, 120, 0.5)); - } - - to { - opacity: 1; - filter: drop-shadow(0 0 8px rgba(255, 214, 120, 0.9)); - } -} - -@media (prefers-reduced-motion: reduce) { - - .snowfall::before, - .snowfall::after, - .leaf-fall::before, - .leaf-fall::after, - .light-string { - animation: none; - } -} - -#navbar .brand { - position: relative; -} - -#navbar .brand::after { - content: ""; - position: absolute; - top: -9px; - right: -9px; - font-size: 14px; - line-height: 1; - pointer-events: none; -} - -:root[data-theme="halloween"] #navbar .brand::after { - content: "🎃"; -} - -:root[data-theme="autumn"] #navbar .brand::after { - content: "🍂"; -} - -:root[data-theme="winter"] #navbar .brand::after { - content: "❄️"; -} - -:root[data-theme="christmas"] #navbar .brand::after { - content: "🎄"; -} - -.st-themes { - padding: 14px 16px 16px; -} - -.st-sub { - margin: 0 0 8px; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--muted); -} - -.st-theme-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 8px; - margin-bottom: 16px; -} - -.st-theme-grid:last-child { - margin-bottom: 0; -} - -.st-theme { - display: flex; - align-items: center; - gap: 10px; - min-width: 0; - height: 40px; - padding: 0 14px; - border: 1px solid transparent; - border-radius: 100px; - background: var(--search-bg); - color: var(--muted); - font: inherit; - font-size: 13.5px; - font-weight: 500; - cursor: pointer; - transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; -} - -.st-theme .ico { - width: 16px; - height: 16px; - flex-shrink: 0; -} - -.st-theme span { - min-width: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.st-theme:hover { - color: var(--text); -} - -.st-theme.on { - border-color: var(--text); - background: var(--hover-bg); - color: var(--text); - font-weight: 600; -} \ No newline at end of file diff --git a/src/assets/css/404.css b/src/css/404.css similarity index 100% rename from src/assets/css/404.css rename to src/css/404.css diff --git a/src/assets/css/components.css b/src/css/components.css similarity index 100% rename from src/assets/css/components.css rename to src/css/components.css diff --git a/src/assets/css/features.css b/src/css/features.css similarity index 97% rename from src/assets/css/features.css rename to src/css/features.css index 744091c..f820586 100644 --- a/src/assets/css/features.css +++ b/src/css/features.css @@ -32,10 +32,9 @@ } .personal-card { - margin: 18px 0 8px; - padding: 16px 18px; + margin-top: 20px; + margin-bottom: 50px; border-radius: 22px; - background: var(--callout-note-bg); } .personal-card label { @@ -56,7 +55,7 @@ min-width: 0; height: 36px; padding: 0 14px; - border: 1px solid var(--border); + border: none; border-radius: 100px; background: var(--search-bg); color: var(--text); diff --git a/src/assets/css/highlight.css b/src/css/highlight.css similarity index 100% rename from src/assets/css/highlight.css rename to src/css/highlight.css diff --git a/src/assets/css/layout.css b/src/css/layout.css similarity index 100% rename from src/assets/css/layout.css rename to src/css/layout.css diff --git a/src/assets/css/overlay.css b/src/css/overlay.css similarity index 100% rename from src/assets/css/overlay.css rename to src/css/overlay.css diff --git a/src/assets/css/prose.css b/src/css/prose.css similarity index 100% rename from src/assets/css/prose.css rename to src/css/prose.css diff --git a/src/assets/css/roots.css b/src/css/roots.css similarity index 99% rename from src/assets/css/roots.css rename to src/css/roots.css index 043c5e9..2af9185 100644 --- a/src/assets/css/roots.css +++ b/src/css/roots.css @@ -73,8 +73,7 @@ :root[data-theme="light"] { --bg: #ffffff; - --text: #0b0b0c; - --text: #111827; + --text: #000000; --muted: #6b7280; --border: #e5e7eb; --bg-elevated: rgba(0, 0, 0, 0.05); diff --git a/src/css/themes.css b/src/css/themes.css new file mode 100644 index 0000000..4714ea5 --- /dev/null +++ b/src/css/themes.css @@ -0,0 +1,250 @@ +:root { + --snow-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='22' cy='38' r='2.4' fill-opacity='.9'/%3E%3Ccircle cx='96' cy='126' r='1.8' fill-opacity='.7'/%3E%3Ccircle cx='168' cy='28' r='3' fill-opacity='.85'/%3E%3Ccircle cx='236' cy='204' r='2' fill-opacity='.75'/%3E%3Ccircle cx='272' cy='92' r='2.8' fill-opacity='.9'/%3E%3Ccircle cx='58' cy='252' r='2.2' fill-opacity='.8'/%3E%3Ccircle cx='196' cy='282' r='1.6' fill-opacity='.7'/%3E%3Ccircle cx='140' cy='190' r='2.4' fill-opacity='.85'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='.9' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath transform='translate(126 72)' d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4'/%3E%3Cpath transform='translate(246 150)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3Cpath transform='translate(40 160)' d='M0 -7V7M-6 -3.5L6 3.5M-6 3.5L6 -3.5'/%3E%3Cpath transform='translate(210 250)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3C/g%3E%3C/svg%3E"); + --leaf-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg transform='translate(50 60) rotate(25) scale(1.2)' fill='%23e8710a'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(190 40) rotate(-40)' fill='%23c2410c'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(300 130) rotate(70) scale(1.3)' fill='%23eab308'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(120 200) rotate(-15) scale(1.1)' fill='%23b45309'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(250 280) rotate(140) scale(1.2)' fill='%23d97706'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(40 310) rotate(-80)' fill='%23ca8a04'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); + --lights-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cpath d='M0 4Q40 32 80 4Q120 32 160 4' fill='none' stroke='%23245c3a' stroke-width='1.6'/%3E%3Cg fill='%23222'%3E%3Crect x='18' y='13' width='4' height='4'/%3E%3Crect x='38' y='17' width='4' height='4'/%3E%3Crect x='58' y='13' width='4' height='4'/%3E%3Crect x='98' y='13' width='4' height='4'/%3E%3Crect x='118' y='17' width='4' height='4'/%3E%3Crect x='138' y='13' width='4' height='4'/%3E%3C/g%3E%3Cellipse cx='20' cy='22' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='40' cy='26' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3Cellipse cx='60' cy='22' rx='4' ry='5.5' fill='%234dff88'/%3E%3Cellipse cx='100' cy='22' rx='4' ry='5.5' fill='%234da6ff'/%3E%3Cellipse cx='120' cy='26' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='140' cy='22' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3C/svg%3E"); +} + +.snowfall, +.leaf-fall { + position: fixed; + inset: 0; + overflow: hidden; + pointer-events: none; + z-index: 30; +} + +.snowfall { + display: var(--snow-display); +} + +.leaf-fall { + display: var(--leaf-display); +} + +.snowfall::before, +.snowfall::after, +.leaf-fall::before, +.leaf-fall::after { + content: ""; + position: absolute; + background-repeat: repeat; + will-change: transform; +} + +.snowfall::before { + top: -600px; + left: 0; + right: 0; + bottom: 0; + background-image: var(--snow-tile); + background-size: 300px 300px; + opacity: 0.9; + animation: snowFallNear 18s linear infinite; +} + +.snowfall::after { + top: -500px; + left: 0; + right: 0; + bottom: 0; + background-image: var(--snow-tile); + background-size: 500px 500px; + opacity: 0.6; + animation: snowFallFar 30s linear infinite; +} + +.leaf-fall::before { + top: -720px; + left: 0; + right: -360px; + bottom: 0; + background-image: var(--leaf-tile); + background-size: 360px 360px; + opacity: 0.9; + animation: leafFallNear 26s linear infinite; +} + +.leaf-fall::after { + top: -540px; + left: -540px; + right: 0; + bottom: 0; + background-image: var(--leaf-tile); + background-size: 540px 540px; + opacity: 0.7; + animation: leafFallFar 40s linear infinite; +} + +.light-string { + display: var(--lights-display); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 56px; + pointer-events: none; + z-index: 100; + background-image: var(--lights-tile); + background-repeat: repeat-x; + background-size: 160px 56px; + animation: lightTwinkle 2.6s ease-in-out infinite alternate; +} + +@keyframes snowFallNear { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(0, 600px, 0); + } +} + +@keyframes snowFallFar { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(0, 500px, 0); + } +} + +@keyframes leafFallNear { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(-360px, 720px, 0); + } +} + +@keyframes leafFallFar { + from { + transform: translate3d(0, 0, 0); + } + + to { + transform: translate3d(540px, 540px, 0); + } +} + +@keyframes lightTwinkle { + from { + opacity: 0.65; + filter: drop-shadow(0 0 3px rgba(255, 214, 120, 0.5)); + } + + to { + opacity: 1; + filter: drop-shadow(0 0 8px rgba(255, 214, 120, 0.9)); + } +} + +@media (prefers-reduced-motion: reduce) { + + .snowfall::before, + .snowfall::after, + .leaf-fall::before, + .leaf-fall::after, + .light-string { + animation: none; + } +} + +#navbar .brand { + position: relative; +} + +#navbar .brand::after { + content: ""; + position: absolute; + top: -9px; + right: -9px; + font-size: 14px; + line-height: 1; + pointer-events: none; +} + +:root[data-theme="halloween"] #navbar .brand::after { + content: "🎃"; +} + +:root[data-theme="autumn"] #navbar .brand::after { + content: "🍂"; +} + +:root[data-theme="winter"] #navbar .brand::after { + content: "❄️"; +} + +:root[data-theme="christmas"] #navbar .brand::after { + content: "🎄"; +} + +.st-themes { + padding: 14px 16px 16px; +} + +.st-sub { + margin: 0 0 8px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--muted); +} + +.st-theme-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px; + margin-bottom: 16px; +} + +.st-theme-grid:last-child { + margin-bottom: 0; +} + +.st-theme { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; + height: 40px; + padding: 0 14px; + border: 1px solid transparent; + border-radius: 100px; + background: var(--search-bg); + color: var(--muted); + font: inherit; + font-size: 13.5px; + font-weight: 500; + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; +} + +.st-theme .ico { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +.st-theme span { + min-width: 0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.st-theme:hover { + color: var(--text); +} + +.st-theme.on { + border-color: var(--text); + background: var(--hover-bg); + color: var(--text); + font-weight: 600; +} \ No newline at end of file diff --git a/src/assets/js/api/contribute.js b/src/js/api/contribute.js similarity index 100% rename from src/assets/js/api/contribute.js rename to src/js/api/contribute.js diff --git a/src/assets/js/api/download.js b/src/js/api/download.js similarity index 100% rename from src/assets/js/api/download.js rename to src/js/api/download.js diff --git a/src/assets/js/api/release.js b/src/js/api/release.js similarity index 100% rename from src/assets/js/api/release.js rename to src/js/api/release.js diff --git a/src/js/glass.js b/src/js/glass.js new file mode 100644 index 0000000..af9448d --- /dev/null +++ b/src/js/glass.js @@ -0,0 +1,123 @@ +var GLASS_TARGETS = [ + { + selector: ".btn-primary", + options: { + distortionScale: -300, + displace: 0, + backgroundOpacity: 0.1 + } + }, + { + selector: ".btn-secondary", + options: { + distortionScale: -300, + displace: 0, + backgroundOpacity: 0.1 + } + }, + { + selector: ".hero-greeting", + options: { + distortionScale: -200, + displace: 0, + backgroundOpacity: 0.08 + } + } +]; + +function initGlassSurface(el, opts) { + if (!el || el.getAttribute("data-glass")) return; + el.setAttribute("data-glass", "true"); + opts = opts || {}; + var distortionScale = opts.distortionScale !== undefined ? opts.distortionScale : -180; + var displace = opts.displace !== undefined ? opts.displace : 0; + var backgroundOpacity = opts.backgroundOpacity !== undefined ? opts.backgroundOpacity : 0; + var saturation = opts.saturation !== undefined ? opts.saturation : 1; + var redOffset = opts.redOffset !== undefined ? opts.redOffset : 0; + var greenOffset = opts.greenOffset !== undefined ? opts.greenOffset : 10; + var blueOffset = opts.blueOffset !== undefined ? opts.blueOffset : 20; + var borderWidth = opts.borderWidth !== undefined ? opts.borderWidth : 0.07; + var brightness = opts.brightness !== undefined ? opts.brightness : 50; + var opacity = opts.opacity !== undefined ? opts.opacity : 0.93; + var blur = opts.blur !== undefined ? opts.blur : 11; + var mixBlendMode = opts.mixBlendMode || "difference"; + + var uid = Math.random().toString(36).slice(2, 9); + var filterId = "glass-filter-" + uid; + var redGradId = "red-grad-" + uid; + var blueGradId = "blue-grad-" + uid; + var softId = "soft-" + uid; + + var isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); + var isFirefox = /Firefox/.test(navigator.userAgent); + var div = document.createElement("div"); + div.style.backdropFilter = "url(#" + filterId + ")"; + var svgSupported = !isWebkit && !isFirefox && div.style.backdropFilter !== ""; + + var rect = el.getBoundingClientRect(); + var w = Math.round(rect.width) || 160; + var h = Math.round(rect.height) || 40; + var r = Math.round(h / 2); + var edge = Math.min(w, h) * (borderWidth * 0.5); + + var mapSvg = '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + ''; + var mapUrl = "data:image/svg+xml," + encodeURIComponent(mapSvg); + + el.style.setProperty("--glass-frost", backgroundOpacity); + el.style.setProperty("--glass-saturation", saturation); + el.style.setProperty("--filter-id", "url(#" + filterId + ")"); + el.classList.add(svgSupported ? "glass-surface--svg" : "glass-surface--fallback"); + + var filterSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + filterSvg.setAttribute("class", "glass-surface__filter"); + filterSvg.innerHTML = '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + ''; + + var childNodes = Array.prototype.slice.call(el.childNodes); + var wrap = document.createElement("div"); + wrap.className = "glass-surface__content"; + childNodes.forEach(function (n) { wrap.appendChild(n); }); + + el.appendChild(filterSvg); + if (!svgSupported) { + var sheen = document.createElement("span"); + sheen.className = "glass-surface__sheen"; + sheen.setAttribute("aria-hidden", "true"); + var rim = document.createElement("span"); + rim.className = "glass-surface__rim"; + rim.setAttribute("aria-hidden", "true"); + el.appendChild(sheen); + el.appendChild(rim); + } + el.appendChild(wrap); +} + +function applyGlassSurfaces(root) { + var base = root || document; + GLASS_TARGETS.forEach(function (target) { + base.querySelectorAll(target.selector).forEach(function (el) { + initGlassSurface(el, target.options); + }); + }); +} \ No newline at end of file diff --git a/src/assets/js/main.js b/src/js/main.js similarity index 92% rename from src/assets/js/main.js rename to src/js/main.js index abcb971..a2d0b81 100644 --- a/src/assets/js/main.js +++ b/src/js/main.js @@ -29,7 +29,6 @@ var ICONS = { }; var THEMES_GENERAL = [ - { id: "auto", label: "Auto (seasonal)" }, { id: "dark", label: "Dark" }, { id: "light", label: "Light" }, { id: "midnight", label: "Midnight" }, @@ -40,20 +39,9 @@ var THEMES_GENERAL = [ { id: "cyberpunk", label: "Cyberpunk" } ]; -var THEMES_SEASONAL = [ - { id: "halloween", label: "Halloween" }, - { id: "autumn", label: "Autumn" }, - { id: "winter", label: "Winter" }, - { id: "christmas", label: "Christmas" } -]; - var THEME_VIDEOS = { - halloween: "https://www.pexels.com/download/video/5652678/", - autumn: "https://www.pexels.com/download/video/34463521/", - winter: "https://www.pexels.com/download/video/30181650/", - christmas: "https://www.pexels.com/download/video/35282426/", - dark: "https://www.pexels.com/download/video/31270356/", - light: "https://www.pexels.com/download/video/13956986/", + dark: "https://www.pexels.com/download/video/39880903/", + light: "https://www.pexels.com/download/video/36600568/", midnight: "https://www.pexels.com/download/video/15860507/", nord: "https://www.pexels.com/download/video/31468607/", dracula: "https://www.pexels.com/download/video/8116002/", @@ -237,11 +225,6 @@ function buildThemeControls() { THEMES_GENERAL.forEach(function (t) { html += ''; }); - html += '
'; - html += '
Seasonal
'; - THEMES_SEASONAL.forEach(function (t) { - html += ''; - }); menu.innerHTML = html; wrap.appendChild(menu); menu.addEventListener("click", function (e) { @@ -301,38 +284,6 @@ var THEME_COPY = { greeting: "", favicon: "", confetti: null - }, - halloween: { - banner: "🎃 Happy Halloween!", - footer: "Stay spooky, keep streaming.", - notFound: "Something is lurking where this page should be. Let's get you back before the lights go out.", - greeting: "Spooky season is here.", - favicon: "🎃", - confetti: ["🎃", "🦇", "👻", "🕷️"] - }, - autumn: { - banner: "🍂 Happy fall!", - footer: "Grab something warm and press play.", - notFound: "This page blew away with the leaves. Let's find you a better path.", - greeting: "Cozy season is here.", - favicon: "🍂", - confetti: ["🍂", "🍁", "🎃"] - }, - winter: { - banner: "❄️ Stay warm!", - footer: "Cold outside, perfect for a movie night.", - notFound: "This page got buried in the snow. Let's dig you back out.", - greeting: "Perfect weather for staying in.", - favicon: "❄️", - confetti: ["❄️", "⛄", "✨"] - }, - christmas: { - banner: "🎄 Happy holidays!", - footer: "Wishing you a quiet night and a great watchlist.", - notFound: "This page isn't on the nice list or the naughty list. Let's head home.", - greeting: "Happy holidays.", - favicon: "🎄", - confetti: ["🎄", "⭐", "🎁", "❄️"] } }; @@ -340,19 +291,8 @@ var KONAMI = ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "Arro var PROJECTS = ["home", "go", "TV", "vyla-sdk", "stream-api"]; var PROJECT_LABELS = { home: "Vyla Home", go: "Vyla Go", TV: "Vyla TV", "vyla-sdk": "Vyla SDK", "stream-api": "Stream API" }; -function seasonalTheme() { - var d = new Date(); - var m = d.getMonth(); - if (m === 9) return "halloween"; - if (m === 10) return "autumn"; - if (m === 11) return "christmas"; - if (m === 0 || m === 1) return "winter"; - if (m === 8 && d.getDate() >= 22) return "autumn"; - return "dark"; -} - function resolveTheme(mode) { - return mode === "auto" ? seasonalTheme() : mode; + return mode === "auto" ? "dark" : mode; } function getPref(key, fallback) { @@ -1266,6 +1206,94 @@ function navigateTo(path) { loadPage(); } +function initGlassSurface(el, opts) { + if (!el || el.getAttribute("data-glass")) return; + el.setAttribute("data-glass", "true"); + opts = opts || {}; + var distortionScale = opts.distortionScale !== undefined ? opts.distortionScale : -300; + var displace = opts.displace !== undefined ? opts.displace : 0; + var backgroundOpacity = opts.backgroundOpacity !== undefined ? opts.backgroundOpacity : 0.1; + var saturation = opts.saturation !== undefined ? opts.saturation : 1; + var redOffset = opts.redOffset !== undefined ? opts.redOffset : 0; + var greenOffset = opts.greenOffset !== undefined ? opts.greenOffset : 10; + var blueOffset = opts.blueOffset !== undefined ? opts.blueOffset : 20; + var borderWidth = opts.borderWidth !== undefined ? opts.borderWidth : 0.07; + var brightness = opts.brightness !== undefined ? opts.brightness : 50; + var opacity = opts.opacity !== undefined ? opts.opacity : 0.93; + var blur = opts.blur !== undefined ? opts.blur : 11; + var mixBlendMode = opts.mixBlendMode || "difference"; + + var uid = Math.random().toString(36).slice(2, 9); + var filterId = "glass-filter-" + uid; + var redGradId = "red-grad-" + uid; + var blueGradId = "blue-grad-" + uid; + var softId = "soft-" + uid; + + var isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); + var isFirefox = /Firefox/.test(navigator.userAgent); + var div = document.createElement("div"); + div.style.backdropFilter = "url(#" + filterId + ")"; + var svgSupported = !isWebkit && !isFirefox && div.style.backdropFilter !== ""; + + var rect = el.getBoundingClientRect(); + var w = Math.round(rect.width) || 160; + var h = Math.round(rect.height) || 44; + var r = Math.round(h / 2); + var edge = Math.min(w, h) * (borderWidth * 0.5); + + var mapSvg = '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + ''; + var mapUrl = "data:image/svg+xml," + encodeURIComponent(mapSvg); + + el.style.setProperty("--glass-frost", backgroundOpacity); + el.style.setProperty("--glass-saturation", saturation); + el.style.setProperty("--filter-id", "url(#" + filterId + ")"); + el.classList.add(svgSupported ? "glass-surface--svg" : "glass-surface--fallback"); + + var filterSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + filterSvg.setAttribute("class", "glass-surface__filter"); + filterSvg.innerHTML = '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + ''; + + var childNodes = Array.prototype.slice.call(el.childNodes); + var wrap = document.createElement("div"); + wrap.className = "glass-surface__content"; + childNodes.forEach(function (n) { wrap.appendChild(n); }); + + el.appendChild(filterSvg); + if (!svgSupported) { + var sheen = document.createElement("span"); + sheen.className = "glass-surface__sheen"; + sheen.setAttribute("aria-hidden", "true"); + var rim = document.createElement("span"); + rim.className = "glass-surface__rim"; + rim.setAttribute("aria-hidden", "true"); + el.appendChild(sheen); + el.appendChild(rim); + } + el.appendChild(wrap); +} + function mountGreeting(root) { var content = root.querySelector(".header-content"); var title = root.querySelector(".header-title"); @@ -1286,6 +1314,9 @@ function mountGreeting(root) { resume.textContent = "Continue: " + (last.title || last.path); actions.appendChild(resume); } + if (typeof applyGlassSurfaces === "function") { + applyGlassSurfaces(root); + } } function loadPage() { @@ -1892,72 +1923,4 @@ document.addEventListener("DOMContentLoaded", function () { loadPage(); window.addEventListener("popstate", loadPage); - - document.addEventListener("click", function (e) { - var img = e.target.closest("main.prose img"); - if (img && !img.closest(".spider-body") && !img.closest(".cobweb")) { - e.preventDefault(); - openLightbox(img); - return; - } - - var heading = e.target.closest("main.prose h1, main.prose h2, main.prose h3, main.prose h4"); - if (heading && heading.id) { - var header = document.getElementById("header-container") || document.getElementById("navbar"); - var offset = header ? header.offsetHeight + 16 : 80; - var topPos = heading.getBoundingClientRect().top + window.pageYOffset - offset; - window.scrollTo({ top: Math.max(0, topPos), behavior: "smooth" }); - window.history.pushState(null, "", "#" + heading.id); - return; - } - - var a = e.target.closest("a"); - if (a) { - var href = a.getAttribute("href"); - if (href && href.startsWith("#")) { - var targetId = href.slice(1); - var targetEl = document.getElementById(targetId); - if (!targetEl) { - var headings = document.querySelectorAll("h1, h2, h3, h4"); - for (var h = 0; h < headings.length; h++) { - if (headings[h].textContent.trim().toLowerCase() === targetId.replace(/-/g, " ").toLowerCase()) { - targetEl = headings[h]; - break; - } - } - } - if (targetEl) { - e.preventDefault(); - var header = document.getElementById("header-container") || document.getElementById("navbar"); - var offset = header ? header.offsetHeight + 16 : 80; - var topPos = targetEl.getBoundingClientRect().top + window.pageYOffset - offset; - window.scrollTo({ top: Math.max(0, topPos), behavior: "smooth" }); - window.history.pushState(null, "", "#" + (targetEl.id || targetId)); - } - return; - } - if (href && href.startsWith("/") && !href.startsWith("//") && a.target !== "_blank") { - e.preventDefault(); - navigateTo(href); - return; - } - } - - var sidebar = document.getElementById("sidebar"); - var menu = document.getElementById("theme-menu"); - var segMenu = document.getElementById("theme-seg-menu"); - if (menu && !e.target.closest(".theme-wrap")) menu.classList.remove("open"); - if (segMenu && !e.target.closest("#theme-seg")) segMenu.classList.remove("open"); - if ( - sidebar && - sidebar.classList.contains("open") && - !sidebar.contains(e.target) && - !e.target.closest("#mobile-toggle") && - !e.target.closest(".theme-wrap") && - !e.target.closest("#theme-seg") - ) { - sidebar.classList.remove("open"); - document.body.classList.remove("nav-open"); - } - }); }); \ No newline at end of file diff --git a/src/assets/js/main/settings.js b/src/js/main/settings.js similarity index 94% rename from src/assets/js/main/settings.js rename to src/js/main/settings.js index b018746..de6907d 100644 --- a/src/assets/js/main/settings.js +++ b/src/js/main/settings.js @@ -18,8 +18,6 @@ function syncSettingsUI() { b.classList.toggle("on", b.getAttribute("data-v") === size); }); settingsEl("set-video").checked = getPref("video", "on") !== "off"; - settingsEl("set-motion").checked = getPref("motion", "on") !== "off"; - settingsEl("set-deco").checked = getPref("deco", "on") !== "off"; } var saveTimer = null; @@ -73,7 +71,6 @@ function buildSettings() { '
' + '

Theme

' + '
General
' + themeChips(THEMES_GENERAL) + "
" + - '
Seasonal
' + themeChips(THEMES_SEASONAL) + "
" + "
" + '

You

' + '' + @@ -88,8 +85,6 @@ function buildSettings() { "
" + '

Experience

' + switchRow("set-video", "Background video", "Looping video behind each theme.") + - switchRow("set-motion", "Animations", "Transitions, falling decorations and effects.") + - switchRow("set-deco", "Decorations", "Spiders, snow, leaves and lights.") + "
" + "
" + '
' + @@ -197,7 +192,7 @@ function buildSettings() { syncSettingsUI(); }); - [["set-video", "video"], ["set-motion", "motion"], ["set-deco", "deco"]].forEach(function (pair) { + [["set-video", "video"]].forEach(function (pair) { settingsEl(pair[0]).addEventListener("change", function () { setPref(pair[1], this.checked ? null : "off"); applyTheme();