Radio Theme

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:

zola-radio on github

Thanks for checking it out. This thread will be updated with new features, dev diaries, etc. as work progresses.

Also, if anyone had an answer for my question about transparency, that would really help me out. :slight_smile: Cheers!

And here is a screenshot of my blog running the theme:

2 Likes

Brainstorming potential section layouts.
With the nav bar open:
radio-nav-visible-section

With the nav bar closed:
radio-nav-hidden-section

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.

New concept with some updated thoughts (pictured with nav bar closed):

  • (Edit) Optional subsection image header
  • 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.

Again, check out the zola-radio repo for details.

Next goals are

  • improve home page
  • add links to sections

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 reading! Stay safe!