TABLE OF CONTENTS

Today I would like to take you with me through the journey of styling my hashnode blog with the new custom css feature.

The goal

As I named my blog ProfOnestone's Notepad, I want it to actually look like a notepad in some way. My first thought was to go with the typical legal pad style but I simply don't like the color yellow very much... 🤢

So I'll go with a more whiter appearance.

The main elements I need for a notepad styled blog are:

• a header

• lined paper

• a stylisch vertical line

and that's basically all.

1. The color-palette

To get an idea of the colors to use I headed over to Adobe Color Explorer and search for legal pad. This tool just lists you a matching pictures with an extracted color-palette. So awesome! 👨‍🎨

I adjusted a palette to my liking and got rid of the yellow. Finally I created some css variables to hold the colors of the palette.

COPY

COPY

:root{
    --HeaderTop:#734610;
    --HeaderBottom:#A67233;
    --Background:#FFFFFF;
    --Lines:#734610;
    --VerticalLine:#D70000;
    --Card:rgb(240,240,240,0.9); 
}

2. Analyze the existing classes of the blog

To start adjusting the existing classes on my blog I went into the developer tab of chrome and started to analyze the elements.🔍👀 To save you some time here are the main classes of the home-page that you probably want to adjust:

COPY

COPY

// main elements
.dark{}
.blog-body{}

//header
.blog-header{}
.blog-title{}

//post-section
.blog-posts-wrapper{}

//post-cards
.blog-post-card-wrapper{}
.blog-post-card{}
.blog-post-card-title{}
.blog-post-card-meta{}
.blog-post-card-brief{}

//footer
.blog-footer-area{}

And here you can see how they are layed out on the page:

3. Styling the lined paper-background

For a lined style I had to apply a repeating-linear-gradient as the background-image, alternating between my background-color and my lines-color. I found the typical font-size of the existing text on the blog to be 1.125rem so I decided to come up with a line height bigger than that and settled with 1.8rem.