observablehq / framework

A static site generator for data apps, dashboards, reports, and more. Observable Framework combines JavaScript on the front-end for interactive graphics with any language on the back-end for data analysis.
https://observablehq.com/framework/
ISC License
2.57k stars 123 forks source link

revised layout #1682

Closed mbostock closed 1 month ago

mbostock commented 1 month ago

Changes the header to be top-fixed and to extend all the way to the right edge, and moves the table of contents to under the header. Changes the layout on wide windows so that the sidebar and table of contents remain attached to the center column rather than being on the far edges of the window. Moves the header styles to the default theme from our docs config so that the header works “out of the box” without users having to copy these styles from the docs repo (if they chose to have a header).

Before:

Screenshot 2024-09-25 at 9 48 00 AM

After:

Screenshot 2024-09-25 at 9 48 37 AM

Fixes #657. Supersedes #1023.

mbostock commented 1 month ago

Looks like there’s a bug where the TOC is visible when it should be hidden (because the sidebar is taking priority).

Before:

Screenshot 2024-09-25 at 10 01 06 AM

After:

Screenshot 2024-09-25 at 10 01 11 AM
mbostock commented 1 month ago

Also… wondering if there is a quick fix we can do for the table of contents on mobile #1136. Maybe we can just show it inline rather than position-fixed on narrow windows, so that you can quickly jump down from the top to the desired section? Going to punt on this for now since it’s a separable concern.