Skip to content

Refresh docs site styling#18388

Draft
kramhuber wants to merge 6 commits intomasterfrom
emdash/style-refresh-20x
Draft

Refresh docs site styling#18388
kramhuber wants to merge 6 commits intomasterfrom
emdash/style-refresh-20x

Conversation

@kramhuber
Copy link
Copy Markdown
Contributor

Summary

  • Fix heading hierarchy: H1-H3 all weight 600 (H2 was lighter than H3), proportional margins replace flat 18px
  • Improve vertical rhythm: Paragraphs use 16px margin (not 12px padding), line-height 1.6 → 1.75, lists tightened to 1rem
  • Constrain prose width: 1200px → 800px for docs content (registry/API pages still 1200px)
  • Improve inline code contrast: Darker background, 4px radius, subtle border; note callout code also updated
  • Add sidebar nav grouping: 4 separators divide 15 nav items into 5 logical groups
  • Improve TOC active state: Purple dot → left border indicator, tighter 8px gap between items

No JS changes, no new dependencies. CSS/SCSS + one Hugo template change (4 <li> separator elements in sidebar nav).

Fix heading weight hierarchy (H2 was lighter than H3), constrain prose
width to 800px, improve vertical rhythm with proportional spacing, add
visual grouping to sidebar nav, replace TOC dot indicator with left
border, and improve inline code contrast with darker backgrounds and
borders.
@pulumi-bot
Copy link
Copy Markdown
Collaborator

pulumi-bot commented Apr 6, 2026

@pulumi-bot
Copy link
Copy Markdown
Collaborator

pulumi-bot commented Apr 6, 2026

Lighthouse Performance Report

Commit: 48e88eb | Metric definitions

Page Device Score FCP LCP TBT CLS SI
Homepage Mobile 🟡 83 2.8s 3.7s 78ms 0.009 3.6s
Homepage Desktop 🟡 79 0.7s 0.9s 0ms 0.265 2.6s
Install Pulumi Mobile 🔴 38 10.4s 11.9s 30ms 0.383 10.4s
Install Pulumi Desktop 🟡 66 2.0s 3.3s 0ms 0.072 3.3s
AWS Get Started Mobile 🟡 55 10.3s 11.8s 30ms 0.067 10.3s
AWS Get Started Desktop 🟡 72 2.0s 2.5s 0ms 0.029 3.2s

- Swap Gilroy to Inter for headings with tight letter-spacing on h1-h3
- Swap Iosevka/Roboto Mono to Monaspace Neon Var for code
- Update violet accent to #673EAC for TOC active state
- Increase code block border-radius to 8px
- Increase callout border-radius to 16px with larger padding and icons
- Remove unused Gilroy and Iosevka font files
Migrate all 66+ icon references across ~75 layout/template files and 8
content frontmatter files from Font Awesome to Phosphor Icons. Self-host
Phosphor font files in static/fonts/phosphor/ with SCSS imports replacing
the FA directory. Add ph-fw, ph-spin, and ph-2x utility classes. Update
@extend references in convert and greenhouse-jobs-list components.

Removes the entire fontawesome SCSS directory (18 files) and font files
(15 files). Inline SVGs in superpower-icon.html and sparkle-arrow-cta.html
are preserved as they use FA-derived class names independently.
Font files need to be in static/fonts/ (not theme/static/fonts/) to
match the existing font file convention used by Inter and other fonts.
- Redesign /docs/ with quick-start pills, capability card grid, and
  compact link cards replacing the old button-card layout
- Replace breadcrumb "/" separators with Phosphor caret icons, tighten
  spacing between breadcrumb and page title
- Replace remaining FA icons in Stencil web components (llm-menu,
  install, top-button, registry search, pricing calculator, etc.)
- Replace FA icons in docs content markdown files (get-started,
  download-install, ESC, resources)
- Fix nav caret rotation using transform instead of rotate property
  so it works on Phosphor's inline icon elements
- Fix broken template literal in llm-menu.tsx (missing $ in caret
  icon class interpolation)
- Update SCSS selectors in _docs-top-nav.scss and _llm-menu.scss
  from fa-chevron-* to ph-caret-*
- Replace FA icon in tutorials/secure-kubernetes content file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants