Docs restyle#5253
Merged
Merged
Conversation
Structured design direction, SCSS-first hybrid architecture on Docsy v0.12.0, mermaid via Hugo Pipes, upgrade-safe override ladder. See spec + plan under docs/superpowers/. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Task 1 of restyle plan. Confirms hugo server v0.162.0 serves + compiles SCSS locally on macOS; npm run serve / prod build hit the PostCSS --permission error. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Task 3. Vendored OFL woff2 (Geist, Inter, Geist Mono) into static/fonts, @font-face + --font-* tokens in _typography.scss, Bootstrap font vars, head preloads. Completed after the implementer hit a transient 529 post-work. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…s/danger colors Adds $td-enable-google-fonts: false to disable the CDN import since fonts are self-hosted. Introduces semantic color tokens (--d-on-accent, --d-on-sky, --d-success, --d-danger) and replaces raw hex values in button and callout styles. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ible Review feedback on Task 5: - .tab-content dropped its distinct --d-code-bg panel + border; now transparent so it reads as regular td-content (code blocks keep their own .highlight bg). - copy-code icon was hard-coded white in copy-code-button.js (invisible on light code backgrounds). Removed the inline white; .copy-icon is now positioned top-right and colored via --d-muted/--d-heading tokens, visible in both themes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…n active tab Root causes (systematic debugging): - Duplicate copy buttons: Docsy already injects its own button.td-click-to-copy via scripts.html/click-to-copy.js; our custom /js/copy-code-button.js added a second one (the 'strange character' beside it). Removed the custom script + file; kept Docsy's single button and tinted it via tokens (+font-weight:900 so the Font Awesome solid glyph renders). - Code blocks crowded: our _content.scss set .highlight margin 0.5rem, overriding Docsy's 2rem. Restored generous spacing (1.75-2rem); tab-embedded code stays 0. - Active tab unclear: strengthened the indicator to a 3px orange underline + weight 600 (the underline rule was already correct and wins the cascade). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Root cause (confirmed via computed style = Geist on the button): our Task 8 rule
'.td-content .btn { font-family: var(--font-head) }' matched Docsy's icon-only
copy button (button.td-click-to-copy is also .btn), specificity 0,2,0 beating
Font Awesome's .fas (0,1,0). The FA copy glyph (\f0c5) then rendered in Geist =
tofu, and the CTA padding/radius bloated the button. Excluded .td-click-to-copy
from the CTA rule so it keeps the FA font (and Docsy's own sizing).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ark) Root cause: markup.highlight used noClasses (inline styles) + style=tango, baking a light background and fixed tango token colors into the HTML as inline styles, which CSS cannot re-theme -> code blocks stayed light in dark mode. Fix: switch to class-based highlighting (pygmentsUseClasses:true / markup.highlight.noClasses:false) and add _chroma.scss with a light palette (tango, unchanged look) plus a dark palette (github-dark) scoped to [data-bs-theme=dark]. Baked backgrounds stripped; code-block background now comes from the --d-code-bg token so it matches the design in both themes. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Review feedback on Task 10: 1. Halved nested indentation (Docsy default 1.5em -> 0.75em). 2. Zeroed top/bottom margin on sidebar li items. 3+4. Active item had TWO highlights: a block-level .td-sidebar-link.active background AND an inline .td-sidebar-nav-active-item span background (added by sidebar-nav.js). The inline span highlight didn't cover wrapped multi-line titles. Removed the span highlight (background:none); the block link's background now spans the full width including multi-line. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Review feedback on Task 10: 1. Sidebar link top/bottom padding 4px -> 2px. 2. Moved the blue active-accent from the <a> to the active item's <li>. sidebar-nav.js already locates that <li> (#<mid>-li); it now tags it with .td-sidebar-active-li, styled with an inset 2px shadow (a left border that doesn't shift layout). Removed the border-left from .td-sidebar-link.active. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The white logo.svg was invisible on the new light navbar. A dark-blue mark already existed (assets/icons/logo-blue.svg, #0D2192). navbar.html now inlines both (logo-blue for light, logo.svg for dark) and _navbar.scss shows the right one per data-bs-theme. No new asset needed. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
.navbar-brand was baseline-aligning inline elements (with an invalid text-align:middle). Made it an inline-flex row with align-items:center + gap so the logo SVG and the wordmark are vertically centered, and set the brand font-family to var(--font-head) (Geist) so 'Dapr Docs' matches the heading font. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1. .td-page-meta (sibling of .td-toc in .td-sidebar-toc) now uses .8rem, matching the TOC font size (was larger). Moved the rule to top level since it is not nested under .td-toc. 2. TOC items no longer show a border on every item — non-active use a transparent border (no layout shift); only the active item shows the orange border, like the left nav. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: Marc Duiker <4191277+marcduiker@users.noreply.github.com>
Task 20 (Phase 5): peripheral pages & partials. - Search input + Algolia DocSearch modal tokenized in _search.scss (--docsearch-* vars; :root:root specificity bump so our brand color wins over @docsearch/css's later-loading defaults; dark-mode modal overrides so it isn't a white box on a dark page). - New daprdocs/layouts/404.html override: heading + message + a .d-card-grid of top-level sections (built from .Site.Sections, not hardcoded paths). - Blog: no local blog content in this repo (blog lives at blog.dapr.io); added minimal tokenized rules for Docsy's blog list classes that fall outside .td-content (byline/article-meta/list items/pagination) — single.html already inherits global styling. - Version/preview banners (.pageinfo, rendered above .td-content) and the dormant feedback widget (currently disabled via params.ui.feedback.enable) restyled through tokens in _page-extras.scss. - Announcement + cookie banners: retokenized the static daprdocs/static/css/*.css files directly (they load outside the SCSS pipeline and after our compiled bundle, so overriding from _page-extras.scss alone wouldn't win the cascade). Announcement banner gets an explicit dark-mode treatment to avoid a low-contrast pastel-blue-on-white combination. - dapr-perf-results shortcode: moved its inline <style> block (raw Bootstrap var()-with-hex-fallback) into _page-extras.scss as tokenized rules. - @media print block forces light tokens and hides .td-sidebar/.td-sidebar-toc/.td-navbar for direct browser printing. - Added Docsy-override header comments to search-input.html, feedback.html, and version-banner.html (real Docsy shadows); left announcement-banner.html, cookie-banner.html, and dapr-perf-results.html without one (custom, no Docsy equivalent). - No banner scheduling/consent logic changed; no daprdocs/content or sdkdocs files touched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Review of Task 20: - @media print now also forces --d-panel/--d-code-bg/--d-muted/--d-blue/--d-link to light. [data-bs-theme=dark] stays active when printing a page viewed in dark mode, so without this inline code + table headers printed black-on-near-black. - Cookie Accept button had no dark override (--d-blue pastel + white ~2.7:1). Dark mode now uses --d-sky + --d-on-sky for a legible, prominent CTA. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…mode Final-review Critical: the tango (light) palette was emitted UNSCOPED (.chroma .p/.n = #000), while only github-dark was scoped to [data-bs-theme=dark]. github-dark doesn't redefine punctuation/plain-identifier classes, so in dark mode braces/colons/commas/identifiers rendered black on the near-black code background across ~every code block. Fix: scope BOTH palettes — tango under [data-bs-theme=light], github-dark under [data-bs-theme=dark]. Tokens github-dark omits now inherit the dark .chroma base color (#e6edf3, light) instead of the leaked #000. The head no-flash script always sets data-bs-theme before paint, so scoping light is safe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Pre-existing since the banner was introduced. The banner is in-flow at the top and announcement-banner.js pushes the fixed navbar down by the banner height (at page top), but the sticky sidebars used a static top:4rem (navbar height only) — so the pushed-down navbar overlapped the top of the right aside (page-meta). announcement-banner.js now publishes --dapr-header-bottom = the navbar's actual bottom edge (banner + navbar, shrinking to just the navbar as the banner scrolls away), kept in sync on load/scroll/resize/dismiss. Both sticky sidebars (.td-sidebar-toc, .td-sidebar) offset by that var, falling back to 4rem when no banner is present. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Internal planning artifacts (design spec + implementation plan) are not part of the docs-site deliverable. Removed from the branch; preserved outside the repo for the follow-up Phase 4 (mermaid/diagrams) work. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: Marc Duiker <4191277+marcduiker@users.noreply.github.com>
Docs restyle
marcduiker
marked this pull request as ready for review
July 17, 2026 17:53
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://ashy-coast-091fbe31e-5253.westus2.7.azurestaticapps.net |
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.
Thank you for helping make the Dapr documentation better!
Please follow this checklist before submitting:
In addition, please fill out the following to help reviewers understand this pull request:
Description
Issue reference