Good evening!

Minima is a very nice Jekyll theme and it fits my needs for the most part. Okay, I’m just too lazy to look for the other themes; or rather, I can’t be sure that they won’t have broken SEO, horrible performance on mobile, or other hidden nasty things. Additioanlly, I’m not a huge fan of frontend development; the less I have to tamper with HTML/CSS/Javascript, the better.

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.

This is what it looks like originally. Smaller than h3!

Overriding!

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 main.scss (yes,.scss, not .css) with the following contents:

---
---

@import "minima";

.post-content {
  h1 {
    @include relative-font-size(2.5);

    @include media-query($on-laptop) {
      @include relative-font-size(2.25);
    }
  }
}

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.

Now it looks just right!

In conclusion

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!