From 82320c9d232d7e65e85d780606c07be35e42e77f Mon Sep 17 00:00:00 2001 From: Vinta Chen Date: Wed, 21 Oct 2026 19:57:47 +0800 Subject: [PATCH] fix: remove animated sheen from hero background On narrow phone heroes the sheen, a diagonal light stripe sliding across for 54s after load, rendered as a near-vertical band sweeping sideways that read as a loading or progress bar. Co-Authored-By: Claude --- DESIGN.md | 4 ++-- website/static/main.js | 10 ---------- website/static/style.css | 22 ---------------------- website/templates/category.html | 1 - website/templates/index.html | 1 - website/templates/sponsorship.html | 1 - 6 files changed, 2 insertions(+), 37 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index 2ac85446..d814817d 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -147,7 +147,7 @@ Hard-won sizing rules (do not relax): Depth comes from **tonal layers**, not heavy shadows. - The page is a quiet warm canvas (`--bg-page`). The content shell is slightly brighter paper (`--bg-paper`). CTA backgrounds and inline decorative blocks step up to `--bg-paper-strong`; the sponsor band steps further, to `--sponsor-bg`. -- The hero and the category guide band are the only places with real atmosphere: warm gradients on a dark earthy ground (`--hero-bg-start` → `--hero-bg-mid` → `--hero-bg-end`). Only the hero adds the subtle grid and slow sheen. The sheen and any other motion respect `prefers-reduced-motion`. +- The hero and the category guide band are the only places with real atmosphere: warm gradients on a dark earthy ground (`--hero-bg-start` → `--hero-bg-mid` → `--hero-bg-end`). Only the hero adds the subtle grid. The hero background holds still: a moving stripe on a narrow phone hero reads as a loading bar. Any motion elsewhere respects `prefers-reduced-motion`. - The footer is a single tonal block in `--footer-bg`, no internal gradients. - Two depth treatments are allowed and only these two. The search input combines a 1px inset highlight (`--search-inset`) with a soft warm drop shadow (`--search-shadow`, intensified by `--search-focus-shadow` on focus). The primary CTA button (`.hero-action-primary`) carries a warm drop shadow for press affordance. Both shadows are soft, warm-tinted, and tied to interactive elements. No new drop shadows on cards, panels, rows, or static decoration. - No glassmorphism as default decoration. @@ -169,7 +169,7 @@ The component vocabulary is small and table-led. Source of truth: `website/stati - **Table-driven index** (the hero of the page). Sticky header, sortable columns, click-to-expand rows that indent under the Name column. Modeled on placestoread.xyz. Not a card grid. - **Group rows**. Section, subcategory, and group pages list rows in README order. Section pages add one H2 row per use case; group pages add one per section, linking to that section's page. A note replaces the sort arrow until someone sorts a column, which flattens the list and hides the group rows. - **Filter tags** (`.tag`). `--accent-soft` background with `--accent-deep` text. Pill shape. Hover swaps to `--highlight` background with `--tag-hover-border` border and ink text. Active state uses the warm `--tag-active-start` → `--tag-active-end` gradient with hero-ink text. Tag variants (`tag-group`, `tag-source`) inherit the base `.tag` style today and differ only at narrow widths (`tag-group` hides under 960px). Add a new variant only when a real visual difference is needed. -- **Hero**. Magazine-cover headline, dark earthy ground, kicker and proof microcopy, primary CTA button using `--hero-btn-start` / `--hero-btn-end`. Subtle grid plus slow sheen. Respects `prefers-reduced-motion`. +- **Hero**. Magazine-cover headline, dark earthy ground, kicker and proof microcopy, primary CTA button using `--hero-btn-start` / `--hero-btn-end`. Subtle grid on a still background. - **Jump links**. One per use case in a category hero, plus one for the guide. Underlined like the intro's links, with a trailing ↓. Never tag-styled: tags filter the table or open another page, jump links only scroll. - **Guide band**. Everything in a category intro after its "How to choose" list. It sits below the table on the hero's dark gradient, with its H2 above the text. - **Sponsor band**. Sits below the hero on the home page and category pages, on `--sponsor-bg` with a `--line-strong` bottom border. Editorial layout, not a logo wall. Sponsor links share the global accent treatment; each sponsor name ends in a small ↗ in `--accent-deep` to mark it as an outbound link. diff --git a/website/static/main.js b/website/static/main.js index aa027eab..2259a5bf 100644 --- a/website/static/main.js +++ b/website/static/main.js @@ -78,16 +78,6 @@ if (window.location.hash === "#library-index") { ); } -// Pause hero animations when scrolled out of view -(function () { - const hero = document.querySelector(".hero"); - if (!hero || !("IntersectionObserver" in window)) return; - const observer = new IntersectionObserver(function (entries) { - hero.classList.toggle("offscreen", !entries[0].isIntersecting); - }); - observer.observe(hero); -})(); - function relativeTime(isoStr) { const date = new Date(isoStr); const now = new Date(); diff --git a/website/static/style.css b/website/static/style.css index 652dd864..c7996a32 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -177,25 +177,12 @@ kbd { pointer-events: none; } -.hero-sheen, .hero-noise { position: absolute; inset: 0; pointer-events: none; } -.hero-sheen { - background: - linear-gradient(118deg, transparent 35%, oklch(100% 0 0 / 0.09) 49%, transparent 63%); - transform: translateX(-30%); - animation: sheen-drift 18s linear 3; -} - -.hero.offscreen .hero-sheen, -.hero.offscreen .hero-noise { - animation-play-state: paused; -} - .hero-noise { opacity: 0.1; background-image: @@ -1725,15 +1712,6 @@ th[data-sort].sort-asc::after { } } -@keyframes sheen-drift { - from { - transform: translateX(-30%); - } - to { - transform: translateX(35%); - } -} - @media (max-width: 960px) { .hero-shell { padding-bottom: 2rem; diff --git a/website/templates/category.html b/website/templates/category.html index 89d4367c..b48362ab 100644 --- a/website/templates/category.html +++ b/website/templates/category.html @@ -8,7 +8,6 @@ {% endblock %} {% block header %}
-
diff --git a/website/templates/index.html b/website/templates/index.html index c4e18fba..ed141bad 100644 --- a/website/templates/index.html +++ b/website/templates/index.html @@ -4,7 +4,6 @@ {% endblock %} {% block header %}
-
diff --git a/website/templates/sponsorship.html b/website/templates/sponsorship.html index 4bd5cd95..3442a150 100644 --- a/website/templates/sponsorship.html +++ b/website/templates/sponsorship.html @@ -8,7 +8,6 @@ {% endblock %} {% block header %}
-