Documentation font changes #2139
Conversation
See https://vitepress.dev/reference/site-config#example-adding-google-fonts Note that we're using the (slightly faster?) "preload as stylesheet" strategy —as we do in Framework— over "preconnect" that Vitepress suggests.
(a.button is not used anywhere else; introduced in #1757)
docs/.vitepress/theme/custom.css
Outdated
| .vp-doc h1 { | ||
| font-family: "Spline-Sans Mono", monospace; | ||
| font-weight: 500; | ||
| margin-bottom: 8px; |
There was a problem hiding this comment.
I'm not seeing where this margin-bottom operates.
docs/.vitepress/theme/custom.css
Outdated
| .vp-doc a { | ||
| color: var(--vp-c-text-1); | ||
| } |
There was a problem hiding this comment.
Makes the links same color as text (except on hover), instead of being "brand" (purple).
| } | ||
| .vp-doc h1 { | ||
| font-family: "Spline-Sans Mono", monospace; | ||
| font-weight: 500; |
There was a problem hiding this comment.
These two font-weight: 500; make the the normal text a bit fatter, and the headers skinny.
There was a problem hiding this comment.
There was actually a bug in the font name and it was showing monospace instead of Spline Sans Mono. Fixed.
docs/.vitepress/theme/custom.css
Outdated
| @@ -21,7 +22,22 @@ | |||
| --vp-c-brand-2: var(--vp-c-purple-2); | |||
| --vp-c-brand-3: var(--vp-c-purple-3); | |||
| --vp-c-brand-soft: var(--vp-c-purple-soft); | |||
| --vp-font-family-base: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif; | |||
| --vp-font-family-base: Inter, -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", | |||
There was a problem hiding this comment.
I didn't intend the change the base font. Only the content font. This changes the left nav and the ToC also, which was not the intent of this PR.
There was a problem hiding this comment.
OK I'll revert that. At this size the fonts are almost identical, I can only differentiate them with the inspector :) [Or by switching "live" because Inter is wider]
There was a problem hiding this comment.
I don’t think it looks good to have a mix of Inter for the body and San Francisco for the sidebar. We should use the same sans-serif font everywhere.
There was a problem hiding this comment.
I will run it by design.
There was a problem hiding this comment.
Thanks @CobusT. I asked Kyna and Alex earlier this evening, and also about consolidating Framework’s accent colors (since we’re also using a blue and a red in addition to phosphate there). I put up observablehq/framework#1591 for Framework and if there’s agreement there I expect we can propagate some of those changes to Plot. Like maybe the Plot should use phosphate for its accent color instead of purple, too…
As per design's guidelines.
Also made a small fix to the footer (removed an old link)