Skip to content

Iterate on visual polish: TOC, framed media, dark-mode contrast, glass navbar#502

Merged
LindsayAuch merged 1 commit into
LindsayAuch/visual-refresh-sandboxfrom
LindsayAuch/visual-polish-iteration
May 12, 2026
Merged

Iterate on visual polish: TOC, framed media, dark-mode contrast, glass navbar#502
LindsayAuch merged 1 commit into
LindsayAuch/visual-refresh-sandboxfrom
LindsayAuch/visual-polish-iteration

Conversation

@LindsayAuch
Copy link
Copy Markdown
Collaborator

@LindsayAuch LindsayAuch commented May 1, 2026

Highlights

  • Generated-index TOC — new swizzle of DocCategoryGeneratedIndexPage adds an "On this page" mini-nav on the right rail. Each card gets a slugified id and the TOC scrolls to it.
  • Frosted-glass navbar — translucent bg + backdrop-filter: saturate(180%) blur(20px), matching the Moderne Docs aesthetic. Light + dark variants.
  • Framed media treatment — images, iframes, and video players get a rounded inner element + outer outline at offset (visible double-border ring).
  • Tighter link-list selector — scope to h2#categories, h2#recipes, h2#composite-recipes (recipe READMEs) instead of any link-only ul. Inline single-link bullets in body copy stay normal.
  • Vertical breathing room — paragraphs 2.5rem, h2 4rem, h3 3rem, list items, code blocks, admonitions all bumped.
  • Dark-mode contrast — admonitions get translucent tinted backgrounds + lighter text + matching Lucide icons. Card descriptions and titles render in white. Dropped legacy --ifm-card-background-color: #fff override that was fighting the transparent-card neo style.
  • Hairline card borders (0.5px) and a subtle dark-mode default card fill so cards show shape against the dark page.

Test plan

  • /changelog, /recipes, /authoring-recipes show the right-rail TOC
  • Toggling dark mode keeps everything readable: cards, admonitions, descriptions
  • Navbar shows page content blurred behind it on scroll
  • Recipe README link-list cards still styled, regular bullets are not
  • Code blocks have a single border, no double-ring treatment

…s navbar

Builds on top of #501. Changes accumulated during a long iteration session:

- Swizzle DocCategoryGeneratedIndexPage to render an "On this page" TOC
  on the right rail of generated-index pages (Recipe catalog,
  changelog, etc.). Each card gets a slugified id; TOC entries scroll
  to it. Includes a Lucide menu-icon label.
- Frosted-glass navbar via backdrop-filter: saturate(180%) blur(20px)
  with a 70%-translucent bg, light/dark variants
- Tighter link-list-card targeting: scope to lists following h2#categories,
  h2#recipes, h2#composite-recipes (recipe README pages) instead of any
  link-only ul, so inline single-link bullets in body copy stay normal
- Markdown vertical breathing room: paragraphs 2.5rem, h2 4rem, h3 3rem,
  list items 0.75rem, code blocks/blockquotes/admonitions 2.5rem
- Double-border treatment on .markdown img and .markdown iframe (rounded
  inner + outer outline at 20px offset, --neo-double-border token)
- Same treatment on video players (.reactPlayer / .react-player), with
  iframe outline suppressed inside so the inner rail doesn't ghost
- Dark-mode contrast fixes for all admonition variants (info, tip, note,
  warning/caution, danger) — translucent tinted bg, lighter text, matching
  Lucide icons in lighter colors
- Dark-mode card text color via [class*=cardDescription_] (covers hashed
  module-class names) and corresponding container <p> tag
- Drop legacy --ifm-card-background-color: #fff and the white-card-on-dark
  heading override that fought the new transparent-card neo style
- Hairline (0.5px) card borders
- Subtle dark-mode card default fill (--neo-card-bg) so cards have
  visible shape against the dark page

Refs #492

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@github-project-automation github-project-automation Bot moved this from In Progress to Ready to Review in OpenRewrite May 1, 2026
@LindsayAuch LindsayAuch marked this pull request as ready for review May 12, 2026 15:00
Base automatically changed from LindsayAuch/visual-polish to LindsayAuch/visual-refresh-sandbox May 12, 2026 15:01
@LindsayAuch LindsayAuch merged commit bd1ef10 into LindsayAuch/visual-refresh-sandbox May 12, 2026
@github-project-automation github-project-automation Bot moved this from Ready to Review to Done in OpenRewrite May 12, 2026
@LindsayAuch LindsayAuch deleted the LindsayAuch/visual-polish-iteration branch May 12, 2026 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

2 participants