Skip to content

Flatten the rendered page structure? #1668

Open
@Fil

Description

@Fil

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)

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".

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions