Noobie - Changing Font Variables

Help
2

Hi.

I have a solution for you.

Minima version note

I work with Minima as well. Note that the latest release is 2.5.1 GitHub - jekyll/minima at v2.5.1 Don’t look at master on GitHub because the CSS approach is different in the docs and where files are located.

How minima is structured

When you site uses Minima, is loads the theme’s layouts, assets, _sass dir etc. even if all you have in your repo is README.md / index.md and Gemfile.

The entry-point for the CSS is main.scss

https://github.com/jekyll/minima/blob/v2.5.1/assets/main.scss

This gets compiled to assets/main.css (i.e. SCSS to CSS) at build time. And referenced in head tag.

That SCSS file is very short. What is does is import minima from the _sass directory.

See _sass/minima.scss.

https://github.com/jekyll/minima/blob/v2.5.1/_sass/minima.scss

At the end of the file, that does imports from _sass/minima/, but you can ignore that.

The part you care about is at the top of the script where defaults are set.

$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$base-font-size:   16px !default;

Note that because of !default, then if the SASS variable has a value already, it will not be set with the theme’s default.

Solution

In order to override the theme’s defaults, you need to set the values before the defaults are defined.

All you need to do is create

assets/main.scss

and add content like this. You define your own variables and then import from the SASS directory (if you don’t, this file will be empty when it renders).

---
---
/* Override theme defaults */
$base-font-family: HelveticaNeu;
$brand-color: orange;

/* load _sass/minima.scss */
@import "minima";

/* Put any custom CSS here */

h1 {
  padding-bottom: 2px;
  color: blue;
}
1 Like