(docs) Update website style#288
Merged
Merged
Conversation
- Hero bg back to solid (var(--md-default-bg-color)). Opaque so backdrop only shows through other sections, not behind FAKER - Scanlines baked into the text via background-clip: text + text-fill-color: transparent They now appear only on the actual glyphs of FAKER, // kotlin edition //, and the kotlin-faker header logo. Also applied to the glitch ::before/::after for color separation
Moves all inner-page styles into extra.css. The page source confirmed this is actually loading. main.css was never being picked up on inner pages
- Load main.css via extra_css so it applies to every page (custom_dir override was at material/overrides/main.html, not material/main.html, so the extrahead <link> only ran for the homepage). - Drop homepage-only hacks from main.css (.md-footer/display:none, sidebar display:none media queries, md-main padding/margin resets) that were leaking to inner pages once main.css loaded globally. - Move header title treatment (kotlin + "-faker" suffix + scanlines) out of home.html inline styles into main.css so the landing page and inner pages render from one source. - Remove hardcoded dark sidebar background; inherit page bg to fix the gradient look in light mode. - Drop ~270 lines of main.css duplicated into extra.css. - Add scanline + dual-channel glitch animation to article h1s via ::before/::after + a tiny glitch.js that sets data-text on each h1.
- Default the ::before/::after animations to paused, flip to running via a `.glitch-on` class toggled by an IntersectionObserver in glitch.js. Scrolled-away h1s no longer burn cycles on keyframe evaluation. - Under `prefers-reduced-motion: reduce`, drop the glitch duplicates entirely (`content: none`). Static scanlines on the base text remain. - glitch.js skips the observer when reduced motion is set, and falls back to `.glitch-on` on all h1s if IntersectionObserver is missing.
The `.md-nav__item--active > .md-nav__link` rule applied a pipe and frost1 color to every ancestor section too (User Guide got it because Configuring Faker was active). Dropped the rule entirely; the selected item is now distinguished by frost1 text + opacity:1 only.
- site_name is now "kotlin-faker" so SEO/tab-title/og get the full name. glitch.js splits the rendered text, wrapping "-faker" in a `<span class="md-ellipsis__accent">` so it can carry its own frost1 scanline background. The old `::after` approach didn't work because pseudo-elements don't inherit `background-image`, so the accent rendered as transparent on the clipped parent. - Replace `var(--md-primary-bg-color)` on the header title and tab links with explicit `var(--color-nord-light2)`. The header bar is forced dark in both schemes; the scheme-dependent token was resolving to #3b4252 in nord:dark (near-invisible on #070707).
Previous change set title color to nord-light2 which rendered as bright white scanlines. The intended look (from nord:dark's old --md-primary-bg-color resolution of #3b4252) is a muted dark-gray scanline on near-black — subtle retro pattern. Switch to an explicit nord-dark1 so it renders the same way in both schemes. Tabs keep nord-light2 since they're plain text, not scanlined, and need contrast against the dark header.
Dropped the purple-bg PNG in favor of an inline stroked glyph (circle + near-vertical slash) placed under material/.icons/kfaker/ so mkdocs-material inlines it and CSS can color the strokes. The logo now renders in frost1 with a subtle cyan drop-shadow and a small tilt on hover.
Reinstates content lost in the landing page redesign: - "We fake it. You make it." manifesto section between hero and data tour, echoing the original docs/index.md tone. - WARNING bookend section before the footer with the full fictional-data disclaimer, styled with a glitchy red title that reuses the hero FAKER keyframes. - Humor tagline under the hero stats referencing the "really fake logo". - Android restored in the hero language tags, the tech-stack row, and the Kotlin First feature card (replacing an inaccurate coroutine-support claim).
The hero now stays pinned for 170vh of scroll, with three phases
driven by scroll progress via CSS custom properties:
1. 0–25%: gentle fade to ~78% opacity.
2. 25–70%: sin-bell glitch peak — filter stack (blur, saturate,
contrast, hue-rotate), horizontal jitter, and a scanline/tear
overlay in screen blend mode.
3. 70–100%: glitch snaps off, hero fades to 0 as the manifesto
section enters the viewport.
JS writes three custom properties per frame via rAF with a ticking
gate; CSS does all rendering. Opacity and transform on the hero
cascade to the fixed-position backdrop so the matrix-rain fades in
lockstep. prefers-reduced-motion short-circuits the whole thing
back to the static hero layout.
Previously the manifesto scrolled up into view after the hero wrap ended. Now hero and manifesto share a single 100vh sticky viewport (CSS grid, grid-area: stack), with manifesto sitting behind the hero. As the hero fades during scroll, the manifesto is revealed in place — no vertical travel. - Wrap extended to 220vh; hero transition compressed into the first 60% of scroll (HERO_PHASE constant), leaving the rest of the wrap as "manifesto linger" space before release. - Hero is now position: relative inside the sticky pin-stack rather than sticky itself. - Manifesto moved into the wrap with .lp-manifesto--pinned (100vh, flex-centered, padding zeroed); the standalone section below is removed. - Reveal is driven by scroll progress (hp > 0.78) instead of IntersectionObserver, which would fire immediately now that manifesto is always in the rendered viewport. - prefers-reduced-motion collapses the pin-stack back to normal document flow.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.