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
.