How to Customize Minimal Mistakes

November 10, 2023 3 minute read

Getting Started

Before getting started, check out https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#customizing for the comprehensive overview of what to do. On that page, here is the key info I found:

Note: To make more extensive changes and customize the Sass partials bundled in the gem. You will need to copy the complete contents of the _sass directory to due to the way Jekyll currently reads those files.

The way I did this was:

Go to https://download-directory.github.io/
Input https://github.com/mmistakes/minimal-mistakes/tree/master/_sass
Move downloaded folder to workspace and rename to _sass

After getting the _sass folder in your workspace, you can accomplish any of the following customizations.

Changing Font Size

Resource: https://www.pwills.com/posts/2017/12/20/website.html

Go to /_sass/minimal-mistakes/_reset.scss
Change the pixel size in this code:
- I use 16/18/20

@include breakpoint($medium) { font-size: 18px; }

@include breakpoint($large) { font-size: 20px; }

@include breakpoint($x-large) { font-size: 22px; }

Adding Favicon

Resource: https://www.cross-validated.com/Personal-website-with-Minimal-Mistakes-Jekyll-Theme-HOWTO-Part-IV/

Go to https://realfavicongenerator.net/ and download a folder of your favicons
I put my /favicon folder in the /assets folder
Go to /_includes/head/custom.html and add the following:

<!-- insert favicons. use https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
<link rel="manifest" href="/assets/favicon/site.webmanifest">
<link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Change Author Picture Size

Go to /_sass/minimal-mistakes/_sidebar.scss
Change max-width in the following code:
- I use 180 instead of 110

  img {
    max-width: 110px;
    border-radius: 50%;

    @include breakpoint($large) {
      padding: 5px;
      border: 1px solid $border-color;
    }
  }

Change Size of Feature Row Image

Resource: https://github.com/widdowquinn/widdowquinn.github.io/commit/30c405c24095e7e0cb82d3af38f6a1b0ab23e03c

Change /_includes/feature_row

Before

<img src="{{ f.image_path | relative_url }}" 
  alt="{% if f.alt %}{{ f.alt }}{% endif %}">

After

<img src="{{ f.image_path | relative_url }}"
  alt="{% if f.alt %}{{ f.alt }}{% endif %}" {% if f.image_size %}width="{{f.image_size}}"{% endif %} >

Change the following in /_sass/minimal-mistakes/_archive.scss:

Before

  img {
    width: 100%;
  }

After

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

For the image in your feature_row, add image_size: 50%
- I use 50% for the profile picture on my Home page

Change Color of Author Link Icons

Go to /_sass/minimal-mistakes/_utilities.scss
Add color for Font Awesome specific icon
- In section around .fa-youtube

  .fa-spotify {
    color: $spotify-color;
  }
  .fa-chart-bar {
    color: #636EFA;
  }

For new variables like $spotify-color go to /_variables.scss
- Near $youtube-color

$spotify-color: #1ED760 !default;

Resource: https://github.com/mmistakes/minimal-mistakes/issues/554

Download the /_layouts folder just like you did with /_sass and add to workspace
Create a file “related.html” in /_includes
- Copy the 24 lines of code from the Minimal Mistakes post in the resource above. He wrote this:

I came up with a way of showing “related posts” by like post.tags instead of using the built in site.related_posts array.

The advantage here is you actually get a different set of related posts on each post instead of just the “most recent” posts that currently happens due to LSI being disabled on GitHub Pages.

Using this spaghetti code of Liquid in _layouts/single.html will display related posts that share the same tags as the current post. It will show 1-4 posts depending on how many matches it finds.

In /_layouts/single.html add {% include related_tabs.html %} before the last </div>
- Or you could just copy paste the 24 lines of code directly into /single.html but I thought it’d be cleaner to separte
Make sure related:true in /_config.yml in defaults: for the correct type:(posts)
- Also make sure you properly list out tags: in the posts

Show Icon Labels for Date Published / Date Updated

Add show_date: true in /_config.yml in defaults: for the correct type:(posts)
In /_includes/page__meta.html at line 11 after the </span> and before the %endif%

{% if document.last_modified_at %}
  {% assign date = document.last_modified_at %}
  <span class="page__meta-sep"></span>
  <span title="updated">
    <i class="fas {% if include.type == 'grid' and document.read_time and document.show_date %}fa-fw {% endif %}fa-edit" aria-hidden="true"></i>
    <time datetime="{{ date | date_to_xmlschema }}">{{ date | date: date_format }}</time>
  </span>
{% endif %}

In /_includes/page__date.html at line 2 (end of file)

{% if page.date %}
  <p class="page__date"><strong><i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label | default: "Originally Published:" }}</strong> <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: date_format }}</time></p>
{% endif %}
{% if page.last_modified_at %}
  <p class="page__date"><strong><i class="fas fa-fw fa-edit" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label | default: "Last Updated:" }}</strong> <time class="dt-published" datetime="{{ page.last_modified_at | date: "%Y-%m-%d" }}">{{ page.last_modified_at | date: date_format }}</time></p>
{% endif %}

Change Top Left Title Name

In /_config.yml
At the very top do title: ethanlee.me
- Changes to /_config.yml will not go through locally unless you stop and restart server using bundle exec jekyll serve

Ethan Lee