New Blog Design

You must be reading this post on the new redesigned blog theme.

For the ones that can guess, this blog runs on Hugo. My reasons to choose Hugo were simple, it was written in Go. Atleast that’s what I tell people.

The theme I am using is called nightfall.

The theme is very simple with a almost empty homepage and a linux-shell like interface for the header. This is what I wanted for most part in my blog.

But the default colorscheme, font and the presentation elements of the theme was not to my liking.

By default it uses a Sans-Serif font, like OpenSans. I hate sans-serif font, especially for nerdy things.

Let me rant systematically

Colorscheme

Here is a screenshot of the old homepage.

The colorscheme I wanted was a very dark almost black theme, with flat/matte colors. They don’t pop, but provide enough constrast for HTML elements to differentiate themselves.

I would say the best tool to use is ChatGPT (For somebody with 0% color knowledge), I only provided a few dark colors and it completed the rest of the colorscheme for me.

I was using the ChatGPT-3.5 model that is freely available.

I don’t know how, but it has a innate sense of colors within it’s text-only model.

Here’s the pallete I am using for this website

 1$white: #FAFAFA;
 2$black: #2f2f2f;
 3$blue: #659DBD;
 4$red: #BD5A5A;
 5$green: #77A88D;
 6$charcoal: #1a1a1a;
 7
 8$backgroundDarker: #1C1C1C;
 9$backgroundDark: #0F0F0F;
10$backgroundCode: #000000;

Here’s the end result!

Fonts

I only like Monospace fonts, especially for reading purposes. I have becomed accustomed to it. I will change it wherever possible.

In the same ferver, I moved to these 3 fonts for this blog

• Fira Mono (for Headings and Title)
• Iosevka (for Code Samples and these types of inline code)
• Ubuntu Mono (for normal text, like the one you are reading!)

It makes the blog much more readable and so much more nerdy.

Elements

For some reason, most elements of the blog were invisible.

Like blockquotes.

I mean these kind of text.

Earlier they were not at all contrasted, you would think that’s a mistake. But now they are clearly bordered with full visibility to the text written inside them.

List

The list looks much more clean now, with very visible summary and shorten dates.

Conclusion

Overrall I am very happy with the CSS work I have achieved over the weekend. Most times I am far from artistic, I even wrote a blog post about it!