Noobie - Changing Font Variables

[n28]

Hello All,

I created a new jekyll blog with the default minima theme using jekyyl build new blog

TL;DR: I figured out how to change the theme’s skin to dark mode by adjusting the _config.yaml file, but I haven’t figured out how to change the font or the color.

Some older stack exchange posts seems to suggest that by changing the variables within the _scss folder, I could overwrite the default gem values.

Well, for starters there is no _scss folder in the root directory so I created my own.

I inserted the variables below and typed jekyll serve but alas, there were no changes.

What am I doing wrong?

Thanks for your help!

[MichaelCurrin]

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;
}

[MichaelCurrin]

Note that you do not need to add _sass directory to your own repo.

If you do add say _sass/minima.scss to your repo, you’d have to copy and paste the entire file before editing it, which is rather tedious.

So just add a fine in assets.

here is the result on my site with a custom Helvetica Neu font and yellow font color

[MichaelCurrin]

I have a guide for Minima 2.5.1 and Minima latest in case you need.

Customize

[n28]

Hey Michael,

I really appreciate you taking the time to lend me a hand here. I still have a few questions of course…

1. We are adding these files under the root directory, and not under _sites, correct?

2. When I first make my Jekyll project, should I be making it with the jekyll new <project> command or should I be doing some kind of git clone?

3. I did create a new assets folder under my root directory and added the snippet from your example, but I didn’t see any font changes whatsoever so I know I’m doing something wrong.

Thanks!

[n28]

Also,

I also tried cloning the repo directly rather than just using the Gem file method. However, when changing the main.scss file, I receive an error stating it can’t find the minima file that I’m trying to import.

I have a minima folder within _scss but not a minima.scss file. Should that be included in there?

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/main.scss':
                   Error: File to import not found or unreadable: minima. on line 6:1 of main.scss >>
@import "minima"; ^                                                                                     

Here is a quick video snippet:

Thanks!

[BillRaymond]

The way Jekyll themes — or rather Gem-based themes — work, is they sort of hide all the details of how the site works. You can add or override files, but you can’t really see them. There are benefits and downsides to this approach.

What I think you are experiencing right now is that you cannot see all the minima theme files, making it hard for you to make changes.

Here’s a video I created that might help you understand themes a little better. Specifically, checkout the video staring at 6:24.

Up and Running with GitHub Pages, Part 4, Jekyll Themes

In the video, I show you how to view all the files from Minima and make changes. I hope this helps.

[n28]

Oh wow, that’s one hell of a coincidence! I actually just got done watching your video you posted here less than an hour ago.

As a newcomer, I really appreciate your contribution to the community. Your video helped me not only understand the difference between Gem Vs Repo, but how to access and configure the files within the gem as needed. Many thanks for your efforts!

I found the issue (as suspected) was user error. Instead of cloning v2.5.1 as suggested, I still ended up cloning the master… which as Michael alluded to, requires a different solution than the one I was trying to implement.

For future readers: I was able to clone v2.5.1 using the command below:
git clone --depth 1 --branch v2.5.1 https://github.com/jekyll/minima.git

After adding the main.scss file to the assets folder, I can now change the font and color freely!

[n28]

The only remaining issue I seem to have… Is the lack of dark mode, which was the main reason I wanted to customize minima.

I seems that can’t change the skin using the key:value pair with v2.5.1.
In the screenshot below, I added skin: dark to the config.yaml file and it seems to trigger an error.

jekyll 4.2.0 | Error: (/home/n28/BLOGGING/minima/_config.yml): mapping values are not allowed in this context at line 44 column 7

1. Is there a work around for the lack of dark mode?

2. Would editing the file: _sass/minima/_syntax-highlighting.scss be the best way to customize the colors for a dark theme?

3. Although I’m overwriting the main.css, what’s the best way to configure each individual layout?

I loaded up some example css and noticed the main page has shifted but not the actual layout content.
e.g. Page titles and Post layouts aren’t using green text…

I assume this is due to each layout configuration taking precedence over the main.css file… which would make sense.

What is the best way to tackle this?

Thanks!

[BillRaymond]

Great! Glad the video was helpful!

Sometimes I receive this error and it’s a false positive (meaning it’s not really the code you think is causing the problem).

Is your repo public? If so, please provide a link and I can take a peek and see if I see anything wrong.

[MichaelCurrin]

Never commit anything in _site. Jekyll deletes everything in there everytime you serve or build.

That dir should be on your .gitignore file.

I don’t like to run Jekyll new because it has a ton of comments and also uses .markdown instead of .md

I like to use my template project based on Jekyll new.

Click Use this Template, which is better than forking.

GitHub - MichaelCurrin/jekyll-blog-demo: Starter for a static website or blog...

Regarding why your site is not looking right despite doing the right things. Have a look at your dev console in the browser. See css loading issues maybe. Have a look at the assets directory in _site and sharing a repo link helps us.