Rebrand azzamsa.com

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 includes 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 on the green (lime) color. The color of nature, life, and 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 a humble character.

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 struck 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 the 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 is 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 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 DarkReader and Firefox ReaderMode to swap color palette to dark.

Mobile navigation takes up 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 in color and height is 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 essays/ and 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 margins, 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 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 the previous version: