Hey Zola community – I just hacked together a theme today inspired by/borrowing from zola-hyde and mdbook. But I have big plans to switch it up with styles, mascots, image support, mobile support, and all that jazz. The theme is named Radio and you can view it here:
Brainstorming potential section layouts.
With the nav bar open:
With the nav bar closed:
This is inspired somewhat by design Jacob Stanton’s blog. I really like how elements have different visual weight by size. Also, links can be graphical, text-based, or both. These features would definitely be included in a Radio interpretation. Page/subsection order would be based on date or weight, user’s choice. Subsections would not recursively show all contents, only the top level links.
Furthermore you can see with the nav bar open, a complete hierarchy is show. Their order would also be based on weight or date. It is duplicating effort to have links both in the nav pane and section, but the section page is more detailed while the nav pane is accessible anywhere. Feedback appreciated on that.
I have implemented something like this before with fieldset and legend tags. You can check it out here (WIP text game called Secondworld). I’m not sure how appropriate fieldset is for main body content, though.
Size of page links is determined by optional preview pic or size of title + description.
Optional standard preview pic/css.
Titles of pages are shown.
Page descriptions pop up on mouseover
Content is organized “dumbly” – fill in rows, left to right (#/rows dependent on screen size) top to bottom. Columns condense to take up minimum space.
Sub A shows how this can be used to make a right-heavy layout. Sub B shows a layout centered on the left. They’re both dominated by the center page (A2/B2), but are still very different.
Sections can include optional Links array that are listed as the last page.
(This is inspired by Jacob’s links page. However, while I like the design, I think the links lose usefulness by lacking any content. So instead of a whole template for an akin links page, I’ll just include it as an option for subsections.)
Potential accessibility features to implement
Visual layout matches document order and screenreader as much as possible.
Menu option to disable loading pictures, for those with a slow connection.
I’d also like to shout out the Cantata dev for layout inspiration, I dig his website.
I looked at a lot of radial menu designs in CSS & JS before I drew this up! While it’s less exciting, a practical block layout is probably better for me to cut my teeth on. I’ll leave the trippy art to page backgrounds.
A look at supersections thus far. My supersection template extends the section, which displays pages in two columns (by default), to also display subsection pages in three columns (by default).
Of the main goals above, bullet points 2, 3, 4, 5 are implemented. Subsection header images and section links are not implemented.
Image support is not super high on my list right now, because I want to actually migrate my personal website over to this template and prioritize content over form.
Thanks for this. A small suggestion, can you kindly include a link to a demo site that showcases the theme so one can easily visualize it without having to go through all of the setup?
Cheers!
