Visual refresh of docs site #493
Open
LindsayAuch wants to merge 32 commits into
Open
Conversation
Standalone /sandbox page that renders one example of every pattern from the visual refresh: typography, admonitions, link-list cards, DocCards, sidebar. Used as the integration target for issue #492 review PRs. Marked unlisted so it doesn't appear in the sidebar. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Drop Beausite Slick for Inter on H1 and markdown headings. Reduce H1 from 3.75rem/300 to 2.25rem/600 to align with the simpler typographic scale shown in design references. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
3 tasks
- Generated index page cards now span full width and stack vertically instead of a 2-column grid - Remove gems-bg decoration from generated index pages - Drop padding--lg from DocCard so module CSS controls padding (was blocked by a same-specificity !important tie with Infima) - Card padding 2rem -> 0.75rem 1.25rem; min-height 3.25rem; rounded 8px - Hover: light grey #F3F4F6 background instead of mint green - Title 1.25rem -> 1.0625rem; description 1rem -> 14px Inter, muted - Card vertical gap 2rem -> 1.25rem Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
4 tasks
- Collapsible category labels render bold/dark; the active expanded category turns blue (matches link color) - Leaf items default to regular weight; the active leaf is bold blue - Reduce per-item padding to 0.4rem and add 0.25rem top margin between items for a denser stack - Indent nested lists by 0.75rem Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
4 tasks
Recipe README pages (e.g. Quarkus, Docker, Apache) use plain markdown bulleted lists where each item is a link to a subcategory or recipe. Style any such list (every li contains exactly one anchor) so each item renders as a card matching DocCard styling. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2 tasks
- Info uses Lucide Info (blue) - Tip uses Lucide Lightbulb (green) - Note uses Lucide StickyNote (neutral dark) - Warning/Caution use Lucide TriangleAlert (amber) - Danger uses Lucide OctagonAlert (red) Hide default heading text and inject icon via ::before for a tighter inline layout. Shared base rules for radius/padding/icon position; each variant only overrides colors and the SVG. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This was referenced May 1, 2026
Reduce per-item padding (0.4rem -> 0.3rem) and line-height (1.5 -> 1.4), remove top margin between items, so the sidebar feels denser without items running into each other. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Inline code and code blocks at 15.2px feel oversized next to 16px Inter body text. Drop to 13px for a more balanced visual hierarchy. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
3 tasks
- Heading rule font-weight: bold (700) -> 600 (semibold) for h1 and the markdown h2/h3/h4 to match the lighter typographic feel of the rest of the refresh - Add border-radius: 12px (with overflow: hidden) to .reactPlayer and .react-player wrappers and their inner iframe/video, so embedded YouTube videos render with rounded corners Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2 tasks
- Define --neo-* design tokens (border, grey-300, card shadow, hover bg) for both light and dark mode. Cards default to transparent fill and fill in to white with a soft shadow on hover, replacing the flat grey hover with something that feels more intentional - Apply the same treatment to markdown link-list cards (recipe READMEs) - Round corners (12px) on inline images and YouTube/Vimeo iframes inside markdown content, matching the existing video player treatment - Bump the sidebar's active leaf from 600 to 700 Inter for clearer current-page emphasis Self-contained: all additions use !important / attribute selectors so the PR lands cleanly on top of the other visual-refresh PRs in any order. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
5 tasks
…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>
Slightly lighter, less saturated lavender. Updates --ifm-background-color and the matching translucent navbar fill. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Visual polish: neo card tokens, rounded media, sidebar active leaf
…eration Iterate on visual polish: TOC, framed media, dark-mode contrast, glass navbar
…ading-weight-video-radius
…ideo-radius Soften heading weight (600) and round video thumbnail corners
…monition-lucide-icons
…rkdown-link-cards
Typography refresh: Inter throughout, smaller H1
Set inline code / code-block font size to 13px
…debar-nav-refresh
…e-icons Admonition restyle: Lucide icons, per-variant color schemes
Card components redesign: full-width stacked, compact, subtle hover
Sidebar nav refresh: bold categories, blue active state, tighter spacing
Render markdown link-only lists as cards (recipe READMEs)
Bump page background from #F8F8FF to #FAFAFF
LindsayAuch
changed the title
mike-solomon
requested changes
May 12, 2026
Contributor
mike-solomon
left a comment
mike-solomon
left a comment
There was a problem hiding this comment.
I'm not super experienced with CSS or TypeScript - so hoping @sjungling could help out with that front. I do see a few issues that I pointed out below, though.
The dark-mode .theme-code-block border was removed in #502 along with the wrapper-gap fix, but on dark backgrounds the code block now blends into the page and the boundary is harder to read. Add a 1px rgba(255,255,255,0.12) border back, scoped to dark mode only. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The "On this page" label icon was rendered with stroke=#041834 (dark navy), which is invisible against the dark page bg. Add a dark-mode override that swaps the SVG to white stroke. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The font was only referenced by the legacy H1 / markdown heading rules that have since been swapped to Inter. The @font-face block was still fetching the woff2 + woff files on every page load with no rule using them. Drop it. Refs #492 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…border Restore subtle border on code blocks in dark mode
Contributor
|
@LindsayAuch the code blocks now look quite wonky. There's too much padding and the font is smaller - making it difficult to read. Current site: 
Changes proposed in this PR: 
|
Reduces padding-top/bottom on .theme-code-block code to 0.5rem. Scoped selector avoids the --ifm-pre-padding side effect that rippled into card components in the earlier attempt.
Collaborator
Author
|
All three concerns addressed: Code font: bumped --ifm-code-font-size 81.25% → 87.5% (13px → 14px). Screenshots: 
<img width="1717" height="1298" alt="Screenshot 2026-05-22 at 5 19 15 PM" src="https://github.com/user-attachments/assets/e225eb12-6 
c07-4498-817b-adb7b4dbfa09" />
Re-requesting your review. |
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
2 participants
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.
Five draft PRs target this branch. Do not merge until all child PRs land here and the result is reviewed as a whole.
Sandbox preview
/sandboxpage lives in this branch — renders one example of every new pattern.Child PRs
Backup
Full WIP branch with everything pre-applied:
LindsayAuch/live-local-preview.