framework
framework copied to clipboard
observablehq
Flatten the rendered page structure?
The page structure currently is the following:
- html
- head
- observable scripts
- custom head
- body
- sidebar (optional)
- toc (optional)
- center
- header (custom)
- main (page content)
- footer (custom)
- head
there are lots of optional and custom content, but the fact that some of it is nested in the center div makes it a bit difficult to reorganize with css (flexbox or grid).
It would feel nice to flatten the body:
- body
- sidebar (optional)
- toc (optional)
- header (custom)
- main (page content)
- footer (custom)
I experimented a bit, and it doesn't seem to require many changes in grid.css — basically we just have to tack an .observablehq-center class on the header, main and footer elements, and change a few of the margins.
An alternative (or complement) would be to reboot #253 and allow "full page templates".
I expect it will be difficult to do this in a backwards-compatible way, and it will probably cause a lot of churn with the CSS. I recommend we consider more incremental solutions.
#1669 shows how much churn there is (not much, I would say).
If we absolutely must keep the same nested page structure for backwards compatibility, then I think we'll have to revive something like #253.
With the current code base, if you want to have a header that takes 100% of the width (with a sidebar that starts below it), you can technically do so by inserting it in head, but it's clearly wrong since it's supposed to fill in the <head>.
Okay. I can take a look at #1669 when I have time but it’s not yet done and I see some hints of difficulties (do the container media queries still work? how does this affect custom styles in userland?).
I am pretty sure the container media queries still work. I went through them yesterday and tested all the breakpoints.
Since I haven’t had a chance to test yet, perhaps someone would be kind enough to explain how the container queries still work given that container-type: inline-size; is removed? The way I typically test this is to choose a relatively narrow window width and then toggle the sidebar; this changes the width of the container, and should toggle the visibility of the table of contents and the number of available columns in grid layouts.
Ah! Those container queries. They will probably break. I will investigate and report back.
I added the container-type: inline-size; back (on the #observablehq-main div (instead of the #observablehq-center div that is no more. That fixes the problem with the grid layouts. However, it pushes the #observablehq-main div a little bit down on the page and I don't understand why.