March Blog Updates: less is more!

Introduction

March, as February, was a month full of small and big tweaks to the design of this blog. For this update, I tried to have in mind the famous “less is more”. It’s interesting to see how much “work” having a “minimalist” theme and blog is :).

One thing I remember from an autobiography from Stephen King was that he insisted on removing words and being more concise. It helps both the writer and the reader. That’s what I tried to do as well during this update.

All theme tweaks are made in order to improve readability, accessibility and navigation simplicity. If you think any of these changes go against those goals, please let me know!

For “posterity”, let’s detail these changes.

TLDR;

• Added emojis for visually separate the different content and taxonomy types as well as highlighting links to subscribe and a few handpicked pages
• Simplified the homepage again
• Reduced as much as possible the header menu and expend links in footer with 2 menus
• Small theme/css tweaks for readability and accessibility
• Customize content for taxonomy and term pages
• Reworked the content of many static and listing pages
• Split back the about / subscribe page

Emojis

One of the big change that will be visible in many screenshots (hence why I start with it) is the apparition of emojis… I’m usually not the biggest fan of using emojis everywhere, but used with caution, it can be a nice visual help. With the recent addition of new content types (and one still to be added), I thought it would improve the readability.

Emojis are used for 4 reasons: distinguishing content types and vacabularies/taxonomies, highlighting links to subscribe and decorating specific pages.

Distinguish content type

Each content type has its own emojis, making them easily identifiable, specifically in the archive page:

• Blog: 📓
• Gemlog: 🚀
• Bookmarks: 🔖
• Static Pages: 📄

Distinguish Taxonomy type

I also added an emoji for each taxonomy type:

• Blog Series: 📎
• Tags: 🏷️
• Categories: 🔠 (the one I’m less happy about, I’m open to suggestions!)

Subscribe links

There are 3 ways of subscribing to content from this website: RSS Feeds, Fediverse BOTs or h-feed. I’ve added small svg files (yes, technically, not emojis…) for all 3.

• : page available via RSS Feeds, click to go to the RSS feed page
• : updates available via a Fediverse BOTs, click to go to the BOT page.
• : current page is H-Feed compliant (IndieWeb format)

Example for the blog posts listing page that shows all three:

Bonus: highlight Specific pages

While not the initial goal, some emojis were added to some pages too:

• Statistics related pages: 📊
• More/BlogRoll page: 🔗
• About page: ✍️
• Subscribe page: 🔔

I’m not going to add one each time, only when I really makes sens.

Lighter Homepage

The homepage lost weight extensively last month already, but I did more changes this month.

At the end of February, the homepage looked like this:

And now:

If you don’t want to play 7 difference, changes are:

• The intro / bio area now display a site title (was required for html validation)
• The homepage now lists posts (blog and gemlog) tagged as “Featured” (read more) and not the 5 last ones
  • For the blog section, I still list the latest one (which could be displayed twice if featured)
• Removed date on bookmarks (not important for this content type)
• Simpler display for latest updated (and featured) page and latest bookmark in one line (each - see screenshot above)
• I’ve added a “lighter” hr version (while keeping the previous one before footer) to split parts between content type on the homepage, I find it nicer to separate area in a light way
• Blog and Gemlog sections title displays icon / links to subscribe. This isn’t the case for bookmarks and pages that requires to go their dedicated pages to see the feeds links.

Archive page

The archive page, while less than a month old, was updated to leverage the emojis instead of the [contentTypeName] within the titles. I haven’t change this in the RSS feeds though (at least yet). I may change that in the future, but I’m not sure if it is the right thing to do for the RSS feeds.

The initial all/archives page looked like this:

And now:

The intro text is easier to read and I’ve added the links to the Category and Tags pages.

Article page

Table of content are now easier to read, simply by adding border around:

Before:

After:

Simple but effective, IMHO.

Other than that, just small tweaks like the background color of highlighted text, some spacing or adding # to tag names.

About / Subscribe pages

I’ve moved back the subscription part of the about page to a dedicated page, with a link to that page in the footer (see menus below). Now that I’ve added web feeds icons in all concerned pages, finding these links is a lot easier, so it doesn’t have to be in the about page anymore.

The About page has the same top area than the homepage for consistency. It is also now focused on providing information about me and this website. I’ve also included a message to remove the barrier to contact me (hopefully).

The subscribe page is there to explicitly provides all feeds and bots URLs without cluttering the about page.

Menus

I’ve been struggling lately with my menus… I want, at the same time, something minimal with a limited number of links, but also “enough” links so most content is easily accessible without requiring many clicks to be found… This is what I came up with.

Header

For the header, I tend to prefer a limited number of links as I find they can really bloat the header and not be easily usable. I’m familiar with the “hamburger menus” trend… but a/ I don’t personally like them and b/ they require javascript¹ to work efficiently. So no hamburger menu for me…

Instead of eating a hamburgers, the header menu went through a diet and now only displays 3 links: blog, All (= Archives) and About.

