The blog uses the Minimal Mistakes Jekyll theme configured as a remote theme, which provides automatic updates and reduced repository size.
# _config.yml theme configuration
remote_theme: mmistakes/minimal-mistakes
minimal_mistakes_skin: "default"
Available skins in Minimal Mistakes:
minimal_mistakes_skin: "default" # Current selection
# Options: "air", "aqua", "contrast", "dark",
# "dirt", "neon", "mint", "plum", "sunrise"
The theme provides several layout types:
// Default skin variables
$background-color: #fff
$text-color: #222831
$primary-color: #7c4dff
$border-color: mix(#fff, #222831, 75%)
$footer-background-color: mix(#000, $background-color, 10%)
$link-color: #0366d6
$masthead-link-color: $text-color
$masthead-link-color-hover: mix(#000, $text-color, 20%)
$navicon-link-color-hover: mix(#fff, $text-color, 80%)
// assets/css/main.scss
---
---
@charset "utf-8";
@import "minimal-mistakes/skins/default";
@import "minimal-mistakes";
// Custom overrides would go here
To add custom styling, append to assets/css/main.scss:
// Custom styles
.custom-class {
// Custom styling here
}
// Override theme variables
$primary-color: #your-color !default;
// Import theme after variable overrides
@import "minimal-mistakes";
// Custom font imports
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
// Override theme font variables
$serif: "Inter", serif;
$sans-serif: "Inter", sans-serif;
$monospace: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
# _config.yml masthead settings
title: jonbeckett.com # Site title in header
masthead_title: # Override title (empty = use title)
logo: # Logo image path (not configured)
# _data/navigation.yml
main:
- title: "About"
url: /about/
- title: "Posts"
url: /posts/
- title: "Categories"
url: /categories/
- title: "Tags"
url: /tags/
# _config.yml author settings
author:
name: "Jonathan Beckett"
avatar: "/assets/images/jonbeckett.jpg"
bio: "Software and Web Developer"
location: "UK"
email: "jonathan.beckett@gmail.com"
links:
- label: "LinkedIn"
icon: "fab fa-fw fa-linkedin"
url: "https://linkedin.com/in/jonathanbeckett"
- label: "GitHub"
icon: "fab fa-fw fa-github"
url: "https://github.com/jonbeckett"
- label: "BlueSky"
icon: "fab fa-fw fa-bluesky"
url: "https://bsky.app/profile/jonbeckett.bsky.social"
# _config.yml footer settings
footer:
links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:jonathan.beckett@gmail.com"
- label: "LinkedIn"
icon: "fab fa-fw fa-linkedin"
url: "https://linkedin.com/in/jonathanbeckett"
- label: "GitHub"
icon: "fab fa-fw fa-github"
url: "https://github.com/jonbeckett"
- label: "BlueSky"
icon: "fab fa-fw fa-bluesky"
url: "https://bsky.app/profile/jonbeckett.bsky.social"
- label: "Disclaimer"
icon: "fas fa-fw fa-info-circle"
url: "/disclaimer/"
# _config.yml defaults for posts
defaults:
- scope:
path: ""
type: posts
values:
layout: single
author_profile: true # Show author sidebar
read_time: true # Show estimated reading time
comments: true # Enable comments (Giscus)
share: false # Disable social sharing buttons
related: true # Show related posts
show_date: true # Show publication date
toc: false # Table of contents (per-post)
toc_label: "Table of Contents"
toc_icon: "cog"
toc_sticky: false
# _config.yml defaults for pages
defaults:
- scope:
path: "_pages"
type: pages
values:
layout: single
author_profile: true
# _config.yml archive settings
category_archive:
type: liquid # GitHub Pages compatible
path: /categories/
tag_archive:
type: liquid # GitHub Pages compatible
path: /tags/
# _config.yml breadcrumb settings
breadcrumbs: true # Enable breadcrumb navigation
Custom breadcrumb template at _includes/breadcrumbs.html provides enhanced navigation.
# _config.yml search settings
search: false # Disabled (no search provider configured)
# _config.yml pagination settings
paginate: 10 # Posts per page
paginate_path: /page:num/ # Pagination URL structure
# Disabled in post defaults
share: false # No social sharing buttons
The theme automatically generates Open Graph tags from:
Automatic Twitter Card generation using:
The theme uses these responsive breakpoints:
$small: 600px !default;
$medium: 768px !default;
$medium-wide: 900px !default;
$large: 1024px !default;
$x-large: 1280px !default;
$max-width: $x-large !default;
# Example post header image configuration
header:
image: /assets/images/banners/post-banner.jpg
teaser: /assets/images/banners/post-teaser.jpg
overlay_image: /assets/images/banners/post-overlay.jpg
overlay_filter: 0.4
caption: "Photo credit: [Source](https://example.com)"
# _config.yml SCSS settings
sass:
sass_dir: _sass
style: compressed # Minified CSS output
# _config.yml HTML compression
compress_html:
clippings: all
ignore:
envs: development # Only compress in production
Theme: Minimal Mistakes (Remote)
Skin: Default
Customization: CSS overrides in main.scss
Layout: Single-column with sidebar
Responsive: Mobile-first design