design tweaks #2141
design tweaks #2141
Conversation
note that Inter is the default font in VitePress
|
Created a PR to this branch with some further tweaks. |
|
I've merged @CobusT 's addition, the text now looks crisper: |
| @@ -25,6 +28,10 @@ | |||
| font-weight: 500; | |||
| } | |||
|
|
|||
| .vp-doc p { | |||
| line-height: 1.5; | |||
There was a problem hiding this comment.
This should probably be on .vp-doc rather than just p? Otherwise things like lists will have a different line-height which will look weird.
There was a problem hiding this comment.
For me this is correct as is.
The default line-height on the body is set in node_modules/vitepress/dist/client/theme-default/styles/base.css as 24px, but it's overloaded in
node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css with the selector .vp-doc p (also .vp-doc h1, etc.). Resetting this on .vp-doc would not have enough specificity, and .vp-doc p is the only one we want to override.
There was a problem hiding this comment.
Good point. I removed my thumbs up :-)
There was a problem hiding this comment.
That seems like a bizarre out-of-the-box design by VitePress, but indeed you are right, the line-height is 24px for ul elements and 28px for p elements. It seems that VitePress avoids this problem on their own site by using p elements within the li elements, restoring the 28px line-height. So, perhaps the intent is that you only use the 24px line-height for lists when you know that the list items all fit on a single line. 🤔 Anyway it means this is “correct” according to the weirdness of the VitePress default theme I guess.
There was a problem hiding this comment.
Agree it's more "correct" than it is correct :-)
docs/.vitepress/theme/custom.css
Outdated
| --vp-c-brand-1: var(--theme-phosphate); /* link and brand color */ | ||
| --vp-c-brand-2: var(--theme-phosphate); | ||
| --vp-c-brand-3: rgb(243, 139, 233); /* home page alt color */ |
There was a problem hiding this comment.
This doesn’t seem right: these three colors should have the same hue, but varying lightness.
Look at how the current button varies in color as you hover and click:
Screen.Recording.2024-08-22.at.9.14.42.PM.mov
Compare that to this branch, where the color changes from pink to green on hover, and there’s no variation in color on click:
Screen.Recording.2024-08-22.at.9.15.50.PM.mov
There was a problem hiding this comment.
Oops! that's right. Since I couldn't find documentation, I went back to the defaults. As you're saying brand 1, 2, 3 are defined as colors of increasing lightness in light mode, and increasing darkness in dark mode.
I've done the same by deriving from phosphate in both modes, and re-adding the contrasting ("pink") color under another name.
This comment was marked as resolved.
This comment was marked as resolved.
Following observablehq/framework#1591 we:
Notes: