Skip to content

docs: simplify custom CSS to Holocron variable-only overrides - #498

Open
remorses wants to merge 4 commits into
saffron-health:mainfrom
remorses:simplify-docs-css
Open

remorses wants to merge 4 commits into
saffron-health:mainfrom
remorses:simplify-docs-css

Conversation

@remorses

@remorses remorses commented Jul 22, 2026

Copy link
Copy Markdown

Preview: https://simplify-docs-css-o7oxu3-libretto-remorses-site.holocron.so/get-started/quickstart

docs/global.css goes from 385 lines to ~150 lines with the same visual result. Every rule that targeted Holocron internal DOM or needed !important is gone. What's left is purely CSS variable overrides, so future @holocron.so/vite upgrades can't break the styling.

How parity is preserved

Holocron 0.28.0 (bumped here) added the theming tokens this file needs:

  • --sidebar-active-background — green pill on the deepest active sidebar item
  • --sidebar-hover-background — neutral grey hover, decoupled from the green accent
  • --search-input-radius — compact 4px search input
  • --code-block-shadow — layered soft shadow on code block frames
  • --card-padding — 12px card padding (default 16px)
  • --card-border / --card-shadow — shadow frame instead of border
  • --table-radius — 6px rounded tables
  • --blockquote-font-weight — 500 for bolder blockquotes

Long prompt-style code fences use Holocron's Mintlify-compatible bare wrap flag instead of a CSS hack.

Also

  • globe icon on the Browser Tools tab (all 4 tabs now have icons)
  • logo/favicon paths in docs.json are site-root-relative (holocron 0.27.1+ prepends base automatically)
  • DOCS_BASE_PATH env override in vite.config for preview deploys
  • wrangler bumped to ^4.113.0
  • search input compact by default (~30px, holocron 0.28.0)
  • search focus ring glow (holocron 0.28.0)
  • sidebar scrollbar no longer overlaps nav items (holocron 0.28.0)
  • hover/active pill spread 4px to 2px (holocron 0.28.0)

…on to 0.27.0

Rewrite docs/global.css from 385 lines of internal-selector overrides down
to ~135 lines of pure Holocron CSS variable overrides. Every rule that
targeted internal DOM ('.slot-sidebar-left nav > div:first-child > a',
"figure[class~='group/code'] button[aria-label='Copy code']", ...) or used
!important is gone, so future @holocron.so/vite upgrades cannot break the
styling.

Visual parity is preserved via theming tokens added in holocron 0.27.0:

- --sidebar-active-background: green pill on the deepest active sidebar
  item (active TOC heading, else page link)
- --sidebar-hover-background: neutral hover instead of the green accent
- --search-input-radius: compact 4px search input
- --code-block-shadow: layered soft shadow on code block frames

Long prompt-style ```text fences now use holocron's Mintlify-compatible
bare `wrap` flag instead of a CSS hack that force-wrapped all text blocks.

Also:
- add globe icon to the Browser Tools tab so all tabs have icons
- bump wrangler to ^4.113.0 (required by @cloudflare/vite-plugin peer dep)

Session: ses_078450650ffeqs3xbRqLbOrDte
@vercel

vercel Bot commented Jul 22, 2026

Copy link
Copy Markdown

@remorses is attempting to deploy a commit to the tanishq's projects Team on Vercel.

A member of the Team first needs to authorize it.

…aths

Holocron 0.27.1 treats docs.json logo/favicon paths as site-root-relative
and prepends the Vite base automatically, so drop the hardcoded /docs
prefix from those paths. The vite base is now DOCS_BASE_PATH-overridable:
production keeps /docs/ (libretto.sh proxy), while holocron.so preview
deploys build with DOCS_BASE_PATH=/ because hosted previews serve from the
domain root and would 404 on base-prefixed assets.

Session: ses_078450650ffeqs3xbRqLbOrDte
@tanishqkancharla

Copy link
Copy Markdown
Contributor

Found these styling disparity

Search height: 30px → 37.8px
Card padding: 12px → 16px; shadow removed; border added
Table radius: 6px → 0
Blockquote weight: 500 → 400
Active-nav color, padding, and halo changed
Search focus shadow removed
Card-heavy page pixel difference: 7.0% light, 8.5% dark
PR also admits the Card arrow position changes

@remorses

Copy link
Copy Markdown
Author

Ok will fix these as well

Fixes the styling disparities flagged by tanishq:
- search height restored to ~30px (holocron 0.28.0 default)
- card padding 12px, shadow instead of border (--card-padding, --card-shadow, --card-border)
- table radius 6px (--table-radius)
- blockquote weight 500 (--blockquote-font-weight)
- active nav pill spread 2px (holocron 0.28.0 default)
- search focus ring glow (holocron 0.28.0 default)
- sidebar scrollbar no longer overlaps items (holocron 0.28.0 fix)
- dark mode card shadow added

Session: ses_078450650ffeqs3xbRqLbOrDte
@remorses

Copy link
Copy Markdown
Author

Fixed all the styling issues from your review. Updated preview: https://simplify-docs-css-o7oxu3-libretto-remorses-site.holocron.so/get-started/quickstart

What changed (holocron 0.28.0):

  • Search height back to ~30px (default for all holocron sites now)
  • Search focus shows ring glow
  • Card padding 12px, shadow frame instead of border
  • Table radius 6px
  • Blockquote weight 500
  • Active/hover pill spread 2px (tighter)
  • Sidebar scrollbar no longer overlaps nav items
  • Dark mode card shadow added

Session: ses_078450650ffeqs3xbRqLbOrDte
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.

2 participants