I believe that these are the 3 main ones. Blog posts are the heart of this website and the listing page allow visitors to go to the tags, categories or series pages.

All will allow a quick glance at all published content and the about page will help visitors learn more about me and find everything else.

It went from:

To:

Footer

The footer went a bit in the other direction and grew a lot. So much so that I decided to split it in 2 distinct menus: one global footer menu to access main pages, and a blog related menus to access blog related pages.

The footer went from:

To:

The footer menu contains links to the main pages I want to be directly accessible, like the content type listing page and some handpicked pages like the Stats or BlogRoll pages. This is the menu that may change the most if I decide other pages should be there.

Below the footer menu, I’ve added a new menu dedicated to blog related links (the “main” content type of this website). The menu links to the listing page as well as the series, tags and categories pages.

Taxonomy Pages

Vocabulary Pages

Vocabulary pages, like the Categories or Tags pages, have been slightly updated. They now show a link to the RSS feed in the title as well as an introduction above the content.

To add custom content to these listing pages with hugo, simply create a content/<NameOfTheTaxonomy>/_index.md file. For example for the Tags page, I created a content/tags/_index.md file with my content in it (and the frontmatter part of course).

As an example, the Tags page:

Term Pages

Similar to the vocabulary page, the term page (the page of a specific term), like the dev tag page, also display the RSS icon to go to the RSS feed directly.

Same as the vocabulary page, I’ve added an introduction content above the list to be more understandable. As opposed to the vocabulary page, I didn’t created a custom content for that. All I did was adding a generic sentence within the template to display a simple message: “Content linked to the taxonomy term « NameOfTerm »:” with of course NameOfTerm being the name of the term being looked at.

For example:

The Series special case

I’ve already written about how Series are managed with taxonomy, but since I’ve decided to make the series related pages a bit nicer.

The listing page hasn’t changed much, except it also display the RSS icon to access the feeds for this list as well as an intro message. Same as for the vocabulary or term page, to add a custom content, create a content/series/_index.md file.

What I wanted to do on each series main page (pages listing posts from a series), was the ability to customize its content to add more information about the series itself.

To do so with hugo, you have to create a content/<vocabulary>/<taxonomyTerm>/_index.md file. For example, to customize the Frame.Work Laptop Setup series page, I had to create a content/series/frame.work-laptop-setup/_index.md file. The <taxonomyTerm> must be urlize.

It allows me to indicate if a series is still (potentially) ongoing (like the frame.work laptop one) or finished (like the homeautomation or previous homelab one - a new homelab series is coming though!).

For example, the homelab series page looks like this now:

Nothing crazy, but I have further idea for this usage, specially for the homelab 2023/24 series that is coming.

Gemlog

The Gemlog page has been updated to to add a small introduction. Same as above, I did it by adding a content/gemlog/_index.md file. It was already there but I re arranged the content. It also has the RSS, Fediverse and h-feed icons in the title like the blog post and bookmarks pages. I can now put a nice warning about Gemini and the needs of a dedicated browser:

Static Pages

List of static pages

The static pages listing page has also been updated. Pages are no longer listed chronologically (no sense for those). The start of the page will show manually picked pages I want to put at the front. Then the list of all static pages is shown.

In a screenshot, before the changes:

And after:

Specific pages

I have updated the /ideas page, both in term of content and design. I’ve actualized the list of ideas based on last month changes.

In term of design, I’ve just added a way to go directly to each section of the page (via anchor links):

I did the same for the /uses and blogRoll pages.

I also updated the blog history page to show the new homepage.

Smaller tweaks

• The header (h1, h2 and h3 html tags) are now colored in purple (in accordance to the Dracula theme)
• While I already updated the listing page earlier this month, I changed the css for list items (li) again to remove some margin and change the list style button (see screenshot below)
• Changed Block quote background to be more visible (see screenshot below)
• Improved and fixed the light mode (see screenshot below). I don’t use light mode, so sometime I forget to check some changes
• More space: Added a margin-top before paragraph tag (p), increase margin top and bottom for hr
• Remove text justify, as I’ve learned it isn’t good for accessibility. I’m a bit sad about it because I found it easier to read, but small price to pay to raise the accessibility level of this site
• Added fediring alongside indiewebring in the footer
• I Reduced the text of my bio and added spacing, in accordance with the rest of this update to go leaner
• The header link to the homepage is now just my name (“bacadi55”) and not the name of the site (“bacardi55’s cave”)

Screenshots

As pictures are worth a thousand words:

Bio on home and about pages before:

Bio on home and about pages after:

listing items before:

List items now:

The difference is even more visible on phone (I don’t have a “before” screenshot though…):

The block quote wasn’t easily visible:

But it is better now:

Regarding the light mode version, it went from:

To:

Conclusion

This concludes the updates I made on this blog theme this month, we’ll see if April will be as productive (but I doubt it, as I believed I’m approaching a “final” state^^).