Oh boi. First phase took the entire week.
For planning and progress tracking, I used a GitHub project. This is a basic Kanban board with two “To do” columns per phase. The first phase was about making a base dirty skeleton, whereas the second phase will add bells and whistles.
GitHub project’s cards can have automated transitions between columns, for example, if you close the issue, it will go to “Done.” Unfortunately, when you work from branch, issues won’t be closed by commits until you merge the develop branch in to the main one. In my case the main branch is used for output hosting, so redesign branch won’t be merged there, thus, I had to close issues by hand. Meh.
From the Hugo docs I learned about Tailwind CSS and PostCSS. Tailwind CSS is kinda like Bootstrap, but without imposed styling; basically, a Lego constructor of utility classes. PostCSS is a tool for transforming CSS with various plugins like LESS/Sass-style syntaxes, autoprefixer, purger, etc. This repo and this one show how to integrate those tools into Hugo.
Design inspiration came when I stumbled upon Joshua Comeau’s blog. Yeah, I’ve imitated a lot of its typography and color choices xD It also provided some tutorials, for example, how to style ordered lists. I spent some time trying to find a similar free humanist sans-serif font, Nunito seems close, readable, and has Cyrillic characters (just in case). As for a monospaced font, the choice was obvious: JetBrains Mono.
Tailwind CSS has a plugin for typography; I didn’t use it, but copied
18rem based margins, line-heights, and font sizes for some elements.
For layout I used
flexbox. Last time I did any CSS these two weren’t a common thing; you had to do a million of
float’s and other weird things. I also wanted to use
grid for minor bleeding elements how it was described here, but I didn’t like the result: vertical margins don’t collapse when you apply grid to child elements.
It has a similar “save for later” experience, but also supports collections and comments. For example, for this project I created a collection “blog redesign” and added a comment for each link saved there to remember later why it was saved in the first place.
- SVG icons
- Tool for checking color palette’s accessibility
emfor media queries and
remfor everything else
Basic sections for next work are:
- Bringing back old features: external vs. internal links, older/newer links.
- New features: dark theme, automatic generation of Open Graph image, header-level links.
- Cleaning up: splitting CSS into components, using plugin for
font-facegeneration, gathering all hard-coded values into variables.
- Fixing bugs: display of
codeelements in links and headers (yup, you can spot it in this article) and others.
I also think about ditching Tailwind CSS at this point. It’s great for rapid prototyping, but it quickly became a mess of styling split between inline classes and the style sheet.
And one more thing. I no longer like the selected color palette, lol. Links are too bright, block quotes are weird, the header is too cheesy. People say there are 2 hard problems in computer science: cache invalidation, naming things, and off-by-1 errors. I think “choosing colors” is the “naming” equivalent in design.