Wide margins, narrow reading space, sidebars.
This is a simple static GitHub Pages layout. It does not need Markdown, npm, a build process, or a framework. It is just one HTML file.
The central column is intentionally narrower than the page. The left side holds a site index, while the right side automatically collects the page headings into a table of contents.
index.html, then enable GitHub Pages from the repository settings.
First section
This layout is meant to imitate the feeling of Flowershow, documentation sites, and Substack-like reading pages: lots of air, a stable reading column, and simple navigation.
The header sticks at the top. When you scroll down, it hides. When you scroll back up, it reappears. This is optional, but it gives the page a more modern feel.
Second section
On desktop, the page uses three columns. On mobile, the sidebars collapse: the left index appears above the article, and the right heading index is hidden because there is not enough horizontal space.
Small subsection
Subsections like this appear slightly indented in the right-side contents
list. You can use h2 and h3 headings normally.
The important thing is that the site is boring in its machinery and elegant in its spacing.
Third section
To make more pages, copy this file, rename it, and change the links in the
left sidebar. For example, you could make notes.html,
recipes.html, and about.html.
Later, you can split the CSS into a separate style.css file.
But for a first dummy test, one file is easier.