The Color of Choice #
I love lime color. But lately my heart starts whispering me to love amber. After code refactoring is done. I start changing the blog color palette to amber. This include the emojis and icons.
I want to use amber far before a plan to refactor the blog. But after some time, I realize that the color is close to red. The color that I tend to avoid.
I want to choose the color not because I am familiar with it, but because I wanted to. So I did some observations and settled with the green (lime) color. The color of nature, life, growth.
The result was a nature theme: a combination of green and brown color. Green represents the tree and brown for the soil. The blog featured a padi tree as a logo that grows from the brown soil of the background. A symbol of knowledge source with the humble character.
Tips: Little to no one knows that the padi logo is clickable. It redirects to the home page.
Sadly, after the audit. lime and amber as foreground have an issue with contrast ratio. It will hurt the reader's eyes. I need to choose another color. The navy color win from other candidates. Other than it passed the contrast ratio test with white as the background. I and my wife use it as the main color for most of our clothes.
However, in 2021-06-16 I decided to choose indigo color as the main theme. A new inspiration struct me and I love the purple color instantly.
Keep It Simple #
I want the blog to be as simple as possible, but not the simplest. I still want to have comments and such.
To limit the use of color, I remove the
extend keyword in TailwindCSS config. This leaves only the color specified in the
color section. It makes tracking color usage easy. I also use a color alias to make color-scheme migration easy.
Limited color keep the design consistent. I use lime and brown for the dominant color, and three shades of both for the accent color.
Copy to clipboard button is removed. The user is only able to use it on a big screen. It is visible if the cursor is on the top of the code. This is not possible on the small screen. It means the user is only limited to the big screen reader. They can do copy-paste easy-peasy on the big screen without this additional button. Hence, it's removed.
The dark theme was also removed. The blog uses a very simple color combination. It will be very easy for an external tool such
Firefox ReaderMode to swap color palette to dark.
Mobile navigation takes a lot of space for mobile readers. It keeps sitting there doing nothing. A huge code with a small value to the reader. It is now removed and replaced with default navigation at the top.
Non-Visible Changes #
There are other non-visible changes. Mostly code refactoring.
Instead of using emoji as a background image, It embedded it as
svg. A change for color and height now easier.
I choose to use either
mt / ml or
mb / mr in TailwindCSS classes. But I prefer to use the former since it only affects the current element. It does not break newly introduced items in the layout.
I tried Zola, a Rust SSG. Hoping it can replace Eleventy. Sadly it doesn't accommodate my unique blog structure. This blog contains multiple post endpoint
notes/, multiple feeds, with little code. thanks to Nunjuks macros and Eleventy flexibility.
Bleeding has a negative meaning in the previous era of CSS. Now people using it for their images and code block. I wanted to adopt the same thing. It looks new. I have successfully managed to make both items bleed, crossing their parent element width. But it requires dirty hacks such as huge negative margin, box-shadow, and grid. I reverted the changes and keep no dirty hacks to the code-base.
The last thing is the bundler. I wanted to replace the current Webpack with the laravel-mix config. I want to know each process from markdown to production distributable output. Besides, I don't want to mess with many Webpack mysteries. I tried from no-blunder, Parcel, and Snowpack. In the end, I stick with Parcel. Snowpack still has some unresolved issues.
These changes keep the code shorter, simple, and more maintainable.
Speed comparison from previous version: