mirror of
https://github.com/codeninjasuk/codeninjasuk.github.io.git
synced 2024-11-26 01:07:53 -05:00
Added sub pages
This commit is contained in:
elvistony
parent
e37cd189cb
commit
29df31c088
571 changed files with 209 additions and 15985 deletions
12
_config.yml
12
_config.yml
|
|
@ -18,9 +18,9 @@ minimal_mistakes_skin : "default" # "air", "aqua", "contrast", "dark", "dirt"
|
||||||
locale : "en-US"
|
locale : "en-US"
|
||||||
title : "Code Ninjas Langley"
|
title : "Code Ninjas Langley"
|
||||||
title_separator : "-"
|
title_separator : "-"
|
||||||
subtitle : # site tagline that appears below site title in masthead
|
subtitle : ""
|
||||||
name : "Code Ninjas Langley"
|
name : "Code Ninjas Langley"
|
||||||
description : "Your kids will love learning to code while building video games at Code Ninjas."
|
description : "Code Ninjas | Langley (Berks) | Your kids will love learning to code while building video games at Code Ninjas."
|
||||||
url : # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
|
url : # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
|
||||||
baseurl : # the subpath of your site, e.g. "/blog"
|
baseurl : # the subpath of your site, e.g. "/blog"
|
||||||
repository : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
|
repository : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
|
||||||
|
|
@ -137,6 +137,14 @@ footer:
|
||||||
# url:
|
# url:
|
||||||
- label: "Facebook"
|
- label: "Facebook"
|
||||||
icon: "fab fa-fw fa-facebook-square"
|
icon: "fab fa-fw fa-facebook-square"
|
||||||
|
|
||||||
|
- label: "Code Ninjas"
|
||||||
|
icon: "fab fa-fw fa-globe"
|
||||||
|
url: "https://codeninjas.com"
|
||||||
|
|
||||||
|
- label: "Code Ninjas Langley"
|
||||||
|
icon: "fab fa-fw fa-youtube-play"
|
||||||
|
url: "https://www.youtube.com/channel/UC_TJJk5_k-uc40hqWIViOAQ"
|
||||||
# url:
|
# url:
|
||||||
# - label: "GitHub"
|
# - label: "GitHub"
|
||||||
# icon: "fab fa-fw fa-github"
|
# icon: "fab fa-fw fa-github"
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
# main links
|
# main links
|
||||||
main:
|
main:
|
||||||
- title: "About"
|
|
||||||
url: https://mmistakes.github.io/minimal-mistakes/about/
|
|
||||||
- title: "Programmes"
|
- title: "Programmes"
|
||||||
url: /year-archive/
|
url: /programmes/
|
||||||
- title: "Camps"
|
- title: "Camps"
|
||||||
url: /year-archive/
|
url: /camps/
|
||||||
|
- title: "About"
|
||||||
|
url: https://codeninjas.com
|
||||||
- title: "Gallery"
|
- title: "Gallery"
|
||||||
url: /year-archive/
|
url: /year-archive/
|
||||||
# - title: "Sample Collections"
|
# - title: "Sample Collections"
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,15 @@
|
||||||
|
|
||||||
<!-- end custom head snippets -->
|
<!-- end custom head snippets -->
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet"> -->
|
||||||
<link rel="stylesheet" href="/assets/css/custom.css">
|
<link rel="stylesheet" href="/assets/css/custom.css">
|
||||||
|
<link rel="icon" href="/assets/img/favicon.png" type="image/png" />
|
||||||
|
|
||||||
{% if page.w3 %}
|
{% if page.w3 %}
|
||||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
<link rel="preload" href="https://use.typekit.net/htz0ghy.css" as="style" crossorigin />
|
||||||
|
<link rel="stylesheet" href="https://use.typekit.net/htz0ghy.css" crossorigin />
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
*{
|
*{
|
||||||
font-family: 'Oxygen', sans-serif;
|
/* font-family: 'Oxygen', sans-serif; */
|
||||||
|
font-family:"azo-sans-web",serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-wrap {
|
.video-wrap {
|
||||||
|
|
@ -29,4 +30,48 @@
|
||||||
|
|
||||||
.w3-flex-child{
|
.w3-flex-child{
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn{
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 800;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
user-select: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.8125rem 1.25rem;
|
||||||
|
font-size: 1.0625rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-success{
|
||||||
|
color: #fff;
|
||||||
|
background-color: #04b88f;
|
||||||
|
border-color: #04b88f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning{
|
||||||
|
color: #002340;
|
||||||
|
background-color: #fed154;
|
||||||
|
border-color: #fed154;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge{
|
||||||
|
padding: 5px;
|
||||||
|
padding-right: 0.75rem;
|
||||||
|
padding-left: 0.75rem;
|
||||||
|
border-radius: 10rem;
|
||||||
|
background-color: rgba(51,143,191,.1);
|
||||||
|
color: #338fbf;
|
||||||
|
margin-bottom: 0.75rem !important;
|
||||||
|
|
||||||
|
/* font-size: 50% !important; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:visited{
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
BIN
assets/img/camp-program.png
Normal file
BIN
assets/img/camp-program.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
assets/img/create-program.png
Normal file
BIN
assets/img/create-program.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/img/favicon.png
Normal file
BIN
assets/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assets/img/jr-program.png
Normal file
BIN
assets/img/jr-program.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
17
docs/Gemfile
17
docs/Gemfile
|
|
@ -1,17 +0,0 @@
|
||||||
source "https://rubygems.org"
|
|
||||||
|
|
||||||
gem "github-pages", group: :jekyll_plugins
|
|
||||||
|
|
||||||
gem "tzinfo-data"
|
|
||||||
gem "wdm", "~> 0.1.0" if Gem.win_platform?
|
|
||||||
|
|
||||||
# If you have any plugins, put them here!
|
|
||||||
group :jekyll_plugins do
|
|
||||||
gem "jekyll-paginate"
|
|
||||||
gem "jekyll-sitemap"
|
|
||||||
gem "jekyll-gist"
|
|
||||||
gem "jekyll-feed"
|
|
||||||
gem "jemoji"
|
|
||||||
gem "jekyll-include-cache"
|
|
||||||
gem "jekyll-algolia"
|
|
||||||
end
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
# Develop override settings
|
|
||||||
|
|
||||||
url: http://localhost:4000
|
|
||||||
|
|
||||||
analytics:
|
|
||||||
provider: false
|
|
||||||
|
|
||||||
comments:
|
|
||||||
disqus:
|
|
||||||
shortname : "mmistakes-dev"
|
|
||||||
|
|
||||||
sass:
|
|
||||||
style: expanded
|
|
||||||
330
docs/_config.yml
330
docs/_config.yml
|
|
@ -1,330 +0,0 @@
|
||||||
# Welcome to Jekyll!
|
|
||||||
#
|
|
||||||
# This config file is meant for settings that affect your entire site, values
|
|
||||||
# which you are expected to set up once and rarely need to edit after that.
|
|
||||||
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
|
||||||
# `jekyll serve`. If you change this file, please restart the server process.
|
|
||||||
|
|
||||||
remote_theme : "mmistakes/minimal-mistakes@4.24.0"
|
|
||||||
|
|
||||||
minimal_mistakes_skin : "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
|
|
||||||
|
|
||||||
# Site Settings
|
|
||||||
locale : "en-US"
|
|
||||||
title : "Minimal Mistakes"
|
|
||||||
title_separator : "-"
|
|
||||||
subtitle : "A Jekyll theme"
|
|
||||||
name : &name "Michael Rose" # &name is a YAML anchor which can be *referenced later
|
|
||||||
description : &description "A flexible Jekyll theme for your blog or site with a minimalist aesthetic."
|
|
||||||
url : https://mmistakes.github.io # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
|
|
||||||
baseurl : "/minimal-mistakes" # the subpath of your site, e.g. "/blog"
|
|
||||||
repository : "mmistakes/minimal-mistakes"
|
|
||||||
teaser : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
|
|
||||||
logo : # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"
|
|
||||||
masthead_title : # overrides the website title displayed in the masthead, use " " for no title
|
|
||||||
# breadcrumbs : false # true, false (default)
|
|
||||||
words_per_minute : 200
|
|
||||||
comments:
|
|
||||||
provider : "false" # false (default), "disqus", "discourse", "facebook", "staticman_v2", "staticman", "utterances", "giscus", "custom"
|
|
||||||
disqus:
|
|
||||||
shortname :
|
|
||||||
discourse:
|
|
||||||
server : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.org
|
|
||||||
facebook:
|
|
||||||
# https://developers.facebook.com/docs/plugins/comments
|
|
||||||
appid :
|
|
||||||
num_posts : # 5 (default)
|
|
||||||
colorscheme : # "light" (default), "dark"
|
|
||||||
utterances:
|
|
||||||
theme : # "github-light" (default), "github-dark"
|
|
||||||
issue_term : # "pathname" (default)
|
|
||||||
giscus:
|
|
||||||
repo_id : # Shown during giscus setup at https://giscus.app
|
|
||||||
category_name : # Full text name of the category
|
|
||||||
category_id : # Shown during giscus setup at https://giscus.app
|
|
||||||
discussion_term : # "pathname" (default), "url", "title", "og:title"
|
|
||||||
reactions_enabled : # '1' for enabled (default), '0' for disabled
|
|
||||||
theme : # "light" (default), "dark", "dark_dimmed", "transparent_dark", "preferred_color_scheme"
|
|
||||||
reCaptcha:
|
|
||||||
siteKey : # "6LdRBykTAAAAAFB46MnIu6ixuxwu9W1ihFF8G60Q"
|
|
||||||
secret : # "PznnZGu3P6eTHRPLORniSq+J61YEf+A9zmColXDM5icqF49gbunH51B8+h+i2IvewpuxtA9TFoK68TuhUp/X3YKmmqhXasegHYabY50fqF9nJh9npWNhvITdkQHeaOqnFXUIwxfiEeUt49Yoa2waRR7a5LdRAP3SVM8hz0KIBT4="
|
|
||||||
|
|
||||||
atom_feed:
|
|
||||||
path : # blank (default) uses feed.xml
|
|
||||||
|
|
||||||
search : true # true, false (default)
|
|
||||||
search_full_content : true # true, false (default)
|
|
||||||
search_provider : algolia # lunr (default), algolia
|
|
||||||
algolia:
|
|
||||||
application_id : QB6HVGBSBA # YOUR_APPLICATION_ID
|
|
||||||
index_name : minimal_mistakes # YOUR_INDEX_NAME
|
|
||||||
search_only_api_key : 9d5014e5bbc77372547bce778dfa5663 # YOUR_SEARCH_ONLY_API_KEY
|
|
||||||
powered_by : true # true (default), false
|
|
||||||
files_to_exclude:
|
|
||||||
- _posts/2017-11-28-post-exclude-search.md
|
|
||||||
|
|
||||||
# SEO Related
|
|
||||||
google_site_verification : "UQj93ERU9zgECodaaXgVpkjrFn9UrDMEzVamacSoQ8Y" # Replace this with your ID, or delete
|
|
||||||
bing_site_verification :
|
|
||||||
naver_site_verification :
|
|
||||||
yandex_site_verification :
|
|
||||||
baidu_site_verification :
|
|
||||||
|
|
||||||
# Social Sharing
|
|
||||||
twitter:
|
|
||||||
username : &twitter "mmistakes"
|
|
||||||
facebook:
|
|
||||||
username : &facebook "michaelrose"
|
|
||||||
app_id :
|
|
||||||
publisher :
|
|
||||||
og_image : "/assets/images/site-logo.png" # Open Graph/Twitter default site image
|
|
||||||
# For specifying social profiles, used in _includes/seo.html
|
|
||||||
# - https://developers.google.com/structured-data/customize/social-profiles
|
|
||||||
social:
|
|
||||||
type : # Person or Organization (defaults to Person)
|
|
||||||
name : # If the user or organization name differs from the site's name
|
|
||||||
links: # An array of links to social media profiles
|
|
||||||
- "https://twitter.com/mmistakes"
|
|
||||||
- "https://www.facebook.com/michaelrose"
|
|
||||||
|
|
||||||
# Analytics
|
|
||||||
analytics:
|
|
||||||
provider : "google-universal" # false (default), "google", "google-universal", "google-gtag", "custom"
|
|
||||||
google:
|
|
||||||
tracking_id : "UA-2011187-3" # Replace this with your ID, or delete
|
|
||||||
anonymize_ip : true
|
|
||||||
|
|
||||||
|
|
||||||
# Site Author
|
|
||||||
author:
|
|
||||||
name : *name # *name is a YAML reference pointing to the &anchor earlier
|
|
||||||
avatar : "/assets/images/michael-rose.jpg"
|
|
||||||
bio : "Just another *boring*, *tattooed*, *time traveling*, *designer*."
|
|
||||||
location : "Buffalo, NY"
|
|
||||||
links:
|
|
||||||
- label: "Made Mistakes"
|
|
||||||
icon: "fas fa-fw fa-link"
|
|
||||||
url: "https://mademistakes.com"
|
|
||||||
- label: "Twitter"
|
|
||||||
icon: "fab fa-fw fa-twitter-square"
|
|
||||||
url: "https://twitter.com/mmistakes"
|
|
||||||
- label: "GitHub"
|
|
||||||
icon: "fab fa-fw fa-github"
|
|
||||||
url: "https://github.com/mmistakes"
|
|
||||||
- label: "Instagram"
|
|
||||||
icon: "fab fa-fw fa-instagram"
|
|
||||||
url: "https://instagram.com/mmistakes"
|
|
||||||
|
|
||||||
|
|
||||||
# Site Footer
|
|
||||||
footer:
|
|
||||||
links:
|
|
||||||
- label: "Twitter"
|
|
||||||
icon: "fab fa-fw fa-twitter-square"
|
|
||||||
url: "https://twitter.com/mmistakes"
|
|
||||||
- label: "GitHub"
|
|
||||||
icon: "fab fa-fw fa-github"
|
|
||||||
url: "https://github.com/mmistakes"
|
|
||||||
- label: "Instagram"
|
|
||||||
icon: "fab fa-fw fa-instagram"
|
|
||||||
url: "https://instagram.com/mmistakes"
|
|
||||||
|
|
||||||
|
|
||||||
# Reading Files
|
|
||||||
include:
|
|
||||||
- .htaccess
|
|
||||||
- _pages
|
|
||||||
exclude:
|
|
||||||
- "*.sublime-project"
|
|
||||||
- "*.sublime-workspace"
|
|
||||||
- vendor
|
|
||||||
- .asset-cache
|
|
||||||
- .bundle
|
|
||||||
- .jekyll-assets-cache
|
|
||||||
- .sass-cache
|
|
||||||
- assets/js/plugins
|
|
||||||
- assets/js/_main.js
|
|
||||||
- assets/js/vendor
|
|
||||||
- Capfile
|
|
||||||
- CHANGELOG
|
|
||||||
- config
|
|
||||||
- Gemfile
|
|
||||||
- Gruntfile.js
|
|
||||||
- gulpfile.js
|
|
||||||
- LICENSE
|
|
||||||
- log
|
|
||||||
- node_modules
|
|
||||||
- package.json
|
|
||||||
- Rakefile
|
|
||||||
- README
|
|
||||||
- tmp
|
|
||||||
keep_files:
|
|
||||||
- .git
|
|
||||||
- .svn
|
|
||||||
encoding: "utf-8"
|
|
||||||
markdown_ext: "markdown,mkdown,mkdn,mkd,md"
|
|
||||||
|
|
||||||
|
|
||||||
# Conversion
|
|
||||||
markdown: kramdown
|
|
||||||
highlighter: rouge
|
|
||||||
lsi: false
|
|
||||||
excerpt_separator: "\n\n"
|
|
||||||
incremental: false
|
|
||||||
|
|
||||||
|
|
||||||
# Markdown Processing
|
|
||||||
kramdown:
|
|
||||||
input: GFM
|
|
||||||
hard_wrap: false
|
|
||||||
auto_ids: true
|
|
||||||
footnote_nr: 1
|
|
||||||
entity_output: as_char
|
|
||||||
toc_levels: 1..6
|
|
||||||
smart_quotes: lsquo,rsquo,ldquo,rdquo
|
|
||||||
enable_coderay: false
|
|
||||||
|
|
||||||
|
|
||||||
# Collections
|
|
||||||
collections:
|
|
||||||
docs:
|
|
||||||
output: true
|
|
||||||
permalink: /:collection/:path/
|
|
||||||
recipes:
|
|
||||||
output: true
|
|
||||||
permalink: /:collection/:path/
|
|
||||||
pets:
|
|
||||||
output: true
|
|
||||||
permalink: /:collection/:path/
|
|
||||||
portfolio:
|
|
||||||
output: true
|
|
||||||
permalink: /:collection/:path/
|
|
||||||
|
|
||||||
|
|
||||||
# Defaults
|
|
||||||
defaults:
|
|
||||||
# _posts
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: posts
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: true
|
|
||||||
read_time: true
|
|
||||||
comments: true
|
|
||||||
share: true
|
|
||||||
related: true
|
|
||||||
# _pages
|
|
||||||
- scope:
|
|
||||||
path: "_pages"
|
|
||||||
type: pages
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: true
|
|
||||||
# _docs
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: docs
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
read_time: false
|
|
||||||
author_profile: false
|
|
||||||
share: false
|
|
||||||
comments: false
|
|
||||||
sidebar:
|
|
||||||
nav: "docs"
|
|
||||||
# _recipes
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: recipes
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: true
|
|
||||||
share: true
|
|
||||||
comments: true
|
|
||||||
# _pets
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: pets
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: true
|
|
||||||
share: true
|
|
||||||
comment: true
|
|
||||||
# _portfolio
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: portfolio
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: false
|
|
||||||
share: true
|
|
||||||
|
|
||||||
|
|
||||||
# Sass/SCSS
|
|
||||||
sass:
|
|
||||||
sass_dir: _sass
|
|
||||||
style: compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
|
|
||||||
|
|
||||||
|
|
||||||
# Outputting
|
|
||||||
permalink: /:categories/:title/
|
|
||||||
# paginate: 5 # amount of posts to show
|
|
||||||
# paginate_path: /page:num/
|
|
||||||
timezone: America/New_York # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
|
|
||||||
|
|
||||||
|
|
||||||
# Plugins (previously gems:)
|
|
||||||
plugins:
|
|
||||||
- jekyll-paginate
|
|
||||||
- jekyll-sitemap
|
|
||||||
- jekyll-gist
|
|
||||||
- jekyll-feed
|
|
||||||
- jemoji
|
|
||||||
- jekyll-include-cache
|
|
||||||
|
|
||||||
# mimic GitHub Pages with --safe
|
|
||||||
whitelist:
|
|
||||||
- jekyll-paginate
|
|
||||||
- jekyll-sitemap
|
|
||||||
- jekyll-gist
|
|
||||||
- jekyll-feed
|
|
||||||
- jemoji
|
|
||||||
- jekyll-include-cache
|
|
||||||
|
|
||||||
|
|
||||||
# Archives
|
|
||||||
# Type
|
|
||||||
# - GitHub Pages compatible archive pages built with Liquid ~> type: liquid (default)
|
|
||||||
# - Jekyll Archives plugin archive pages ~> type: jekyll-archives
|
|
||||||
# Path (examples)
|
|
||||||
# - Archive page should exist at path when using Liquid method or you can
|
|
||||||
# expect broken links (especially with breadcrumbs enabled)
|
|
||||||
# - <base_path>/tags/my-awesome-tag/index.html ~> path: /tags/
|
|
||||||
# - <base_path>/categories/my-awesome-category/index.html ~> path: /categories/
|
|
||||||
# - <base_path>/my-awesome-category/index.html ~> path: /
|
|
||||||
category_archive:
|
|
||||||
type: liquid
|
|
||||||
path: /categories/
|
|
||||||
tag_archive:
|
|
||||||
type: liquid
|
|
||||||
path: /tags/
|
|
||||||
# https://github.com/jekyll/jekyll-archives
|
|
||||||
# jekyll-archives:
|
|
||||||
# enabled:
|
|
||||||
# - categories
|
|
||||||
# - tags
|
|
||||||
# layouts:
|
|
||||||
# category: archive-taxonomy
|
|
||||||
# tag: archive-taxonomy
|
|
||||||
# permalinks:
|
|
||||||
# category: /categories/:name/
|
|
||||||
# tag: /tags/:name/
|
|
||||||
|
|
||||||
|
|
||||||
# HTML Compression
|
|
||||||
# - http://jch.penibelst.de/
|
|
||||||
compress_html:
|
|
||||||
clippings: all
|
|
||||||
ignore:
|
|
||||||
envs: development
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
# Authors
|
|
||||||
|
|
||||||
Billy Rick:
|
|
||||||
name : "Billy Rick"
|
|
||||||
bio : "What do you want, jewels? I am a very extravagant man."
|
|
||||||
avatar : "/assets/images/bio-photo-2.jpg"
|
|
||||||
links:
|
|
||||||
- label: "Email"
|
|
||||||
icon: "fas fa-fw fa-envelope-square"
|
|
||||||
url: "mailto:billyrick@rick.com"
|
|
||||||
- label: "Website"
|
|
||||||
icon: "fas fa-fw fa-link"
|
|
||||||
url: "https://thewhip.com"
|
|
||||||
- label: "Twitter"
|
|
||||||
icon: "fab fa-fw fa-twitter-square"
|
|
||||||
url: "https://twitter.com/extravagantman"
|
|
||||||
|
|
||||||
Cornelius Fiddlebone:
|
|
||||||
name : "Cornelius Fiddlebone"
|
|
||||||
bio : "I ordered what?"
|
|
||||||
avatar : "/assets/images/bio-photo.jpg"
|
|
||||||
links:
|
|
||||||
- label: "Email"
|
|
||||||
icon: "fas fa-fw fa-envelope-square"
|
|
||||||
url: "mailto:cornelius@thewhip.com"
|
|
||||||
- label: "Twitter"
|
|
||||||
icon: "fab fa-fw fa-twitter-square"
|
|
||||||
url: "https://twitter.com/rhymeswithsackit"
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: Cooooookies! Yum! (Thanks for this awesome them.. and... recipe..)
|
|
||||||
name: Markus
|
|
||||||
email: f6f9be6ae6e174661ea7c87a520ffef8
|
|
||||||
url: 'http://www.markusgiesen.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-09-14T16:23:32.840Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: "DELETE ME\r\n\r\njust trying out the comment system"
|
|
||||||
name: Donald Duck
|
|
||||||
email: cfedc848417c6ed0ce1eed35e741b26e
|
|
||||||
url: 'http://disney.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-11-03T22:51:07.174Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: dcd6d950-69e3-11e7-8901-815fa61174ff
|
|
||||||
message: >-
|
|
||||||
I'm exploring this theme. Apparently replies are not supported on this theme
|
|
||||||
(yet). Am I correct?
|
|
||||||
name: Harry
|
|
||||||
email: 58dfe5ef6aaf9bf9af5a0b17b52e6168
|
|
||||||
url: 'http://www.deepfriedbrainproject.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-07-16T05:01:44.574Z'
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
_id: faa63db0-6a31-11e7-8901-815fa61174ff
|
|
||||||
message: >-
|
|
||||||
@Harry - That's correct. See [this issue on
|
|
||||||
GitHub](https://github.com/mmistakes/minimal-mistakes/issues/803) for more
|
|
||||||
context as to why replies aren't added yet.
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-07-16T14:20:55.348Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: wonderful theme!
|
|
||||||
name: burner
|
|
||||||
email: 7327e2b38683d37634ada1dfa1d9f6e7
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-11-18T22:27:26.851Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: b3f80ef0-b7b9-11e6-9b81-0bc3350a75b6
|
|
||||||
message: Awesome....
|
|
||||||
name: Joko
|
|
||||||
email: e173d909aa244a3fbf81908da947ff94
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-12-01T11:31:30.231Z'
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
_id: 4218daa0-c95f-11e6-b347-77ada084d3be
|
|
||||||
message: Agreed
|
|
||||||
name: Bob
|
|
||||||
email: d73914c0f3c7350b9fbc0790e1fc0412
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-12-23T22:29:25.380Z'
|
|
||||||
data: '2016-12-23T22:29:25.380Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 0ef265d0-d1c8-11e6-b0a9-efc179b06d97
|
|
||||||
message: "Got a little problem here,\r\n\r\nIf I'm using Github pages, should I delete those Theme files?\r\n\r\nbecause after I `bundle update`, they didn't generated as expected, or I've misunderstanding.\r\n\r\nOr, I should follow the instruction in Installation:\r\n> To maintain a local Jekyll environment in sync with GitHub Pages replace the gem \"jekyll\" line with gem \"github-pages\", group: :jekyll_plugins and run the following:\r\n\r\nThanks : )"
|
|
||||||
name: Specialvict
|
|
||||||
email: e568a82db250c5130842f4fa42d5cacf
|
|
||||||
url: 'https://oaleeapp.info'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-01-03T15:19:46.590Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: e91c28e0-d1c8-11e6-b0a9-efc179b06d97
|
|
||||||
message: "@Specialvict - follow [these instructions](https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/#github-pages-compatible-method) in the docs. The theme gem install instructions don't apply to you since GitHub Pages doesn't support 3rd party gem themes yet.\r\n\r\nYou need to install the old way of forking the theme files."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-01-03T15:25:52.037Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: c4c722a0-18cc-11e8-81e7-ad1d9008e648
|
|
||||||
message: great theme!
|
|
||||||
name: vern
|
|
||||||
email: a6f5c444240028e515acd8e8808cd130
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-02-23T19:07:19.827Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: "\r\n\r\n“It's hard to be an artist. It's hard to be anything. It's hard to be.”"
|
|
||||||
name: Bill Murray
|
|
||||||
email: b0caa2a71f5066b3d90711c224578c21
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-11T19:33:25.928Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: "> “I never had seen Seinfeld, and they said, ‘Oh, it’s the last episode.’ And I said, ‘Oh, I’ll watch Seinfeld.’ And it was terrible.”\r\n>\r\n> *— From a 2014 interview with Howard Stern*"
|
|
||||||
name: Anonymous
|
|
||||||
email: 8c7e898f1b570760f834ecc03edf6b35
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-11T19:36:01.033Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: test
|
|
||||||
name: test
|
|
||||||
email: c028c75814332d38e088e43a252b7092
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-27T14:34:32.281Z'
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
_id: 29e7b010-eb45-11e7-a44f-935f90061bb7
|
|
||||||
message: >-
|
|
||||||
I am not able to figure out the staticman v2 comments. Please help. Even after
|
|
||||||
updating the end points also its throws me a message that there is an error
|
|
||||||
with submission
|
|
||||||
name: Krishna
|
|
||||||
email: 72e637576fd8729a323d648719daf631
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-12-27T20:33:15.155Z'
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
_id: e8aa5fc0-eb45-11e7-a44f-935f90061bb7
|
|
||||||
message: "Please open issue on GitHub and provide a link to a public repo.\r\n\r\n<https://github.com/mmistakes/minimal-mistakes>"
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-12-27T20:38:35.152Z'
|
|
||||||
timestamp: 1514407115
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: eb2fc040-c63d-11e8-a3e5-1590186c2f0d
|
|
||||||
message: >-
|
|
||||||
Took a while to get commenting working for me, but got it in the end. I used
|
|
||||||
the layout for the comments here on my own site. Very clean.
|
|
||||||
name: Bobby
|
|
||||||
email: 2f9024d5ac2e697176aab289c8c7ab76
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-10-02T12:23:08.031Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: edfee0e0-cec2-11e6-9fec-f15f86beaa6c
|
|
||||||
message: "How do I add a header image to the minimal mistakes theme? It's given in documentation to add a YAML front matter. But it's not given where to add it? \r\n<a href = \"https://mmistakes.github.io/minimal-mistakes/docs/layouts/\">Header documentation</a>"
|
|
||||||
name: shivam mitra
|
|
||||||
email: 38e378dc28daa978e5e7296723b3a65c
|
|
||||||
url: 'https://codophobia.github.io/'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-12-30T19:05:29.755Z'
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
_id: 73977ed0-cecb-11e6-9fec-f15f86beaa6c
|
|
||||||
message: >-
|
|
||||||
You add it to the YAML Front Matter of the post or page you want the header
|
|
||||||
on. It's not globally assigned. If you want the same header on every page you
|
|
||||||
could set it with [front matter
|
|
||||||
defaults](https://jekyllrb.com/docs/configuration/#front-matter-defaults).
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-12-30T20:06:29.940Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: Test message
|
|
||||||
name: Artur
|
|
||||||
email: 1cbebf1e64617de54d7858ffc6d96935
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-09-19T17:41:00.416Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: 'Cool, now how do I make a splash page my default home page?'
|
|
||||||
name: Brett
|
|
||||||
email: 374ca0d969bee21fb740b11da4182306
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-11-15T23:52:10.556Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: "Simple. Save it in your site root folder as `index.md` or you can also save it in `_pages` folder with whatever name you want and set `permalink: /` in its YAML Front Matter.\r\n\r\nIf you want to see an example check [`_pages/home.md`](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/home.md) used for this demo site."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-11-16T03:07:57.173Z'
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
_id: c6489fc0-dd06-11e7-be15-a3469e549c00
|
|
||||||
message: >-
|
|
||||||
Have you think about adding an "height"-limit feature to the tos, allowing
|
|
||||||
users to use very heigh images, and not struggling with custom CSS and
|
|
||||||
classes?:-)
|
|
||||||
name: Tobias Nordahl Kristensen
|
|
||||||
email: 86a84379052b26c55c912dc27ddd8647
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-12-09T17:31:23.259Z'
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
_id: 3db51ae0-df7b-11e7-8cc2-7d7640aa7c35
|
|
||||||
message: >-
|
|
||||||
Sorry for the noob question but what is the proper way to increase the image
|
|
||||||
containers height?
|
|
||||||
name: Marc
|
|
||||||
email: 23569aaeded782b63941771dc067ca28
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-12-12T20:30:08.613Z'
|
|
||||||
timestamp: 1513110608
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
_id: ec74b620-df7c-11e7-8cc2-7d7640aa7c35
|
|
||||||
message: "@Marc - you can set a height via CSS on `.page__hero--overlay`. It currently stretches to fit the text content inside of it, but if you want to make it taller just add something like `height: 500px;`.\r\n\r\nThis styling is in [`_sass/_page.scss`](https://github.com/mmistakes/minimal-mistakes/blob/4.8.0/_sass/minimal-mistakes/_page.scss#L136-L147).\r\n\r\nFor further context check [issue #542](https://github.com/mmistakes/minimal-mistakes/issues/542) on GitHub... probably a better place to ask/leave questions than the comments here."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-12-12T20:42:09.874Z'
|
|
||||||
timestamp: 1513111329
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
_id: 77e56d80-df7d-11e7-8cc2-7d7640aa7c35
|
|
||||||
message: "@Tobias - No, I have not thought about that. In general I'm not a fan of setting max-heights or widths as they fall apart in a responsive world. What might be 500px high on desktop could be smaller or larger on mobile (and everywhere in between).\r\n\r\nJavaScript could probably be used to determine some of that, but in this case I don't really see the benefit by adding more complexity."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-12-12T20:46:03.921Z'
|
|
||||||
timestamp: 1513111563
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 1dda62b0-69e8-11e7-8901-815fa61174ff
|
|
||||||
message: I don't see any related posts here.
|
|
||||||
name: Harry
|
|
||||||
email: 58dfe5ef6aaf9bf9af5a0b17b52e6168
|
|
||||||
url: 'http://www.deepfriedbrainproject.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-07-16T05:32:11.534Z'
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
_id: 417a69a0-6a32-11e7-8901-815fa61174ff
|
|
||||||
message: >-
|
|
||||||
@Harry It's a bug in how Jekyll handles related posts. See this [pull request
|
|
||||||
on GitHub](https://github.com/mmistakes/minimal-mistakes/pull/978) for the
|
|
||||||
fix. I haven't merged it yet for a variety of reasons.
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-07-16T14:22:54.082Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: d262cff0-174a-11e8-b61b-7b344215416b
|
|
||||||
message: "Hey. I'm a newbie to github pages and jekyll, but I am liking the setup and loving your theme!\r\n\r\nI have an image that I want to add to the sidebar, but it is a little bit too big. Is there some way I can resize the image in the sidebar YAML Front Matter without needing another copy of it in github? I know I could resize it myself if I was adding it to the body of the text, but I can't find a way to do it in the YAML Front Matter.\r\nThx"
|
|
||||||
name: Brynjar Smári
|
|
||||||
email: 07e1d805e3e0472d0d7762ac8f7b2496
|
|
||||||
url: 'https://binnisb.github.io'
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-02-21T21:04:36.879Z'
|
|
||||||
approved: false
|
|
||||||
title: Comment
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 51aa9540-174b-11e8-b61b-7b344215416b
|
|
||||||
message: "No there isn't a native way of doing this. The theme and Jekyll core have no ability to transform your assets.\r\n\r\nYou'll need to manually do it, use a task runner like Gulp or Grunt, or a Jekyll plugin to resize the image for you."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-02-21T21:08:10.409Z'
|
|
||||||
approved: false
|
|
||||||
title: Comment
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: d3bbd220-24f1-11e8-af65-d13c8029700e
|
|
||||||
message: "Hello Rose,\r\nCan you please add a feature for adding a custom sidebar on right hand side or let me know if it already exits or how can I implement it ? \r\nThanks"
|
|
||||||
name: Vipin Kumar
|
|
||||||
email: eeafc03a07852a239754fb68cca903b3
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-03-11T06:02:50.395Z'
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
_id: 9b722860-26dc-11e7-ba90-7b0064600583
|
|
||||||
message: >-
|
|
||||||
Is there a way to have a sidebar link jump to a particular part of the current
|
|
||||||
page? I have a long post that I want to let a viewer jump to different parts
|
|
||||||
without creating separate pages.
|
|
||||||
name: Josh
|
|
||||||
email: b1d267b408432e054759f6b16d4ff24b
|
|
||||||
url: 'https://stregerdev.github.io'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-04-21T21:51:00.487Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 23c51da0-26e0-11e7-ba90-7b0064600583
|
|
||||||
message: "@Josh Kramdown auto creates id's on all of your page headlines in a post which you could use for this purpose. If you look at the source on [this page](https://mmistakes.github.io/minimal-mistakes/markup/markup-html-tags-and-formatting/) you'll see what I mean. For example the first heading named **Header one**:\r\n\r\n```html\r\n<h1 id=\"header-one\">Header one</h1>\r\n```\r\n\r\nIf you added `url: \"#header-one\"` to your sidebar nav YAML it would jump to that anchor because of what is set on the `id` attribute.\r\n\r\nYou can also insert your own anchors with `<a name=\"whatever-you-want\">` and target the same way... `#whatever-you-want`.\r\n\r\nThere's also several JavaScript solutions out there to things like this too."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-04-21T22:16:17.691Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: bc6cbcd0-d675-11e7-920e-d53b2bdd726d
|
|
||||||
message: >-
|
|
||||||
it would be nice if the table of content was sticky so it scrolls down with
|
|
||||||
the user to ease navigation
|
|
||||||
name: jean
|
|
||||||
email: c569662e2d1490cd1d090450d8b5babc
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-12-01T08:58:03.485Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 10db9fa0-245c-11e8-8f62-99e42cdc233b
|
|
||||||
message: >-
|
|
||||||
+1 to jean. If only we can have toc in sidebar navigation so it sticks to the
|
|
||||||
page end.
|
|
||||||
name: Albus
|
|
||||||
email: b2162ec2c865decb4c337acee7694a4c
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-03-10T12:10:48.240Z'
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
_id: 254049d0-5e8d-11e8-bff3-cf20643057a6
|
|
||||||
message: "+1 to jean. \r\nFurthermore, for posts with no table to contents, it would be great to have a \"sticky\" post-specific sidebar with CTAs (like different 'shares' for the post - Twitter, Linkedin, FB, etc., #comments, post categories, post tags and subscribe - RSS, newsletter). \r\nHere is an example of such sidebar, despite non-sticky: https://www.feld.com/archives/2018/05/misty-ii-teardown.html\r\nAnd here is another example (with less CTAs, and also non-sticky): https://www.gatesnotes.com/Books/Leonardo-da-Vinci"
|
|
||||||
name: Mora
|
|
||||||
email: aead23df2f7cf50789a29b3d9b5a6d5f
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-05-23T13:28:14.886Z'
|
|
||||||
timestamp: 1527082094
|
|
||||||
tags:
|
|
||||||
- comment-subscription
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 497911d0-625a-11e8-afe5-3feaa7bb1d43
|
|
||||||
message: >-
|
|
||||||
Making a sticky TOC sidebar is quite easy. I have made a separate [blog
|
|
||||||
post](https://shaharkadmiel.github.io/Sticky-TOC-Sidebar/) about it.
|
|
||||||
name: Shahar Shani-Kadmiel
|
|
||||||
email: 2dd06215bf688e5bacc62f90b15105fc
|
|
||||||
url: 'https://shaharkadmiel.github.io'
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-05-28T09:34:15.862Z'
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
_id: acc930b0-6414-11e8-85f3-dd0128460d26
|
|
||||||
message: >-
|
|
||||||
Shahars's sticky sidebar is great on firefox, but doesn't work on Safari. I
|
|
||||||
haven't tested other browsers.
|
|
||||||
name: Matthew Dorey
|
|
||||||
email: 69b0700825ff5bf5df1d9d2d6582cc5e
|
|
||||||
url: 'https://mattischrome.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-05-30T14:21:00.032Z'
|
|
||||||
tags: []
|
|
||||||
timestamp: 1527690060
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 30e73630-6415-11e8-85f3-dd0128460d26
|
|
||||||
message: "@Matthew - that's likely due to vendor prefixes missing from the CSS. `position: sticky` isn't enough for webkit browsers like Safari.\r\n\r\n```css\r\nposition: sticky;\r\nposition: -webkit-sticky;\r\nposition: -moz-sticky;\r\nposition: -ms-sticky;\r\nposition: -o-sticky;\r\n```"
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-05-30T14:24:41.768Z'
|
|
||||||
tags: []
|
|
||||||
timestamp: 1527690281
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: feba5d40-d7e1-11e8-a9f1-05b1ca7b5c0d
|
|
||||||
message: >-
|
|
||||||
@Shahar not sure if this was added later but you can define toc_sticky: true
|
|
||||||
in the yaml.
|
|
||||||
name: Jair G
|
|
||||||
email: a39a2b0f5ac5fe0ebd38ac9950ab81b8
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-10-24T23:10:28.113Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: d66726e0-a4f4-11e8-9f86-137f5085ada7
|
|
||||||
message: "Hey man,\r\nI still feel I haven't conquered the usage of your site at times :D \r\nYou have pretty examples here, but is there a better way to see how they are implemented than to look it up on github?"
|
|
||||||
name: Richard Rich Steinmetz
|
|
||||||
email: c9b21f5e950c2a1f44b82b3be25c0a22
|
|
||||||
url: 'http://datagoodie.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-08-21T03:46:51.504Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: test
|
|
||||||
name: test
|
|
||||||
email: 01540d5a1cdb4d03edb23805df684762
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-24T12:05:22.844Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: test
|
|
||||||
name: ppmeng
|
|
||||||
email: b9c981f67166172c8804b5f9066a404a
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-25T17:37:17.780Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: "Here's a test comment with a Markdown code block:\r\n\r\n```scss\r\nh1, h2, h3, h4, h5, h6 {\r\n margin: 2em 0 0.5em;\r\n line-height: 1.2;\r\n font-family: $header-font-family;\r\n font-weight: bold;\r\n}\r\n```"
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-12T02:41:04.706Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: Is there a way to add custom syntax?
|
|
||||||
name: Anbu
|
|
||||||
email: 559d2c680d83bc6246b4483a8d9ad7fa
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-11-12T05:26:47.184Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 2d426a80-f8e7-11e6-9b83-8d0f1ec5628f
|
|
||||||
message: >-
|
|
||||||
It would be great to be able to easily switch between light and dark
|
|
||||||
highlighting.
|
|
||||||
name: looeee
|
|
||||||
email: 08df1cce15065b1b2547889573b76414
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-02-22T10:10:46.636Z'
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
_id: a5095860-9961-11e7-be3c-b52cab09c6a8
|
|
||||||
message: The code blocks look lovely ! Is there a way to use dark theme ?
|
|
||||||
name: Kanha
|
|
||||||
email: 266c737250ef78d52dee3db901ea9e1d
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-09-14T15:30:32.254Z'
|
|
||||||
timestamp: 1505403032
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
_id: 21f79d50-9962-11e7-be3c-b52cab09c6a8
|
|
||||||
message: "@Kanha - the theme includes skins now and there is a \"dark\" version you can use.\r\n\r\n<https://mmistakes.github.io/minimal-mistakes/docs/configuration/#dark-skin-dark>"
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-09-14T15:34:01.807Z'
|
|
||||||
timestamp: 1505403241
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
_id: b9622300-ef2e-11e7-8e1a-f72b5c3fcf79
|
|
||||||
message: >-
|
|
||||||
I'm planning to switch to your theme soon. Is it possible to impose some kind
|
|
||||||
of maximum-height constraint to fenced code blocks? If I'm posting 200 lines
|
|
||||||
of code, I'd rather have something like 20 or 30 lines visible with a
|
|
||||||
scrollbar...
|
|
||||||
name: MV10
|
|
||||||
email: ae371690b3859dd1515ccf3e9ddc2ec8
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-01-01T20:02:42.550Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: mm
|
|
||||||
name: mm
|
|
||||||
email: 9d0057d30e7a5e44f6378ea2c9c11f5d
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-24T18:49:19.649Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: This is a tst
|
|
||||||
name: GnCavalry
|
|
||||||
email: 5669e6e45ccab46a7384a8c8ab88edd2
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-09-02T03:15:37.068Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 5cbffb50-68be-11e7-89b4-79fbd5ed8e2b
|
|
||||||
message: >-
|
|
||||||
Can you explain how can I add
|
|
||||||
this(https://github.com/sachinchoolur/lightGallery) gallery to your theme ?
|
|
||||||
name: Albus
|
|
||||||
email: 73823e210b38f5b5fd2d6fba1970fed0
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-07-14T18:00:47.312Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 9b21c2a0-68c0-11e7-89b4-79fbd5ed8e2b
|
|
||||||
message: "@Albus - To start I would follow that repo's instructions. It should be as simple as adding they're JavaScript as instructed. I haven't used that lightbox gallery so don't have experience with it.\r\n\r\nMM ships with [MagnificPopup's lightbox gallery](http://dimsemenov.com/plugins/magnific-popup/) so you might have to rip that out to use lightGallery."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-07-14T18:16:50.776Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 54171710-4f8a-11e7-8049-afd01bcce0e9
|
|
||||||
message: "When I initially commented I appear to have clicked \r\nthe -Notify me when new comments are added- checkbox and now each time a comment is added I recieve \r\n4 emails with the same comment. Perhaps there \r\nis a way you are able to remove me from that service? Thank you!"
|
|
||||||
name: Valentina
|
|
||||||
email: 67028d1b5ddbe6a540aadbd93816c4b4
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-06-12T16:15:19.871Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 20cd7140-4f8c-11e7-8049-afd01bcce0e9
|
|
||||||
message: "@Valentina - Perhaps you're thinking of another site? There is no \"notify me when new comments are added\" checkbox.\r\n\r\nThat said I'm pretty sure there is an unsubscribe link in those emails you can click on to remove your email."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-06-12T16:28:12.765Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 9dff9930-2444-11e8-8f62-99e42cdc233b
|
|
||||||
message: Lol thank you
|
|
||||||
name: Casimiro Corrales
|
|
||||||
email: fe98e599bd24fb12fd2f42bb6d77d3a8
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-03-10T09:22:57.110Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 87276200-a47a-11e7-adb3-e700074bdbd8
|
|
||||||
message: "Thanks for an awesome theme. I've really enjoyed getting to use it.\r\n\r\nI'm not sure if this is the right place to ask but I'm trying to get a magnific popup working for a youtube iframe.\r\n\r\nNeither the [magnific youtube popup](http://dimsemenov.com/plugins/magnific-popup/) example nor the [code pen example](https://codepen.io/dimsemenov/pen/zjtbr) work for me.\r\n\r\nI added them directly to a markdown page with the javascript wrapped in script tags.\r\n\r\nI've tried adding the javascript as a file using head_scripts too.\r\n\r\nAny help much appreciated!"
|
|
||||||
name: siva
|
|
||||||
email: 3a5235fe982bc1289695aa54e7274b51
|
|
||||||
url: 'https://www.spiraltaiji.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-09-28T18:26:22.283Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: c23d9d40-a47b-11e7-adb3-e700074bdbd8
|
|
||||||
message: "@siva - I suspect if you open your web browser's web development tools and take a look at the console you'll see some script errors.\r\n\r\njQuery and the Magnific Popup scripts are loaded at the bottom of every page right before the [closing `</body>` tag](https://github.com/mmistakes/minimal-mistakes/blob/master/_layouts/default.html#L31). You're trying to configure MP in your post which is before the core scripts have a chance to load.\r\n\r\nYou'll need to add your custom scripts after those. Couple of ways you can do that depending on how you're using the theme.\r\n\r\n1. Edit `_layouts/default.html` and place after the scripts.html include.\r\n2. Edit [`_includes/scripts.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/scripts.html) and place after all scripts.\r\n3. Use the new [`footer_scripts` config](https://mmistakes.github.io/minimal-mistakes/docs/javascript/) to add your own custom script."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-09-28T18:35:10.917Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 80879fe0-a48f-11e7-988c-0da33b08c6af
|
|
||||||
message: "@michael - I went with option 3, adding main.min.js and then my own file to config.yml. Don't know much about javascript, but I've learnt a little now.\r\n\r\nThanks for the quick and detailed response."
|
|
||||||
name: siva
|
|
||||||
email: 3a5235fe982bc1289695aa54e7274b51
|
|
||||||
url: 'https://www.spiraltaiji.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-09-28T20:56:30.614Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: "This is a test comment with some **Markdown** sprinkled about for *testing purposes*.\r\n\r\n### Subheading in a comment? Madness!\r\n\r\nNam et risus nec ipsum efficitur facilisis. Aenean tincidunt dapibus odio, eget rutrum urna lacinia non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-11T19:03:24.929Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: '"How much wood would a woodchuck chuck if a woodchuck could chuck wood?"'
|
|
||||||
name: Jackalope
|
|
||||||
email: cba827e665ae179e1d1ae007a6c3c1ab
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-11T19:04:06.958Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: '"How much wood would a woodchuck chuck if a woodchuck could chuck wood?"'
|
|
||||||
name: Jackalope Duplicate
|
|
||||||
email: cba827e665ae179e1d1ae007a6c3c1ab
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-11T19:04:25.085Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: "Images can be added to a comment using Markdown like this\r\n\r\n```markdown\r\n\r\n```\r\n"
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-11T19:08:12.789Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: 'Wow, this is awesome'
|
|
||||||
name: kkangshawn
|
|
||||||
email: db92190b2ee6118786fd1f25dceb448c
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-21T23:49:06.270Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: Test
|
|
||||||
name: Test
|
|
||||||
email: b642b4217b34b1e8d3bd915fc65c4452
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-08-22T03:03:07.694Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: This is a test
|
|
||||||
name: TestName
|
|
||||||
email: 97dfebf4098c0f5c16bca61e2b76c373
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-09-02T03:23:18.756Z'
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
message: just testing as well
|
|
||||||
name: js
|
|
||||||
email: f349d4bc6fa472971f68bcccc04337f9
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2016-09-19T23:49:09.452Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: d073fc00-6cd7-11e7-a639-bb0964fd6b0b
|
|
||||||
message: 'Another test comment here :)'
|
|
||||||
name: Bob Whitelock
|
|
||||||
email: 38d95e43292a76cbefab8f8a823df64f
|
|
||||||
url: 'http://www.bobwhitelock.co.uk'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-07-19T23:13:03.331Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 6b96b520-a931-11e7-9a7d-c99de06bb99b
|
|
||||||
message: >-
|
|
||||||
Testing out leaving a comment with the new Staticman v2 endpoint and reCAPTCHA
|
|
||||||
enabled.
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2017-10-04T18:25:38.766Z'
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
_id: 44fe8b10-7733-11e8-a9b3-5b9ff79eceda
|
|
||||||
message: "Hey Michael,\r\nI was using your theme and found out that I cant use the collapsible markdown feature. Could you please let me know if there is any solution to this ? Eg code is below\r\n\r\n## collapsible markdown?\r\n\r\n<details><summary>CLICK ME</summary>\r\n<p>\r\n\r\n#### yes, even hidden code blocks!\r\n\r\n```python\r\nprint(\"hello world!\")\r\n```\r\n\r\n</p>\r\n</details>"
|
|
||||||
name: VIpin Kumar
|
|
||||||
email: eeafc03a07852a239754fb68cca903b3
|
|
||||||
url: ''
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-06-23T22:17:52.423Z'
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
_id: 5217d3c0-7737-11e8-a9b3-5b9ff79eceda
|
|
||||||
message: >-
|
|
||||||
You're mixing Markdown inside of HTML elements, which is why it's not working.
|
|
||||||
Look at Kramdown's documentation as they have ways of enabling it I believe.
|
|
||||||
name: Michael Rose
|
|
||||||
email: 1ce71bc10b86565464b612093d89707e
|
|
||||||
url: 'https://mademistakes.com'
|
|
||||||
hidden: ''
|
|
||||||
date: '2018-06-23T22:46:52.287Z'
|
|
||||||
|
|
@ -1,133 +0,0 @@
|
||||||
# example navigation
|
|
||||||
foo:
|
|
||||||
- title: "Parent Link 1"
|
|
||||||
url: /parent-1-page-url/
|
|
||||||
children:
|
|
||||||
- title: "Child Link 1"
|
|
||||||
url: /child-1-page-url/
|
|
||||||
- title: "Child Link 2"
|
|
||||||
url: /child-2-page-url/
|
|
||||||
- title: "Parent Link 2"
|
|
||||||
url: /parent-2-page-url/
|
|
||||||
children:
|
|
||||||
- title: "Child Link 1"
|
|
||||||
url: /child-1-page-url/
|
|
||||||
- title: "Child Link 2"
|
|
||||||
url: /child-2-page-url/
|
|
||||||
- title: "Child Link 3"
|
|
||||||
url: /child-3-page-url/
|
|
||||||
|
|
||||||
|
|
||||||
# main links
|
|
||||||
main:
|
|
||||||
- title: "Quick-Start Guide"
|
|
||||||
url: /docs/quick-start-guide/
|
|
||||||
- title: "About"
|
|
||||||
url: /about/
|
|
||||||
- title: "Sample Posts"
|
|
||||||
url: /year-archive/
|
|
||||||
- title: "Sample Collections"
|
|
||||||
url: /collection-archive/
|
|
||||||
- title: "Terms & Privacy Policy"
|
|
||||||
url: /terms/
|
|
||||||
|
|
||||||
|
|
||||||
# documentation links
|
|
||||||
docs:
|
|
||||||
- title: Getting Started
|
|
||||||
children:
|
|
||||||
- title: "Quick-Start Guide"
|
|
||||||
url: /docs/quick-start-guide/
|
|
||||||
- title: "Structure"
|
|
||||||
url: /docs/structure/
|
|
||||||
- title: "Installation"
|
|
||||||
url: /docs/installation/
|
|
||||||
- title: "Upgrading"
|
|
||||||
url: /docs/upgrading/
|
|
||||||
- title: Customization
|
|
||||||
children:
|
|
||||||
- title: "Configuration"
|
|
||||||
url: /docs/configuration/
|
|
||||||
- title: "Overriding Theme Defaults"
|
|
||||||
url: /docs/overriding-theme-defaults/
|
|
||||||
- title: "Navigation"
|
|
||||||
url: /docs/navigation/
|
|
||||||
- title: "UI Text"
|
|
||||||
url: /docs/ui-text/
|
|
||||||
- title: "Authors"
|
|
||||||
url: /docs/authors/
|
|
||||||
- title: "Layouts"
|
|
||||||
url: /docs/layouts/
|
|
||||||
- title: Content
|
|
||||||
children:
|
|
||||||
- title: "Working with Posts"
|
|
||||||
url: /docs/posts/
|
|
||||||
- title: "Working with Pages"
|
|
||||||
url: /docs/pages/
|
|
||||||
- title: "Working with Collections"
|
|
||||||
url: /docs/collections/
|
|
||||||
- title: "Helpers"
|
|
||||||
url: /docs/helpers/
|
|
||||||
- title: "Utility Classes"
|
|
||||||
url: /docs/utility-classes/
|
|
||||||
- title: Extras
|
|
||||||
children:
|
|
||||||
- title: "Stylesheets"
|
|
||||||
url: /docs/stylesheets/
|
|
||||||
- title: "JavaScript"
|
|
||||||
url: /docs/javascript/
|
|
||||||
- title: Meta
|
|
||||||
children:
|
|
||||||
- title: "History"
|
|
||||||
url: /docs/history/
|
|
||||||
- title: "Contributing"
|
|
||||||
url: /docs/contributing/
|
|
||||||
- title: "Old 2.2 Docs"
|
|
||||||
url: /docs/docs-2-2/
|
|
||||||
- title: "License"
|
|
||||||
url: /docs/license/
|
|
||||||
- title: "Terms & Privacy Policy"
|
|
||||||
url: /terms/
|
|
||||||
|
|
||||||
# sidebar navigation list sample
|
|
||||||
sidebar-sample:
|
|
||||||
- title: "Parent Page A"
|
|
||||||
children:
|
|
||||||
- title: "Child Page A1"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page A2"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page A3"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page A4"
|
|
||||||
url: /
|
|
||||||
- title: "Parent Page B"
|
|
||||||
children:
|
|
||||||
- title: "Child Page B1"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page B2"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page B3"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page B4"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page B5"
|
|
||||||
url: /
|
|
||||||
- title: "Parent Page C"
|
|
||||||
children:
|
|
||||||
- title: "Child Page C1"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page C2"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page C3"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page C4"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page C5"
|
|
||||||
url: /
|
|
||||||
- title: "Parent Page D"
|
|
||||||
children:
|
|
||||||
- title: "Child Page D1"
|
|
||||||
url: /
|
|
||||||
- title: "Child Page D2"
|
|
||||||
url: /
|
|
||||||
|
|
@ -1,218 +0,0 @@
|
||||||
---
|
|
||||||
title: "Quick-Start Guide"
|
|
||||||
permalink: /docs/quick-start-guide/
|
|
||||||
excerpt: "How to quickly install and setup Minimal Mistakes for use with GitHub Pages."
|
|
||||||
last_modified_at: 2021-06-07T08:48:05-04:00
|
|
||||||
redirect_from:
|
|
||||||
- /theme-setup/
|
|
||||||
toc: true
|
|
||||||
---
|
|
||||||
|
|
||||||
Minimal Mistakes has been developed as a [Gem-based theme](http://jekyllrb.com/docs/themes/) for easier use, and 100% compatible with GitHub Pages when used as a remote theme.
|
|
||||||
|
|
||||||
**If you enjoy this theme, please consider [sponsoring me](https://github.com/sponsors/mmistakes) to continue developing and maintaining it.**
|
|
||||||
|
|
||||||
[](https://www.buymeacoffee.com/mmistakes)
|
|
||||||
|
|
||||||
[](https://www.paypal.me/mmistakes)
|
|
||||||
{: style="margin-top: 0.5em;"}
|
|
||||||
|
|
||||||
## Installing the theme
|
|
||||||
|
|
||||||
If you're running Jekyll v3.7+ and self-hosting you can quickly install the theme as a Ruby gem.
|
|
||||||
|
|
||||||
[^structure]: See [**Structure** page]({{ "/docs/structure/" | relative_url }}) for a list of theme files and what they do.
|
|
||||||
|
|
||||||
**ProTip:** Be sure to remove `/docs` and `/test` if you forked Minimal Mistakes. These folders contain documentation and test pages for the theme and you probably don't want them littering up your repo.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
**Note:** The theme uses the [jekyll-include-cache](https://github.com/benbalter/jekyll-include-cache) plugin which will need to be installed in your `Gemfile` and added to the `plugins` array of `_config.yml`. Otherwise you'll throw `Unknown tag 'include_cached'` errors at build.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
### Gem-based method
|
|
||||||
|
|
||||||
With Gem-based themes, directories such as the `assets`, `_layouts`, `_includes`, and `_sass` are stored in the theme’s gem, hidden from your immediate view. This allows for easier installation and updating as you don't have to manage any of the theme files.
|
|
||||||
|
|
||||||
To install as a Gem-based theme:
|
|
||||||
|
|
||||||
1. Add the following to your `Gemfile`:
|
|
||||||
|
|
||||||
```ruby
|
|
||||||
gem "minimal-mistakes-jekyll"
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Fetch and update bundled gems by running the following [Bundler](https://bundler.io/) command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
bundle
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Set the `theme` in your project's Jekyll `_config.yml` file:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
theme: minimal-mistakes-jekyll
|
|
||||||
```
|
|
||||||
|
|
||||||
To update the theme run `bundle update`.
|
|
||||||
|
|
||||||
### Remote theme method
|
|
||||||
|
|
||||||
Remote themes are similar to Gem-based themes, but do not require `Gemfile` changes or whitelisting making them ideal for sites hosted with GitHub Pages.
|
|
||||||
|
|
||||||
To install as a remote theme:
|
|
||||||
|
|
||||||
1. Create/replace the contents of your `Gemfile` with the following:
|
|
||||||
|
|
||||||
```ruby
|
|
||||||
source "https://rubygems.org"
|
|
||||||
|
|
||||||
gem "github-pages", group: :jekyll_plugins
|
|
||||||
gem "jekyll-include-cache", group: :jekyll_plugins
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Add `jekyll-include-cache` to the `plugins` array of your `_config.yml`.
|
|
||||||
|
|
||||||
3. Fetch and update bundled gems by running the following [Bundler](https://bundler.io/) command:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
bundle
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Add `remote_theme: "mmistakes/minimal-mistakes@4.24.0"` to your `_config.yml` file. Remove any other `theme:` or `remote_theme:` entry.
|
|
||||||
|
|
||||||
You may also optionally specify a branch, [tag](https://github.com/mmistakes/minimal-mistakes/tags), or commit to use by appending an @ and the Git ref (e.g., `mmistakes/minimal-mistakes@4.9.0` or `mmistakes/minimal-mistakes@bbf3cbc5fd64a3e1885f3f99eb90ba92af84063d`). This is useful when rolling back to older versions of the theme. If you don't specify a Git ref, the latest on `master` will be used.
|
|
||||||
|
|
||||||
**Looking for an example?** Use the [Minimal Mistakes remote theme starter](https://github.com/mmistakes/mm-github-pages-starter/generate) for the quickest method of getting a GitHub Pages hosted site up and running. Generate a new repository from the starter, replace sample content with your own, and configure as needed.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Note:** Your Jekyll site should be viewable immediately at <http://USERNAME.github.io>. If it's not, you can force a rebuild by **Customizing Your Site** (see below for more details).
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
If you're hosting several Jekyll based sites under the same GitHub username you will have to use Project Pages instead of User Pages. Essentially you rename the repo to something other than **USERNAME.github.io** and create a `gh-pages` branch off of `master`. For more details on how to set things up check [GitHub's documentation](https://help.github.com/articles/user-organization-and-project-pages/).
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-gh-pages.gif' | relative_url }}" alt="creating a new branch on GitHub">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
You can also install the theme by copying all of the theme files[^structure] into your project.
|
|
||||||
|
|
||||||
To do so fork the [Minimal Mistakes theme](https://github.com/mmistakes/minimal-mistakes/fork), then rename the repo to **USERNAME.github.io** --- replacing **USERNAME** with your GitHub username.
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-theme-fork-repo.png' | relative_url }}" alt="fork Minimal Mistakes">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
**GitHub Pages Alternatives:** Looking to host your site for free and install/update the theme painlessly? [Netlify][netlify-jekyll], [GitLab Pages][gitlab-jekyll], and [Continuous Integration (CI) services][ci-jekyll] have you covered. In most cases all you need to do is connect your repository to them, create a simple configuration file, and install the theme following the [Ruby Gem Method](#ruby-gem-method) above.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
[netlify-jekyll]: https://www.netlify.com/blog/2015/10/28/a-step-by-step-guide-jekyll-3.0-on-netlify/
|
|
||||||
[gitlab-jekyll]: https://about.gitlab.com/2016/04/07/gitlab-pages-setup/
|
|
||||||
[ci-jekyll]: https://jekyllrb.com/docs/deployment/automated/#continuous-integration-service
|
|
||||||
|
|
||||||
### Remove the Unnecessary
|
|
||||||
|
|
||||||
If you forked or downloaded the `minimal-mistakes-jekyll` repo you can safely remove the following folders and files:
|
|
||||||
|
|
||||||
- `.editorconfig`
|
|
||||||
- `.gitattributes`
|
|
||||||
- `.github`
|
|
||||||
- `/docs`
|
|
||||||
- `/test`
|
|
||||||
- `CHANGELOG.md`
|
|
||||||
- `minimal-mistakes-jekyll.gemspec`
|
|
||||||
- `README.md`
|
|
||||||
- `screenshot-layouts.png`
|
|
||||||
- `screenshot.png`
|
|
||||||
|
|
||||||
**Note:** If forking the theme be sure to update `Gemfile` as well. The one found at the root of the project is for building the theme's Ruby gem and is missing dependencies. To properly setup a [`Gemfile`](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/Gemfile) with the theme, consult the "[Install Dependencies](https://mmistakes.github.io/minimal-mistakes/docs/installation/#install-dependencies)" section.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
## Setup Your Site
|
|
||||||
|
|
||||||
Depending on the path you took installing Minimal Mistakes you'll setup things a little differently.
|
|
||||||
|
|
||||||
**ProTip:** The source code and content files for this site can be found in the [`/docs` folder](https://github.com/mmistakes/minimal-mistakes/tree/master/docs) if you want to copy or learn from them.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
### Starting Fresh
|
|
||||||
|
|
||||||
Starting with an empty folder and `Gemfile` you'll need to copy or re-create this [default `_config.yml`](https://github.com/mmistakes/minimal-mistakes/blob/master/_config.yml) file. For a full explanation of every setting be sure to read the [**Configuration**]({{ "/docs/configuration/" | relative_url }}) section.
|
|
||||||
|
|
||||||
From `v4.5.0` onwards, Minimal Mistakes theme-gem comes bundled with the necessary data files for localization.
|
|
||||||
They will be picked up automatically if you have the [`jekyll-data`](https://github.com/ashmaroli/jekyll-data) plugin installed.
|
|
||||||
If you're hosting on GitHub Pages, you can copy the [`_data/ui-text.yml`][ui-text.yml] file into your repository for the localization feature to work.
|
|
||||||
|
|
||||||
You'll need to create and edit these data files to customize them:
|
|
||||||
|
|
||||||
- [`_data/ui-text.yml`][ui-text.yml] - UI text [documentation]({{ "/docs/ui-text/" | relative_url }})
|
|
||||||
- [`_data/navigation.yml`][navigation.yml] - navigation [documentation]({{ "/docs/navigation/" | relative_url }})
|
|
||||||
|
|
||||||
[ui-text.yml]: https://github.com/mmistakes/minimal-mistakes/blob/master/_data/ui-text.yml
|
|
||||||
[navigation.yml]: https://github.com/mmistakes/minimal-mistakes/blob/master/_data/navigation.yml
|
|
||||||
|
|
||||||
### Starting from `jekyll new`
|
|
||||||
|
|
||||||
Scaffolding out a site with the `jekyll new` command requires you to modify a few files that it creates.
|
|
||||||
|
|
||||||
Edit `_config.yml`. Then:
|
|
||||||
|
|
||||||
- Replace `<site root>/index.md` with a modified [Minimal Mistakes `index.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/index.html). Be sure to enable pagination if using the [`home` layout]({{ "/docs/layouts/#home-page" | relative_url }}) by adding the necessary lines to **_config.yml**.
|
|
||||||
- Change `layout: post` in `_posts/0000-00-00-welcome-to-jekyll.markdown` to `layout: single`.
|
|
||||||
- Remove `about.md`, or at the very least change `layout: page` to `layout: single` and remove references to `icon-github.html` (or [copy to your `_includes`](https://github.com/jekyll/minima/tree/master/_includes) if using it).
|
|
||||||
|
|
||||||
### Migrating to Gem Version
|
|
||||||
|
|
||||||
If you're migrating a site already using Minimal Mistakes and haven't customized any of the theme files things upgrading will be easier for you.
|
|
||||||
|
|
||||||
Start by removing the following folders and any files within them:
|
|
||||||
|
|
||||||
```terminal
|
|
||||||
├── _includes
|
|
||||||
├── _layouts
|
|
||||||
├── _sass
|
|
||||||
├── assets
|
|
||||||
| ├── css
|
|
||||||
| ├── fonts
|
|
||||||
| └── js
|
|
||||||
```
|
|
||||||
|
|
||||||
You won't need these anymore as they're bundled with the theme gem --- unless you intend to [override them](https://jekyllrb.com/docs/themes/#overriding-theme-defaults).
|
|
||||||
|
|
||||||
**Note:** When clearing out the `assets` folder be sure to leave any files you've added and need. This includes images, CSS, or JavaScript that aren't already [bundled in the theme](https://github.com/mmistakes/minimal-mistakes/tree/master/assets).
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
From `v4.5.0` onwards, the default language files are read-in automatically via the [`jekyll-data`](https://github.com/ashmaroli/jekyll-data) plugin if it's installed. For sites hosted with GitHub Pages, you still need to copy the [`_data/ui-text.yml`][ui-text.yml] file because the `jekyll-data` plugin [is unsupported on GitHub Pages](https://docs.github.com/en/github/working-with-github-pages/about-github-pages-and-jekyll#plugins).
|
|
||||||
|
|
||||||
If you customized any of these files leave them alone, and only remove the untouched ones. If done correctly your modified versions should [override](https://jekyllrb.com/docs/themes/#overriding-theme-defaults) the versions bundled with the theme and be used by Jekyll instead.
|
|
||||||
|
|
||||||
#### Update Gemfile
|
|
||||||
|
|
||||||
Replace `gem "github-pages` or `gem "jekyll"` with `gem "jekyll", "~> 3.5"`. You'll need the latest version of Jekyll[^update-jekyll] for Minimal Mistakes to work and load all of the theme's assets properly, this line forces Bundler to do that.
|
|
||||||
|
|
||||||
[^update-jekyll]: You could also run `bundle update jekyll` to update Jekyll.
|
|
||||||
|
|
||||||
Add the Minimal Mistakes theme gem:
|
|
||||||
|
|
||||||
```ruby
|
|
||||||
gem "minimal-mistakes-jekyll"
|
|
||||||
```
|
|
||||||
|
|
||||||
When finished your `Gemfile` should look something like this:
|
|
||||||
|
|
||||||
```ruby
|
|
||||||
source "https://rubygems.org"
|
|
||||||
|
|
||||||
gem "jekyll", "~> 3.7"
|
|
||||||
gem "minimal-mistakes-jekyll"
|
|
||||||
```
|
|
||||||
|
|
||||||
Then run `bundle update` and add `theme: minimal-mistakes-jekyll` to your `_config.yml`.
|
|
||||||
|
|
||||||
**v4 Breaking Change:** Paths for image headers, overlays, teasers, [galleries]({{ "/docs/helpers/#gallery" | relative_url }}), and [feature rows]({{ "/docs/helpers/#feature-row" | relative_url }}) have changed and now require a full path. Instead of just `image: filename.jpg` you'll need to use the full path eg: `image: /assets/images/filename.jpg`. The preferred location is now `/assets/images/` but can be placed elsewhere or externally hosted. This applies to image references in `_config.yml` and `author.yml` as well.
|
|
||||||
{: .notice--danger}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
That's it! If all goes well running `bundle exec jekyll serve` should spin-up your site.
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
---
|
|
||||||
title: "Structure"
|
|
||||||
permalink: /docs/structure/
|
|
||||||
excerpt: "How the theme is organized and what all of the files are for."
|
|
||||||
last_modified_at: 2018-03-20T15:19:22-04:00
|
|
||||||
---
|
|
||||||
|
|
||||||
Nothing clever here :wink:. Layouts, data files, and includes are all placed in their default locations. Stylesheets and scripts in `assets`, and a few development related files in the project's root directory.
|
|
||||||
|
|
||||||
**Please note:** If you installed Minimal Mistakes via the Ruby Gem method, theme files like `_layouts`, `_includes`, `_sass`, and `/assets/` will be missing. This is normal as they are bundled with the [`minimal-mistakes-jekyll`](https://rubygems.org/gems/minimal-mistakes-jekyll) Ruby gem. If you would like to make changes, create the files and Jekyll will prefer your local copy.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
```bash
|
|
||||||
minimal-mistakes
|
|
||||||
├── _data # data files for customizing the theme
|
|
||||||
| ├── navigation.yml # main navigation links
|
|
||||||
| └── ui-text.yml # text used throughout the theme's UI
|
|
||||||
├── _includes
|
|
||||||
| ├── analytics-providers # snippets for analytics (Google and custom)
|
|
||||||
| ├── comments-providers # snippets for comments
|
|
||||||
| ├── footer
|
|
||||||
| | └── custom.html # custom snippets to add to site footer
|
|
||||||
| ├── head
|
|
||||||
| | └── custom.html # custom snippets to add to site head
|
|
||||||
| ├── feature_row # feature row helper
|
|
||||||
| ├── gallery # image gallery helper
|
|
||||||
| ├── group-by-array # group by array helper for archives
|
|
||||||
| ├── nav_list # navigation list helper
|
|
||||||
| ├── toc # table of contents helper
|
|
||||||
| └── ...
|
|
||||||
├── _layouts
|
|
||||||
| ├── archive-taxonomy.html # tag/category archive for Jekyll Archives plugin
|
|
||||||
| ├── archive.html # archive base
|
|
||||||
| ├── categories.html # archive listing posts grouped by category
|
|
||||||
| ├── category.html # archive listing posts grouped by specific category
|
|
||||||
| ├── collection.html # archive listing documents in a specific collection
|
|
||||||
| ├── compress.html # compresses HTML in pure Liquid
|
|
||||||
| ├── default.html # base for all other layouts
|
|
||||||
| ├── home.html # home page
|
|
||||||
| ├── posts.html # archive listing posts grouped by year
|
|
||||||
| ├── search.html # search page
|
|
||||||
| ├── single.html # single document (post/page/etc)
|
|
||||||
| ├── tag.html # archive listing posts grouped by specific tag
|
|
||||||
| ├── tags.html # archive listing posts grouped by tags
|
|
||||||
| └── splash.html # splash page
|
|
||||||
├── _sass # SCSS partials
|
|
||||||
├── assets
|
|
||||||
| ├── css
|
|
||||||
| | └── main.scss # main stylesheet, loads SCSS partials from _sass
|
|
||||||
| ├── images # image assets for posts/pages/collections/etc.
|
|
||||||
| ├── js
|
|
||||||
| | ├── plugins # jQuery plugins
|
|
||||||
| | ├── vendor # vendor scripts
|
|
||||||
| | ├── _main.js # plugin settings and other scripts to load after jQuery
|
|
||||||
| | └── main.min.js # optimized and concatenated script file loaded before </body>
|
|
||||||
├── _config.yml # site configuration
|
|
||||||
├── Gemfile # gem file dependencies
|
|
||||||
├── index.html # paginated home page showing recent posts
|
|
||||||
└── package.json # NPM build scripts
|
|
||||||
```
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
---
|
|
||||||
title: "Installation"
|
|
||||||
permalink: /docs/installation/
|
|
||||||
excerpt: "Instructions for installing the theme for new and existing Jekyll based sites."
|
|
||||||
last_modified_at: 2019-08-20T21:36:18-04:00
|
|
||||||
toc: true
|
|
||||||
---
|
|
||||||
|
|
||||||
## Install the theme
|
|
||||||
|
|
||||||
**1.** For a **new site**, install the `minimal-mistakes-jekyll` gem, remote theme, or fork the Minimal Mistakes repo on GitHub following the steps outlined in the [*Quick-Start Guide*]({{ "/docs/quick-start-guide/" | relative_url }}).
|
|
||||||
|
|
||||||
If you plan to host with GitHub Pages be sure to properly setup [**jekyll-remote-theme**](https://github.com/benbalter/jekyll-remote-theme) as it is required for the theme to work properly.
|
|
||||||
|
|
||||||
**2.** For an **existing site** follow the steps outlined in the [*Quick-Start Guide*]({{ "/docs/quick-start-guide/" | relative_url }}). Then work through the guidelines below for migration and setup.
|
|
||||||
|
|
||||||
**3.** For those who'd like to make substantial edits to the theme, download as a ZIP file to customize.
|
|
||||||
|
|
||||||
[<i class="fas fa-download"></i> Download Minimal Mistakes Theme](https://github.com/mmistakes/minimal-mistakes/archive/master.zip){: .btn .btn--success}
|
|
||||||
|
|
||||||
**ProTip:** Be sure to remove `/docs` and `/test` if you forked or downloaded Minimal Mistakes. These folders contain documentation and test pages for the theme and you probably don't want them littering up in your repo.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
**Note:** The theme uses the [jekyll-include-cache](https://github.com/benbalter/jekyll-include-cache) plugin which will need to be installed in your `Gemfile` and added to the `plugins` array of `_config.yml`. Otherwise you'll throw `Unknown tag 'include_cached'` errors at build.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
## Theme migration
|
|
||||||
|
|
||||||
To move over any existing content you'll want to copy the contents of your `_posts` folder to the new site. Along with any pages, collections, data files, images, or other assets you may have.
|
|
||||||
|
|
||||||
Next you'll need to convert posts and pages to use the proper layouts and settings. In most cases you simply need to update `_config.yml` to your liking and set the correct `layout` in their YAML Front Matter.
|
|
||||||
|
|
||||||
[**Front Matter defaults**](https://jekyllrb.com/docs/configuration/#front-matter-defaults) are your friend and I encourage you to leverage them instead of setting a layout and other global options in each post/page's YAML Front Matter.
|
|
||||||
|
|
||||||
Posts can be configured to use the `single` layout --- with reading time, comments, social sharing links, and related posts enabled. Adding the following to `_config.yml` will set these defaults for all posts:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
defaults:
|
|
||||||
# _posts
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: posts
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
read_time: true
|
|
||||||
comments: true
|
|
||||||
share: true
|
|
||||||
related: true
|
|
||||||
```
|
|
||||||
|
|
||||||
**Post/Page Settings**: Be sure to read through the "Working with..." documentation to learn about all the options available to you. The theme has been designed to be flexible --- with numerous settings for each.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
## Install dependencies
|
|
||||||
|
|
||||||
If this is your first time using Jekyll be sure to read through the [official documentation](https://jekyllrb.com/docs/home/) before jumping in. This guide assumes you have Ruby v2 installed and a basic understanding of how Jekyll works.
|
|
||||||
|
|
||||||
To keep your sanity and better manage dependencies I strongly urge you to [install Bundler](http://bundler.io/) with `gem install bundler` and use the following `Gemfile`:
|
|
||||||
|
|
||||||
```ruby
|
|
||||||
source "https://rubygems.org"
|
|
||||||
|
|
||||||
# Hello! This is where you manage which Jekyll version is used to run.
|
|
||||||
# When you want to use a different version, change it below, save the
|
|
||||||
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
|
|
||||||
#
|
|
||||||
# bundle exec jekyll serve
|
|
||||||
#
|
|
||||||
# This will help ensure the proper Jekyll version is running.
|
|
||||||
# Happy Jekylling!
|
|
||||||
|
|
||||||
# gem "github-pages", group: :jekyll_plugins
|
|
||||||
|
|
||||||
# To upgrade, run `bundle update`.
|
|
||||||
|
|
||||||
gem "jekyll"
|
|
||||||
gem "minimal-mistakes-jekyll"
|
|
||||||
|
|
||||||
# The following plugins are automatically loaded by the theme-gem:
|
|
||||||
# gem "jekyll-paginate"
|
|
||||||
# gem "jekyll-sitemap"
|
|
||||||
# gem "jekyll-gist"
|
|
||||||
# gem "jekyll-feed"
|
|
||||||
# gem "jekyll-include-cache"
|
|
||||||
#
|
|
||||||
# If you have any other plugins, put them here!
|
|
||||||
# Cf. https://jekyllrb.com/docs/plugins/installation/
|
|
||||||
group :jekyll_plugins do
|
|
||||||
end
|
|
||||||
```
|
|
||||||
|
|
||||||
**ProTip:** To be bleeding edge install the latest (unreleased) version of Minimal Mistakes by adding this line to your `Gemfile`: `gem "minimal-mistakes-jekyll", :github => "mmistakes/minimal-mistakes"`.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
To maintain a local Jekyll environment in sync with GitHub Pages replace the `gem "jekyll"` line with `gem "github-pages", group: :jekyll_plugins` and run the following:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ bundle install
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** The [GitHub Pages gem](https://github.com/github/pages-gem) installs additional dependencies that may need to be added to your `Gemfile` if you decide to remove the `gem "github-pages"` eg. `jekyll-paginate`, `jekyll-sitemap`, `jekyll-feed`, `jekyll-include-cache`, etc.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-bundle-install.gif' | relative_url }}" alt="bundle install in Terminal window">
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
Depending on what gems you already have installed you may have to run `bundle update` to clear up any dependency issues. Bundler is usually pretty good at letting you know what gems need updating or have issues installing, to further investigate.
|
|
||||||
|
|
||||||
When using Bundler to manage gems you'll want to run Jekyll using `bundle exec jekyll serve` and `bundle exec jekyll build`.
|
|
||||||
|
|
||||||
Doing so executes the gem versions specified in `Gemfile.lock`. Sure you can test your luck with a naked `jekyll serve`, but I wouldn't suggest it. A lot of Jekyll errors originate from outdated or conflicting gems fighting with each other. So do yourself a favor and just use Bundler.
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
---
|
|
||||||
title: "Upgrading"
|
|
||||||
permalink: /docs/upgrading/
|
|
||||||
excerpt: "Instructions and suggestions for upgrading the theme."
|
|
||||||
last_modified_at: 2021-06-23T08:15:34-04:00
|
|
||||||
toc: true
|
|
||||||
---
|
|
||||||
|
|
||||||
If you're using the [Ruby Gem]({{ "/docs/quick-start-guide/#gem-based-method" | relative_url }}) or [remote theme]({{ "/docs/quick-start-guide/#remote-theme-method" | relative_url }}) versions of Minimal Mistakes, upgrading is fairly painless.
|
|
||||||
|
|
||||||
To check which version you are currently using, view the source of your built site and you should see something similar to:
|
|
||||||
|
|
||||||
```
|
|
||||||
<!--
|
|
||||||
Minimal Mistakes Jekyll Theme 4.24.0 by Michael Rose
|
|
||||||
Copyright 2013-2020 Michael Rose - mademistakes.com | @mmistakes
|
|
||||||
Free for personal and commercial use under the MIT license
|
|
||||||
https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE
|
|
||||||
-->
|
|
||||||
```
|
|
||||||
|
|
||||||
At the top of every `.html` file, `/assets/css/main.css`, and `/assets/js/main.min.js`.
|
|
||||||
|
|
||||||
## Ruby Gem
|
|
||||||
|
|
||||||
Simply run `bundle update` if you're using Bundler (have a `Gemfile`) or `gem update minimal-mistakes-jekyll` if you're not.
|
|
||||||
|
|
||||||
When using Bundler you can downgrade or lock the theme to a specific release ([tag](https://github.com/mmistakes/minimal-mistakes/tags)), branch, or commit. Instead of `gem "minimal-mistakes-jekyll"` you'd add the following to your `Gemfile`:
|
|
||||||
|
|
||||||
```ruby
|
|
||||||
gem "minimal-mistakes-jekyll", :git => "https://github.com/mmistakes/minimal-mistakes.git", :tag => "4.24.0"
|
|
||||||
```
|
|
||||||
|
|
||||||
For more information on [installing gems from git repositories](http://bundler.io/v1.16/guides/git.html) consult Bundler's documentation.
|
|
||||||
|
|
||||||
## Remote theme
|
|
||||||
|
|
||||||
When setting `remote_theme: "mmistakes/minimal-mistakes@4.24.0"` in your `_config.yml` you may also optionally specify a branch, [tag](https://github.com/mmistakes/minimal-mistakes/tags), or commit to use by appending an @ and the Git ref.
|
|
||||||
|
|
||||||
For example you can roll back to release 4.8.1 with `mmistakes/minimal-mistakes@4.8.1` or a specific commit with `mmistakes/minimal-mistakes@bbf3cbc5fd64a3e1885f3f99eb90ba92af84063d`). For a complete list of theme versions consult the [releases page](https://github.com/mmistakes/minimal-mistakes/releases).
|
|
||||||
|
|
||||||
To update the theme on GitHub Pages you'll need to push up a commit to force a rebuild. An empty commit works well if you don't have anything to push at the moment:
|
|
||||||
|
|
||||||
```terminal
|
|
||||||
git commit --allow-empty -m "Force rebuild of site"
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use Git
|
|
||||||
|
|
||||||
If you want to get the most out of the Jekyll + GitHub Pages workflow, then you'll need to utilize Git. To pull down theme updates you must first ensure there's an upstream remote. If you forked the theme's repo then you're likely good to go.
|
|
||||||
|
|
||||||
To double check, run `git remote -v` and verify that you can fetch from `origin https://github.com/{{ site.repository }}.git`.
|
|
||||||
|
|
||||||
To add it you can do the following:
|
|
||||||
|
|
||||||
```terminal
|
|
||||||
git remote add upstream https://github.com/{{ site.repository }}.git
|
|
||||||
```
|
|
||||||
|
|
||||||
### Pull down updates
|
|
||||||
|
|
||||||
Now you can pull any commits made to theme's `master` branch with:
|
|
||||||
|
|
||||||
```terminal
|
|
||||||
git pull upstream master
|
|
||||||
```
|
|
||||||
|
|
||||||
Depending on the amount of customizations you've made after forking, there's likely to be merge conflicts. Work through any conflicting files Git flags, staging the changes you wish to keep, and then commit them.
|
|
||||||
|
|
||||||
## Update files manually
|
|
||||||
|
|
||||||
Another way of dealing with updates is [downloading the theme](https://github.com/{{ site.repository }}/archive/master.zip) --- replacing your layouts, includes, and assets with the newer ones manually. To be sure that you don't miss any changes it's probably a good idea to review the theme's [commit history](https://github.com/{{ site.repository }}/commits/master) to see what's changed since.
|
|
||||||
|
|
||||||
Here's a quick checklist of the important folders/files you'll want to be mindful of:
|
|
||||||
|
|
||||||
| Name | |
|
|
||||||
| ---- | --- |
|
|
||||||
| `_layouts` | Replace all. Apply edits if you customized any layouts. |
|
|
||||||
| `_includes` | Replace all. Apply edits if you customized any includes. |
|
|
||||||
| `assets` | Replace all. Apply edits if you customized stylesheets or scripts. |
|
|
||||||
| `_sass` | Replace all. Apply edits if you customized Sass partials. |
|
|
||||||
| `_data/navigation.yml` | Safe to keep. Verify that there were no major structural changes or additions. |
|
|
||||||
| `_data/ui-text.yml` | Safe to keep. Verify that there were no major structural changes or additions. |
|
|
||||||
| `_config.yml` | Safe to keep. Verify that there were no major structural changes or additions. |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Note:** If you're not seeing the latest version, be sure to flush browser and CDN caches. Depending on your hosting environment older versions of `/assets/css/main.css`, `/assets/js/main.min.js`, or `*.html` may be cached.
|
|
||||||
{: .notice--info}
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,28 +0,0 @@
|
||||||
---
|
|
||||||
title: "Overriding Theme Defaults"
|
|
||||||
permalink: /docs/overriding-theme-defaults/
|
|
||||||
excerpt: "Instructions on how to customize the theme's default set of layouts, includes, and stylesheets when using the Ruby Gem version."
|
|
||||||
last_modified_at: 2020-07-27
|
|
||||||
---
|
|
||||||
|
|
||||||
When installing the theme as a Ruby Gem its layouts, includes, stylesheets, and other assets are all bundled in the `gem`. Meaning they're not easily visible in your project.
|
|
||||||
|
|
||||||
Each of these files can be modified, but you'll need to copy the default version into your project first. For example, if you wanted to modify the default [`single` layout](https://github.com/mmistakes/minimal-mistakes/blob/master/_layouts/single.html), you'd start by copying it to `_layouts/single.html`.
|
|
||||||
|
|
||||||
**ProTip**: To locate theme files, run `bundle info minimal-mistakes-jekyll`. Then copy the files you want to override from the returned path, to the appropriate folder in your project.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
Jekyll will use the files in your project first before falling back to the default versions of the theme. It exhibits this behavior with files in the following folders:
|
|
||||||
|
|
||||||
```
|
|
||||||
/assets
|
|
||||||
/_layouts
|
|
||||||
/_includes
|
|
||||||
/_sass
|
|
||||||
```
|
|
||||||
|
|
||||||
Additionally, from `v4.5.0` onwards the theme-gem will also exhibit above behavior for `/_data` via a plugin.
|
|
||||||
Consequently, the data files for UI Text and Navigation are also bundled within the theme-gem.
|
|
||||||
This doesn't apply if you're building your site on GitHub Pages, however.
|
|
||||||
|
|
||||||
For more information on customizing the theme's [stylesheets]({{ "/docs/stylesheets/" | relative_url }}) and [JavaScript]({{ "/docs/javascript/" | relative_url }}), see the appropriate pages.
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
---
|
|
||||||
title: "Navigation"
|
|
||||||
permalink: /docs/navigation/
|
|
||||||
excerpt: "Instructions on how to customize the main navigation and enabling breadcrumb links."
|
|
||||||
last_modified_at: 2018-03-20T15:59:40-04:00
|
|
||||||
toc: true
|
|
||||||
---
|
|
||||||
|
|
||||||
Customize site navigational links through a Jekyll data file.
|
|
||||||
|
|
||||||
## Masthead
|
|
||||||
|
|
||||||
The masthead links use a "priority plus" design pattern. Meaning, show as many navigation items that will fit horizontally with a toggle to reveal the rest.
|
|
||||||
|
|
||||||
To define these links add titles and URLs under the `main` key in `_data/navigation.yml`:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
main:
|
|
||||||
- title: "Quick-Start Guide"
|
|
||||||
url: /docs/quick-start-guide/
|
|
||||||
- title: "Posts"
|
|
||||||
url: /year-archive/
|
|
||||||
- title: "Categories"
|
|
||||||
url: /categories/
|
|
||||||
- title: "Tags"
|
|
||||||
url: /tags/
|
|
||||||
- title: "Pages"
|
|
||||||
url: /page-archive/
|
|
||||||
- title: "Collections"
|
|
||||||
url: /collection-archive/
|
|
||||||
- title: "External Link"
|
|
||||||
url: https://google.com
|
|
||||||
```
|
|
||||||
|
|
||||||
Which will give you a responsive masthead similar to this:
|
|
||||||
|
|
||||||
![priority plus masthead animation]({{ "/assets/images/mm-priority-plus-masthead.gif" | relative_url }})
|
|
||||||
|
|
||||||
Optionally, you can add a `description` key per title in the `main` key. This `description` will show up like a tooltip, when the user hovers over the link on a desktop browser.
|
|
||||||
|
|
||||||
**ProTip:** Put the most important links first so they're always visible and not hidden behind the **menu toggle**.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
## Breadcrumbs (beta)
|
|
||||||
|
|
||||||
Enable breadcrumb links to help visitors better navigate deep sites. Because of the fragile method of implementing them they don't always produce accurate links reliably. For best results:
|
|
||||||
|
|
||||||
1. Use a category based permalink structure e.g. `permalink: /:categories/:title/`
|
|
||||||
2. Manually create pages for each category or use a plugin like [jekyll-archives](https://github.com/jekyll/jekyll-archives) to auto-generate them. If these pages don't exist breadcrumb links to them will be broken.
|
|
||||||
|
|
||||||
![breadcrumb navigation example]({{ "/assets/images/mm-breadcrumbs-example.jpg" | relative_url }})
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
breadcrumbs: true # disabled by default
|
|
||||||
```
|
|
||||||
|
|
||||||
Breadcrumb start link text and separator character can both be changed in `_data/ui-text.yml`.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
breadcrumb_home_label : "Home"
|
|
||||||
breadcrumb_separator : "/"
|
|
||||||
```
|
|
||||||
|
|
||||||
For breadcrumbs that resemble something like `Start > Blog > My Awesome Post` you'd apply these settings:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
breadcrumb_home_label : "Start"
|
|
||||||
breadcrumb_separator : ">"
|
|
||||||
```
|
|
||||||
|
|
||||||
## Custom sidebar navigation menu
|
|
||||||
|
|
||||||
See the [**sidebars** documentation]({{ "/docs/layouts/#custom-sidebar-navigation-menu" | relative_url }}) for information on setting up a custom navigation menu.
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
---
|
|
||||||
title: "UI Text"
|
|
||||||
permalink: /docs/ui-text/
|
|
||||||
excerpt: "Text for customizing user interface elements found in the theme."
|
|
||||||
last_modified_at: 2021-05-11T10:22:55-04:00
|
|
||||||
---
|
|
||||||
|
|
||||||
Text for UI elements, `_layouts`, and `_includes` grouped together as a set of translation keys. This is by no means a full-on i18n solution, but it does help make customizing theme text a bit easier.
|
|
||||||
|
|
||||||
The English[^yaml-anchors] main keys in [`_data/ui-text.yml`](https://github.com/mmistakes/minimal-mistakes/blob/master/_data/ui-text.yml) are translated in the following languages:
|
|
||||||
|
|
||||||
- Arabic (عربي)
|
|
||||||
- Brazilian Portuguese (Português brasileiro)
|
|
||||||
- Catalan
|
|
||||||
- Chinese
|
|
||||||
- Danish
|
|
||||||
- Dutch
|
|
||||||
- Finnish
|
|
||||||
- French (Français)
|
|
||||||
- German (Deutsch)
|
|
||||||
- Greek
|
|
||||||
- Hebrew
|
|
||||||
- Hungarian
|
|
||||||
- Indonesian
|
|
||||||
- Irish (Gaeilge)
|
|
||||||
- Italian (Italiano)
|
|
||||||
- Kiswahili
|
|
||||||
- Korean
|
|
||||||
- Japanese
|
|
||||||
- Malayalam
|
|
||||||
- Myanmar (Burmese)
|
|
||||||
- Nepali (Nepalese)
|
|
||||||
- Norwegian (Norsk)
|
|
||||||
- Polish
|
|
||||||
- Persian (فارسی)
|
|
||||||
- Romanian
|
|
||||||
- Russian
|
|
||||||
- Slovak
|
|
||||||
- Spanish (Español)
|
|
||||||
- Swedish
|
|
||||||
- Thai
|
|
||||||
- Turkish (Türkçe)
|
|
||||||
- Vietnamese
|
|
||||||
|
|
||||||
If you're are interested in localizing them into other languages feel free to submit a pull request and I will be happy to look it over.
|
|
||||||
|
|
||||||
[^yaml-anchors]: `en-US`, and `en-GB` use [YAML anchors](http://www.yaml.org/spec/1.2/spec.html#id2785586) to reference the values in `en` as to not repeat them.
|
|
||||||
|
|
||||||
Many of the label based keys like `meta_label`, `categories_label`, `tags_label`, `share_on_label`, and `follow_label` can be left blank if you'd like to omit them from view. It really depends on you and if you want an even more minimal look to your site.
|
|
||||||
|
|
||||||
![UI text labels]({{ "/assets/images/mm-ui-text-labels.jpg" | relative_url }})
|
|
||||||
|
|
||||||
**Note:** The theme comes with localized text in English (`en`, `en-US`, `en-GB`). If you change `locale` in `_config.yml` to something else, most of the UI text will go blank. Be sure to add the corresponding locale key and translated text to `_data/ui-text.yml` to avoid this.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
---
|
|
||||||
title: "Authors"
|
|
||||||
permalink: /docs/authors/
|
|
||||||
excerpt: "Instructions and settings for working with multiple site authors."
|
|
||||||
last_modified_at: 2018-09-10T12:33:24-04:00
|
|
||||||
---
|
|
||||||
|
|
||||||
Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
|
|
||||||
|
|
||||||
To assign an author to a post or page that is different from the site author specified in `_config.yml`:
|
|
||||||
|
|
||||||
**Step 1.** Create `_data/authors.yml` and add authors using the following format. Any variables found under `author:` in `_config.yml` can be used (e.g. `name`, `bio`, `avatar`, author `links`, etc.).
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
# /_data/authors.yml
|
|
||||||
|
|
||||||
Billy Rick:
|
|
||||||
name : "Billy Rick"
|
|
||||||
bio : "What do you want, jewels? I am a very extravagant man."
|
|
||||||
avatar : "/assets/images/bio-photo-2.jpg"
|
|
||||||
links:
|
|
||||||
- label: "Email"
|
|
||||||
icon: "fas fa-fw fa-envelope-square"
|
|
||||||
url: "mailto:billyrick@rick.com"
|
|
||||||
- label: "Website"
|
|
||||||
icon: "fas fa-fw fa-link"
|
|
||||||
url: "https://thewhip.com"
|
|
||||||
- label: "Twitter"
|
|
||||||
icon: "fab fa-fw fa-twitter-square"
|
|
||||||
url: "https://twitter.com/extravagantman"
|
|
||||||
|
|
||||||
Cornelius Fiddlebone:
|
|
||||||
name : "Cornelius Fiddlebone"
|
|
||||||
bio : "I ordered what?"
|
|
||||||
avatar : "/assets/images/bio-photo.jpg"
|
|
||||||
links:
|
|
||||||
- label: "Email"
|
|
||||||
icon: "fas fa-fw fa-envelope-square"
|
|
||||||
url: "mailto:cornelius@thewhip.com"
|
|
||||||
- label: "Twitter"
|
|
||||||
icon: "fab fa-fw fa-twitter-square"
|
|
||||||
url: "https://twitter.com/rhymeswithsackit"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Step 2.** Assign one of the authors in `authors.yml` to a post or page you wish to override the `site.author` with.
|
|
||||||
|
|
||||||
Example: To assign `Billy Rick` as an author for a post the following YAML Front Matter would be applied:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
author: Billy Rick
|
|
||||||
```
|
|
||||||
|
|
@ -1,846 +0,0 @@
|
||||||
---
|
|
||||||
title: "Layouts"
|
|
||||||
permalink: /docs/layouts/
|
|
||||||
excerpt: "Descriptions and samples of all layouts included with the theme and how to best use them."
|
|
||||||
single_layout_gallery:
|
|
||||||
- image_path: /assets/images/mm-layout-single-header.png
|
|
||||||
alt: "single layout with header example"
|
|
||||||
- image_path: /assets/images/mm-layout-single-meta.png
|
|
||||||
alt: "single layout with comments and related posts"
|
|
||||||
last_modified_at: 2020-08-30T21:27:40-04:00
|
|
||||||
toc: true
|
|
||||||
toc_label: "Included Layouts"
|
|
||||||
toc_icon: "columns"
|
|
||||||
---
|
|
||||||
|
|
||||||
The bread and butter of any theme. Below you'll find the layouts included with Minimal Mistakes, what they look like and the type of content they've been built for.
|
|
||||||
|
|
||||||
## Default layout
|
|
||||||
|
|
||||||
The base layout all other layouts inherit from. There's not much to this layout apart from pulling in several `_includes`:
|
|
||||||
|
|
||||||
* `<head>` elements
|
|
||||||
* masthead navigation links
|
|
||||||
* {% raw %}`{{ content }}`{% endraw %}
|
|
||||||
* page footer
|
|
||||||
* scripts
|
|
||||||
|
|
||||||
**Note:** You won't ever assign this layout directly to a post or page. Instead all other layouts will build off of it by setting `layout: default` in their YAML Front Matter.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
### Layout based and user-defined classes
|
|
||||||
|
|
||||||
Class names corresponding to each layout are automatically added to the `<body>` element eg. `<body class="layout--single">`.
|
|
||||||
|
|
||||||
| layout | class name |
|
|
||||||
| ---------------- | --------------------------- |
|
|
||||||
| archive | `.layout--archive` |
|
|
||||||
| archive-taxonomy | `.layout--archive-taxonomy` |
|
|
||||||
| search | `.layout--search` |
|
|
||||||
| single | `.layout--single` |
|
|
||||||
| splash | `.layout--splash` |
|
|
||||||
| home | `.layout--home` |
|
|
||||||
| posts | `.layout--posts` |
|
|
||||||
| categories | `.layout--categories` |
|
|
||||||
| category | `.layout--category` |
|
|
||||||
| tags | `.layout--tags` |
|
|
||||||
| tag | `.layout--tag` |
|
|
||||||
|
|
||||||
Using YAML Front Matter you can also assign custom classes to target with CSS or JavaScript. Perfect for "art directed" posts or adding custom styles to specific pages.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
layout: splash
|
|
||||||
classes:
|
|
||||||
- landing
|
|
||||||
- dark-theme
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
Outputs:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<body class="layout--splash landing dark-theme">
|
|
||||||
```
|
|
||||||
|
|
||||||
### Canonical URL
|
|
||||||
|
|
||||||
You can set custom Canonical URL for a page by specifying `canonical_url` option in pages YAML Front Matter. For example, if you have the following:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
layout: single
|
|
||||||
title: Title of Your Post
|
|
||||||
canonical_url: "https://yoursite.com/custom-canonical-url"
|
|
||||||
```
|
|
||||||
|
|
||||||
This will generate the following in the `<head>` of your page:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<link rel="canonical" href="https://yoursite.com/custom-canonical-url" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## Compress layout
|
|
||||||
|
|
||||||
A Jekyll layout that compresses HTML in pure Liquid. To enable add `layout: compress` to `_layouts/default.html`.
|
|
||||||
|
|
||||||
**Note:** Has been known to mangle markup and break JavaScript... especially if inline `// comments` are present. For this reason it has been disabled by default.
|
|
||||||
{: .notice--danger}
|
|
||||||
|
|
||||||
* [Documentation](http://jch.penibelst.de/)
|
|
||||||
|
|
||||||
## Single layout
|
|
||||||
|
|
||||||
The layout you'll likely use the most --- sidebar and main content combo.
|
|
||||||
|
|
||||||
**Includes:**
|
|
||||||
|
|
||||||
* Optional header image with caption
|
|
||||||
* Optional header overlay (solid color/image) + text and optional "call to action" button
|
|
||||||
* Optional social sharing links module
|
|
||||||
* Optional comments module
|
|
||||||
* Optional related posts module
|
|
||||||
* Wide page variant
|
|
||||||
|
|
||||||
{% include gallery id="single_layout_gallery" caption="Image header and meta info examples for `single` layout" %}
|
|
||||||
|
|
||||||
Assign with `layout: single` , or better yet apply as a [Front Matter default]({{ "/docs/configuration/#front-matter-defaults" | relative_url }}) in `_config.yml`.
|
|
||||||
|
|
||||||
### Wide page
|
|
||||||
|
|
||||||
To expand the main content to the right, filling the space of what is normally occupied by the table of contents. Add the following to a post or page's YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
classes: wide
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** If the page contains a table of contents, it will no longer appear to the right. Instead it will be forced into the main content container directly following the page's title.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
### Table of contents
|
|
||||||
|
|
||||||
Auto-generated table of contents list for your posts and pages can be enabled by adding `toc: true` to the YAML Front Matter.
|
|
||||||
|
|
||||||
![table of contents example]({{ "/assets/images/mm-toc-helper-example.jpg" | relative_url }})
|
|
||||||
|
|
||||||
| Parameter | Required | Description | Default |
|
|
||||||
| --------- | -------- | ----------- | ------- |
|
|
||||||
| **toc** | Optional | Show table of contents. (boolean) | `false` |
|
|
||||||
| **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
|
|
||||||
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/v5/search?s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
|
|
||||||
| **toc_sticky** | Optional | Stick table of contents to top of screen. | `false` |
|
|
||||||
|
|
||||||
**TOC example with custom title and icon**
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
toc: true
|
|
||||||
toc_label: "My Table of Contents"
|
|
||||||
toc_icon: "cog"
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
{% capture notice-text %}
|
|
||||||
**Note:** You need to use contiguous levels of headings for the TOC to generate properly. For example:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
Good headings:
|
|
||||||
|
|
||||||
# Heading
|
|
||||||
## Heading
|
|
||||||
### Heading
|
|
||||||
### Heading
|
|
||||||
# Heading
|
|
||||||
## Heading
|
|
||||||
|
|
||||||
Bad headings:
|
|
||||||
|
|
||||||
# Heading
|
|
||||||
### Heading (skipped H2)
|
|
||||||
##### Heading (skipped H4)
|
|
||||||
```
|
|
||||||
{% endcapture %}
|
|
||||||
|
|
||||||
<div class="notice--warning">
|
|
||||||
{{ notice-text | markdownify }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
## Archive layout
|
|
||||||
|
|
||||||
Essentially the same as `single` with markup adjustments and some modules removed.
|
|
||||||
|
|
||||||
**Includes:**
|
|
||||||
|
|
||||||
* Optional header image with caption
|
|
||||||
* Optional header overlay (solid color/image) + text and optional "call to action" button
|
|
||||||
* List and grid views
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-layout-archive.png' | relative_url }}" alt="archive layout example">
|
|
||||||
<figcaption>List view example.</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
Below are sample archive pages you can easily drop into your project, taking care to rename `permalink`, `title`, or the filename to fit your site. Each is 100% compatible with GitHub Pages.
|
|
||||||
|
|
||||||
* [All Posts Grouped by Category -- List View][posts-categories]
|
|
||||||
* [All Posts Grouped by Tag -- List View][posts-tags]
|
|
||||||
* [All Posts Grouped by Year -- List View][posts-year]
|
|
||||||
* [All Posts Grouped by Collection -- List View][posts-collection]
|
|
||||||
* [Portfolio Collection -- Grid View][portfolio-collection]
|
|
||||||
|
|
||||||
[posts-categories]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/category-archive.md
|
|
||||||
[posts-tags]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/tag-archive.md
|
|
||||||
[posts-year]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/year-archive.md
|
|
||||||
[posts-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/collection-archive.html
|
|
||||||
[portfolio-collection]: https://github.com/{{ site.repository }}/blob/master/docs/_pages/portfolio-archive.md
|
|
||||||
|
|
||||||
Post and page excerpts are auto-generated by Jekyll which grabs the first paragraph of text. To override this text with something more specific use the following YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
excerpt: "A unique line of text to describe this post that will display in an archive listing and meta description with SEO benefits."
|
|
||||||
```
|
|
||||||
|
|
||||||
### Wide page
|
|
||||||
|
|
||||||
To expand the main content to the right, filling the space of what is normally occupied by the table of contents. Add the following to a post or page's YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
classes: wide
|
|
||||||
```
|
|
||||||
|
|
||||||
### Grid view
|
|
||||||
|
|
||||||
Adding `type=grid` to the `archive-single` helper will display archive posts in a 4 column grid. For example to create an archive displaying all documents in the portfolio collection:
|
|
||||||
|
|
||||||
Create a portfolio archive page (eg. `_pages/portfolio-archive.md`) with the following YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: Portfolio
|
|
||||||
layout: collection
|
|
||||||
permalink: /portfolio/
|
|
||||||
collection: portfolio
|
|
||||||
entries_layout: grid
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
Teaser images are assigned similar to header images using the following YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
teaser: path-to-teaser-image.jpg
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** More information on using this `_include` can be found under [**Helpers**]({{ "/docs/helpers/" | relative_url }}).
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
## Taxonomy archives
|
|
||||||
|
|
||||||
If you have the luxury of using Jekyll plugins, the creation of category and tag archives is greatly simplified. Simply enable support for the [`jekyll-archives`](https://github.com/jekyll/jekyll-archives) plugin with a few `_config.yml` settings as noted in the [**Configuration**]({{ "/docs/configuration/#archive-settings" | relative_url }}) section and you're good to go.
|
|
||||||
|
|
||||||
![archive taxonomy layout example]({{ "/assets/images/mm-layout-archive-taxonomy.png" | relative_url }})
|
|
||||||
|
|
||||||
If you're not using the `jekyll-archives` plugin then you need to create archive pages yourself. Sample taxonomy archives can be found by grabbing the Markdown sources below and adding to your site.
|
|
||||||
|
|
||||||
| Name | Layout | Example |
|
|
||||||
| -------------------- | ------ | ------ |
|
|
||||||
| [Posts Archive](https://mmistakes.github.io/minimal-mistakes/year-archive/) | `layout: posts` | [year-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/year-archive.md) |
|
|
||||||
| [Categories Archive](https://mmistakes.github.io/minimal-mistakes/categories/) | `layout: categories` | [category-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/category-archive.md) |
|
|
||||||
| [Category Archive](https://mmistakes.github.io/minimal-mistakes/categories/edge-case/) | `layout: category` | [edge-case.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/edge-case.md) |
|
|
||||||
| [Tags Archive](https://mmistakes.github.io/minimal-mistakes/tags/) | `layout: tags` | [tag-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/tag-archive.md) |
|
|
||||||
| [Tag Archive](https://mmistakes.github.io/minimal-mistakes/tags/markup/) | `layout: tag` | [markup.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/markup.md) |
|
|
||||||
| [Collection Archive](https://mmistakes.github.io/minimal-mistakes/recipes/) | `layout: collection` | [recipes-archive.md](https://github.com/mmistakes/minimal-mistakes/blob/master/docs/_pages/recipes-archive.md) |
|
|
||||||
|
|
||||||
**Note:** By default, documents are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
### `layout: posts`
|
|
||||||
|
|
||||||
This layout displays all posts grouped by the year they were published. It accommodates the same front matter as `layout: archive`.
|
|
||||||
|
|
||||||
### `layout: categories`
|
|
||||||
|
|
||||||
This layout displays all posts grouped category. It accommodates the same front matter as `layout: archive`.
|
|
||||||
|
|
||||||
### `layout: tags`
|
|
||||||
|
|
||||||
This layout displays all posts grouped by tag. It accommodates the same front matter as `layout: archive`.
|
|
||||||
|
|
||||||
### `layout: collection`
|
|
||||||
|
|
||||||
This layout displays all documents grouped by a specific collection. It accommodates the same front matter as `layout: archive` with the addition of the following:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
collection: # collection name
|
|
||||||
entries_layout: # list (default), grid
|
|
||||||
show_excerpts: # true (default), false
|
|
||||||
sort_by: # date (default), title or any metadata key added to the collection's documents
|
|
||||||
sort_order: # forward (default), reverse
|
|
||||||
```
|
|
||||||
|
|
||||||
To create a page showing all documents in the `recipes` collection you'd create `recipes.md` in the root of your project and add this front matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
title: Recipes
|
|
||||||
layout: collection
|
|
||||||
permalink: /recipes/
|
|
||||||
collection: recipes
|
|
||||||
```
|
|
||||||
|
|
||||||
If you want to sort the collection by title add `sort_by: title`. If you want reverse sorting, add `sort_order: reverse`.
|
|
||||||
You can also use any metadata key that is present in the documents. For example, you can add `number: <any number>` to your documents and use `number` as the sort key:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
sort_by: number
|
|
||||||
```
|
|
||||||
|
|
||||||
### `layout: category`
|
|
||||||
|
|
||||||
This layout displays all posts grouped by a specific category. It accommodates the same front matter as `layout: archive` with the addition of the following:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
taxonomy: # category name
|
|
||||||
entries_layout: # list (default), grid
|
|
||||||
```
|
|
||||||
|
|
||||||
To create a page showing all posts assigned to the category `foo` you'd create `foo.md` and add this front matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
title: Foo
|
|
||||||
layout: category
|
|
||||||
permalink: /categories/foo/
|
|
||||||
taxonomy: foo
|
|
||||||
```
|
|
||||||
|
|
||||||
### `layout: tag`
|
|
||||||
|
|
||||||
This layout displays all posts grouped by a specific tag. It accommodates the same front matter as `layout: archive` with the addition of the following:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
taxonomy: # tag name
|
|
||||||
entries_layout: # list (default), grid
|
|
||||||
```
|
|
||||||
|
|
||||||
To create a page showing all posts assigned to the tag `foo bar` you'd create `foo-bar.md` and add this front matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
title: Foo Bar
|
|
||||||
layout: tag
|
|
||||||
permalink: /tags/foo-bar/
|
|
||||||
taxonomy: foo bar
|
|
||||||
```
|
|
||||||
|
|
||||||
## Home page layout
|
|
||||||
|
|
||||||
A derivative archive page layout to be used as a simple home page. It is built to show a paginated list of recent posts based off of the [pagination settings]({{ "/docs/configuration/#paginate" | relative_url }}) in `_config.yml`.
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-home-post-pagination-example.jpg' | relative_url }}" alt="paginated home page example">
|
|
||||||
<figcaption>Example of a paginated home page showing 5 recent posts.</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
To use create `index.html` at the root of your project and add the following YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
layout: home
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
Then configure pagination in `_config.yml`.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
paginate: 5 # amount of posts to show
|
|
||||||
paginate_path: /page:num/
|
|
||||||
```
|
|
||||||
|
|
||||||
If you'd rather have a paginated page of posts reside in a subfolder instead of acting as your homepage make the following adjustments.
|
|
||||||
|
|
||||||
Create `index.html` in the location you'd like. For example if I wanted it to live at **/blog** I'd create `/blog/index.html` with `layout: home` in its YAML Front Matter.
|
|
||||||
|
|
||||||
Then adjust the `paginate_path` in **_config.yml** to match.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
paginate_path: /blog/page:num
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** Jekyll can only paginate a single `index.html` file. If you'd like to paginate more pages (e.g. category indexes) you'll need the help of a custom plugin. For more pagination related settings check the [**Configuration**]({{ "/docs/configuration/#paginate" | relative_url }}) section.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
**Note:** By default, documents are shown in a list view. To change to a grid view add `entries_layout: grid` to the page's front matter. To increase the width of the main container, giving more space to the grid items also add `classes: wide` to the home page's YAML Front Matter.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
## Splash page layout
|
|
||||||
|
|
||||||
For full-width landing pages that need a little something extra add `layout: splash` to the YAML Front Matter.
|
|
||||||
|
|
||||||
**Includes:**
|
|
||||||
|
|
||||||
* Optional header image with caption
|
|
||||||
* Optional header overlay (solid color/image) + text and optional "call to action" button
|
|
||||||
* Feature blocks (`left`, `center`, and `right` alignment options)
|
|
||||||
|
|
||||||
![splash page layout example]({{ "/assets/images/mm-layout-splash.png" | relative_url }})
|
|
||||||
|
|
||||||
Feature blocks can be assigned and aligned to the `left`, `right`, or `center` with a sprinkling of YAML. For full details on how to use the `feature_row` helper check the [**Content**]({{ "/docs/helpers/" | relative_url }}) section or review a [sample splash page](https://github.com/{{ site.repository }}/blob/master/docs/_pages/splash-page.md).
|
|
||||||
|
|
||||||
## Search page layout
|
|
||||||
|
|
||||||
A page with a search form. Add `layout: search` to the YAML Front Matter similar to [this example](https://github.com/mmistakes/minimal-mistakes/blob/master/test/_pages/search.md) on the test site.
|
|
||||||
|
|
||||||
![search page layout example]({{ "/assets/images/search-layout-example.png" | relative_url }})
|
|
||||||
|
|
||||||
**Note:** A page using the `layout: search` isn't compatible with the new [site search feature]({{ "/docs/configuration/#site-search" | relative_url }}) incorporated in the masthead.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
### Exclusions
|
|
||||||
|
|
||||||
If you would like to exclude specific pages/posts from the search index set the search flag to `false` in the YAML Front Matter for the page/post.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
search: false
|
|
||||||
```
|
|
||||||
|
|
||||||
**ProTip:** Add a link to this page in the masthead navigation.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Headers
|
|
||||||
|
|
||||||
To add some visual punch to a post or page, a large full-width header image can be included.
|
|
||||||
|
|
||||||
Be sure to resize your header images. `~1280px` is a good width if you aren't [responsively serving up images](http://alistapart.com/article/responsive-images-in-practice). Through the magic of CSS they will scale up or down to fill the container. If you go with something too small it will look like garbage when upscaled, and something too large will hurt performance.
|
|
||||||
|
|
||||||
**Please Note:** Paths for image headers, overlays, teasers, [galleries]({{ "/docs/helpers/#gallery" | relative_url }}), and [feature rows]({{ "/docs/helpers/#feature-row" | relative_url }}) have changed and require a full path. Instead of just `image: filename.jpg` you'll need to use the full path eg: `image: /assets/images/filename.jpg`. The preferred location is now `/assets/images/`, but can be placed elsewhere or external hosted. This all applies for image references in `_config.yml` and `author.yml` as well.
|
|
||||||
{: .notice--danger}
|
|
||||||
|
|
||||||
![single layout header image example]({{ "/assets/images/mm-single-header-example.jpg" | relative_url }})
|
|
||||||
|
|
||||||
Place your images in the `/assets/images/` folder and add the following YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
image: /assets/images/image-filename.jpg
|
|
||||||
```
|
|
||||||
|
|
||||||
For externally hosted images include the full image path instead of just the filename:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
image: http://some-site.com/assets/images/image.jpg
|
|
||||||
```
|
|
||||||
|
|
||||||
To provide a custom alt tag for screen readers:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
image: /assets/images/unsplash-image-1.jpg
|
|
||||||
image_description: "A description of the image"
|
|
||||||
```
|
|
||||||
|
|
||||||
To include a caption or attribution for the image:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
image: /assets/images/unsplash-image-1.jpg
|
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
|
||||||
```
|
|
||||||
|
|
||||||
**ProTip:** Captions written in Markdown are supported, so feel free to add links, or style text. Just be sure to wrap it in quotes.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
### Header overlay
|
|
||||||
|
|
||||||
To overlay text on top of a header image you have a few more options:
|
|
||||||
|
|
||||||
| Name | Description | Default |
|
|
||||||
| ---- | ----------- | ------- |
|
|
||||||
| **overlay_image** | Header image you'd like to overlay. Same rules as `header.image` from above. | |
|
|
||||||
| **overlay_filter** | Color/opacity to overlay on top of the header image. Example: `0.5`, `rgba(255, 0, 0, 0.5)` or [`linear-gradient`][mdn-linear-gradient]. |
|
|
||||||
| **show_overlay_excerpt** | Display excerpt in the overlay text | true |
|
|
||||||
| **excerpt** | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
|
|
||||||
| **tagline** | Overrides page excerpt. Useful when header text needs to be different from excerpt in archive views. | |
|
|
||||||
| **actions** | Call to action button links (`actions` array: `label` and `url`). More than one button link can be assigned. | |
|
|
||||||
| **cta_label** | Deprecated, use `actions` instead. Call to action button text label. | `more_label` in UI Text data file |
|
|
||||||
| **cta_url** | Deprecated, use `actions` instead. Call to action button URL. | |
|
|
||||||
|
|
||||||
[mdn-linear-gradient]: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()
|
|
||||||
|
|
||||||
With this YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
|
|
||||||
header:
|
|
||||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
|
||||||
actions:
|
|
||||||
- label: "More Info"
|
|
||||||
url: "https://unsplash.com"
|
|
||||||
```
|
|
||||||
|
|
||||||
You'd get a header image overlaid with text and a call to action button like this:
|
|
||||||
|
|
||||||
![single layout header overlay example]({{ "/assets/images/mm-single-header-overlay-example.jpg" | relative_url }})
|
|
||||||
|
|
||||||
You also have the option of specifying a solid background-color to use instead of an image.
|
|
||||||
|
|
||||||
![single layout header overlay with background fill]({{ "/assets/images/mm-single-header-overlay-fill-example.jpg" | relative_url }})
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
excerpt: "This post should display a **header with a solid background color**, if the theme supports it."
|
|
||||||
header:
|
|
||||||
overlay_color: "#333"
|
|
||||||
```
|
|
||||||
|
|
||||||
You can also specifying the opacity (between `0` and `1`) of a black overlay like so:
|
|
||||||
|
|
||||||
![transparent black overlay]({{ "/assets/images/mm-header-overlay-black-filter.jpg" | relative_url }})
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
excerpt: "This post should [...]"
|
|
||||||
header:
|
|
||||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
|
||||||
overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
|
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
|
||||||
actions:
|
|
||||||
- label: "Download"
|
|
||||||
url: "https://github.com"
|
|
||||||
```
|
|
||||||
|
|
||||||
Or if you feel colorful, use full rgba:
|
|
||||||
|
|
||||||
![transparent red overlay]({{ "/assets/images/mm-header-overlay-red-filter.jpg" | relative_url }})
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
excerpt: "This post should [...]"
|
|
||||||
header:
|
|
||||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
|
||||||
overlay_filter: rgba(255, 0, 0, 0.5)
|
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
|
||||||
actions:
|
|
||||||
- label: "Download"
|
|
||||||
url: "https://github.com"
|
|
||||||
```
|
|
||||||
|
|
||||||
Or if you want to do more fancy things, go all the way to [linear-gradient][mdn-linear-gradient]:
|
|
||||||
|
|
||||||
![transparent custom overlay]({{ "/assets/images/mm-header-overlay-custom-filter.jpg" | relative_url }})
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
excerpt: "This post should [...]"
|
|
||||||
header:
|
|
||||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
|
||||||
overlay_filter: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 255, 255, 0.5))
|
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
|
||||||
actions:
|
|
||||||
- label: "Download"
|
|
||||||
url: "https://github.com"
|
|
||||||
```
|
|
||||||
|
|
||||||
Multiple call to action button links can be assigned like this:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
|
|
||||||
header:
|
|
||||||
overlay_image: /assets/images/unsplash-image-1.jpg
|
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
|
||||||
actions:
|
|
||||||
- label: "Foo Button"
|
|
||||||
url: "#foo"
|
|
||||||
- label: "Bar Button"
|
|
||||||
url: "#bar"
|
|
||||||
```
|
|
||||||
|
|
||||||
### Open Graph & Twitter Card images
|
|
||||||
|
|
||||||
By default the large page header or overlay images are used for sharing previews. If you'd like to set this image to something else use `page.header.og_image` like:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
image: /assets/images/your-page-image.jpg
|
|
||||||
og_image: /assets/images/your-og-image.jpg
|
|
||||||
```
|
|
||||||
|
|
||||||
**ProTip:** `og_image` is useful for setting OpenGraph images on pages that don't have a header or overlay image.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Sidebars
|
|
||||||
|
|
||||||
The space to the left of a page's main content is blank by default, but has the ability to show an author profile (name, short biography, social media links), custom content, or both.
|
|
||||||
|
|
||||||
### Author profile
|
|
||||||
|
|
||||||
Add `author_profile: true` to a post or page's YAML Front Matter.
|
|
||||||
|
|
||||||
![single layout example]({{ "/assets/images/mm-layout-single.png" | relative_url }})
|
|
||||||
|
|
||||||
Better yet, enable it with Front Matter Defaults set in `_config.yml`.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
defaults:
|
|
||||||
# _posts
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: posts
|
|
||||||
values:
|
|
||||||
author_profile: true
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** To disable the author sidebar profile for a specific post or page, add `author_profile: false` to the YAML Front Matter instead.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
To assign more author links, add to the `author.links` array in [`_config.yml`]({{ "/docs/configuration/" | relative_url }}) link so. Any of [Font Awesome's icons](https://fontawesome.com/v5/search) are available for use.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
author:
|
|
||||||
name: "Your Name"
|
|
||||||
avatar: "/assets/images/bio-photo.jpg"
|
|
||||||
bio: "I am an **amazing** person." # Note: Markdown is allowed
|
|
||||||
location: "Somewhere"
|
|
||||||
links:
|
|
||||||
- label: "Made Mistakes"
|
|
||||||
icon: "fas fa-fw fa-link"
|
|
||||||
url: "https://mademistakes.com"
|
|
||||||
- label: "Twitter"
|
|
||||||
icon: "fab fa-fw fa-twitter-square"
|
|
||||||
url: "https://twitter.com/mmistakes"
|
|
||||||
- label: "GitHub"
|
|
||||||
icon: "fab fa-fw fa-github"
|
|
||||||
url: "https://github.com/mmistakes"
|
|
||||||
- label: "Instagram"
|
|
||||||
icon: "fab fa-fw fa-instagram"
|
|
||||||
url: "https://instagram.com/mmistakes"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** Depending on the icon and theme skin used, colors may not be used. Popular social networks like Twitter, Facebook, Instagram, etc. have the appropriate brand color set in CSS. To change or add missing colors edit [`_utilities.scss`](https://github.com/mmistakes/minimal-mistakes/blob/master/_sass/minimal-mistakes/_utilities.scss) in `<site root>/_sass/minimal-mistakes/`.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
For example, to color a Reddit icon, simply add a `color` declaration and the corresponding hex code like so:
|
|
||||||
|
|
||||||
```scss
|
|
||||||
.social-icons {
|
|
||||||
.fa-reddit {
|
|
||||||
color: #ff4500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
![Reddit link in author profile with color]({{ "/assets/images/mm-author-profile-reddit-color.png" | relative_url }})
|
|
||||||
|
|
||||||
### Custom sidebar content
|
|
||||||
|
|
||||||
Blocks of content can be added by using the following under `sidebar`:
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ---- | ----------- |
|
|
||||||
| **title** | Title or heading. |
|
|
||||||
| **image** | Image path placed in `/images/` folder or an external URL. |
|
|
||||||
| **image_alt** | Alternate description for image. |
|
|
||||||
| **text** | Text. Markdown is allowed. |
|
|
||||||
|
|
||||||
Multiple blocks can also be added by following the example below:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
sidebar:
|
|
||||||
- title: "Title"
|
|
||||||
image: http://placehold.it/350x250
|
|
||||||
image_alt: "image"
|
|
||||||
text: "Some text here."
|
|
||||||
- title: "Another Title"
|
|
||||||
text: "More text here."
|
|
||||||
```
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-custom-sidebar-example.jpg' | relative_url }}" alt="custom sidebar content example">
|
|
||||||
<figcaption>Example of custom sidebar content added as YAML Front Matter.</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
**Note:** Custom sidebar content added to a post or page's YAML Front Matter will appear below the author profile if enabled with `author_profile: true`.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
### Custom sidebar navigation menu
|
|
||||||
|
|
||||||
To create a sidebar menu[^sidebar-menu] similar to the one found in the theme's documentation pages you'll need to modify a `_data` file and some YAML Front Matter.
|
|
||||||
|
|
||||||
[^sidebar-menu]: Sidebar menu supports 1 level of nested links.
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-custom-sidebar-nav.jpg' | relative_url }}" alt="sidebar navigation example">
|
|
||||||
<figcaption>Custom sidebar navigation menu example.</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
To start, add a new key to `_data/navigation.yml`. This will be referenced later via YAML Front Matter so keep it short and memorable. In the case of the theme's documentation menu I used `docs`.
|
|
||||||
|
|
||||||
**Sample sidebar menu links:**
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
docs:
|
|
||||||
- title: Getting Started
|
|
||||||
children:
|
|
||||||
- title: "Quick-Start Guide"
|
|
||||||
url: /docs/quick-start-guide/
|
|
||||||
- title: "Structure"
|
|
||||||
url: /docs/structure/
|
|
||||||
- title: "Installation"
|
|
||||||
url: /docs/installation/
|
|
||||||
- title: "Upgrading"
|
|
||||||
url: /docs/upgrading/
|
|
||||||
|
|
||||||
- title: Customization
|
|
||||||
children:
|
|
||||||
- title: "Configuration"
|
|
||||||
url: /docs/configuration/
|
|
||||||
- title: "Navigation"
|
|
||||||
url: /docs/navigation/
|
|
||||||
- title: "UI Text"
|
|
||||||
url: /docs/ui-text/
|
|
||||||
- title: "Authors"
|
|
||||||
url: /docs/authors/
|
|
||||||
- title: "Layouts"
|
|
||||||
url: /docs/layouts/
|
|
||||||
|
|
||||||
- title: Content
|
|
||||||
children:
|
|
||||||
- title: "Working with Posts"
|
|
||||||
url: /docs/posts/
|
|
||||||
- title: "Working with Pages"
|
|
||||||
url: /docs/pages/
|
|
||||||
- title: "Working with Collections"
|
|
||||||
url: /docs/collections/
|
|
||||||
- title: "Helpers"
|
|
||||||
url: /docs/helpers/
|
|
||||||
- title: "Utility Classes"
|
|
||||||
url: /docs/utility-classes/
|
|
||||||
|
|
||||||
- title: Extras
|
|
||||||
children:
|
|
||||||
- title: "Stylesheets"
|
|
||||||
url: /docs/stylesheets/
|
|
||||||
- title: "JavaScript"
|
|
||||||
url: /docs/javascript/
|
|
||||||
```
|
|
||||||
|
|
||||||
Now you can pull these links into any page by adding the following YAML Front Matter.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
sidebar:
|
|
||||||
nav: "docs"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** `nav: "docs"` references the `docs` key in `_data/navigation.yml` so make sure they match.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
If you're adding a sidebar navigation menu to several pages the use of Front Matter Defaults is a better option. You can define them in `_config.yml` to avoid adding it to every page or post.
|
|
||||||
|
|
||||||
**Sample sidebar nav default:**
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
defaults:
|
|
||||||
# _docs
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: docs
|
|
||||||
values:
|
|
||||||
sidebar:
|
|
||||||
nav: "docs"
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Social sharing links
|
|
||||||
|
|
||||||
The `single` layout has an option to enable social links at the bottom of posts for sharing on Twitter, Facebook, and LinkedIn. Similar to the links found in the author sidebar, the theme ships with defaults for the most common social networks.
|
|
||||||
|
|
||||||
![default social share link buttons]({{ "/assets/images/mm-social-share-links-default.png" | relative_url }})
|
|
||||||
|
|
||||||
To enable these links add `share: true` to a post or page's YAML Front Matter or use a [default](https://jekyllrb.com/docs/configuration/#front-matter-defaults) in your `_config.yml` to apply more globally.
|
|
||||||
|
|
||||||
If you'd like to add, remove, or change the order of these default links you can do so by editing [`_includes/social-share.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/social-share.html).
|
|
||||||
|
|
||||||
Let's say you wanted to replace the LinkedIn button with a Reddit one. Simply replace the HTML with the following:
|
|
||||||
|
|
||||||
```html
|
|
||||||
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | absolute_url | url_encode }}&title={{ page.title }}" class="btn" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
The important parts to change are:
|
|
||||||
|
|
||||||
1. Share point URL *eg. `https://www.reddit.com/submit?url=`
|
|
||||||
2. Link `title`
|
|
||||||
3. [Font Awesome icon](http://fontawesome.io/icons/) (`fa-` class)
|
|
||||||
4. Link label
|
|
||||||
|
|
||||||
![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-gs.png" | relative_url }})
|
|
||||||
|
|
||||||
To change the color of the button use one of the built in [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}). Or you can create a new button class to match whatever color you want.
|
|
||||||
|
|
||||||
Under the `$social` color map in `assets/_scss/_buttons.scss` simply add a name (this will be appened to `btn--`) that matches the new button class. In our case `reddit` ~> `.btn--reddit`.
|
|
||||||
|
|
||||||
```scss
|
|
||||||
$social:
|
|
||||||
(facebook, $facebook-color),
|
|
||||||
(twitter, $twitter-color),
|
|
||||||
(linkedin, $linkedin-color),
|
|
||||||
(reddit, #ff4500);
|
|
||||||
```
|
|
||||||
|
|
||||||
**ProTip:** For bonus points you can add it as a Sass `$variable` that you set in `_variables.scss` like the other ["brand" colors](http://brandcolors.net/).
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
Add the new `.btn--reddit` class to the `<a>` element from earlier, [compile `main.css`]({{ "/docs/stylesheets/" | relative_url }}) and away you go.
|
|
||||||
|
|
||||||
```html
|
|
||||||
{% raw %}<a href="https://www.reddit.com/submit?url={{ page.url | relative_url }}&title={{ page.title }}" class="btn btn--reddit" title="{{ site.data.ui-text[site.locale].share_on_label }} Reddit"><i class="fab fa-fw fa-reddit" aria-hidden="true"></i><span> Reddit</span></a>{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
![Reddit social share link button]({{ "/assets/images/mm-social-share-links-reddit-color.png" | relative_url }})
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Custom head and footer
|
|
||||||
|
|
||||||
The `default` layout includes a number of custom templates, which provide ways for you to directly add content to all your pages.
|
|
||||||
|
|
||||||
### Head
|
|
||||||
|
|
||||||
`_includes/head/custom.html` is included at the end of the `<head>` tag. An example use of this include is to add custom CSS per page:
|
|
||||||
|
|
||||||
Add some Liquid tags for the new configuration to `_includes/head/custom.html`.
|
|
||||||
{% raw %}```html
|
|
||||||
{% if page.page_css %}
|
|
||||||
{% for stylesheet in page.page_css %}
|
|
||||||
<link rel="stylesheet" href="{{ stylesheet | relative_url }}">
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
```{% endraw %}
|
|
||||||
|
|
||||||
Next, add `page_css` to any page's YAML Front Matter to have your CSS loaded for that page.
|
|
||||||
```yaml
|
|
||||||
page_css:
|
|
||||||
- /path/to/your/custom.css
|
|
||||||
```
|
|
||||||
|
|
||||||
### Footer
|
|
||||||
|
|
||||||
`_includes/footer/custom.html` is included at the beginning of the `<footer>` tag. An example use of this include is to add custom JavaScript per page:
|
|
||||||
|
|
||||||
Add some Liquid tags for the new configuration to `_includes/footer/custom.html`.
|
|
||||||
{% raw %}```html
|
|
||||||
{% if page.page_js %}
|
|
||||||
{% for script in page.page_js %}
|
|
||||||
<script src="{{ script | relative_url }}"></script>
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
```{% endraw %}
|
|
||||||
|
|
||||||
Next, add `page_js` to any page's YAML Front Matter to have your JavaScript loaded for that page.
|
|
||||||
```yaml
|
|
||||||
page_js:
|
|
||||||
- /path/to/your/custom.js
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
---
|
|
||||||
title: "Working with Posts"
|
|
||||||
permalink: /docs/posts/
|
|
||||||
excerpt: "Suggestions and Front Matter defaults for working with posts."
|
|
||||||
last_modified_at: 2018-03-20T15:59:57-04:00
|
|
||||||
---
|
|
||||||
|
|
||||||
Posts are stored in the `_posts` directory and named according to the `YEAR-MONTH-DAY-title.MARKUP` format as per [the usual](https://jekyllrb.com/docs/posts/).
|
|
||||||
|
|
||||||
Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. For example, the following are examples of valid post filenames:
|
|
||||||
|
|
||||||
```
|
|
||||||
2016-07-20-writing-jekyll-posts.md
|
|
||||||
2015-01-03-static-site-generators.markdown
|
|
||||||
```
|
|
||||||
|
|
||||||
**Recommended Front Matter Defaults:**
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
defaults:
|
|
||||||
# _posts
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: posts
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: true
|
|
||||||
read_time: true
|
|
||||||
comments: true
|
|
||||||
share: true
|
|
||||||
related: true
|
|
||||||
```
|
|
||||||
|
|
||||||
Adding the above to `_config.yml` will assign the `single` layout and enable: *author profile*, *reading time*, *comments*, [*social sharing links*]({{ "/docs/layouts/#social-sharing-links" | relative_url }}), and *related posts*, for all posts.
|
|
||||||
|
|
||||||
**ProTip:** Remember to write unique `excerpt` descriptions for each post for improved SEO and archive listings.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
---
|
|
||||||
title: "Working with Pages"
|
|
||||||
permalink: /docs/pages/
|
|
||||||
excerpt: "Suggestions and Front Matter defaults for working with pages."
|
|
||||||
last_modified_at: 2016-11-03T11:13:12-04:00
|
|
||||||
---
|
|
||||||
|
|
||||||
To better organize all of your pages you can centralize them into a single location similar to posts and collections.
|
|
||||||
|
|
||||||
**Step 1:** Start by placing pages (`.md` or `.html` files) into a `_pages` directory. Meaningfully naming files should be the goal. Avoid patterns like `/about/index.md` as it makes distinguishing between multiple `index.md` files harder.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
sample-project
|
|
||||||
└── _pages/
|
|
||||||
├── 404.md # custom 404 page
|
|
||||||
├── about.md # about page
|
|
||||||
└── contact.md # contact page
|
|
||||||
```
|
|
||||||
|
|
||||||
**Step 2:** Include pages to be sure Jekyll "sees" and processes the files inside of `_pages`. Add `include: ["_pages"]` to `_config.yml`.
|
|
||||||
|
|
||||||
**Step 3:** Assign permalink overrides in the YAML Front Matter of each.
|
|
||||||
|
|
||||||
Examples:
|
|
||||||
|
|
||||||
| filename | permalink |
|
|
||||||
| -------- | --------- |
|
|
||||||
| _pages/about.md | `permalink: /about/` |
|
|
||||||
| _pages/home.md | `permalink: /` |
|
|
||||||
| _pages/contact.md | `permalink: /contact/` |
|
|
||||||
|
|
||||||
**Recommended Front Matter Defaults:**
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
defaults:
|
|
||||||
# _pages
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: pages
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: true
|
|
||||||
```
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
---
|
|
||||||
title: "Working with Collections"
|
|
||||||
permalink: /docs/collections/
|
|
||||||
excerpt: "Suggestions and Front Matter defaults for working with collections."
|
|
||||||
last_modified_at: 2018-03-20T16:00:02-04:00
|
|
||||||
---
|
|
||||||
|
|
||||||
Collections like posts and pages work as you'd expect. If you're new to them be sure to read [Jekyll's documentation](https://jekyllrb.com/docs/collections/).
|
|
||||||
|
|
||||||
The theme has been built with collections in mind and you will find [several examples]({{ "/collection-archive/" | relative_url }}) on the demo site ([portfolio]({{ "/portfolio/" | relative_url }}), [recipes]({{ "/recipes/" | relative_url }}), [pets]({{ "/pets/" | relative_url }})).
|
|
||||||
|
|
||||||
**Collections in the Wild:** This set of documentation is also [built as a collection](https://github.com/{{ site.repository }}/blob/master/docs/_docs/) if you're looking for a fully fleshed out example to inspect.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
A popular use case for collections is to build a portfolio section as part of one's personal site. Let's quickly walk through the steps to do that.
|
|
||||||
|
|
||||||
**Step 1:** Configure the portfolio collection by adding the following to `_config.yml`.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
collections:
|
|
||||||
portfolio:
|
|
||||||
output: true
|
|
||||||
permalink: /:collection/:path/
|
|
||||||
```
|
|
||||||
|
|
||||||
These settings essentially say output `index.html` files for each portfolio document in `_portfolio` at `_site/portfolio/<document-filename>/`.
|
|
||||||
|
|
||||||
Just like posts and pages you'll probably want to set some defaults for the Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
defaults:
|
|
||||||
# _portfolio
|
|
||||||
- scope:
|
|
||||||
path: ""
|
|
||||||
type: portfolio
|
|
||||||
values:
|
|
||||||
layout: single
|
|
||||||
author_profile: false
|
|
||||||
share: true
|
|
||||||
```
|
|
||||||
|
|
||||||
Now make a portfolio.md file in the '_pages' folder.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
---
|
|
||||||
title: Portfolio
|
|
||||||
layout: collection
|
|
||||||
permalink: /portfolio/
|
|
||||||
collection: portfolio
|
|
||||||
entries_layout: grid
|
|
||||||
classes: wide
|
|
||||||
---
|
|
||||||
```
|
|
||||||
|
|
||||||
And then create portfolio content like [`_portfolio/foo-bar-website.md`](https://github.com/{{ site.repository }}/blob/master/docs/_portfolio/foo-bar-website.md), to end up with something like this.
|
|
||||||
|
|
||||||
![portfolio collection example]({{ "/assets/images/mm-portfolio-collection-example.jpg" | relative_url }})
|
|
||||||
|
|
@ -1,418 +0,0 @@
|
||||||
---
|
|
||||||
title: "Helpers"
|
|
||||||
permalink: /docs/helpers/
|
|
||||||
excerpt: "Jekyll `_includes` and other helpers to use as shortcuts for creating archives, galleries, table of contents, and more."
|
|
||||||
gallery:
|
|
||||||
- url: /assets/images/unsplash-gallery-image-1.jpg
|
|
||||||
image_path: /assets/images/unsplash-gallery-image-1-th.jpg
|
|
||||||
alt: "placeholder image 1"
|
|
||||||
title: "Image 1 title caption"
|
|
||||||
- url: /assets/images/unsplash-gallery-image-2.jpg
|
|
||||||
image_path: /assets/images/unsplash-gallery-image-2-th.jpg
|
|
||||||
alt: "placeholder image 2"
|
|
||||||
title: "Image 2 title caption"
|
|
||||||
- url: /assets/images/unsplash-gallery-image-3.jpg
|
|
||||||
image_path: /assets/images/unsplash-gallery-image-3-th.jpg
|
|
||||||
alt: "placeholder image 3"
|
|
||||||
title: "Image 3 title caption"
|
|
||||||
feature_row:
|
|
||||||
- image_path: /assets/images/unsplash-gallery-image-1-th.jpg
|
|
||||||
alt: "placeholder image 1"
|
|
||||||
title: "Placeholder 1"
|
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
|
||||||
- image_path: /assets/images/unsplash-gallery-image-2-th.jpg
|
|
||||||
alt: "placeholder image 2"
|
|
||||||
title: "Placeholder 2"
|
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
|
||||||
url: "#test-link"
|
|
||||||
btn_label: "Read More"
|
|
||||||
btn_class: "btn--inverse"
|
|
||||||
- image_path: /assets/images/unsplash-gallery-image-3-th.jpg
|
|
||||||
title: "Placeholder 3"
|
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
|
||||||
last_modified_at: 2020-05-01T10:22:56-04:00
|
|
||||||
toc: true
|
|
||||||
toc_label: "Helpers"
|
|
||||||
toc_icon: "cogs"
|
|
||||||
---
|
|
||||||
|
|
||||||
You can think of these Jekyll helpers as little shortcuts. Since GitHub Pages doesn't allow most plugins --- [custom tags](https://jekyllrb.com/docs/plugins/#tags) are out. Instead the theme leverages [**includes**](https://jekyllrb.com/docs/templates/#includes) to do something similar.
|
|
||||||
|
|
||||||
## Group by array
|
|
||||||
|
|
||||||
[Jekyll Group-By-Array](https://github.com/mushishi78/jekyll-group-by-array) by Max White.
|
|
||||||
|
|
||||||
A liquid include file for Jekyll that allows an object to be grouped by an array.
|
|
||||||
|
|
||||||
## Figure
|
|
||||||
|
|
||||||
Generate a `<figure>` element with a single image and caption.
|
|
||||||
|
|
||||||
| Include Parameter | Required | Description |
|
|
||||||
| ----------------- | ------------ | ---------------------------------------------------------------------------------------------------- |
|
|
||||||
| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. |
|
|
||||||
| **alt** | Optional | Alternate text for image. |
|
|
||||||
| **caption** | Optional | Figure caption text. Markdown is allowed. |
|
|
||||||
|
|
||||||
Using the `figure` include like so:
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
Will output the following:
|
|
||||||
|
|
||||||
{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}
|
|
||||||
|
|
||||||
```html
|
|
||||||
<figure>
|
|
||||||
<img src="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image">
|
|
||||||
<figcaption>This is a figure caption.</figcaption>
|
|
||||||
</figure>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Gallery
|
|
||||||
|
|
||||||
Generate a `<figure>` element with optional caption of arrays with two or more images.
|
|
||||||
|
|
||||||
To place a gallery add the necessary YAML Front Matter.
|
|
||||||
|
|
||||||
| Name | Required | Description |
|
|
||||||
| -------------- | ------------ | --------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| **url** | Optional | URL to link gallery image to (eg. a larger detail image). |
|
|
||||||
| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. |
|
|
||||||
| **alt** | Optional | Alternate text for image. |
|
|
||||||
| **title** | Optional | Title text for image. Will display as a caption in a Magnific Popup overlay when linked to a larger image with `url`. |
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
gallery:
|
|
||||||
- url: /assets/images/unsplash-gallery-image-1.jpg
|
|
||||||
image_path: /assets/images/unsplash-gallery-image-1-th.jpg
|
|
||||||
alt: "placeholder image 1"
|
|
||||||
title: "Image 1 title caption"
|
|
||||||
- url: /assets/images/unsplash-gallery-image-2.jpg
|
|
||||||
image_path: /assets/images/unsplash-gallery-image-2-th.jpg
|
|
||||||
alt: "placeholder image 2"
|
|
||||||
title: "Image 2 title caption"
|
|
||||||
- url: /assets/images/unsplash-gallery-image-3.jpg
|
|
||||||
image_path: /assets/images/unsplash-gallery-image-3-th.jpg
|
|
||||||
alt: "placeholder image 3"
|
|
||||||
title: "Image 3 title caption"
|
|
||||||
```
|
|
||||||
|
|
||||||
And then drop-in the gallery include in the body where you'd like it to appear.
|
|
||||||
|
|
||||||
| Include Parameter | Required | Description | Default |
|
|
||||||
| ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
|
|
||||||
| **id** | Optional | To add multiple galleries to a document uniquely name them in the YAML Front Matter and reference in `{% raw %}{% include gallery id="gallery_id" %}{% endraw %}` | `gallery` |
|
|
||||||
| **layout** | Optional | Layout type. 2 column: `half`, 3 column: `third`, single column: `''` (blank) | Determined by gallery size. Two items: `half`, three or more items: `third`. |
|
|
||||||
| **class** | Optional | Use to add a `class` attribute to the surrounding `<figure>` element for additional styling needs. | |
|
|
||||||
| **caption** | Optional | Gallery caption description. Markdown is allowed. | |
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include gallery caption="This is a sample gallery with **Markdown support**." %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Gallery example with caption:**
|
|
||||||
|
|
||||||
{% include gallery caption="This is a sample gallery with **Markdown support**." %}
|
|
||||||
|
|
||||||
**More Gallery Goodness:** A few more examples and [source code](https://github.com/{{ site.repository }}/blob/master/docs/\_posts/2010-09-09-post-gallery.md) can be seen in [this sample gallery post]({{ "" | relative_url }}{% post_url 2010-09-09-post-gallery %}).
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
## Feature row
|
|
||||||
|
|
||||||
Designed to compliment the [`splash`]({{ "/docs/layouts/#splash-page-layout" | relative_url }}) page layout as a way of arranging and aligning "feature blocks" containing text or image.
|
|
||||||
|
|
||||||
To add a feature row containing three content blocks with text and image, add the following YAML Front Matter
|
|
||||||
|
|
||||||
| Name | Required | Description | Default |
|
|
||||||
| ----------------- | ------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------- |
|
|
||||||
| **image_path** | **Required** | Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally. | |
|
|
||||||
| **image_caption** | Optional | Caption for image, Markdown is supported eg: `"Image from [Unsplash](https://unsplash.com)"` |
|
|
||||||
| **alt** | Optional | Alternate text for image. | |
|
|
||||||
| **title** | Optional | Content block title. | |
|
|
||||||
| **excerpt** | Optional | Content block excerpt text. Markdown is allowed. | |
|
|
||||||
| **url** | Optional | URL that the button should link to. | |
|
|
||||||
| **btn_label** | Optional | Button text label. | `more_label` in UI Text data file. |
|
|
||||||
| **btn_class** | Optional | Button style. See [utility classes]({{ "/docs/utility-classes/#buttons" | relative_url }}) for options. | `btn` |
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
feature_row:
|
|
||||||
- image_path: /assets/images/unsplash-gallery-image-1-th.jpg
|
|
||||||
alt: "placeholder image 1"
|
|
||||||
title: "Placeholder 1"
|
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
|
||||||
- image_path: /assets/images/unsplash-gallery-image-2-th.jpg
|
|
||||||
alt: "placeholder image 2"
|
|
||||||
title: "Placeholder 2"
|
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
|
||||||
url: "#test-link"
|
|
||||||
btn_label: "Read More"
|
|
||||||
btn_class: "btn--inverse"
|
|
||||||
- image_path: /assets/images/unsplash-gallery-image-3-th.jpg
|
|
||||||
title: "Placeholder 3"
|
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
|
||||||
```
|
|
||||||
|
|
||||||
And then drop-in the feature row include in the body where you'd like it to appear.
|
|
||||||
|
|
||||||
| Include Parameter | Required | Description | Default |
|
|
||||||
| ----------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
|
|
||||||
| **id** | Optional | To add multiple rows to a document uniquely name them in the YAML Front Matter and reference in `{% raw %}{% include feature_row id="row2" %}{% endraw %}` | `feature_row` |
|
|
||||||
| **type** | Optional | Alignment of the featured blocks in the row. Options include: `left`, `center`, or `right` aligned. | |
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include feature_row %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
{% include feature_row %}
|
|
||||||
|
|
||||||
**More Feature Row Goodness:** A [few more examples]({{ "/splash-page/" | relative_url }}) and [source code](https://github.com/{{ site.repository }}/blob/master/docs/\_pages/splash-page.md) can be seen in the demo site.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
## Responsive video embed
|
|
||||||
|
|
||||||
Embed a video from YouTube, Vimeo, Google Drive, or bilibili that responsively sizes to fit the width of its parent. To help with GDPR compliance, the theme is using the privacy enhanced version of YouTube and Vimeo providers out of the box.
|
|
||||||
|
|
||||||
| Parameter | Required | Description |
|
|
||||||
| ---------- | ------------ | ---------------------------------------------------------- |
|
|
||||||
| `id` | **Required** | ID of the video |
|
|
||||||
| `provider` | **Required** | Hosting provider of the video: `youtube`, `vimeo`, `google-drive`, or `bilibili` |
|
|
||||||
| `danmaku` | Optional | Bilibili only, [details below](#Bilibili) |
|
|
||||||
|
|
||||||
### YouTube
|
|
||||||
|
|
||||||
To embed the following YouTube video at url `https://www.youtube.com/watch?v=XsxDH4HcOWA` (long version) or `https://youtu.be/XsxDH4HcOWA` (short version) into a post or page's main content you'd use:
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include video id="XsxDH4HcOWA" provider="youtube" %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
{% include video id="XsxDH4HcOWA" provider="youtube" %}
|
|
||||||
|
|
||||||
To embed it as a video header you'd use the following YAML Front Matter
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
video:
|
|
||||||
id: XsxDH4HcOWA
|
|
||||||
provider: youtube
|
|
||||||
```
|
|
||||||
|
|
||||||
**Tip:** if you'd like to start the video at a particular timestamp, you can append `?start=110` (for instance) to the video `id` in order to have the video start at 1:50.
|
|
||||||
{: .notice--info }
|
|
||||||
|
|
||||||
### Vimeo
|
|
||||||
|
|
||||||
To embed the following Vimeo video at url `https://vimeo.com/212731897` into a post or page's main content you'd use:
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include video id="212731897" provider="vimeo" %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
{% include video id="212731897" provider="vimeo" %}
|
|
||||||
|
|
||||||
To embed it as a video header you'd use the following YAML Front Matter
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
video:
|
|
||||||
id: 212731897
|
|
||||||
provider: vimeo
|
|
||||||
```
|
|
||||||
|
|
||||||
### Google Drive
|
|
||||||
|
|
||||||
To embed the following Google Drive video at url `https://drive.google.com/file/d/1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO/preview` into a post or page's main content you'd use:
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include video id="1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO" provider="google-drive" %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
{% include video id="1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO" provider="google-drive" %}
|
|
||||||
|
|
||||||
To embed it as a video header you'd use the following YAML Front Matter
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
video:
|
|
||||||
id: 212731897
|
|
||||||
provider: google-drive
|
|
||||||
```
|
|
||||||
|
|
||||||
### Bilibili
|
|
||||||
|
|
||||||
To embed the following Bilibili video at url `https://www.bilibili.com/video/BV1E7411e7hC` into a post or page's main content you'd use:
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include video id="BV1E7411e7hC" provider="bilibili" %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
If you want to enable danmaku (弹幕) for the embedded video, which is disabled by default, you can supply an additional parameter `danmaku="1"` as shown below:
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include video id="BV1E7411e7hC" provider="bilibili" danmaku="1" %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
To embed it as a video header you'd use the following YAML Front Matter:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
header:
|
|
||||||
video:
|
|
||||||
id: BV1E7411e7hC
|
|
||||||
provider: bilibili
|
|
||||||
danmaku: 1
|
|
||||||
```
|
|
||||||
|
|
||||||
## Table of contents
|
|
||||||
|
|
||||||
Auto-generated table of contents list for your posts and pages can be enabled using two methods.
|
|
||||||
|
|
||||||
![table of contents example]({{ "/assets/images/mm-toc-helper-example.jpg" | relative_url }})
|
|
||||||
|
|
||||||
### Enabled via YAML Front Matter
|
|
||||||
|
|
||||||
Add `toc: true` to the YAML Front Matter of any post or page.
|
|
||||||
|
|
||||||
| Parameter | Required | Description | Default |
|
|
||||||
| -------------- | -------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| **toc** | Optional | Show table of contents. (boolean) | `false` |
|
|
||||||
| **toc_label** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
|
|
||||||
| **toc_icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/v5/search?s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
|
|
||||||
| **toc_sticky** | Optional | Stick table of contents to top of screen. | `false` |
|
|
||||||
|
|
||||||
**TOC example with custom title and icon**
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
toc: true
|
|
||||||
toc_label: "My Table of Contents"
|
|
||||||
toc_icon: "cog"
|
|
||||||
---
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** using both methods will have unintended results. Be sure to remove `{% raw %}{% include toc %}{% endraw %}` placed table of contents from your content when using `toc: true`.
|
|
||||||
{: .notice--warning }
|
|
||||||
|
|
||||||
{% capture notice-text %}
|
|
||||||
**Note:** You need to use contiguous levels of headings for the TOC to generate properly. For example:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
Good headings:
|
|
||||||
|
|
||||||
# Heading
|
|
||||||
## Heading
|
|
||||||
### Heading
|
|
||||||
### Heading
|
|
||||||
# Heading
|
|
||||||
## Heading
|
|
||||||
|
|
||||||
Bad headings:
|
|
||||||
|
|
||||||
# Heading
|
|
||||||
### Heading (skipped H2)
|
|
||||||
##### Heading (skipped H4)
|
|
||||||
```
|
|
||||||
{% endcapture %}
|
|
||||||
|
|
||||||
<div class="notice--warning">
|
|
||||||
{{ notice-text | markdownify }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
### Enabled via `toc` include (deprecated)
|
|
||||||
|
|
||||||
To include a Kramdown [auto-generated table of contents](https://kramdown.gettalong.org/converter/html.html#toc) for posts and pages, add the following helper to your content.
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include toc %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** this method only works with Markdown files.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
**Deprecated:** `toc` helper will be removed in the next major version of the theme. It is encouraged that you migrate to the YAML Front Matter method above.
|
|
||||||
{: .notice--danger}
|
|
||||||
|
|
||||||
| Parameter | Required | Description | Default |
|
|
||||||
| --------- | -------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| **title** | Optional | Table of contents title. (string) | `toc_label` in UI Text data file. |
|
|
||||||
| **icon** | Optional | Table of contents icon, displays before the title. (string) | [Font Awesome](https://fontawesome.com/v5/search?s=solid&m=free) <i class="fas fa-file-alt"></i> **file-alt** icon. Other FA icons can be used instead. |
|
|
||||||
|
|
||||||
**TOC example with custom title and icon**
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include toc icon="cog" title="My Table of Contents" %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Navigation list
|
|
||||||
|
|
||||||
Include an unordered list of links to be used as sidebar navigation with the `nav_list` helper.
|
|
||||||
|
|
||||||
**1.** Start by adding a set of titles and URLs to `_data/navigation.yml` in the same way the [`main` navigation]({{ "/docs/navigation/" | relative_url }}) is built.
|
|
||||||
|
|
||||||
`foo` navigation example:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
# _data/navigation.yml
|
|
||||||
foo:
|
|
||||||
- title: "Link 1 Title"
|
|
||||||
url: /link-1-page-url/
|
|
||||||
|
|
||||||
- title: "Link 2 Title"
|
|
||||||
url: http://external-link.com
|
|
||||||
|
|
||||||
- title: "Link 3 Title"
|
|
||||||
url: /link-3-page-url/
|
|
||||||
|
|
||||||
- title: "Link 4 Title"
|
|
||||||
url: /link-4-page-url/
|
|
||||||
```
|
|
||||||
|
|
||||||
For a navigation list that has child pages you'd structure the YAML like this:
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
# _data/navigation.yml
|
|
||||||
foo:
|
|
||||||
- title: "Parent Link 1"
|
|
||||||
url: /parent-1-page-url/
|
|
||||||
children:
|
|
||||||
- title: "Child Link 1"
|
|
||||||
url: /child-1-page-url/
|
|
||||||
- title: "Child Link 2"
|
|
||||||
url: /child-2-page-url/
|
|
||||||
|
|
||||||
- title: "Parent Link 2"
|
|
||||||
url: /parent-2-page-url/
|
|
||||||
children:
|
|
||||||
- title: "Child Link 1"
|
|
||||||
url: /child-1-page-url/
|
|
||||||
- title: "Child Link 2"
|
|
||||||
url: /child-2-page-url/
|
|
||||||
- title: "Child Link 3"
|
|
||||||
url: /child-3-page-url/
|
|
||||||
```
|
|
||||||
|
|
||||||
**2:** On the page(s) you'd like the `foo` sidebar nav add the following YAML Front Matter, referencing the same key name.
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
sidebar:
|
|
||||||
nav: "foo"
|
|
||||||
```
|
|
||||||
|
|
||||||
**ProTip:** If you're applying the same navigation list to several pages setting it as a [Front Matter default](https://jekyllrb.com/docs/configuration/#front-matter-defaults) is the better option.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
The theme's documentation is built with the `nav_list` helper so if you'd like an example to dissect take a look at `navigation.yml`, `_config.yml` and `_doc` collection in the [`/docs/` folder](https://github.com/{{ site.repository }}/tree/master/docs/) of this repo.
|
|
||||||
|
|
||||||
To add a navigation list to a post or page's main content instead of the sidebar use the include this way:
|
|
||||||
|
|
||||||
```liquid
|
|
||||||
{% raw %}{% include nav_list nav="foo" %}{% endraw %}
|
|
||||||
```
|
|
||||||
|
|
||||||
{% include nav_list nav="foo" %}
|
|
||||||
|
|
||||||
| Parameter | Required | Description |
|
|
||||||
| --------- | ------------ | -------------------------------------------------------- |
|
|
||||||
| items | **Required** | Name of the links array found in `_data/navigation.yml`. |
|
|
||||||
|
|
@ -1,177 +0,0 @@
|
||||||
---
|
|
||||||
title: "Utility Classes"
|
|
||||||
permalink: /docs/utility-classes/
|
|
||||||
excerpt: "CSS classes for aligning text/image, styling buttons and notices, and more."
|
|
||||||
last_modified_at: 2018-11-25T19:46:43-05:00
|
|
||||||
toc: true
|
|
||||||
toc_label: "Utility Classes"
|
|
||||||
toc_icon: "cogs"
|
|
||||||
---
|
|
||||||
|
|
||||||
Using the Kramdown Markdown renderer with Jekyll allows you to add [block](http://kramdown.gettalong.org/quickref.html#block-attributes) and [inline attributes](http://kramdown.gettalong.org/quickref.html#inline-attributes). This is nice if you want to add custom styling to text and image, and still write in Markdown.
|
|
||||||
|
|
||||||
**Jekyll 3:** Kramdown is the default for `jekyll new` sites and those hosted on GitHub Pages. Not using Kramdown? That's OK. The following classes are still available when used with standard HTML.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
## Text alignment
|
|
||||||
|
|
||||||
Align text blocks with the following classes.
|
|
||||||
|
|
||||||
Left aligned text `.text-left`
|
|
||||||
{: .text-left}
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
Left aligned text
|
|
||||||
{: .text-left}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Center aligned text. `.text-center`
|
|
||||||
{: .text-center}
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
Center aligned text.
|
|
||||||
{: .text-center}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Right aligned text. `.text-right`
|
|
||||||
{: .text-right}
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
Right aligned text.
|
|
||||||
{: .text-right}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Justified text.** `.text-justify` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel eleifend odio, eu elementum purus. In hac habitasse platea dictumst. Fusce sed sapien eleifend, sollicitudin neque non, faucibus est. Proin tempus nisi eu arcu facilisis, eget venenatis eros consequat.
|
|
||||||
{: .text-justify}
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
Justified text.
|
|
||||||
{: .text-justify}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
No wrap text. `.text-nowrap`
|
|
||||||
{: .text-nowrap}
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
No wrap text.
|
|
||||||
{: .text-nowrap}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Image alignment
|
|
||||||
|
|
||||||
Position images with the following classes.
|
|
||||||
|
|
||||||
![image-center]({{ "/assets/images/image-alignment-580x300.jpg" | relative_url }}){: .align-center}
|
|
||||||
|
|
||||||
The image above happens to be **centered**.
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
{: .align-center}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
![image-left]({{ "/assets/images/image-alignment-150x150.jpg" | relative_url }}){: .align-left} The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is **left aligned**. There should be plenty of room above, below, and to the right of the image. Just look at him there --- Hey guy! Way to rock that left side. I don't care what the right aligned image says, you look great. Don't let anyone else tell you differently.
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
{: .align-left}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
![image-right]({{ "/assets/images/image-alignment-300x200.jpg" | relative_url }}){: .align-right}
|
|
||||||
|
|
||||||
And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently.
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
{: .align-right}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
![full]({{ "/assets/images/image-alignment-1200x4002.jpg" | relative_url }})
|
|
||||||
{: .full}
|
|
||||||
|
|
||||||
The image above should extend outside of the parent container on right.
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
|
|
||||||
{: .full}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Buttons
|
|
||||||
|
|
||||||
Make any link standout more when applying the `.btn .btn--primary` classes.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<a href="#" class="btn btn--primary">Link Text</a>
|
|
||||||
```
|
|
||||||
|
|
||||||
| Button Type | Example | Class | Kramdown |
|
|
||||||
| ------ | ------- | ----- | ------- |
|
|
||||||
| Default | [Text](#link){: .btn} | `.btn` | `[Text](#link){: .btn}` |
|
|
||||||
| Primary | [Text](#link){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary}` |
|
|
||||||
| Success | [Text](#link){: .btn .btn--success} | `.btn .btn--success` | `[Text](#link){: .btn .btn--success}` |
|
|
||||||
| Warning | [Text](#link){: .btn .btn--warning} | `.btn .btn--warning` | `[Text](#link){: .btn .btn--warning}` |
|
|
||||||
| Danger | [Text](#link){: .btn .btn--danger} | `.btn .btn--danger` | `[Text](#link){: .btn .btn--danger}` |
|
|
||||||
| Info | [Text](#link){: .btn .btn--info} | `.btn .btn--info` | `[Text](#link){: .btn .btn--info}` |
|
|
||||||
| Inverse | [Text](#link){: .btn .btn--inverse} | `.btn .btn--inverse` | `[Text](#link){: .btn .btn--inverse}` |
|
|
||||||
| Light Outline | [Text](#link){: .btn .btn--light-outline} | `.btn .btn--light-outline` | `[Text](#link){: .btn .btn--light-outline}` |
|
|
||||||
|
|
||||||
| Button Size | Example | Class | Kramdown |
|
|
||||||
| ----------- | ------- | ----- | -------- |
|
|
||||||
| X-Large | [X-Large Button](#){: .btn .btn--primary .btn--x-large} | `.btn .btn--primary .btn--x-large` | `[Text](#link){: .btn .btn--primary .btn--x-large}` |
|
|
||||||
| Large | [Large Button](#){: .btn .btn--primary .btn--large} | `.btn .btn--primary .btn--large` | `[Text](#link){: .btn .btn--primary .btn--large}` |
|
|
||||||
| Default | [Default Button](#){: .btn .btn--primary} | `.btn .btn--primary` | `[Text](#link){: .btn .btn--primary }` |
|
|
||||||
| Small | [Small Button](#){: .btn .btn--primary .btn--small} | `.btn .btn--primary .btn--small` | `[Text](#link){: .btn .btn--primary .btn--small}` |
|
|
||||||
|
|
||||||
## Notices
|
|
||||||
|
|
||||||
Call attention to a block of text.
|
|
||||||
|
|
||||||
| Notice Type | Class |
|
|
||||||
| ----------- | ----- |
|
|
||||||
| Default | `.notice` |
|
|
||||||
| Primary | `.notice--primary` |
|
|
||||||
| Info | `.notice--info` |
|
|
||||||
| Warning | `.notice--warning` |
|
|
||||||
| Success | `.notice--success` |
|
|
||||||
| Danger | `.notice--danger` |
|
|
||||||
|
|
||||||
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice}` class.
|
|
||||||
{: .notice}
|
|
||||||
|
|
||||||
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--primary}` class.
|
|
||||||
{: .notice--primary}
|
|
||||||
|
|
||||||
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--info}` class.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--warning}` class.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--success}` class.
|
|
||||||
{: .notice--success}
|
|
||||||
|
|
||||||
**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--danger}` class.
|
|
||||||
{: .notice--danger}
|
|
||||||
|
|
||||||
{% capture notice-text %}
|
|
||||||
You can also add the `.notice` class to a `<div>` element.
|
|
||||||
|
|
||||||
* Bullet point 1
|
|
||||||
* Bullet point 2
|
|
||||||
{% endcapture %}
|
|
||||||
|
|
||||||
<div class="notice--info">
|
|
||||||
<h4 class="no_toc">Notice Headline:</h4>
|
|
||||||
{{ notice-text | markdownify }}
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,393 +0,0 @@
|
||||||
---
|
|
||||||
title: "Stylesheets"
|
|
||||||
permalink: /docs/stylesheets/
|
|
||||||
excerpt: "Instructions for customizing and building the theme's stylesheets."
|
|
||||||
last_modified_at: 2018-11-25T19:47:43-05:00
|
|
||||||
toc: true
|
|
||||||
---
|
|
||||||
|
|
||||||
The theme's `assets/css/main.css` file is built from several SCSS partials located in [`_sass/`](https://github.com/mmistakes/minimal-mistakes/tree/master/_sass) and is structured as follows:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
minimal-mistakes
|
|
||||||
├── _sass
|
|
||||||
| └── minimal-mistakes
|
|
||||||
| ├── vendor # vendor SCSS partials
|
|
||||||
| | ├── breakpoint # media query mixins
|
|
||||||
| | ├── magnific-popup # Magnific Popup lightbox
|
|
||||||
| | └── susy # Susy grid system
|
|
||||||
| ├── _animations.scss # animations
|
|
||||||
| ├── _archive.scss # archives (list, grid, feature views)
|
|
||||||
| ├── _base.scss # base HTML elements
|
|
||||||
| ├── _buttons.scss # buttons
|
|
||||||
| ├── _footer.scss # footer
|
|
||||||
| ├── _masthead.scss # masthead
|
|
||||||
| ├── _mixins.scss # mixins (em function, clearfix)
|
|
||||||
| ├── _navigation.scss # nav links (breadcrumb, priority+, toc, pagination, etc.)
|
|
||||||
| ├── _notices.scss # notices
|
|
||||||
| ├── _page.scss # pages
|
|
||||||
| ├── _print.scss # print styles
|
|
||||||
| ├── _reset.scss # reset
|
|
||||||
| ├── _sidebar.scss # sidebar
|
|
||||||
| ├── _syntax.scss # syntax highlighting
|
|
||||||
| ├── _tables.scss # tables
|
|
||||||
| ├── _utilities.scss # utility classes (text/image alignment)
|
|
||||||
| └── _variables.scss # theme defaults (fonts, colors, etc.)
|
|
||||||
├── assets
|
|
||||||
| ├── css
|
|
||||||
| | └── main.scss # main stylesheet, loads SCSS partials in _sass
|
|
||||||
```
|
|
||||||
|
|
||||||
## Customizing
|
|
||||||
|
|
||||||
To override the default [Sass](http://sass-lang.com/guide) (located in theme's
|
|
||||||
`_sass` directory), do one of the following:
|
|
||||||
|
|
||||||
1. Copy directly from the Minimal Mistakes theme gem
|
|
||||||
|
|
||||||
- Go to your local Minimal Mistakes gem installation directory (run
|
|
||||||
`bundle show minimal-mistakes-jekyll` to get the path to it).
|
|
||||||
- Copy the contents of `/assets/css/main.scss` from there to
|
|
||||||
`<your_project>`.
|
|
||||||
- Customize what you want inside `<your_project>/assets/css/main.scss`.
|
|
||||||
|
|
||||||
2. Copy from this repo.
|
|
||||||
|
|
||||||
- Copy the contents of [assets/css/main.scss](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss)
|
|
||||||
to `<your_project>`.
|
|
||||||
- Customize what you want inside `<your_project/assets/css/main.scss`.
|
|
||||||
|
|
||||||
**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 `<your_project>` due to the way Jekyll currently reads those files.
|
|
||||||
|
|
||||||
To make basic tweaks to theme's style Sass variables can be overridden by adding
|
|
||||||
to `<your_project>/assets/css/main.scss`. For instance, to change the
|
|
||||||
link color used throughout the theme add:
|
|
||||||
|
|
||||||
```scss
|
|
||||||
$link-color: red;
|
|
||||||
```
|
|
||||||
|
|
||||||
Before any `@import` lines.
|
|
||||||
|
|
||||||
### Paragraph indention
|
|
||||||
|
|
||||||
To mimic the look of type set in a printed book or manuscript you may want to enable paragraph indention. When `$paragraph-indent` is set to `true` indents are added to each sibling and the margin below each paragraph is removed.
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-paragraph-indent-example.jpg' | relative_url }}" alt="indented paragraph example">
|
|
||||||
<figcaption>Example of indented paragraphs.</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
The size of the indent can also be customized by changing the value of `$indent-var`.
|
|
||||||
|
|
||||||
### Font stacks
|
|
||||||
|
|
||||||
By default the theme uses [system fonts](https://medium.com/designing-medium/system-shock-6b1dc6d6596f#.rb81vgn7i) for all of the font stacks (serif, sans-serif, and monospace). This is done in part to provide a clean base for you to build off of and to improve performance since we aren't loading any custom webfonts by default.
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* system typefaces */
|
|
||||||
$serif : Georgia, Times, serif;
|
|
||||||
$sans-serif : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
|
|
||||||
$monospace : Monaco, Consolas, "Lucida Console", monospace;
|
|
||||||
```
|
|
||||||
|
|
||||||
Sans-serif fonts have been used for most of the type, with serifs reserved for captions. If you wish to change this you'll need to poke around the various `SCSS` partials and modify `font-family` declarations.
|
|
||||||
|
|
||||||
**ProTip:** To use webfonts from services like [Adobe TypeKit](https://typekit.com/) or [Google Fonts](https://www.google.com/fonts) simply update the font stacks and then add their scripts to `_includes/head/custom.html`.
|
|
||||||
{: .notice--info}
|
|
||||||
|
|
||||||
#### Typography from older versions
|
|
||||||
|
|
||||||
Not a fan of the refreshed typography of the theme and want to revert back an older version? Easy enough.
|
|
||||||
|
|
||||||
**1.** Add this Google Fonts script to [`_includes/head/custom.html`](https://github.com/mmistakes/minimal-mistakes/blob/master/_includes/head/custom.html):
|
|
||||||
|
|
||||||
```html
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Serif:400,700,400italic" rel="stylesheet" type="text/css">
|
|
||||||
```
|
|
||||||
|
|
||||||
**2.** Update the following SCSS variables:
|
|
||||||
|
|
||||||
```scss
|
|
||||||
$serif : "PT Serif", Georgia, Times, serif;
|
|
||||||
$sans-serif-narrow : "PT Sans Narrow", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
|
|
||||||
|
|
||||||
$global-font-family : $serif;
|
|
||||||
$header-font-family : $sans-serif-narrow;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Type scale
|
|
||||||
|
|
||||||
Wherever possible type scale variables have been used instead of writing out fixed sizes. This makes updating much easier by changing values in one file.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
```scss
|
|
||||||
.page__lead {
|
|
||||||
font-family: $global-font-family;
|
|
||||||
font-size: $type-size-4;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Type sizes are set in ems to proportional scale as the screen size changes. Large headlines that look great on desktop monitors will shrink ever so slightly as to not be too big on mobile devices. To adjust this hierarchy simply edit the default values:
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* type scale */
|
|
||||||
$type-size-1 : 2.441em; // ~39.056px
|
|
||||||
$type-size-2 : 1.953em; // ~31.248px
|
|
||||||
$type-size-3 : 1.563em; // ~25.008px
|
|
||||||
$type-size-4 : 1.25em; // ~20px
|
|
||||||
$type-size-5 : 1em; // ~16px
|
|
||||||
$type-size-6 : 0.75em; // ~12px
|
|
||||||
$type-size-7 : 0.6875em; // ~11px
|
|
||||||
$type-size-8 : 0.625em; // ~10px
|
|
||||||
```
|
|
||||||
|
|
||||||
### Colors
|
|
||||||
|
|
||||||
Change the mood of your site by altering a few color variables. `$body-color`, `$background-color`, `$text-color`, `$link-color`, and `$masthead-link-color` will have the most affect when changed.
|
|
||||||
|
|
||||||
#### Syntax highlighting
|
|
||||||
|
|
||||||
To make customizing the colors used in code highlighted blocks, a base of sixteen colors ([Base16](http://chriskempson.com/projects/base16/)) have been used.
|
|
||||||
|
|
||||||
Code block colors can easily be changed by overriding any of the following color variables:
|
|
||||||
|
|
||||||
##### Default
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* default syntax highlighting (base16) */
|
|
||||||
$base00: #263238;
|
|
||||||
$base01: #2e3c43;
|
|
||||||
$base02: #314549;
|
|
||||||
$base03: #546e7a;
|
|
||||||
$base04: #b2ccd6;
|
|
||||||
$base05: #eeffff;
|
|
||||||
$base06: #eeffff;
|
|
||||||
$base07: #ffffff;
|
|
||||||
$base08: #f07178;
|
|
||||||
$base09: #f78c6c;
|
|
||||||
$base0a: #ffcb6b;
|
|
||||||
$base0b: #c3e88d;
|
|
||||||
$base0c: #89ddff;
|
|
||||||
$base0d: #82aaff;
|
|
||||||
$base0e: #c792ea;
|
|
||||||
$base0f: #ff5370;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Solarized light
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* solarized light syntax highlighting (base16) */
|
|
||||||
$base00: #fafafa !default;
|
|
||||||
$base01: #073642 !default;
|
|
||||||
$base02: #586e75 !default;
|
|
||||||
$base03: #657b83 !default;
|
|
||||||
$base04: #839496 !default;
|
|
||||||
$base05: #586e75 !default;
|
|
||||||
$base06: #eee8d5 !default;
|
|
||||||
$base07: #fdf6e3 !default;
|
|
||||||
$base08: #dc322f !default;
|
|
||||||
$base09: #cb4b16 !default;
|
|
||||||
$base0a: #b58900 !default;
|
|
||||||
$base0b: #859900 !default;
|
|
||||||
$base0c: #2aa198 !default;
|
|
||||||
$base0d: #268bd2 !default;
|
|
||||||
$base0e: #6c71c4 !default;
|
|
||||||
$base0f: #d33682 !default;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Contrast
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* contrast syntax highlighting (base16) */
|
|
||||||
$base00: #000000;
|
|
||||||
$base01: #242422;
|
|
||||||
$base02: #484844;
|
|
||||||
$base03: #6c6c66;
|
|
||||||
$base04: #918f88;
|
|
||||||
$base05: #b5b3aa;
|
|
||||||
$base06: #d9d7cc;
|
|
||||||
$base07: #fdfbee;
|
|
||||||
$base08: #ff6c60;
|
|
||||||
$base09: #e9c062;
|
|
||||||
$base0a: #ffffb6;
|
|
||||||
$base0b: #a8ff60;
|
|
||||||
$base0c: #c6c5fe;
|
|
||||||
$base0d: #96cbfe;
|
|
||||||
$base0e: #ff73fd;
|
|
||||||
$base0f: #b18a3d;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Dark
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* dark syntax highlighting (base16) */
|
|
||||||
$base00: #ffffff;
|
|
||||||
$base01: #e0e0e0;
|
|
||||||
$base02: #d0d0d0;
|
|
||||||
$base03: #b0b0b0;
|
|
||||||
$base04: #000000;
|
|
||||||
$base05: #101010;
|
|
||||||
$base06: #151515;
|
|
||||||
$base07: #202020;
|
|
||||||
$base08: #ff0086;
|
|
||||||
$base09: #fd8900;
|
|
||||||
$base0a: #aba800;
|
|
||||||
$base0b: #00c918;
|
|
||||||
$base0c: #1faaaa;
|
|
||||||
$base0d: #3777e6;
|
|
||||||
$base0e: #ad00a1;
|
|
||||||
$base0f: #cc6633;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Dirt
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* dirt syntax highlighting (base16) */
|
|
||||||
$base00: #231e18;
|
|
||||||
$base01: #302b25;
|
|
||||||
$base02: #48413a;
|
|
||||||
$base03: #9d8b70;
|
|
||||||
$base04: #b4a490;
|
|
||||||
$base05: #cabcb1;
|
|
||||||
$base06: #d7c8bc;
|
|
||||||
$base07: #e4d4c8;
|
|
||||||
$base08: #d35c5c;
|
|
||||||
$base09: #ca7f32;
|
|
||||||
$base0a: #e0ac16;
|
|
||||||
$base0b: #b7ba53;
|
|
||||||
$base0c: #6eb958;
|
|
||||||
$base0d: #88a4d3;
|
|
||||||
$base0e: #bb90e2;
|
|
||||||
$base0f: #b49368;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Dracula
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* dracula syntax highlighting (base16) */
|
|
||||||
/* https://github.com/dracula/base16-dracula-scheme */
|
|
||||||
$base00: #282936;
|
|
||||||
$base01: #3a3c4e;
|
|
||||||
$base02: #4d4f68;
|
|
||||||
$base03: #626483;
|
|
||||||
$base04: #62d6e8;
|
|
||||||
$base05: #e9e9f4;
|
|
||||||
$base06: #f1f2f8;
|
|
||||||
$base07: #f7f7fb;
|
|
||||||
$base08: #ea51b2;
|
|
||||||
$base09: #b45bcf;
|
|
||||||
$base0a: #00f769;
|
|
||||||
$base0b: #ebff87;
|
|
||||||
$base0c: #a1efe4;
|
|
||||||
$base0d: #62d6e8;
|
|
||||||
$base0e: #b45bcf;
|
|
||||||
$base0f: #00f769;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Neon
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* neon syntax highlighting (base16) */
|
|
||||||
$base00: #ffffff;
|
|
||||||
$base01: #e0e0e0;
|
|
||||||
$base02: #d0d0d0;
|
|
||||||
$base03: #b0b0b0;
|
|
||||||
$base04: #000000;
|
|
||||||
$base05: #101010;
|
|
||||||
$base06: #151515;
|
|
||||||
$base07: #202020;
|
|
||||||
$base08: #ff0086;
|
|
||||||
$base09: #fd8900;
|
|
||||||
$base0a: #aba800;
|
|
||||||
$base0b: #00c918;
|
|
||||||
$base0c: #1faaaa;
|
|
||||||
$base0d: #3777e6;
|
|
||||||
$base0e: #ad00a1;
|
|
||||||
$base0f: #cc6633;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Plum
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* plum syntax highlighting (base16) */
|
|
||||||
$base00: #ffffff;
|
|
||||||
$base01: #e0e0e0;
|
|
||||||
$base02: #d0d0d0;
|
|
||||||
$base03: #b0b0b0;
|
|
||||||
$base04: #000000;
|
|
||||||
$base05: #101010;
|
|
||||||
$base06: #151515;
|
|
||||||
$base07: #202020;
|
|
||||||
$base08: #ff0086;
|
|
||||||
$base09: #fd8900;
|
|
||||||
$base0a: #aba800;
|
|
||||||
$base0b: #00c918;
|
|
||||||
$base0c: #1faaaa;
|
|
||||||
$base0d: #3777e6;
|
|
||||||
$base0e: #ad00a1;
|
|
||||||
$base0f: #cc6633;
|
|
||||||
```
|
|
||||||
|
|
||||||
##### Sunrise
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
```scss
|
|
||||||
/* sunrise syntax highlighting (base16) */
|
|
||||||
$base00: #1d1f21;
|
|
||||||
$base01: #282a2e;
|
|
||||||
$base02: #373b41;
|
|
||||||
$base03: #969896;
|
|
||||||
$base04: #b4b7b4;
|
|
||||||
$base05: #c5c8c6;
|
|
||||||
$base06: #e0e0e0;
|
|
||||||
$base07: #ffffff;
|
|
||||||
$base08: #cc6666;
|
|
||||||
$base09: #de935f;
|
|
||||||
$base0a: #f0c674;
|
|
||||||
$base0b: #b5bd68;
|
|
||||||
$base0c: #8abeb7;
|
|
||||||
$base0d: #81a2be;
|
|
||||||
$base0e: #b294bb;
|
|
||||||
$base0f: #a3685a;
|
|
||||||
```
|
|
||||||
|
|
||||||
### Breakpoints and grid stuff
|
|
||||||
|
|
||||||
Probably won't need to touch these, but they're there if you need to. Width variables are used with the [`@include breakpoint()`](http://breakpoint-sass.com/) mixin to adapt the design of certain elements.
|
|
||||||
|
|
||||||
And `$susy` is used for setting [the grid](http://susy.oddbird.net/) the theme uses. Uncommenting the lines under `debug` can be useful if you want to show the columns when adjusting the layout.
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<img src="{{ '/assets/images/mm-susy-grid-overlay.jpg' | relative_url }}" alt="Susy grid overlay for debugging">
|
|
||||||
<figcaption>Susy grid debug overlay enabled.</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
### Disabling animations
|
|
||||||
|
|
||||||
You can disable either the fade-in intro animation, element transition animations, or both by overriding the corresponding variables. For example if you wanted to disable all animations you could include the following lines:
|
|
||||||
|
|
||||||
```scss
|
|
||||||
$intro-transition : none;
|
|
||||||
$global-transition : none;
|
|
||||||
```
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
---
|
|
||||||
title: "JavaScript"
|
|
||||||
permalink: /docs/javascript/
|
|
||||||
excerpt: "Instructions for customizing and building the theme's scripts."
|
|
||||||
last_modified_at: 2021-07-23T09:33:35-04:00
|
|
||||||
---
|
|
||||||
|
|
||||||
The theme's `assets/js/main.min.js` script is built from several vendor, jQuery plugins, and other scripts found in [`assets/js/`](https://github.com/mmistakes/minimal-mistakes/tree/master/assets/js).
|
|
||||||
|
|
||||||
```bash
|
|
||||||
minimal mistakes
|
|
||||||
├── assets
|
|
||||||
| ├── js
|
|
||||||
| | ├── plugins
|
|
||||||
| | | ├── gumshoe.js # simple scrollspy
|
|
||||||
| | | ├── jquery.ba-throttle-debounce.js # rate-limit functions
|
|
||||||
| | | ├── jquery.fitvids.js # fluid width video embeds
|
|
||||||
| | | ├── jquery.greedy-navigation.js # priority plus navigation
|
|
||||||
| | | ├── jquery.magnific-popup.js # responsive lightbox
|
|
||||||
| | | └── smooth-scroll.js # make same-page links scroll smoothly
|
|
||||||
| | ├── vendor
|
|
||||||
| | | └── jquery
|
|
||||||
| | | └── jquery-3.5.1.js
|
|
||||||
| | ├── _main.js # jQuery plugin settings and other scripts
|
|
||||||
| | └── main.min.js # concatenated and minified theme script
|
|
||||||
```
|
|
||||||
|
|
||||||
## Customizing
|
|
||||||
|
|
||||||
To modify or add your own scripts include them in [`assets/js/_main.js`](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/js/_main.js) and then rebuild using `npm run build:js`. See below for more details.
|
|
||||||
|
|
||||||
If you add additional scripts to `assets/js/plugins/` and would like them concatenated with the others, be sure to update the `uglify` script in [`package.json`](https://github.com/mmistakes/minimal-mistakes/blob/master/package.json). Same goes for scripts that you remove.
|
|
||||||
|
|
||||||
You can also add scripts to the `<head>` or closing `</body>` elements by adding paths to following arrays in `_config.yml`.
|
|
||||||
|
|
||||||
**Example:**
|
|
||||||
|
|
||||||
```yaml
|
|
||||||
head_scripts:
|
|
||||||
- https://code.jquery.com/jquery-3.3.1.min.js
|
|
||||||
- /assets/js/your-custom-head-script.js
|
|
||||||
footer_scripts:
|
|
||||||
- /assets/js/your-custom-footer-script.js
|
|
||||||
after_footer_scripts:
|
|
||||||
- /assets/js/custom-script-loads-after-footer.js
|
|
||||||
```
|
|
||||||
|
|
||||||
**Note:** If you assign `footer_scripts` the theme's `/assets/js/main.min.js` file will be deactivated. This script includes jQuery and various other plugins that you'll need to find replacements for and include separately.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Build process
|
|
||||||
|
|
||||||
In an effort to reduce dependencies a set of [**npm scripts**](https://css-tricks.com/why-npm-scripts/) are used to build `main.min.js` instead of task runners like [Gulp](http://gulpjs.com/) or [Grunt](http://gruntjs.com/). If those tools are more your style then by all means use them instead :wink:.
|
|
||||||
|
|
||||||
To get started:
|
|
||||||
|
|
||||||
1. Install [Node.js](http://nodejs.org/).
|
|
||||||
2. `cd` to the root of your project.
|
|
||||||
3. Install all of the dependencies by running `npm install`.
|
|
||||||
|
|
||||||
**Note:** If you upgraded from a previous version of the theme be sure you copied over [`package.json`](https://github.com/{{ site.repository }}/blob/master/package.json) prior to running `npm install`.
|
|
||||||
{: .notice--warning}
|
|
||||||
|
|
||||||
If all goes well, running `npm run build:js` will compress/concatenate `_main.js` and all plugin scripts into `main.min.js`.
|
|
||||||
|
|
||||||
## Debugging
|
|
||||||
|
|
||||||
The minified JavaScript is harder to debug in the browser than the raw source. To stop the minification and bundle all the JavaScript as-is --- open up `package.json` and edit the value `scripts.uglify` from:
|
|
||||||
|
|
||||||
```json
|
|
||||||
"scripts": {
|
|
||||||
"uglify": "uglifyjs [...] -c -m -o assets/js/main.min.js",
|
|
||||||
```
|
|
||||||
|
|
||||||
To the following:
|
|
||||||
|
|
||||||
```json
|
|
||||||
"scripts": {
|
|
||||||
"uglify": "cat [...] > assets/js/main.min.js",
|
|
||||||
```
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue