From a54c03f00bbc8c45520e4adbd3100fa6b376dc65 Mon Sep 17 00:00:00 2001 From: alwaysmesmerizingyou Date: Tue, 10 Nov 2026 18:35:12 -0800 Subject: [PATCH] tweaked UI a bit --- home.txt | 66 ++++++++++++++++++++++++++++------------ index.html | 3 ++ src/css/layout.css | 5 ++- src/js/api/contribute.js | 14 ++++++++- src/js/glass.js | 12 +++++++- src/js/main.js | 10 +++--- 6 files changed, 84 insertions(+), 26 deletions(-) diff --git a/home.txt b/home.txt index 983f100..d385757 100644 --- a/home.txt +++ b/home.txt @@ -87,7 +87,7 @@ gap: 10px; } -.btn-primary, + .btn-primary, .btn-secondary { position: relative; display: inline-flex; @@ -97,6 +97,7 @@ border-radius: 100px; text-decoration: none !important; transition: transform 0.2s ease, opacity 0.26s ease-out; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; } .btn-primary { @@ -107,11 +108,6 @@ color: var(--text) !important; } - .btn-primary:hover, - .btn-secondary:hover { - transform: translateY(-1px); - } - .glass-surface__filter { width: 100%; height: 100%; @@ -144,7 +140,7 @@ .glass-surface--svg { background: transparent !important; border: none !important; - box-shadow: none !important; + box-shadow: none; 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; } @@ -154,7 +150,7 @@ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: transparent !important; - box-shadow: none !important; + box-shadow: none; } @keyframes fadeVideoBg { @@ -227,6 +223,7 @@ } .feature-box { + position: relative; display: flex; flex-direction: column; padding: 24px; @@ -236,7 +233,32 @@ -webkit-backdrop-filter: blur(16px); text-decoration: none !important; color: inherit !important; - transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; + transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; + } + + .feature-box .glass-surface__content { + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + gap: 0; + padding: 24px; + } + + .feature-box.glass-surface--svg, + .feature-box.glass-surface--fallback { + background: transparent !important; + border: none !important; + } + + .feature-box::after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 45%); + opacity: 0; + transition: opacity 0.25s ease; + pointer-events: none; } html.dark .feature-box { @@ -244,7 +266,11 @@ } .feature-box:hover { - background: rgba(28, 28, 28, 0.8); + background: rgba(150, 150, 150, 1); + } + + .feature-box:hover::after { + opacity: 1; } .box-icon { @@ -290,7 +316,7 @@ opacity: 0.75; } -.hero-greeting { + .hero-greeting { position: relative; display: inline-flex; align-items: center; @@ -309,13 +335,14 @@ letter-spacing: 0.01em; } -.hero-resume { - max-width: min(90vw, 360px); - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: var(--text); -} + .hero-resume { + width: min(100vw, 200px); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--text); + margin-top: 30px; + } @media (max-width: 900px) { #header-container { @@ -359,7 +386,8 @@ gap: 12px; } - .feature-box { + .feature-box, + .feature-box .glass-surface__content { padding: 18px; } } diff --git a/index.html b/index.html index a64f4d9..bda06c9 100644 --- a/index.html +++ b/index.html @@ -172,6 +172,9 @@ + This website runs on green hosting - verified by thegreenwebfoundation.org