Table of Contents
Although it has not been long since my previous website revamp, I was recently inspired by fellow users on Mastodon and their various websites based on the YesterWeb and IndieWeb movements. In this post I’ll go into why such movements have resonated with me, the principles I wish to implement in this website, and what changes I have made.
Web 1.0
I’ve spoken previously about wanting something simpler when it comes to websites, and how I admire the resurgence of such websites via places such as Neocities. As someone who grew up online making and visiting such websites, this era means a lot to me and has very high levels of nostalgia.
However, I have been reluctant to revert back to such a system due to difficulties in streamlining website creation - writing in Markdown and publishing via Hugo have become comforts I do not wish to let go of.
Furthermore, although I loved my DIVs and iFrames back in the day, I have since come to question the accessibility of such elements, as well as the heavy load of images without alt text, and how many of these types of websites fail to load properly on phones, a device which may be all someone has to connect to the internet.
As such, if I were to create a website inspired by those in the 1990s and 2000s, I’d have to make a few changes and try to make a hybrid with the modern day conveniences and awareness of accessibility, alongside the fun and feel of those retro websites.
IndieWeb
I’d also want to incorporate some principles and standards of IndieWeb too, with standards seeming like a good idea to create some sort of agreed upon non-proprietary protocols which can be used in various ways to understand information, rather than APIs.
Regarding principles, I’d like to think I am already abiding by many of them, such as owning my data, making the data public for humans, documenting, and modularity, as well as aiming for good design and user experience. But I could do better, I wanted to try and make a more conscious effort to aim for as many principles as possible.
Theme
So, I wanted to a website which adhered to both Web 1.0 and IndieWeb aspects, but was accessible and built on the back of the handy Hugo system I’ve been using for the past year. As such, I decided to look for a theme as minimal as possible and then slowly build from it.
There were quite a few options in the Hugo theme directory, but I was pleased with the first result I tried, XMin. This simple theme comes in at just 130 lines of code, and thus provides the basics of a functional website that I was looking for, something easy to edit as the code cannot be too convoluted.
I am very satisfied with the theme, and I’ve learned a lot about Hugo, HTML and CSS having to implement tweaks in to achieve the website I want.
Sadgrl’s Layout Builder
A significant alteration to the theme was merging it with a DIV based layout generated using Sadgrl’s layout builder, choosing a header, footer, navigation bar, top bar, and one sidebar. I wanted to do this in an attempt to further bring the overall website design back to the style of Web 1.0, which featured DIVs extensively. As such, through the merger, the website has become significantly less XMin, and more based on the coding by Sadgrl.
Tweaks
While I greatly appreciate the clean code as a fantastic starting point to develop a website, it nonetheless means I needed to spent time adding features in I wanted the website to have. At the top of my list were Mermaid diagrams, a Table of Contents, and dates indicating when the post was last modified.
In the end, here were the following tweaks made and links to the guides I read:
Feature | Credit |
---|---|
Mermaid Diagrams | Navendu Pottekkat |
Table of Contents | Coding Reflections |
Image Captions | Sebastian De Deyne |
Last Edited Date | Make With Hugo |
Full RSS Feed | Rock Your Code |
Other changes were made reading Hugo’s documentation or through W3Schools.
I have also added permalink anchors to the front of headers 2 and 3 to help with easy linking within posts. Unfortunately, I cobbled this together bit-by-bit with numerous pieces scattered across the internet and I regrettably can no longer identify, or find through search, the original sources I need to credit.
CSS
As a starting point, I took the Sakura Vader CSS by oxalorg, and modified it to change certain aspects, as well as to use the Rosé Pine Moon colours.
You may ask, Rosé Pine? What happened to Catppuccin?
Well, I still do like Catppuccin, but I wanted something warmer and friendly for the colour scheme. Not knowing where to find such a theme, I began searching though those with pre-existing Hugo syntax highlighting, and stumbled across Rosé Pine. To my relief, they have a fully fledged website with a palette, making it easy to custom edit the CSS.
However, as I was finishing up on the CSS, I realised how much I wanted the user to be able to switch between a light mode and dark mode, and saw this as an accessibility issue. I was initially deterred as I had struggled immensely with getting Mermaid diagrams to change between a light or dark mode. But with this website rebuild, I found no issue at all in getting the Mermaid diagrams to change colours depending on theme. I did hit a snag in getting the website to “remember” the chosen theme while navigating the website, but this was fixed with help from this guide here about Local Storage API.
It was when messing around with a toggle mechanism to switch between the two themes I had made for light and dark modes did I come across the dropdown method, and then wondered about creating more themes for the user to choose from. From here, I then brought back Catppuccin Mocha as an alternative dark theme, and added monochrome light and dark themes too as options. I would have written the CSS differently if I had known I was eventually going to add multiple themes - I’ll do better in the next rebuild!
I wanted to add the Catppuccin light theme known as Latte, but struggled making it compliant to WCAG AA standards to the point of unsuitability. I also had to make changes to the colours involved in the light Rosé Pine Dawn variant to be compliant, but these were less severe.
To replace the lack of an additional light theme to counter Catppuccin Mocha, I did try looking at alternative options elsewhere, but most other themes were dark, such as Dracula, or also had light modes which failed WCAG AA standards. One day, I would like to try and craft my own accessible light theme, but that’s for another day. Also, if I have made any mistakes with my colours, please let me know via Mastodon as I tried to check every element, but I may have made a mistake and missed something by accident.
Other Changes
One aspect I could not work out how to change depending on theme was the syntax, which is decided outside of the CSS, and so I settled on using the built-in “Rose Pine Moon” theme, with no modifications, across all themes.
The background image is rendered via CSS, and is a slight modification of “Cross” from the CSS3 Patterns Gallery. The background of the header image is also from the same website, “Zig-Zag” by eCSSpert.
I changed the font to Atkinson Hyperlegible, after reading discussion about it on Mastodon. I have never appealed to fonts designed for easier reading, such as OpenDyslexic, as I often found them actually harder to understand. However, Atkinson Hyperlegible is not only easy for me to read, but I like how to looks as well - a win-win!
What’s Missing? What’s New?
I chose not to implement the icons from Font Awesome, instead preferring emojis which should have inbuilt decent alt-text, and have not included any “sticky” elements after reading this article about accessibility.
The biggest addition has been the added content, expanding the focus of this website from just blogging to also including many aspects of my life, such as recipes and image, as well as repurposing the briefly lost Link Garden into a more curated space for links.
To accommodate the new content, and as a means of adding a level of whimsy and fun to the website, I’ve organised the content into rooms inside a house:
- Lounge - Personal Life
- Dining Room - Music
- Kitchen - Food
- Library - Documentation
- Bedroom - Wellness
- Basement - Technology
- Attic - Yesteryear
- Garden - External Stuff
We’ll see how successful such an idea is, but I like it for now!
Standards
Although I managed to add the IndieWeb standards of h-entry and h-card, I found the documentation to integrating some aspects a little sparse and difficult. As such, my end result looks very cobbled together and I’ve probably made errors along the way.
I felt this in particular with WebMentions to create cross-site conversations, which has been added to the bottom of all blog-type posts, but I found little information on exactly how to get it functioning and displaying. So, I’ve again made an attempt, and hope it works.
I was also interested in implementing parts of the Schema standard where relevant, to add even more structured data to my website, and I hope to have successfully managed to add the Recipe schema for my recipes in the Kitchen. I also implemented it for music reviews using the MusicRecording schema, but then decided against in-depth reviews, so removed it. Although I am not sure if I have done this well enough as I’m not sure how to test it, I wrote a post here on how I’ve tried to implement it.
Button Wall
In a lot of web revival websites, there is a resurgence of button walls. While I do personally like this, I am concerned how this relates to my desire to stay accessible, as mountains of images, perhaps with flashing and/or low contrasting graphics, does not feel inclusive to all. I could mitigate some of this by enacting code to pause the animation and write my own alt text for each button, but this this still didn’t feel right.
However, I came across a great idea when browsing the neocities website of a fellow member of my Mastodon instance, Frills. She manually made many of the “buttons” based on colours grabbed from the website linking to and rendering these through text, I loved this approach as it should remove issues with needing alt text as well as all the issues with animation. So I adapted my code to follow a similar method of using text and colours from the website to make a button, and ran all the colours through a checker making sure they at least comply to a “AA Normal” standard. The end result can be found here.
Other
I’ve also added a robots.txt file copying Seirdy’s, in hopes of dissuading unwanted bots, followed Bechno Kid’s tutorial here on embedding updates from Status Cafe, fleshed out the About Me page, and added more information to the Homepage.
BuyMeACoffee
Lastly, I am trying out BuyMeACoffee as a way for readers to donate to me if they wish. This is completely optional, but any donations would be greatly appreciated and help towards the hosting and domain fees for the website, as we all hate advertisements!