But there’s one thing that bothers me about Minima. The
<h1> headers are supposed to be the biggest ones, right? Well, they are smaller than even
<h3>! That just ain’t right! Time to fix it.
There is a guide on how you’re supposed to do it in the official Jekyll documentation, but the exact section dealing with stylesheets is kinda obscure; that’s why I’m writing this in the first place.
Where are the original files?
To find them, you need the
bundle show minima command. It displays the exact path to the templates and stylesheets that make up the theme. But no, you’re not supposed to change them. They are only for reference; the actual overriding shall be in your blog source folder.
Where exactly to put the overrides?
Good question. If you look at the Minima Github page, you might think that you need to create the
_layout.scss file in the
_sass/minima folder. I tried, didn’t work.
After finding this guide from a fellow Jekyll-Minima blogger I realized that I needed to look for the answer in the
_site folder; Jekyll puts the
main.css in the
assets folder. So, we should create the
assets folder in the blog root and put the file named
.css) with the following contents:
Who could have guessed!
Two lines with three dashes will make Jekyll override the stylesheet, and the import will let it use the original styling for everything except what we’ve specified here, which is only the h1 headers used in post content. The styling is similar to that of other header types, just bigger than them but also a bit smaller that the post title. There was no styling for h1 in the original stylesheet, which is somewhat weird.
At this point, Minima developers have made a patch that makes h1 big enough. But when I’m writing this, it is not available in a major version yet, so I’ve decided to customize it a bit myself; plus, I’ve learned a great deal about styling in Jekyll, and hopefully so have you.
As always, thanks for reading. See you eventually!