This blogsite has been using hugo-tufte theme (with some customization) for a while. I choose the theme because I appreciate the aesthetic look of the original Tufte $\LaTeX$ template. Using a dedicated area on the right side of the page for sidenotes, supplements images, or thoughts. Diversify the layout of an article, and make the article fun to read.
A couple of months ago, under my willingness of making enhancements to the theme. And I start to do some research on how other people are doing sidenote on their blog (Like the great article by Gwern Branwen). With some “deep thinking”. I start to realize. Maybe it is not a good idea to use footnotes on the Internet pages.
Not only because it is hard to using (in Hugo, those sidenotes were created using shortcodes, and you have many of them), also because it may break the flow of reading (but for sure better than footnote and endnote in reading experience); make the HTML and markdown source semantically not-understandable and almost no compatibility with other themes.
More personal complaints like:
- No dark theme support
- Broken responsive implementation
- lacking grid system
In a sentence, I decided to rewrite the theme from scratch.
And using Tailwind CSS 3 instead of Bootstrap which I am more familiar with. Converts all posts with sidenote into another format (still thinking the format). During the process, I may share some of my experiences, especially the Tailwind + Hugo workflow.
2021.12.27 Update
The theme has been warmed up and some preliminary layout has been implemented. But as a previous bootstrap user, I have to say the experience with Tailwind is a bitter-sweet story.
Similarly use way of applying classes to the elements. What Tailwind provides are more underlying levels of building blocks. And with a tiny number of demos. So it is not so intuitive when I implement stuff.
The Tailwind UI is the official component library, and it has a paywall (not cheap). So, don’t take for granted the bootstrap official examples.
2022.1.8 Update
A lot has been done in the past two weeks. And the theme is almost ready but still needs some tweaking. I borrow a lot of ideas from other Hugo themes, but the main idea is still Make it simple.
Setting up a new theme is a quite messy process, have to consider an overwhelming amount of items and elements. So to make sure the unified style across the site, I create a design guideline that defines the overall coloring, placement of modules, and sizing. This saves me from designing by eye page by page.
I provide the guidelines here and you can also check out the contiguous building site that has the new theme enabled (Powered by Cloudflare pages).
2022.1.9 Update
The new theme has been applied on the site, I probably will write a post to introduce the new theme. Feel free to explore the site, and give me some feedback in the comment section.