pbe (part II): visual facelift
2023-12-05 . 389 words . 2 min
This is part II of the series where I make changes to this website. You can read more in pbe (part I): setting up basics
Before yesterday, I've had a hate-hate relationship with CSS. I never gave it a serious chance to CSS and it in return, never worked well with me. We have started understanding each other since yesterday. I started exploring with the aim to improve visual design for the website and make it look clean and crisp.
I started with an easy one - favicon. Favicons are not a big deal unless you have 200 tabs open on a browser window. It creates a minimalistic branding which goes a long way especially when "thinking fast". I highly recommend favicon.io generator1 which takes in simple inputs to create assets and provides documentation about enabling the favicons.
As I was going through <meta> tags for website, I quickly added theme color2 which makes android (and in some case desktop) view cohesive. Again, like the favicon, theme colors are underrated for the value they provide to subconscious design.
As for other things related to <meta> tags, OpenGraph Protocol makes the blog sharing look good on most platforms. With og:title, og:description, og:url and og:image most of the social platforms create a card layout to show shared content in a better way. Going ahead I can add an og:image per post for customization. For next fun "side project", I plan on using an LLM to generate an image for each post.
Next set of improvements are towards making the CSS for all significant HTML tags that get generated based on my markdown usage. This involves headings, links, images, blockquotes, tables and codeblocks. While I was at it, I made some minor changes to website layout which improves container width, mobile view for website, top navigation, footer and section pages.
I'm very happy with way the website looks right now and I want to focus on getting to adding good content in near future.
footnotes
favicon.io generator is a free online tool that works.
Theme colors made a slight but noticeable change to website look.
Before theme color 
After theme color addition on <head> 