sidebar changes #386
sidebar changes #386
Conversation
docs/dashboard.css
Outdated
There was a problem hiding this comment.
This is a placeholder for #60 so we can more easily test the default dashboard styles.
docs/dashboard.md
Outdated
There was a problem hiding this comment.
This page is unlisted, so it’s okay that it’s empty.
public/style.css
Outdated
| --theme-foreground: rgb(27, 30, 35); | ||
| --theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background)); | ||
| --theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 70%, var(--theme-background)); | ||
| --theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background)); | ||
| --theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background)); | ||
| --theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 10%, var(--theme-background)); | ||
| --theme-foreground-focus: #3182bd; | ||
| --theme-foreground-focus: var(--observablehq-blue); | ||
| --theme-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='rgb(27, 30, 35)' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); |
There was a problem hiding this comment.
I’d rather have this inherit the currentColor, but that isn’t possible with data URL SVG. We could switch to an icon font to fix this, or generate inline SVG as I did for the sidebar toggle icon. It’s not a pressing issue, but it would make it easier for users to implement custom themes since then the caret icon would automatically inherit --theme-foreground.
| @@ -528,6 +533,7 @@ hr { | |||
| pre { | |||
| position: relative; | |||
| background-color: var(--theme-background-alt); | |||
| border-radius: 4px; | |||
There was a problem hiding this comment.
Now that we have 2rem of margin on the center, the pre elements with -1rem horizontal margin never touch the side of the window, and so we can always have a border-radius.
| @@ -245,9 +259,10 @@ body { | |||
| } | |||
|
|
|||
| #observablehq-toc nav { | |||
| width: 160px; | |||
| width: 192px; | |||
There was a problem hiding this comment.
is this arbitrary or based on some calculation?
There was a problem hiding this comment.
It’s the same as before, 160px + 2rem = 160px + 32px = 192px. The 160px is semi-arbitrary (10rem). The 2rem comes from 1rem of margin on either side.
|
thanks for the changes and fixing what I had. there are a couple of things: Screen.Recording.2023-12-14.at.7.16.09.PM.movThe sticky title goes over the highlighted tab but the blue still shows up (probably because of the Screen.Recording.2023-12-14.at.7.15.39.PM.mov |
Still working on the caret for the collapsible sections, but everything else is ready for review.Done. I’ll update this description with screenshots and more explanation shortly.