Merge branch 'feature/documentation-and-demo' into develop
This commit is contained in:
commit
58a59d7d00
155 changed files with 3612 additions and 1037 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -7,3 +7,4 @@ _asset_bundler_cache
|
||||||
_site
|
_site
|
||||||
codekit-config.json
|
codekit-config.json
|
||||||
node_modules
|
node_modules
|
||||||
|
npm-debug.log*
|
55
CHANGELOG
Normal file
55
CHANGELOG
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
## [1.2.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.2.0)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Table weren't filling the entire width of the content container. They now scale at 100%. Thanks [@dhruvbhatia](https://github.com/dhruvbhatia)
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Decreased spacing between Markdown footnotes
|
||||||
|
- Removed dark background on footer
|
||||||
|
- Removed UPPERCASE styling on post titles in the index listing
|
||||||
|
|
||||||
|
## [1.1.4](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.4)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Fix top navigation bug issue ([#10](https://github.com/mmistakes/minimal-mistakes/issues/10)) for real this time. Remember to clear your floats kids.
|
||||||
|
|
||||||
|
## [1.1.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.3)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Fix top navigation links that weren't click able on small viewports (Issue [#10](https://github.com/mmistakes/minimal-mistakes/issues/10)).
|
||||||
|
- Remove line wrap from top navigation links that may span multiple lines.
|
||||||
|
|
||||||
|
## [1.1.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.2)
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Added Grunt build script for compiling Less/JavaScript and optimizing image assets.
|
||||||
|
- Added support for large image summary Twitter card.
|
||||||
|
- Stylesheet adjustments
|
||||||
|
|
||||||
|
## [1.1.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.1)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Removed [Typeplate](http://typeplate.com/) styles. Was [causing issues with newer versions of Less](https://github.com/typeplate/typeplate.github.io/issues/108) and is no longer maintained.
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Added [image attribution](http://mmistakes.github.io/minimal-mistakes/theme-setup/#feature-images) for post and page feature images.
|
||||||
|
- Added [404 page](http://mmistakes.github.io/minimal-mistakes/404.html).
|
||||||
|
- Cleaned up various Less variables to better align with naming conventions used in other MM Jekyll themes.
|
||||||
|
- Removed Chrome Frame references.
|
||||||
|
- Added global CSS3 transitions to text and block elements.
|
||||||
|
- Improved typography in a few places.
|
||||||
|
|
||||||
|
## [1.0.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/v1.0.2)
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Google Analytics, Google Authorship, webmaster verifies, and Twitter card meta are now optional.
|
||||||
|
|
||||||
|
## [1.0.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/v1.0.1)
|
31
Gemfile.lock
31
Gemfile.lock
|
@ -22,22 +22,23 @@ GEM
|
||||||
ffi (1.9.10)
|
ffi (1.9.10)
|
||||||
ffi (1.9.10-x64-mingw32)
|
ffi (1.9.10-x64-mingw32)
|
||||||
gemoji (2.1.0)
|
gemoji (2.1.0)
|
||||||
github-pages (56)
|
github-pages (69)
|
||||||
RedCloth (= 4.2.9)
|
RedCloth (= 4.2.9)
|
||||||
github-pages-health-check (= 1.1.0)
|
github-pages-health-check (= 1.1.0)
|
||||||
jekyll (= 3.0.3)
|
jekyll (= 3.0.3)
|
||||||
jekyll-coffeescript (= 1.0.1)
|
jekyll-coffeescript (= 1.0.1)
|
||||||
jekyll-feed (= 0.4.0)
|
jekyll-feed (= 0.4.0)
|
||||||
jekyll-gist (= 1.4.0)
|
jekyll-gist (= 1.4.0)
|
||||||
jekyll-mentions (= 1.1.1)
|
jekyll-github-metadata (= 1.11.0)
|
||||||
|
jekyll-mentions (= 1.1.2)
|
||||||
jekyll-paginate (= 1.1.0)
|
jekyll-paginate (= 1.1.0)
|
||||||
jekyll-redirect-from (= 0.9.1)
|
jekyll-redirect-from (= 0.10.0)
|
||||||
jekyll-sass-converter (= 1.3.0)
|
jekyll-sass-converter (= 1.3.0)
|
||||||
jekyll-seo-tag (= 1.3.2)
|
jekyll-seo-tag (= 1.3.3)
|
||||||
jekyll-sitemap (= 0.10.0)
|
jekyll-sitemap (= 0.10.0)
|
||||||
jekyll-textile-converter (= 0.1.0)
|
jekyll-textile-converter (= 0.1.0)
|
||||||
jemoji (= 0.6.1)
|
jemoji (= 0.6.2)
|
||||||
kramdown (= 1.9.0)
|
kramdown (= 1.10.0)
|
||||||
liquid (= 3.0.6)
|
liquid (= 3.0.6)
|
||||||
mercenary (~> 0.3)
|
mercenary (~> 0.3)
|
||||||
rdiscount (= 2.1.8)
|
rdiscount (= 2.1.8)
|
||||||
|
@ -50,7 +51,7 @@ GEM
|
||||||
octokit (~> 4.0)
|
octokit (~> 4.0)
|
||||||
public_suffix (~> 1.4)
|
public_suffix (~> 1.4)
|
||||||
typhoeus (~> 0.7)
|
typhoeus (~> 0.7)
|
||||||
html-pipeline (2.3.0)
|
html-pipeline (2.4.0)
|
||||||
activesupport (>= 2, < 5)
|
activesupport (>= 2, < 5)
|
||||||
nokogiri (>= 1.4)
|
nokogiri (>= 1.4)
|
||||||
i18n (0.7.0)
|
i18n (0.7.0)
|
||||||
|
@ -68,32 +69,34 @@ GEM
|
||||||
jekyll-feed (0.4.0)
|
jekyll-feed (0.4.0)
|
||||||
jekyll-gist (1.4.0)
|
jekyll-gist (1.4.0)
|
||||||
octokit (~> 4.2)
|
octokit (~> 4.2)
|
||||||
jekyll-mentions (1.1.1)
|
jekyll-github-metadata (1.11.0)
|
||||||
|
octokit (~> 4.0)
|
||||||
|
jekyll-mentions (1.1.2)
|
||||||
html-pipeline (~> 2.3)
|
html-pipeline (~> 2.3)
|
||||||
jekyll (~> 3.0)
|
jekyll (~> 3.0)
|
||||||
jekyll-paginate (1.1.0)
|
jekyll-paginate (1.1.0)
|
||||||
jekyll-redirect-from (0.9.1)
|
jekyll-redirect-from (0.10.0)
|
||||||
jekyll (>= 2.0)
|
jekyll (>= 2.0)
|
||||||
jekyll-sass-converter (1.3.0)
|
jekyll-sass-converter (1.3.0)
|
||||||
sass (~> 3.2)
|
sass (~> 3.2)
|
||||||
jekyll-seo-tag (1.3.2)
|
jekyll-seo-tag (1.3.3)
|
||||||
jekyll (~> 3.0)
|
jekyll (~> 3.0)
|
||||||
jekyll-sitemap (0.10.0)
|
jekyll-sitemap (0.10.0)
|
||||||
jekyll-textile-converter (0.1.0)
|
jekyll-textile-converter (0.1.0)
|
||||||
RedCloth (~> 4.0)
|
RedCloth (~> 4.0)
|
||||||
jekyll-watch (1.3.1)
|
jekyll-watch (1.3.1)
|
||||||
listen (~> 3.0)
|
listen (~> 3.0)
|
||||||
jemoji (0.6.1)
|
jemoji (0.6.2)
|
||||||
gemoji (~> 2.0)
|
gemoji (~> 2.0)
|
||||||
html-pipeline (~> 2.2)
|
html-pipeline (~> 2.2)
|
||||||
jekyll (>= 3.0)
|
jekyll (>= 3.0)
|
||||||
json (1.8.3)
|
json (1.8.3)
|
||||||
kramdown (1.9.0)
|
kramdown (1.10.0)
|
||||||
liquid (3.0.6)
|
liquid (3.0.6)
|
||||||
listen (3.0.6)
|
listen (3.0.6)
|
||||||
rb-fsevent (>= 0.9.3)
|
rb-fsevent (>= 0.9.3)
|
||||||
rb-inotify (>= 0.9.7)
|
rb-inotify (>= 0.9.7)
|
||||||
mercenary (0.3.5)
|
mercenary (0.3.6)
|
||||||
mini_portile2 (2.0.0)
|
mini_portile2 (2.0.0)
|
||||||
minitest (5.8.4)
|
minitest (5.8.4)
|
||||||
multipart-post (2.0.0)
|
multipart-post (2.0.0)
|
||||||
|
@ -112,7 +115,7 @@ GEM
|
||||||
redcarpet (3.3.3)
|
redcarpet (3.3.3)
|
||||||
rouge (1.10.1)
|
rouge (1.10.1)
|
||||||
safe_yaml (1.0.4)
|
safe_yaml (1.0.4)
|
||||||
sass (3.3.14)
|
sass (3.4.22)
|
||||||
sawyer (0.7.0)
|
sawyer (0.7.0)
|
||||||
addressable (>= 2.3.5, < 2.5)
|
addressable (>= 2.3.5, < 2.5)
|
||||||
faraday (~> 0.8, < 0.10)
|
faraday (~> 0.8, < 0.10)
|
||||||
|
|
2
LICENSE
2
LICENSE
|
@ -1,6 +1,6 @@
|
||||||
The MIT License (MIT)
|
The MIT License (MIT)
|
||||||
|
|
||||||
Copyright (c) 2014 Michael Rose
|
Copyright (c) 2016 Michael Rose
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
# Minimal Mistakes
|
# Minimal Mistakes Jekyll Theme
|
||||||
|
|
||||||
**[Minimal Mistakes](http://mmistakes.github.io/minimal-mistakes)** is a two column responsive Jekyll theme perfect for powering your GitHub hosted blog built. Compatible with Jekyll 3.0 and up.
|
**[Minimal Mistakes](http://mmistakes.github.io/minimal-mistakes)** is a two column responsive Jekyll theme perfect for powering your GitHub hosted blog built. Compatible with Jekyll 3.0 and up.
|
||||||
|
|
||||||
## Minimal Mistakes is all about:
|
## Minimal Mistakes is all about:
|
||||||
|
|
||||||
* Responsive templates. Looking good on mobile, tablet, and desktop.
|
- Responsive templates. Looking good on mobile, tablet, and desktop.
|
||||||
* Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
|
- Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
|
||||||
* Minimal embellishments -- content first.
|
- Minimal embellishments -- content first.
|
||||||
* Optional large feature images for posts and pages.
|
- Optional large feature images for posts and pages.
|
||||||
* Simple and clear permalink structure.
|
- Simple and clear permalink structure.
|
||||||
* [Custom 404 page](http://mmistakes.github.io/minimal-mistakes/404.html) to get you started.
|
- [Custom 404 page](http://mmistakes.github.io/minimal-mistakes/404.html) to get you started.
|
||||||
* Support for Disqus Comments
|
- Support for Disqus Comments
|
||||||
|
|
||||||
![screenshot of Minimal Mistakes theme](http://mmistakes.github.io/minimal-mistakes/images/mm-theme-post-600.jpg)
|
![screenshot of Minimal Mistakes theme](http://mmistakes.github.io/minimal-mistakes/images/mm-theme-post-600.jpg)
|
||||||
|
|
6
_config.dev.yml
Normal file
6
_config.dev.yml
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
# Develop override settings
|
||||||
|
|
||||||
|
url: http://localhost:4000
|
||||||
|
|
||||||
|
analytics:
|
||||||
|
provider: false
|
171
_config.yml
171
_config.yml
|
@ -1,35 +1,24 @@
|
||||||
# Welcome to Jekyll!
|
# Welcome to Jekyll!
|
||||||
#
|
#
|
||||||
# This config file is meant for settings that affect your whole blog, values
|
# 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.
|
# 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
|
# For technical reasons, this file is *NOT* reloaded automatically when you use
|
||||||
# 'jekyll serve'. If you change this file, please restart the server process.
|
# `jekyll serve`. If you change this file, please restart the server process.
|
||||||
|
|
||||||
# Site Settings
|
# Site Settings
|
||||||
locale : en_US
|
locale : "en-US"
|
||||||
title : "Your Awesome Site"
|
title : "Minimal Mistakes"
|
||||||
title_separator : "-"
|
title_separator : "-"
|
||||||
name : &name "Your Name"
|
name : &name "Michael Rose"
|
||||||
description : &description "Write an awesome description for your new site here."
|
description : &description "A flexible Jekyll theme for your blog or site with a minimalist aesthetic."
|
||||||
url : "http://localhost:4000" # the base hostname & protocol for your site
|
url : # the base hostname & protocol for your site e.g. "//github.io.mmistakes"
|
||||||
baseurl : "/minimal-mistakes" # the subpath of your site, e.g. /blog
|
baseurl : "/minimal-mistakes" # the subpath of your site, e.g. "/blog"
|
||||||
email : "your-email@domain.com"
|
gh_repo : "https://github.com/mmistakes/minimal-mistakes"
|
||||||
logo : "site-logo.png"
|
teaser : # filename of teaser fallback teaser image placed in /images/, .e.g. "500x300.png"
|
||||||
teaser : "500x300.png"
|
breadcrumbs : true # true, false (default)
|
||||||
breadcrumbs : # true, false (default)
|
|
||||||
breadcrumb_home_label : "Home"
|
|
||||||
breadcrumb_separator : "/"
|
|
||||||
twitter:
|
|
||||||
username : &twitter "site_twitter"
|
|
||||||
facebook:
|
|
||||||
username : &facebook "site_facebook"
|
|
||||||
app_id :
|
|
||||||
publisher :
|
|
||||||
read_time : true
|
|
||||||
words_per_minute : 200
|
words_per_minute : 200
|
||||||
share : true
|
|
||||||
comments:
|
comments:
|
||||||
provider : false # false (default), "disqus", "facebook", "google-plus", custom"
|
provider : "disqus" # false (default), "disqus", "facebook", "google-plus", custom"
|
||||||
disqus:
|
disqus:
|
||||||
shortname : "mmistakes-dev" # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
|
shortname : "mmistakes-dev" # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
|
||||||
facebook:
|
facebook:
|
||||||
|
@ -37,28 +26,74 @@ comments:
|
||||||
appid :
|
appid :
|
||||||
num_posts : # 5 (default)
|
num_posts : # 5 (default)
|
||||||
colorscheme : # "light" (default), "dark"
|
colorscheme : # "light" (default), "dark"
|
||||||
google_site_verification :
|
|
||||||
|
# SEO Related
|
||||||
|
google_site_verification : "UQj93ERU9zgECodaaXgVpkjrFn9UrDMEzVamacSoQ8Y"
|
||||||
bing_site_verification :
|
bing_site_verification :
|
||||||
alexa_site_verification :
|
alexa_site_verification :
|
||||||
yandex_site_verification :
|
yandex_site_verification :
|
||||||
analytics:
|
|
||||||
provider : false # false (default), "google", "google-universal", "custom"
|
|
||||||
google:
|
|
||||||
tracking_id : "UA-123456-7"
|
|
||||||
google_ad_client :
|
|
||||||
google_ad_slot :
|
|
||||||
|
|
||||||
# For specifying social profiles.
|
# Social Sharing
|
||||||
|
twitter:
|
||||||
|
username : &twitter "mmistakes"
|
||||||
|
facebook:
|
||||||
|
username : &facebook "michaelrose"
|
||||||
|
app_id :
|
||||||
|
publisher :
|
||||||
|
og_image : "site-logo.png" # Open Graph/Twitter default site image
|
||||||
|
# For specifying social profiles
|
||||||
# - https://developers.google.com/structured-data/customize/social-profiles
|
# - https://developers.google.com/structured-data/customize/social-profiles
|
||||||
social:
|
social:
|
||||||
type : # Person or Organization (defaults to Person)
|
type : # Person or Organization (defaults to Person)
|
||||||
name : # If the user or organization name differs from the site's name
|
name : # If the user or organization name differs from the site's name
|
||||||
links: # An array of links to social media profiles
|
links: # An array of links to social media profiles
|
||||||
- "https://twitter.com/site_twitter"
|
- "https://twitter.com/mmistakes"
|
||||||
- "https://facebook.com/site_facebook"
|
- "https://facebook.com/michaelrose"
|
||||||
|
|
||||||
|
# Analytics
|
||||||
|
analytics:
|
||||||
|
provider : "google-universal" # false (default), "google", "google-universal", "custom"
|
||||||
|
google:
|
||||||
|
tracking_id : "UA-2011187-3"
|
||||||
|
|
||||||
|
# Google AdSense
|
||||||
|
google_ad_client :
|
||||||
|
google_ad_slot :
|
||||||
|
|
||||||
|
|
||||||
|
# Site Author
|
||||||
|
author:
|
||||||
|
name : *name
|
||||||
|
avatar : "bio-photo.jpg"
|
||||||
|
bio : *description
|
||||||
|
location : "Buffalo, NY"
|
||||||
|
email : *email
|
||||||
|
uri : "https://mademistakes.com"
|
||||||
|
bitbucket :
|
||||||
|
codepen :
|
||||||
|
dribbble :
|
||||||
|
flickr :
|
||||||
|
facebook : *facebook
|
||||||
|
foursquare :
|
||||||
|
github : "mmistakes"
|
||||||
|
google_plus :
|
||||||
|
keybase :
|
||||||
|
instagram : "mmistakes"
|
||||||
|
lastfm :
|
||||||
|
linkedin :
|
||||||
|
pinterest :
|
||||||
|
soundcloud :
|
||||||
|
stackoverflow : # http://stackoverflow.com/users/123456/username
|
||||||
|
steam :
|
||||||
|
tumblr :
|
||||||
|
twitter : *twitter
|
||||||
|
vine :
|
||||||
|
weibo :
|
||||||
|
xing :
|
||||||
|
youtube :
|
||||||
|
|
||||||
|
|
||||||
# Reading Files
|
# Reading Files
|
||||||
safe: false
|
|
||||||
include:
|
include:
|
||||||
- .htaccess
|
- .htaccess
|
||||||
- _pages
|
- _pages
|
||||||
|
@ -73,6 +108,7 @@ exclude:
|
||||||
- assets/js/_main.js
|
- assets/js/_main.js
|
||||||
- assets/js/vendor
|
- assets/js/vendor
|
||||||
- Capfile
|
- Capfile
|
||||||
|
- CHANGELOG
|
||||||
- config
|
- config
|
||||||
- Gemfile
|
- Gemfile
|
||||||
- Gruntfile.js
|
- Gruntfile.js
|
||||||
|
@ -90,16 +126,15 @@ keep_files:
|
||||||
encoding: "utf-8"
|
encoding: "utf-8"
|
||||||
markdown_ext: "markdown,mkdown,mkdn,mkd,md"
|
markdown_ext: "markdown,mkdown,mkdn,mkd,md"
|
||||||
|
|
||||||
|
|
||||||
# Conversion
|
# Conversion
|
||||||
markdown: kramdown
|
markdown: kramdown
|
||||||
highlighter: rouge
|
highlighter: rouge
|
||||||
sass:
|
|
||||||
sass_dir: _sass
|
|
||||||
style: compressed
|
|
||||||
lsi: false
|
lsi: false
|
||||||
excerpt_separator: "\n\n"
|
excerpt_separator: "\n\n"
|
||||||
incremental: false
|
incremental: false
|
||||||
|
|
||||||
|
|
||||||
# Markdown Processing
|
# Markdown Processing
|
||||||
kramdown:
|
kramdown:
|
||||||
input: GFM
|
input: GFM
|
||||||
|
@ -111,8 +146,12 @@ kramdown:
|
||||||
smart_quotes: lsquo,rsquo,ldquo,rdquo
|
smart_quotes: lsquo,rsquo,ldquo,rdquo
|
||||||
enable_coderay: false
|
enable_coderay: false
|
||||||
|
|
||||||
|
|
||||||
# Collections
|
# Collections
|
||||||
collections:
|
collections:
|
||||||
|
docs:
|
||||||
|
output: true
|
||||||
|
permalink: /:collection/:path/
|
||||||
recipes:
|
recipes:
|
||||||
output: true
|
output: true
|
||||||
permalink: /:collection/:path/
|
permalink: /:collection/:path/
|
||||||
|
@ -123,6 +162,7 @@ collections:
|
||||||
output: true
|
output: true
|
||||||
permalink: /:collection/:path/
|
permalink: /:collection/:path/
|
||||||
|
|
||||||
|
|
||||||
# Defaults
|
# Defaults
|
||||||
defaults:
|
defaults:
|
||||||
# _posts
|
# _posts
|
||||||
|
@ -143,6 +183,16 @@ defaults:
|
||||||
values:
|
values:
|
||||||
layout: single
|
layout: single
|
||||||
author_profile: true
|
author_profile: true
|
||||||
|
# _docs
|
||||||
|
- scope:
|
||||||
|
path: ""
|
||||||
|
type: docs
|
||||||
|
values:
|
||||||
|
layout: single
|
||||||
|
read_time: false
|
||||||
|
author_profile: false
|
||||||
|
share: false
|
||||||
|
comments: false
|
||||||
# _recipes
|
# _recipes
|
||||||
- scope:
|
- scope:
|
||||||
path: ""
|
path: ""
|
||||||
|
@ -170,12 +220,22 @@ defaults:
|
||||||
author_profile: false
|
author_profile: false
|
||||||
share: true
|
share: true
|
||||||
|
|
||||||
|
|
||||||
|
# Outputting
|
||||||
|
permalink: /:categories/:title/
|
||||||
|
paginate: 5 # amount of posts to show
|
||||||
|
paginate_path: /page:num/
|
||||||
|
timezone: America/New_York # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
|
||||||
|
|
||||||
|
|
||||||
# Plugins
|
# Plugins
|
||||||
gems:
|
gems:
|
||||||
- jekyll-paginate
|
- jekyll-paginate
|
||||||
- jekyll-sitemap
|
- jekyll-sitemap
|
||||||
- jekyll-gist
|
- jekyll-gist
|
||||||
- jekyll-feed
|
- jekyll-feed
|
||||||
|
- jemoji
|
||||||
|
- jekyll-redirect-from
|
||||||
# - jekyll-archives
|
# - jekyll-archives
|
||||||
|
|
||||||
# mimic GitHub Pages with --safe
|
# mimic GitHub Pages with --safe
|
||||||
|
@ -184,12 +244,9 @@ whitelist:
|
||||||
- jekyll-sitemap
|
- jekyll-sitemap
|
||||||
- jekyll-gist
|
- jekyll-gist
|
||||||
- jekyll-feed
|
- jekyll-feed
|
||||||
|
- jemoji
|
||||||
|
- jekyll-redirect-from
|
||||||
|
|
||||||
# Outputting
|
|
||||||
permalink: /:categories/:title/
|
|
||||||
paginate: 5 # amount of posts to show
|
|
||||||
paginate_path: /page:num/
|
|
||||||
timezone: America/New_York # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
|
|
||||||
|
|
||||||
# Archives
|
# Archives
|
||||||
# Type
|
# Type
|
||||||
|
@ -216,39 +273,13 @@ tags:
|
||||||
# category: archive-taxonomy
|
# category: archive-taxonomy
|
||||||
# tag: archive-taxonomy
|
# tag: archive-taxonomy
|
||||||
# permalinks:
|
# permalinks:
|
||||||
# category: /:name/
|
# category: /categories/:name/
|
||||||
# tag: /tags/:name/
|
# tag: /tags/:name/
|
||||||
|
|
||||||
|
|
||||||
# HTML Compression
|
# HTML Compression
|
||||||
# - http://jch.penibelst.de/
|
# - http://jch.penibelst.de/
|
||||||
compress_html:
|
compress_html:
|
||||||
clippings: all
|
clippings: all
|
||||||
ignore:
|
ignore:
|
||||||
envs: development
|
envs: development
|
||||||
|
|
||||||
# Site Author
|
|
||||||
author:
|
|
||||||
name : *name
|
|
||||||
avatar : "bio-photo.jpg"
|
|
||||||
bio : *description
|
|
||||||
email : *email
|
|
||||||
codepen :
|
|
||||||
dribbble :
|
|
||||||
flickr :
|
|
||||||
facebook : *facebook
|
|
||||||
foursquare :
|
|
||||||
github :
|
|
||||||
google_plus :
|
|
||||||
instagram :
|
|
||||||
lastfm :
|
|
||||||
linkedin :
|
|
||||||
pinterest :
|
|
||||||
soundcloud :
|
|
||||||
stackoverflow : # http://stackoverflow.com/users/123456/username
|
|
||||||
steam :
|
|
||||||
tumblr :
|
|
||||||
twitter : *twitter
|
|
||||||
vine :
|
|
||||||
weibo :
|
|
||||||
xing :
|
|
||||||
youtube :
|
|
|
@ -1,19 +1,77 @@
|
||||||
# Site navigation links
|
# main links links
|
||||||
|
main:
|
||||||
|
- title: "Quick-Start Guide"
|
||||||
|
url: /docs/quick-start-guide/
|
||||||
|
|
||||||
- title: "Theme Setup"
|
- title: "Posts"
|
||||||
url: /theme-setup/
|
url: /year-archive/
|
||||||
|
|
||||||
- title: "Posts"
|
- title: "Categories"
|
||||||
url: /year-archive/
|
url: /categories/
|
||||||
|
|
||||||
- title: "Categories"
|
- title: "Tags"
|
||||||
url: /categories/
|
url: /tags/
|
||||||
|
|
||||||
- title: "Tags"
|
- title: "Pages"
|
||||||
url: /tags/
|
url: /page-archive/
|
||||||
|
|
||||||
- title: "Pages"
|
- title: "Collections"
|
||||||
url: /page-archive/
|
url: /collection-archive/
|
||||||
|
|
||||||
- title: "Collections"
|
|
||||||
url: /collection-archive/
|
# documentation links
|
||||||
|
docs:
|
||||||
|
- title: Getting Started
|
||||||
|
children:
|
||||||
|
- title: "Quick-Start Guide"
|
||||||
|
path: quick-start-guide
|
||||||
|
- title: "Structure"
|
||||||
|
path: structure
|
||||||
|
- title: "Installation"
|
||||||
|
path: installation
|
||||||
|
- title: "Upgrading"
|
||||||
|
path: upgrading
|
||||||
|
|
||||||
|
- title: Customization
|
||||||
|
children:
|
||||||
|
- title: "Configuration"
|
||||||
|
path: configuration
|
||||||
|
- title: "Navigation"
|
||||||
|
path: navigation
|
||||||
|
- title: "UI Text"
|
||||||
|
path: ui-text
|
||||||
|
- title: "Authors"
|
||||||
|
path: authors
|
||||||
|
- title: "Layouts"
|
||||||
|
path: layouts
|
||||||
|
|
||||||
|
- title: Content
|
||||||
|
children:
|
||||||
|
- title: "Working with Posts"
|
||||||
|
path: posts
|
||||||
|
- title: "Working with Pages"
|
||||||
|
path: pages
|
||||||
|
- title: "Working with Collections"
|
||||||
|
path: collections
|
||||||
|
- title: "Helpers"
|
||||||
|
path: helpers
|
||||||
|
- title: "Utility Classes"
|
||||||
|
path: utility-classes
|
||||||
|
|
||||||
|
- title: Extras
|
||||||
|
children:
|
||||||
|
- title: "Stylesheets"
|
||||||
|
path: stylesheets
|
||||||
|
- title: "JavaScript"
|
||||||
|
path: javascript
|
||||||
|
|
||||||
|
- title: Meta
|
||||||
|
children:
|
||||||
|
- title: "History"
|
||||||
|
path: history
|
||||||
|
- title: "Contributing"
|
||||||
|
path: contributing
|
||||||
|
- title: "Old 2.2 Docs"
|
||||||
|
path: docs-2-2
|
||||||
|
- title: "License"
|
||||||
|
path: license
|
|
@ -3,28 +3,32 @@
|
||||||
# English (default)
|
# English (default)
|
||||||
# -----------------
|
# -----------------
|
||||||
en: &DEFAULT_EN
|
en: &DEFAULT_EN
|
||||||
page : "Page"
|
page : "Page"
|
||||||
pagination_previous : "Previous"
|
pagination_previous : "Previous"
|
||||||
pagination_next : "Next"
|
pagination_next : "Next"
|
||||||
toc_label : "Overview"
|
breadcrumb_home_label : "Home"
|
||||||
ext_link_label : "Direct Link"
|
breadcrumb_separator : "/"
|
||||||
less_than : "less than"
|
toc_label : "On This Page"
|
||||||
minute_read : "minute read"
|
ext_link_label : "Direct Link"
|
||||||
minutes_read : "minutes read"
|
less_than : "less than"
|
||||||
share_on_label : "Share on"
|
minute_read : "minute read"
|
||||||
meta_label :
|
minutes_read : "minutes read"
|
||||||
tags_label : "Tags:"
|
share_on_label : "Share on"
|
||||||
categories_label : "Categories:"
|
meta_label :
|
||||||
date_label :
|
tags_label : "Tags:"
|
||||||
comments_label : "Leave a Comment"
|
categories_label : "Categories:"
|
||||||
more_label : "Learn More"
|
date_label : "Updated:"
|
||||||
related_label : "You May Also Enjoy"
|
comments_label : "Leave a Comment"
|
||||||
follow_label : "Follow:"
|
more_label : "Learn More"
|
||||||
feed_label : "Feed"
|
related_label : "You May Also Enjoy"
|
||||||
powered_by : "Powered by"
|
follow_label : "Follow:"
|
||||||
en_US:
|
feed_label : "Feed"
|
||||||
|
powered_by : "Powered by"
|
||||||
|
website_label : "Website"
|
||||||
|
email_label : "Email"
|
||||||
|
en-US:
|
||||||
<<: *DEFAULT_EN
|
<<: *DEFAULT_EN
|
||||||
en_UK:
|
en-UK:
|
||||||
<<: *DEFAULT_EN
|
<<: *DEFAULT_EN
|
||||||
|
|
||||||
# Another locale
|
# Another locale
|
||||||
|
|
48
_docs/01-quick-start-guide.md
Normal file
48
_docs/01-quick-start-guide.md
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
---
|
||||||
|
title: "Quick-Start Guide"
|
||||||
|
permalink: /docs/quick-start-guide/
|
||||||
|
excerpt: "How to quickly install and setup Minimal Mistakes for use with GitHub Pages."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
Minimal Mistakes has been developed to be 100% compatible with hosting a site on [GitHub Pages](https://pages.github.com/). To get up and running with a new GitHub repository quickly, follow these steps or jump ahead to the [full installation guide]({{ base_path }}/docs/installation/).
|
||||||
|
|
||||||
|
## Fork the Theme
|
||||||
|
|
||||||
|
Fork the [Minimal Mistakes theme]({{ site.gh_repo }}/fork), then rename the repo to **USERNAME.github.io** --- replacing **USERNAME** with your GitHub username.
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-theme-fork-repo.png" alt="fork Minimal Mistakes">
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
**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="{{ base_path }}/images/mm-gh-pages.gif" alt="creating a new branch on GitHub">
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
**ProTip:** Be sure to [delete](https://github.com/blog/1377-create-and-delete-branches) the `gh-pages` branch if you forked Minimal Mistakes. This branch contains the documentation and demo site for the theme and you probably don't want that showing up in your repo.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
## Customize Your Site
|
||||||
|
|
||||||
|
Open up `_config.yml` found in the root of the repo and edit anything under **Site Settings**. For a full explanation of every setting be sure to read the [**Configuration**]({{ base_path }}/docs/configuration/) section, but for now let's just change the site's title.
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-github-edit-config.gif" alt="editing _config.yml file">
|
||||||
|
<figcaption>Edit text files without leaving GitHub.com</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
Committing a change to `_config.yml` (or any file in your repository) will force GitHub Pages to rebuild your site with Jekyll. It should then be viewable a few seconds later at `https://USERNAME.github.io`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Congratulations! You've successfully forked the theme and are up an running with GitHub Pages. Now you're ready to add content and customize the site further.
|
57
_docs/02-structure.md
Normal file
57
_docs/02-structure.md
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
---
|
||||||
|
title: "Structure"
|
||||||
|
permalink: /docs/structure/
|
||||||
|
excerpt: "How the theme is organized and what all of the files are for."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-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.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
minimal-mistakes
|
||||||
|
├── _data # data files for customizing the theme
|
||||||
|
| ├── navigations.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 (Disqus, Facebook, Google+, and custom)
|
||||||
|
| ├── footer # custom snippets to add to site footer
|
||||||
|
| ├── head # custom snippets to add to site head
|
||||||
|
| ├── base_path # site.url + site.baseurl shortcut
|
||||||
|
| ├── 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 listing documents in an array
|
||||||
|
| ├── compress.html # compresses HTML in pure Liquid
|
||||||
|
| ├── default.html # base for all other layouts
|
||||||
|
| ├── single.html # single document (post/page/etc)
|
||||||
|
| └── splash.html # splash page
|
||||||
|
├── assets
|
||||||
|
| ├── _scss # stylesheet source files
|
||||||
|
| | ├── vendor # vendor SCSS partials
|
||||||
|
| | ├── main.scss # imports all SCSS partials
|
||||||
|
| | └── ... # theme SCSS partials
|
||||||
|
| ├── css
|
||||||
|
| | └── main.css # optimized stylesheet loaded in <head>
|
||||||
|
| ├── fonts
|
||||||
|
| | └── fontawesome-webfont # Font Awesome webfonts
|
||||||
|
| ├── 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>
|
||||||
|
├── images # image assets for posts/pages/collections/etc.
|
||||||
|
├── _config.yml # site configuration
|
||||||
|
├── Gemfile # gem file dependencies
|
||||||
|
├── Gemfile.lock # gem file dependencies
|
||||||
|
├── index.html # paginated home page showing recent posts
|
||||||
|
└── package.json # NPM build scripts
|
||||||
|
```
|
80
_docs/03-installation.md
Normal file
80
_docs/03-installation.md
Normal file
|
@ -0,0 +1,80 @@
|
||||||
|
---
|
||||||
|
title: "Installation"
|
||||||
|
permalink: /docs/installation/
|
||||||
|
excerpt: "Instructions for installing the theme for new and existing Jekyll based sites."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
## Install the Theme
|
||||||
|
|
||||||
|
There are several ways to install the theme:
|
||||||
|
|
||||||
|
**1.** For a **new site**, fork the Minimal Mistakes repo on GitHub. If you plan on hosting your site with GitHub Pages follow the steps outlined in the [*Quick-Start Guide*]({{ base_path }}/docs/quick-start-guide/).
|
||||||
|
|
||||||
|
**2.** For an **existing site** you have some more work ahead of you. What I suggest is to fork and rename the theme's repo as before, then clone it locally by running `git clone https://github.com/USERNAME/REPONAME.git` --- replacing **USERNAME** and **REPONAME** with your own.
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-github-copy-repo-url.jpg" alt="copy GitHub repo URL">
|
||||||
|
<figcaption>Tap the copy to clipboard button (outlined in red above) to grab your GitHub repo's path.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
**3.** And for those who don't want to mess with Git, you can download the theme as a ZIP file to work with locally.
|
||||||
|
|
||||||
|
[<i class="fa fa-download"></i> Download Minimal Mistakes Theme]({{ site.gh_repo }}/archive/master.zip){: .btn .btn--success}
|
||||||
|
|
||||||
|
**ProTip:** Be sure to [delete](https://github.com/blog/1377-create-and-delete-branches) the `gh-pages` branch if you forked Minimal Mistakes. This branch contains the documentation and demo site for the theme and you probably don't want that showing up in your repo.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
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 included [`Gemfile`]({{ site.gh_repo }}/blob/master/Gemfile). The theme's Gemfile includes the `github-pages` gem to maintain a local Jekyll environment in sync with GitHub Pages.
|
||||||
|
|
||||||
|
If you're not planning on hosting with GitHub Pages and want to leverage features found in the latest version of Jekyll, replace `gem "github-pages"` with `gem "jekyll"` in your `Gemfile`. In either case run the following:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ bundle install
|
||||||
|
```
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-bundle-install.gif" 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.
|
50
_docs/04-upgrading.md
Normal file
50
_docs/04-upgrading.md
Normal file
|
@ -0,0 +1,50 @@
|
||||||
|
---
|
||||||
|
title: "Upgrading"
|
||||||
|
permalink: /docs/upgrading/
|
||||||
|
excerpt: "Instructions and suggestions for upgrading the theme."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
Currently there is no good way of upgrading the theme without doing a bit of manual work. The future looks promising with [**gem based themes**](https://github.com/jekyll/jekyll/pull/4595) on the horizon, but for now here's some suggestions on how handle theme updates.
|
||||||
|
|
||||||
|
## 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 {{ site.gh_repo }}/minimal-mistakes.git`.
|
||||||
|
|
||||||
|
To add it you can do the following:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ git remote add upstream {{ site.gh_repo }}/minimal-mistakes.git
|
||||||
|
```
|
||||||
|
|
||||||
|
### Pull Down Updates
|
||||||
|
|
||||||
|
Now you can pull any commits made to theme's `master` branch with:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
$ 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, stagging the changes you wish to keep, and then commit them.
|
||||||
|
|
||||||
|
## Update Files Manually
|
||||||
|
|
||||||
|
Another way of dealing with updates is [downloading the theme]({{ site.gh_repo }}/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]({{ site.gh_repo }}/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. |
|
||||||
|
| `_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. |
|
515
_docs/05-configuration.md
Normal file
515
_docs/05-configuration.md
Normal file
|
@ -0,0 +1,515 @@
|
||||||
|
---
|
||||||
|
title: "Configuration"
|
||||||
|
permalink: /docs/configuration/
|
||||||
|
excerpt: "Settings for configuring and customizing the theme."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
Settings that affect your entire site can be changed in [Jekyll's configuration file](https://jekyllrb.com/docs/configuration/): `_config.yml`, found in the root of your project.
|
||||||
|
|
||||||
|
**Note:** for technical reasons, `_config.yml` is NOT reloaded automatically when used with `jekyll serve`. If you make any changes to this file, please restart the server process for them to be applied.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
Take a moment to look over the configuration file included with the theme. Comments have been added to provide examples and default values for most settings. Detailed explanations of each can be found below.
|
||||||
|
|
||||||
|
## Site Settings
|
||||||
|
|
||||||
|
### Site Locale
|
||||||
|
|
||||||
|
`site.locale` is used to declare the primary language for each web page within the site.
|
||||||
|
|
||||||
|
*Example:* `locale: "en-US"` sets the `lang` attribute for the site to the *United States* flavor of English, while `en-GB` would be for the `United Kingdom` style of English. Country codes are optional and the shorter `locale: "en"` is also acceptable. To find your language and country codes check this [reference table](https://msdn.microsoft.com/en-us/library/ee825488(v=cs.20).aspx).
|
||||||
|
|
||||||
|
Properly setting the locale is important for associating localized text found in the [**UI Text**]({{ base_path }}/docs/ui-text/) data file. For more information on that see below.
|
||||||
|
|
||||||
|
### Site Title
|
||||||
|
|
||||||
|
The name of your site. Is used throughout the theme in places like the site masthead and `<title>` tags.
|
||||||
|
|
||||||
|
*Example:* `title: "My Awesome Site"`
|
||||||
|
|
||||||
|
You also have the option of customizing the separation character used in SEO-friendly page titles.
|
||||||
|
|
||||||
|
*Example:* `title_separator: "|"` would produce page titles like `Sample Page | My Awesome Site`.
|
||||||
|
|
||||||
|
### Site Name
|
||||||
|
|
||||||
|
Used to assign a site author. Don't worry, you can override the site author with different ones on specific posts, pages, or collection documents.
|
||||||
|
|
||||||
|
*Example:* `name: "Michael Rose"`.
|
||||||
|
|
||||||
|
**ProTip:** If you want to get crafty with your YAML you can use [anchors](http://www.yaml.org/spec/1.2/spec.html#id2785586) to reuse values. For example `foo: &var "My String"` allows you to reuse `"My String"` elsewhere in `_config.yml` like so... `bar: *var`. You'll see a few examples of this in the provided Jekyll config.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
### Site Description
|
||||||
|
|
||||||
|
Fairly obvious. `site.description` describes the site. Used predominantly in meta descriptions as part of SEO efforts.
|
||||||
|
|
||||||
|
*Example:* `description: "A flexible Jekyll theme for your blog or site with a minimalist aesthetic."`
|
||||||
|
|
||||||
|
### Site URL
|
||||||
|
|
||||||
|
The base hostname and protocol for your site. If you're hosting with GitHub Pages this will be something like `url: "http://github.io.mmistakes"` or `url: "https://mademistakes.com"` if you have a custom domain name.
|
||||||
|
|
||||||
|
**Note:** It's important to remember that when testing locally you need to change the `site.url`. Ideally you'd use [multiple config files](https://mademistakes.com/articles/using-jekyll-2016/#environments-and-configurations) with `bundle exec jekyll serve --config _config.yml,_config.dev.yml` to apply development overrides. Simply commenting out the line works as well `# url: "http://mmistakes.github.io"`. Just remember to uncomment it before pushing or else you'll have broken assets and links all over the place!
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
**ProTip:** GitHub serves pages over `http://` and `https://` so to take advantage of that go protocol-less like so `url: "//github.io.mmistakes"`. Mre info on serving your GitHub Pages hosted site over https can be [found here](https://konklone.com/post/github-pages-now-sorta-supports-https-so-use-it).
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
### Site Base URL
|
||||||
|
|
||||||
|
This little option causes all kinds of confusion in the Jekyll community. If you're not hosting your site as a GitHub Pages Project or in a subfolder (eg: `/blog`), then don't mess with it.
|
||||||
|
|
||||||
|
In the case of the Minimal Mistakes demo site it's hosted on GitHub at <https://mmistakes.github.io/minimal-mistakes>. To correctly set this base path I'd use `url: "https://mmistakes.github.io"` and `baseurl: "/minimal-mistakes"`.
|
||||||
|
|
||||||
|
For more information on how to properly use `site.url` and `site.baseurl` as intended by the Jekyll maintainers, check [Parker Moore's post on the subject](https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/).
|
||||||
|
|
||||||
|
**Note:** When using `baseurl` remember to include it as part of your path when testing your site locally. Values of `url: ` and `baseurl: "/blog"` would make your local site visible at `http://localhost:4000/blog` and not `http://localhost:4000`.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
### Site Default Teaser Image
|
||||||
|
|
||||||
|
To assign a fallback teaser image used in the "**Related Posts**" module, place a graphic in the `/images/` directory and add the filename to `_config.yml` like so:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
teaser: "500x300.png"
|
||||||
|
```
|
||||||
|
|
||||||
|
This image can be overridden at anytime by applying the following to a document's YAML Front Matter.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
header:
|
||||||
|
teaser: my-awesome-post-teaser.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-teaser-images-example.jpg" alt="teaser image example">
|
||||||
|
<figcaption>Example of teaser images found in the related posts module.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
### Breadcrumb Navigation (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][jekyll-archives] to auto-generate them. If these pages don't exist breadcrumb links to them will be broken.
|
||||||
|
|
||||||
|
![breadcrumb navigation example]({{ base_path }}/images/mm-breadcrumbs-example.jpg)
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
breadcrumbs: true # disabled by default
|
||||||
|
```
|
||||||
|
|
||||||
|
Breadcrumb start link text and separator character can both be changed in the [UI Text data file]({{ base_path }}/docs/ui-text/).
|
||||||
|
|
||||||
|
### Reading Time
|
||||||
|
|
||||||
|
Enable estimated reading time snippets with `read_time: true` in YAML Front Matter. `200` has been set as the default words per minute value --- which can be changed by adjusting `words_per_minutes: ` in `_config.yml`.
|
||||||
|
|
||||||
|
![reading time example]({{ base_path }}/images/mm-read-time-example.jpg)
|
||||||
|
|
||||||
|
Instead of adding `read_time: true` to each post, apply as a default in `_config.yml` like so:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
defaults:
|
||||||
|
# _posts
|
||||||
|
- scope:
|
||||||
|
path: ""
|
||||||
|
type: posts
|
||||||
|
values:
|
||||||
|
read_time: true
|
||||||
|
```
|
||||||
|
|
||||||
|
To disable reading time for a post, add `read_time: false` its YAML Front Matter to override what was set in `_config.yml`.
|
||||||
|
|
||||||
|
### Comments
|
||||||
|
|
||||||
|
Commenting for [**Disqus**](https://disqus.com/), [**Facebook**](https://developers.facebook.com/docs/plugins/comments), and **Google+** are built into the theme. First set the comment provider you'd like to use:
|
||||||
|
|
||||||
|
| Name | Comment Provider |
|
||||||
|
| ---- | ---------------- |
|
||||||
|
| **disqus** | Disqus |
|
||||||
|
| **facebook** | Facebook Comments |
|
||||||
|
| **google-plus** | Google+ Comments |
|
||||||
|
| **custom** | Other |
|
||||||
|
|
||||||
|
Then add `comments: true` to each document you want comments visible on.
|
||||||
|
|
||||||
|
Instead of adding YAML Front Matter to each document, apply as a default in `_config.yml`. To enable comments for all posts:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
defaults:
|
||||||
|
# _posts
|
||||||
|
- scope:
|
||||||
|
path: ""
|
||||||
|
type: posts
|
||||||
|
values:
|
||||||
|
comments: true
|
||||||
|
```
|
||||||
|
|
||||||
|
If you add `comments: false` to a post's YAML Front Matter it will override the default and disable comments for just that post.
|
||||||
|
|
||||||
|
##### Disqus
|
||||||
|
|
||||||
|
To use Disqus you'll need to create an account and [shortname](https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-). Once you have both update `_config.yml` to:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
comments:
|
||||||
|
provider: "disqus"
|
||||||
|
disqus:
|
||||||
|
shortname: "your-disqus-shortname"
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Facebook Comments
|
||||||
|
|
||||||
|
To enable Facebook Comments choose how many comments you'd like visible per post and the color scheme of the widget.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
comments:
|
||||||
|
provider : "facebook"
|
||||||
|
facebook:
|
||||||
|
appid : # optional
|
||||||
|
num_posts : # 5 (default)
|
||||||
|
colorscheme : # "light" (default), "dark"
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Other Comment Providers
|
||||||
|
|
||||||
|
To use another provider not included with the theme set `provider: "custom"` then add their embed code to `_includes/comments-providers/custom.html`.
|
||||||
|
|
||||||
|
### SEO, Social Sharing, and Analytics Settings
|
||||||
|
|
||||||
|
All optional, but a good idea to take the time setting up to improve SEO and links shared from the site.
|
||||||
|
|
||||||
|
#### Google Search Console
|
||||||
|
|
||||||
|
Formerly known as [Google Webmaster Tools](https://www.google.com/webmasters/tools/), add your [verification code](https://support.google.com/analytics/answer/1142414?hl=en) like so: `google_site_verification: "yourVerificationCode"`.
|
||||||
|
|
||||||
|
**Note:** You likely won't have to do this if you verify site ownership through **Google Analytics** instead.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
#### Bing Webmaster Tools
|
||||||
|
|
||||||
|
There are several ways to [verify site ownership](https://www.bing.com/webmaster/help/how-to-verify-ownership-of-your-site-afcfefc6) --- the easiest adding an authentication code to your config file.
|
||||||
|
|
||||||
|
Copy and paste the string inside of `content`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msvalidate.01" content="0FC3FD70512616B052E755A56F8952D" />
|
||||||
|
```
|
||||||
|
|
||||||
|
Into `_config.yml`
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
bing_site_verification: "0FC3FD70512616B052E755A56F8952D"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Alexa
|
||||||
|
|
||||||
|
To [claim your site](http://www.alexa.com/siteowners/claim) with Alexa add the provided verification ID `alexa_site_verification: "yourVerificationID"`.
|
||||||
|
|
||||||
|
#### Yandex
|
||||||
|
|
||||||
|
To verify site ownership copy and paste the string inside of `name`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name='yandex-verification' content='2132801JL' />
|
||||||
|
```
|
||||||
|
|
||||||
|
Into `_config.yml`
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
yandex_site_verification: "2132801JL"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Twitter Cards and Facebook Open Graph
|
||||||
|
|
||||||
|
To improve the appearance of links shared from your site to social networks like Twitter and Facebook be sure to configure the following.
|
||||||
|
|
||||||
|
##### Site Twitter Username
|
||||||
|
|
||||||
|
Twitter username for the site. For pages that have custom author Twitter accounts assigned in their YAML Front Matter or data file, they will be attributed as a **creator** in the Twitter Card.
|
||||||
|
|
||||||
|
For example if my site's Twitter account is `@mmistakes-theme` I would add the following to `_config.yml`
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
twitter:
|
||||||
|
username: "mmistakes-theme"
|
||||||
|
```
|
||||||
|
|
||||||
|
And if I assign `@mmistakes` as an author account it will appear in the Twitter Card along with `@mmistakes-theme`, attributed as a creator of the page being shared.
|
||||||
|
|
||||||
|
**Note**: You need to [apply for Twitter Cards](https://dev.twitter.com/docs/cards) and validate they're working on your site before they will begin showing up.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
##### Facebook Open Graph
|
||||||
|
|
||||||
|
If you have a Facebook ID or publisher page add them:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
facebook:
|
||||||
|
app_id: # A Facebook app ID
|
||||||
|
publisher: # A Facebook page URL or ID of the publishing entity
|
||||||
|
```
|
||||||
|
|
||||||
|
While not part a part of Open Graph, you can also add your Facebook username for use in the sidebar and footer.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
facebook:
|
||||||
|
username: "michaelrose" # https://www.facebook.com/michaelrose
|
||||||
|
```
|
||||||
|
|
||||||
|
**ProTip:** To debug Open Graph data use [this tool](https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fmademistakes.com) to test your pages. If content changes aren't reflected you will probably have to hit the **Fetch new scrape information** button to refresh.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
##### Open Graph Default Image
|
||||||
|
|
||||||
|
For pages that don't have a `header.image` assigned in their YAML Front Matter, `site.og_image` will be used as a fallback. Use you logo, icon, avatar or something else that is meaningful. Just make sure it is place in the `/images/` folder, a minimum size of 120px by 120px, and less than 1MB in file size.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
og_image: "site-logo.png"
|
||||||
|
```
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-twitter-card-summary-image.jpg" alt="Twitter Card summary example">
|
||||||
|
<figcaption>Example of a image placed in a Summary Card.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
Documents who have a `header.image` assigned in their YAML Front Matter will appear like this when shared on Twitter and Facebook.
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-twitter-card-summary-large.jpg" alt="page shared on Twitter">
|
||||||
|
<figcaption>Shared page on Twitter with header image assigned.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path}}/images/facebook-share-example.jpg" alt="page shared on Facebook">
|
||||||
|
<figcaption>Shared page on Facebook with header image assigned.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
##### Include your social profile in search results
|
||||||
|
|
||||||
|
Use markup on your official website to add your [social profile information](https://developers.google.com/structured-data/customize/social-profiles#adding_structured_markup_to_your_site) to the Google Knowledge panel in some searches. Knowledge panels can prominently display your social profile information.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
social:
|
||||||
|
type: # Person or Organization (defaults to Person)
|
||||||
|
name: # If the user or organization name differs from the site's name
|
||||||
|
links:
|
||||||
|
- "https://twitter.com/yourTwitter"
|
||||||
|
- "https://facebook.com/yourFacebook"
|
||||||
|
- "https://instagram.com/yourProfile"
|
||||||
|
- "https://www.linkedin.com/in/yourprofile"
|
||||||
|
- "https://plus.google.com/your_profile"
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Analytics
|
||||||
|
|
||||||
|
Analytics is disabled by default. To enable globally select one of the following:
|
||||||
|
|
||||||
|
| Name | Analytics Provider |
|
||||||
|
| ---- | ------------------ |
|
||||||
|
| **google** | [Google Standard Analytics](https://www.google.com/analytics/) |
|
||||||
|
| **google-universal** | [Google Universal Analytics](https://www.google.com/analytics/) |
|
||||||
|
| **custom** | Other analytics providers |
|
||||||
|
|
||||||
|
For Google Analytics add your Tracking Code:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
analytics:
|
||||||
|
provider: "google-universal"
|
||||||
|
tracking_id: "UA-1234567-8"
|
||||||
|
```
|
||||||
|
|
||||||
|
To use another provider not included with the theme set `provider: "custom"` then add their embed code to `_includes/analytics-providers/custom.html`.
|
||||||
|
|
||||||
|
## Site Author
|
||||||
|
|
||||||
|
Used as the defaults for defining what appears in the author sidebar.
|
||||||
|
|
||||||
|
![author sidebar example]({{ base_path }}/images/mm-author-sidebar-example.jpg)
|
||||||
|
|
||||||
|
**Note:** For sites with multiple authors these values can be overridden post by post with custom YAML Front Matter and a data file. For more information on how that works see below.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
author:
|
||||||
|
name : "Your Name"
|
||||||
|
avatar : "bio-photo.jpg" # placed in /images/
|
||||||
|
bio : "My awesome biography constrained to a sentence or two goes here."
|
||||||
|
email : # optional
|
||||||
|
uri : "http://your-site.com"
|
||||||
|
```
|
||||||
|
|
||||||
|
Social media links are all optional, include the ones you want visible. In most cases you just need to add the username. If you're unsure double check `_includes/author-profile.html` to see how the URL is constructed.
|
||||||
|
|
||||||
|
## Reading Files
|
||||||
|
|
||||||
|
Nothing out of the ordinary here. `include` and `exclude` may be the only things you need to alter.
|
||||||
|
|
||||||
|
## Conversion and Markdown Processing
|
||||||
|
|
||||||
|
Again nothing out of the ordinary here as the theme adheres to the defaults used by GitHub Pages. [**Kramdown**](http://kramdown.gettalong.org/) for Markdown conversion, [**Rouge**](http://rouge.jneen.net/) syntax highlighting, and incremental building disabled. Change them if you need to.
|
||||||
|
|
||||||
|
## Front Matter Defaults
|
||||||
|
|
||||||
|
To save yourself time setting [Front Matter Defaults](https://jekyllrb.com/docs/configuration/#front-matter-defaults) for posts, pages, and collections is the way to go. Sure you can assign layouts and toggle settings like **reading time**, **comments**, and **social sharing** in each file, but that's not ideal.
|
||||||
|
|
||||||
|
Using the `default` key in `_config.yml` you could set the layout and enable author profiles, reading time, comments, social sharing, and related posts for all posts --- in one shot.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
defaults:
|
||||||
|
# _posts
|
||||||
|
- scope:
|
||||||
|
path: ""
|
||||||
|
type: posts
|
||||||
|
values:
|
||||||
|
layout: single
|
||||||
|
author_profile: true
|
||||||
|
read_time: true
|
||||||
|
comments: true
|
||||||
|
share: true
|
||||||
|
related: true
|
||||||
|
```
|
||||||
|
|
||||||
|
Pages Front Matter defaults can be scoped like this:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
defaults:
|
||||||
|
# _pages
|
||||||
|
- scope:
|
||||||
|
path: ""
|
||||||
|
type: pages
|
||||||
|
values:
|
||||||
|
layout: single
|
||||||
|
```
|
||||||
|
|
||||||
|
And collections like this:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
defaults:
|
||||||
|
# _foo
|
||||||
|
- scope:
|
||||||
|
path: ""
|
||||||
|
type: foo
|
||||||
|
values:
|
||||||
|
layout: single
|
||||||
|
```
|
||||||
|
|
||||||
|
And of course any default value can be overridden by settings in a post, page, or collection file. All you need to do is specify the settings in the YAML Front Matter. For more examples be sure to check out the demo site's [`_config.yml`]({{ site.gh_repo }}/blob/gh-pages/_config.yml).
|
||||||
|
|
||||||
|
## Outputting
|
||||||
|
|
||||||
|
The default permalink style used by the theme is `permalink: /:categories/:title/`. If you have a post named `2016-01-01-my-post.md` with `categories: foo` in the YAML Front Matter, Jekyll will generate `_site/foo/my-post/index.html`.
|
||||||
|
|
||||||
|
**Note:** If you plan on enabling breadcrumb links --- including category names in permalinks is a big part of how those are created.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
### Paginate
|
||||||
|
|
||||||
|
If [using pagination](https://github.com/jekyll/jekyll-paginate) on the homepage you can change the amount of posts shown with:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
paginate: 5
|
||||||
|
```
|
||||||
|
|
||||||
|
You'll also need to include some Liquid and HTML to properly use the paginator, which you can find in the **Layouts** section under [Home Page]({{ base_path }}/docs/layouts/#home-page).
|
||||||
|
|
||||||
|
### Timezone
|
||||||
|
|
||||||
|
This sets the timezone environment variable, which Ruby uses to handle time and date creation and manipulation. Any entry from the [IANA Time Zone Database](http://en.wikipedia.org/wiki/List_of_tz_database_time_zones) is valid. The default is the local time zone, as set by your operating system.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
timezone: America/New_York
|
||||||
|
```
|
||||||
|
|
||||||
|
## Plugins
|
||||||
|
|
||||||
|
When hosting with GitHub Pages a small [set of gems](https://pages.github.com/versions/) have been whitelisted for use. The theme uses a few of them which can be found under `gems`. Additional settings and configurations are documented in the links below.
|
||||||
|
|
||||||
|
| Plugin | Description |
|
||||||
|
| ------ | ----------- |
|
||||||
|
| [jekyll-paginate][jekyll-paginate] | Pagination Generator for Jekyll. |
|
||||||
|
| [jekyll-sitemap][jekyll-sitemap] |Jekyll plugin to silently generate a sitemaps.org compliant sitemap for your Jekyll site. |
|
||||||
|
| [jekyll-gist][jekyll-gist] | Liquid tag for displaying GitHub Gists in Jekyll sites. |
|
||||||
|
| [jekyll-feed][jekyll-feed] | A Jekyll plugin to generate an Atom (RSS-like) feed of your Jekyll posts. |
|
||||||
|
| [jemoji][jemoji] | GitHub-flavored emoji plugin for Jekyll. |
|
||||||
|
|
||||||
|
[jekyll-paginate]: https://github.com/jekyll/jekyll-paginate
|
||||||
|
[jekyll-sitemap]: https://github.com/jekyll/jekyll-sitemap
|
||||||
|
[jekyll-gist]: https://github.com/jekyll/jekyll-gist
|
||||||
|
[jekyll-feed]: https://github.com/jekyll/jekyll-feed
|
||||||
|
[jemoji]: https://github.com/jekyll/jemoji
|
||||||
|
|
||||||
|
If you're hosting elsewhere then you don't really have to worry about what is whitelisted as you are free to include whatever [Jekyll plugins](https://jekyllrb.com/docs/plugins/) you desire.
|
||||||
|
|
||||||
|
## Archive Settings
|
||||||
|
|
||||||
|
The theme ships with support for taxonomy (category and tag) pages. GitHub Pages hosted sites need to use a *Liquid only* approach while those hosted elsewhere can use plugins like [**jekyll-archives**][jekyll-archives] to generate these pages automatically.
|
||||||
|
|
||||||
|
[jekyll-archives]: https://github.com/jekyll/jekyll-archives
|
||||||
|
|
||||||
|
The default `type` is set to use Liquid.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
categories:
|
||||||
|
type: liquid
|
||||||
|
path: /categories/
|
||||||
|
tags:
|
||||||
|
type: liquid
|
||||||
|
path: /tags/
|
||||||
|
```
|
||||||
|
|
||||||
|
Which would create category and tag links in the breadcrumbs and page meta like: `/categories/#foo` and `/tags/#foo`.
|
||||||
|
|
||||||
|
**Note:** for these links to resolve properly, category and tag index pages need to exist at [`/categories/index.html`]({{ site.gh_repo }}/blob/gh-pages/_pages/category-archive.html) and [`/tags/index.html`]({{ site.gh_repo }}/blob/gh-pages/_pages/tag-archive.html). The necessary Liquid code to build these pages can be taken from the demo site.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
If you have the luxury of using Jekyll Plugins then [**jekyll-archives**][jekyll-archives] will make your life much easier as category and tag pages are created for you.
|
||||||
|
|
||||||
|
Change `type` to `jekyll-archives` and apply the following [configurations](https://github.com/jekyll/jekyll-archives/blob/master/docs/configuration.md):
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
categories:
|
||||||
|
type: jekyll-archives
|
||||||
|
path: /categories/
|
||||||
|
tags:
|
||||||
|
type: jekyll-archives
|
||||||
|
path: /tags/
|
||||||
|
jekyll-archives:
|
||||||
|
enabled:
|
||||||
|
- categories
|
||||||
|
- tags
|
||||||
|
layouts:
|
||||||
|
category: archive-taxonomy
|
||||||
|
tag: archive-taxonomy
|
||||||
|
permalinks:
|
||||||
|
category: /categories/:name/
|
||||||
|
tag: /tags/:name/
|
||||||
|
```
|
||||||
|
|
||||||
|
**Note:** The `archive-taxonomy` layout used by jekyll-archives is provided with the theme and can be found in the `_layouts` folder.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
## HTML Compression
|
||||||
|
|
||||||
|
If you care at all about performance (and really who doesn't) compressing the HTML files generated by Jekyll is a good thing to do.
|
||||||
|
|
||||||
|
If you're hosting with GitHub Pages there aren't many options afforded to you for optimizing the HTML Jekyll generates. Thankfully there is some Liquid wizardry you can use to strip whitespace and comments to reduce file size.
|
||||||
|
|
||||||
|
There's a variety of configurations and cavets to using the `compress` layout, so be sure to read through the [documentation](http://jch.penibelst.de/) if you decide to make change the defaults set in the theme's `_config.yml`.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
compress_html:
|
||||||
|
clippings: all
|
||||||
|
ignore:
|
||||||
|
envs: development # disable compression in dev environment
|
||||||
|
```
|
||||||
|
|
||||||
|
**Caution:** Inline JavaScript comments can cause problems with `compress.html`, so be sure to `/* comment this way */` and avoid `// these sorts of comments`.
|
75
_docs/06-navigation.md
Normal file
75
_docs/06-navigation.md
Normal file
|
@ -0,0 +1,75 @@
|
||||||
|
---
|
||||||
|
title: "Navigation"
|
||||||
|
permalink: /docs/navigation/
|
||||||
|
excerpt: "Instructions on how to customize the main navigation and enabling breadcrumb links."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
## 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]({{ base_path }}/images/mm-priority-plus-masthead.gif)
|
||||||
|
|
||||||
|
**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]({{ base_path }}/images/mm-breadcrumbs-example.jpg)
|
||||||
|
|
||||||
|
```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 : ">"
|
||||||
|
```
|
19
_docs/07-ui-text.md
Normal file
19
_docs/07-ui-text.md
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
---
|
||||||
|
title: "UI Text"
|
||||||
|
permalink: /docs/ui-text/
|
||||||
|
excerpt: "Text for customizing various user interface elements found in the theme."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
Text for various UI elements, `_layouts`, and `_includes` have all been grouped together as a set of translation keys. This is by no means a full-on i18n solution, but it does help make customizing things a bit easier.
|
||||||
|
|
||||||
|
Currently all of the keys in `_data/ui-text.yml` are English only. 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
|
||||||
|
|
||||||
|
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]({{ base_path }}/images/mm-ui-text-labels.jpg)
|
44
_docs/08-authors.md
Normal file
44
_docs/08-authors.md
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
---
|
||||||
|
title: "Authors"
|
||||||
|
permalink: /docs/authors/
|
||||||
|
excerpt: "Instructions and settings for working with multiple site authors."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
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`, `avatar`, `uri`, social media profiles, etc.).
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# /_data/authors.yml
|
||||||
|
|
||||||
|
Billy Rick:
|
||||||
|
name: "Billy Rick"
|
||||||
|
uri: "http://thewhip.com"
|
||||||
|
email: "billy@rick.com"
|
||||||
|
bio: "What do you want, jewels? I am a very extravagant man."
|
||||||
|
avatar: "bio-photo-2.jpg"
|
||||||
|
twitter: "extravagantman"
|
||||||
|
|
||||||
|
Cornelius Fiddlebone:
|
||||||
|
name: "Cornelius Fiddlebone"
|
||||||
|
email: "cornelius@thewhip.com"
|
||||||
|
bio: "I ordered what?"
|
||||||
|
avatar: "bio-photo.jpg"
|
||||||
|
twitter: "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
|
||||||
|
```
|
311
_docs/09-layouts.md
Normal file
311
_docs/09-layouts.md
Normal file
|
@ -0,0 +1,311 @@
|
||||||
|
---
|
||||||
|
title: "Layouts"
|
||||||
|
permalink: /docs/layouts/
|
||||||
|
excerpt: "Descriptions and samples of all layouts included with the theme and how to best use them."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
single_layout_gallery:
|
||||||
|
- image_path: mm-layout-single-header.png
|
||||||
|
alt: "single layout with header example"
|
||||||
|
- image_path: mm-layout-single-meta.png
|
||||||
|
alt: "single layout with comments and related posts"
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
{% include toc icon="columns" title="Included Layouts" %}
|
||||||
|
|
||||||
|
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}
|
||||||
|
|
||||||
|
## Compress Layout
|
||||||
|
|
||||||
|
A Jekyll layout that compresses HTML in pure Liquid.
|
||||||
|
|
||||||
|
* [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
|
||||||
|
|
||||||
|
{% 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]({{ base_path }}/docs/configuration/#front-matter-defaults) in `_config.yml`.
|
||||||
|
|
||||||
|
## 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="{{ base_path }}/images/mm-layout-archive.png" 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 Tags -- 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]: {{ site.gh_repo }}/gh-pages/_pages/category-archive.html
|
||||||
|
[posts-tags]: {{ site.gh_repo }}/gh-pages/_pages/tag-archive.html
|
||||||
|
[posts-year]: {{ site.gh_repo }}/gh-pages/_pages/year-archive.html
|
||||||
|
[posts-collection]: {{ site.gh_repo }}/gh-pages/_pages/collection-archive.html
|
||||||
|
[portfolio-collection]: {{ site.gh_repo }}/gh-pages/_pages/portfolio-archive.html
|
||||||
|
|
||||||
|
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."
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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:
|
||||||
|
|
||||||
|
**Step 1:** Create a portfolio archive page (eg. `_pages/portfolio-archive.html`) with the following YAML Front Matter:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
---
|
||||||
|
layout: archive
|
||||||
|
title: "Portfolio"
|
||||||
|
permalink: /portfolio/
|
||||||
|
author_profile: false
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
**Step 2:** Loop over all documents in the portfolio collection and output in a grid:
|
||||||
|
|
||||||
|
```html
|
||||||
|
{% raw %}{% include base_path %}
|
||||||
|
|
||||||
|
<div class="grid__wrapper">
|
||||||
|
{% for post in site.portfolio %}
|
||||||
|
{% include archive-single.html type="grid" %}
|
||||||
|
{% endfor %}{% endraw %}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
To produce something like this:
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-archive-grid-view-example.jpg" alt="archive grid view example">
|
||||||
|
<figcaption>Grid view example.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
**Note:** More information on using this `_include` can be found under [**Helpers**]({{ base_path }}/docs/helpers/).
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
### Taxonomy Archive
|
||||||
|
|
||||||
|
If you have the luxury of using Jekyll plugins the creation of category and tag archives is greatly simplified. Enable support for the [`jekyll-archives`](https://github.com/jekyll/jekyll-archives) plugin with a few `_config.yml` settings as noted in the [**Configuration**]({{ base_path }}/docs/configuration/#archive-settings) section.
|
||||||
|
|
||||||
|
![archive taxonomy layout example]({{ base_path }}/images/mm-layout-archive-taxonomy.png)
|
||||||
|
|
||||||
|
### Home Page
|
||||||
|
|
||||||
|
Minimal Mistakes ships with an [`index.html`]({{ site.gh_repo }}/blob/master/index.html) in the root of the project for displaying recent posts.
|
||||||
|
|
||||||
|
**Includes:**
|
||||||
|
|
||||||
|
* Optional header image with caption
|
||||||
|
* Optional header overlay (solid color/image) + text and optional "call to action" button
|
||||||
|
* Paginated posts
|
||||||
|
|
||||||
|
Post pagination is achieved by assigning `layout: archive` in the YAML Front Matter and including the following Liquid in the body:
|
||||||
|
|
||||||
|
```html
|
||||||
|
{% raw %}<!-- start index.html body -->
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
<h3 class="archive__subtitle">Recent Posts</h3>
|
||||||
|
|
||||||
|
{% for post in paginator.posts %}
|
||||||
|
{% include archive-single.html %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% include paginator.html %}
|
||||||
|
<!-- end index.html body -->{% endraw %}
|
||||||
|
```
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<img src="{{ base_path }}/images/mm-home-post-pagination-example.jpg" alt="home page post pagination example">
|
||||||
|
<figcaption>Home page post pagination example.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
**Note:** For more pagination related settings check the [**Configuration**]({{ base_path }}/docs/configuration/#paginate) section.
|
||||||
|
{: .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]({{ base_path }}/images/mm-layout-splash.png)
|
||||||
|
|
||||||
|
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**]({{ base_path }}/docs/helpers-and-shortcodes/) section or review a [sample splash page]({{ site.gh_repo }}/gh-pages/_pages/splash-page.md).
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Headers
|
||||||
|
|
||||||
|
To add some visual punch to a post or page, a large full-width header image can be included.
|
||||||
|
|
||||||
|
**Note:** 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.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
![single layout header image example]({{ base_path }}/images/mm-single-header-example.jpg)
|
||||||
|
|
||||||
|
Place your images in the `/images/` folder and add the following YAML Front Matter:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
header:
|
||||||
|
image: image-filename.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
For externally hosted images include the full image path instead of just the filename:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
header:
|
||||||
|
image: http://some-site.com/image.jpg
|
||||||
|
```
|
||||||
|
|
||||||
|
To include a caption or attribution for the image:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
header:
|
||||||
|
image: 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. | |
|
||||||
|
| **excerpt** | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
|
||||||
|
| **cta_label** | Call to action button text label. | `more_label` in UI Text data file |
|
||||||
|
| **cta_url** | Call to action button URL. | |
|
||||||
|
|
||||||
|
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: unsplash-image-1.jpg
|
||||||
|
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||||
|
cta_label: "More Info"
|
||||||
|
cta_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]({{ base_path }}/images/mm-single-header-overlay-example.jpg)
|
||||||
|
|
||||||
|
You also have the option of specifying a solid background-color to use instead of an image.
|
||||||
|
|
||||||
|
![single layout header overlay with background fill]({{ base_path }}/images/mm-single-header-overlay-fill-example.jpg)
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
excerpt: "This post should display a **header with a solid background color**, if the theme supports it."
|
||||||
|
header:
|
||||||
|
overlay_color: "#333"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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]({{ base_path }}/images/mm-layout-single.png)
|
||||||
|
|
||||||
|
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}
|
||||||
|
|
||||||
|
### 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="{{ base_path }}/images/mm-custom-sidebar-example.jpg" alt="custom sidebar content example">
|
||||||
|
<figcaption>Example of custom sidebar content added as YAML Front Matter.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
**ProTip:** Custom sidebar content added to a post or page's YAML Front Matter will appear above the author profile if enabled with `author_profile: true`.
|
||||||
|
{: .notice--info}
|
35
_docs/10-posts.md
Normal file
35
_docs/10-posts.md
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
---
|
||||||
|
title: "Working with Posts"
|
||||||
|
permalink: /docs/posts/
|
||||||
|
excerpt: "Suggestions and Front Matter defaults for working with posts."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
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/).
|
||||||
|
|
||||||
|
**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*, and *related posts*, for all posts.
|
||||||
|
|
||||||
|
**ProTip:** Remember to write unique `excerpt` descriptions for each post for improved SEO and archive listings.
|
||||||
|
{: .notice--info}
|
48
_docs/11-pages.md
Normal file
48
_docs/11-pages.md
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
---
|
||||||
|
title: "Working with Pages"
|
||||||
|
permalink: /docs/pages/
|
||||||
|
excerpt: "Suggestions and Front Matter defaults for working with pages."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
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
|
||||||
|
```
|
51
_docs/12-collections.md
Normal file
51
_docs/12-collections.md
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
title: "Working with Collections"
|
||||||
|
permalink: /docs/collections/
|
||||||
|
excerpt: "Suggestions and Front Matter defaults for working with collections."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
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]({{ base_path }}/collection-archive/) on the demo site ([portfolio]({{ base_path }}/portfolio/), [recipes]({{ base_path }}/recipes/), pets).
|
||||||
|
|
||||||
|
**Collections in the Wild:** This set of documentation is also [built as a collection]({{ site.gh_repo }}/gh-pages/_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
|
||||||
|
```
|
||||||
|
|
||||||
|
And then create portfolio content like [`_portfolio/foo-bar-website.md`]({{ site.gh_repo }}/gh-pages/_portfolio/foo-bar-website.md), to end up with something like this.
|
||||||
|
|
||||||
|
![portfolio collection example]({{ base_path }}/images/mm-portfolio-collection-example.jpg)
|
179
_docs/13-helpers.md
Normal file
179
_docs/13-helpers.md
Normal file
|
@ -0,0 +1,179 @@
|
||||||
|
---
|
||||||
|
title: "Helpers"
|
||||||
|
permalink: /docs/helpers/
|
||||||
|
excerpt: "Jekyll `_includes` and other helpers to use as shortcuts for creating archives, galleries, table of contents, and more."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
gallery:
|
||||||
|
- url: unsplash-gallery-image-1.jpg
|
||||||
|
image_path: unsplash-gallery-image-1-th.jpg
|
||||||
|
alt: "placeholder image 1"
|
||||||
|
- url: unsplash-gallery-image-2.jpg
|
||||||
|
image_path: unsplash-gallery-image-2-th.jpg
|
||||||
|
alt: "placeholder image 2"
|
||||||
|
- url: unsplash-gallery-image-3.jpg
|
||||||
|
image_path: unsplash-gallery-image-3-th.jpg
|
||||||
|
alt: "placeholder image 3"
|
||||||
|
feature_row:
|
||||||
|
- image_path: 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: 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: unsplash-gallery-image-3-th.jpg
|
||||||
|
title: "Placeholder 3"
|
||||||
|
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
{% include toc icon="gears" title="Helpers" %}
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
## Base Path
|
||||||
|
|
||||||
|
Instead of repeating `{% raw %}{{ site.url }}{{ site.baseurl }}{% endraw %}` over and over again to create absolute URLs, you can use `{% raw %}{{ base_path }}{% endraw %}` instead. Simply add `{% raw %}{% include base_path %}{% endraw %}` to layouts, posts, pages, collections, or other includes and you're good to go.
|
||||||
|
|
||||||
|
**ProTip:** It's a good practice to prepend all assets links (especially post images) with `{% raw %}{{ base_path }}{% endraw %}` so they correctly resolve in the site's XML feeds.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
## Group by Array
|
||||||
|
|
||||||
|
[Jekyll Group-By-Array](https://github.com/mushishi78/jekyll-group-by-array) by [Max White](mushishi78@gmail.com).
|
||||||
|
|
||||||
|
A liquid include file for Jekyll that allows an object to be grouped by an array.
|
||||||
|
|
||||||
|
The Liquid based taxonomy archives found amongst the demo pages rely on this helper.
|
||||||
|
|
||||||
|
| Description | | |
|
||||||
|
| ----------- | ------------------------ | --------------------------- |
|
||||||
|
| All posts grouped by category | [Source][category-array] | [Demo][category-array-demo] |
|
||||||
|
| All posts grouped by tags | [Source][tag-array] | [Demo][tag-array-demo] |
|
||||||
|
|
||||||
|
[category-array]: {{ site.gh_repo }}/gh-pages/_pages/category-archive.html
|
||||||
|
[category-array-demo]: {{ base_path }}/categories/
|
||||||
|
[tag-array]: {{ site.gh_repo }}/gh-pages/_pages/tag-archive.html
|
||||||
|
[tag-array-demo]: {{ base_path }}/tags/
|
||||||
|
|
||||||
|
## 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** | For images placed in the `/images/` directory just add the filename and extension. Use absolute URLS for those hosted externally. |
|
||||||
|
| **alt** | Optional | Alternate text for image. |
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
gallery:
|
||||||
|
- url: unsplash-gallery-image-1.jpg
|
||||||
|
image_path: unsplash-gallery-image-1-th.jpg
|
||||||
|
alt: "placeholder image 1"
|
||||||
|
- url: unsplash-gallery-image-2.jpg
|
||||||
|
image_path: unsplash-gallery-image-2-th.jpg
|
||||||
|
alt: "placeholder image 2"
|
||||||
|
- url: unsplash-gallery-image-3.jpg
|
||||||
|
image_path: unsplash-gallery-image-3-th.jpg
|
||||||
|
alt: "placeholder image 3"
|
||||||
|
```
|
||||||
|
|
||||||
|
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` |
|
||||||
|
| **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]({{ base_path }}{% post_url 2010-09-09-post-gallery %}) and [source code]({{ site.gh_repo }}/gh-pages/_posts/2010-09-09-post-gallery.md) can be seen in the demo site.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
## Feature Row
|
||||||
|
|
||||||
|
Designed to compliment the [`splash`]({{ base_path }}/docs/layouts/#splash-page-layout) 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** | For images placed in the `/images/` directory just add the filename and extension. Use absolute URLS for those hosted externally. | |
|
||||||
|
| **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]({{ base_path }}/docs/utility-classes/#buttons) for options. | `btn` |
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
feature_row:
|
||||||
|
- image_path: 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: 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: 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]({{ base_path }}/splash-page/) and [source code]({{ site.gh_repo }}/gh-pages/_pages/splash-page.md) can be seen in the demo site.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
## Table of Contents
|
||||||
|
|
||||||
|
To include an [auto-generated table of contents](http://kramdown.rubyforge.org/converter/html.html#toc) for posts and pages, add the following helper before any actual content in your post or page.
|
||||||
|
|
||||||
|
```liquid
|
||||||
|
{% raw %}{% include toc %}{% endraw %}
|
||||||
|
```
|
||||||
|
|
||||||
|
![table of contents example]({{ base_path }}/images/mm-toc-helper-example.jpg)
|
||||||
|
|
||||||
|
| Parameter | Required | Description | Default |
|
||||||
|
| --------- | -------- | ----------- | ------- |
|
||||||
|
| **title** | Optional | Table of contents title. | `toc_label` in UI Text data file. |
|
||||||
|
| **icon** | Optional | Table of contents icon (shows before the title). | [Font Awesome](https://fortawesome.github.io/Font-Awesome/icons/) <i class="fa fa-file-text"></i> **file-text** icon. Any other FA icon can be used instead. |
|
||||||
|
|
||||||
|
**TOC example with custom title and icon**
|
||||||
|
|
||||||
|
```liquid
|
||||||
|
{% raw %}{% include toc icon="gears" title="My Table of Contents" %}{% endraw %}
|
||||||
|
```
|
179
_docs/14-utility-classes.md
Normal file
179
_docs/14-utility-classes.md
Normal file
|
@ -0,0 +1,179 @@
|
||||||
|
---
|
||||||
|
title: "Utility Classes"
|
||||||
|
permalink: /docs/utility-classes/
|
||||||
|
excerpt: "CSS classes for aligning text/image, styling buttons and notices, and more."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
{% include toc icon="gears" title="Utility Classes" %}
|
||||||
|
|
||||||
|
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 Kramdonw? 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]({{ site.url }}{{ site.baseurl }}/images/image-alignment-580x300.jpg){: .align-center}
|
||||||
|
|
||||||
|
The image above happens to be **centered**.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
![image-center](/images/filename.jpg){: .align-center}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
![image-left]({{ site.url }}{{ site.baseurl }}/images/image-alignment-150x150.jpg){: .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
|
||||||
|
![image-left](/images/filename.jpg){: .align-left}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
![image-right]({{ site.url }}{{ site.baseurl }}/images/image-alignment-300x200.jpg){: .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
|
||||||
|
![image-right](/images/filename.jpg){: .align-right}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
![full]({{ site.url }}{{ site.baseurl }}/images/image-alignment-1200x4002.jpg)
|
||||||
|
{: .full}
|
||||||
|
|
||||||
|
The image above should extend outside of the parent container on right.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
![full](/images/filename.jpg)
|
||||||
|
{: .full}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Buttons
|
||||||
|
|
||||||
|
Make any link standout more when applying the `.btn` class.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="#" class="btn">Link Text</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
| Button Type | Example | Class | Kramdown |
|
||||||
|
| ------ | ------- | ----- | ------- |
|
||||||
|
| Default | [Text](#link){: .btn} | `.btn` | `[Text](#link){: .btn}` |
|
||||||
|
| 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--x-large} | `.btn .btn--x-large` | `[Text](#link){: .btn .btn--x-large}` |
|
||||||
|
| Large | [Large Button](#){: .btn .btn--large} | `.btn .btn--large` | `[Text](#link){: .btn .btn--large}` |
|
||||||
|
| Default | [Default Button](#){: .btn} | `.btn` | `[Text](#link){: .btn}` |
|
||||||
|
| Small | [Small Button](#){: .btn .btn--small} | `.btn .btn--small` | `[Text](#link){: .btn .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>Notice Headline:</h4>
|
||||||
|
{{ notice-text | markdownify }}
|
||||||
|
</div>
|
150
_docs/15-stylesheets.md
Normal file
150
_docs/15-stylesheets.md
Normal file
|
@ -0,0 +1,150 @@
|
||||||
|
---
|
||||||
|
title: "Stylesheets"
|
||||||
|
permalink: /docs/stylesheets/
|
||||||
|
excerpt: "Instructions for customizing and building the theme's stylesheets."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
The theme's `main.css` stylesheet is built from several SCSS partials located in `/assets/_scss/` and are structured as follows:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
minimal mistakes
|
||||||
|
├── assets
|
||||||
|
| ├── _scss
|
||||||
|
| | ├── vendor # vendor SCSS partials
|
||||||
|
| | | ├── breakpoint # media query mixins
|
||||||
|
| | | ├── font-awesome # Font Awesome icons
|
||||||
|
| | | ├── 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.)
|
||||||
|
| | └── main.scss # all SCSS partials are imported here
|
||||||
|
| ├── css
|
||||||
|
| | └── main.css # compiled theme stylesheet
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customizing
|
||||||
|
|
||||||
|
The settings in `/assets/_scss/_variables.scss` can modify the following aspects of the theme:
|
||||||
|
|
||||||
|
### 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="{{ base_path }}/images/mm-paragraph-indent-example.jpg" 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[^font-awesome] by default.
|
||||||
|
|
||||||
|
```scss
|
||||||
|
/* system typefaces */
|
||||||
|
$serif : Georgia, Times, serif;
|
||||||
|
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
|
||||||
|
$monospace : Monaco, Consolas, "Lucida Console", monospace;
|
||||||
|
```
|
||||||
|
|
||||||
|
[^font-awesome]: Apart from [Font Awesome](https://fortawesome.github.io/Font-Awesome/) icon webfonts.
|
||||||
|
|
||||||
|
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}
|
||||||
|
|
||||||
|
### 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, `_variables.scss`.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### 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="{{ base_path }}/images/mm-susy-grid-overlay.jpg" alt="Susy grid overlay for debugging">
|
||||||
|
<figcaption>Susy grid debug overlay enabled.</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
The theme does not leverage Jekyll's [built-in support for preprocessing Sass](https://jekyllrb.com/docs/assets/#sassscss) files. Why is that you ask? [**Autoprefixer**](https://github.com/postcss/autoprefixer)! As part of a build step the stylesheet is post processed with Autoprefixer to add vendor prefixes --- something not currently possible without a plugin[^jekyll-assets].
|
||||||
|
|
||||||
|
[^jekyll-assets]: A better solution would be to use the fantastic [jekyll-assets](https://github.com/jekyll/jekyll-assets) plugin to manage your assets if you aren't hosting with GitHub Pages. Autoprefixer support is built-in :smile:.
|
||||||
|
|
||||||
|
If you plan on making any changes to the `.scss` partials you will need to rebuild the stylesheet outside of the normal Jekyll workflow.
|
||||||
|
|
||||||
|
**Sass/SCSS files:** You can of course modify the structure of the CSS files to have Jekyll natively process `main.scss` for you. Just be sure to update the partials to include any vendor prefixes or else things may look off in older browsers.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
## Build Process
|
||||||
|
|
||||||
|
In an effort to reduce dependencies a set of [**npm scripts**](https://css-tricks.com/why-npm-scripts/) are used to build the CSS 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`]({{ site.gh_repo }}/master/package.json) prior to running `npm install`.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
If all goes well, running `npm build:css` will process all SCSS files into `main.css`, which should then pipe through Autoprefixer.
|
||||||
|
|
||||||
|
```
|
||||||
|
Rendering Complete, saving .css file...
|
||||||
|
Wrote CSS to \assets\css\main.css
|
||||||
|
```
|
53
_docs/16-javascript.md
Normal file
53
_docs/16-javascript.md
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
---
|
||||||
|
title: "JavaScript"
|
||||||
|
permalink: /docs/javascript/
|
||||||
|
excerpt: "Instructions for customizing and building the theme's scripts."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
The theme's `main.js` script is built from several vendor, jQuery plugins, and other scripts found in `/assets/js/`.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
minimal mistakes
|
||||||
|
├── assets
|
||||||
|
| ├── js
|
||||||
|
| | ├── plugins
|
||||||
|
| | | ├── jquery.fitvids.js # fluid width video embeds
|
||||||
|
| | | ├── jquery.greedy-navigation.js # priority plus navigation
|
||||||
|
| | | ├── jquery.magnific-popup.js # responsive lightbox
|
||||||
|
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
|
||||||
|
| | | └── stickyfill.min.js # `position: sticky` polyfill
|
||||||
|
| | ├── vendor
|
||||||
|
| | | └── jquery
|
||||||
|
| | | └── jquery-1.12.1.min.js
|
||||||
|
| | ├── _main.js # jQuery plugin settings and other scripts
|
||||||
|
| | └── main.min.js # concatenated and minified scripts
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customizing
|
||||||
|
|
||||||
|
To modify or add your own scripts include them in `/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`. Same goes for scripts that you remove.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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 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`]({{ site.gh_repo }}/master/package.json) prior to running `npm install`.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
If all goes well, running `npm build:js` will compress/concatenate `_main.js` and all plugin scripts into `main.min.js`.
|
65
_docs/17-history.md
Normal file
65
_docs/17-history.md
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
---
|
||||||
|
title: "History"
|
||||||
|
permalink: /docs/history/
|
||||||
|
excerpt: "Changelog of enhancements and bug fixes made to the theme."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:27:39-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
## [1.2.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.2.0)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Table weren't filling the entire width of the content container. They now scale at 100%. Thanks [@dhruvbhatia](https://github.com/dhruvbhatia)
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Decreased spacing between Markdown footnotes
|
||||||
|
- Removed dark background on footer
|
||||||
|
- Removed UPPERCASE styling on post titles in the index listing
|
||||||
|
|
||||||
|
## [1.1.4](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.4)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Fix top navigation bug issue ([#10](https://github.com/mmistakes/minimal-mistakes/issues/10)) for real this time. Remember to clear your floats kids.
|
||||||
|
|
||||||
|
## [1.1.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.3)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Fix top navigation links that weren't click able on small viewports (Issue [#10](https://github.com/mmistakes/minimal-mistakes/issues/10)).
|
||||||
|
- Remove line wrap from top navigation links that may span multiple lines.
|
||||||
|
|
||||||
|
## [1.1.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.2)
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Added Grunt build script for compiling Less/JavaScript and optimizing image assets.
|
||||||
|
- Added support for large image summary Twitter card.
|
||||||
|
- Stylesheet adjustments
|
||||||
|
|
||||||
|
## [1.1.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/1.1.1)
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
- Removed [Typeplate](http://typeplate.com/) styles. Was [causing issues with newer versions of Less](https://github.com/typeplate/typeplate.github.io/issues/108) and is no longer maintained.
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Added [image attribution](http://mmistakes.github.io/minimal-mistakes/theme-setup/#feature-images) for post and page feature images.
|
||||||
|
- Added [404 page](http://mmistakes.github.io/minimal-mistakes/404.html).
|
||||||
|
- Cleaned up various Less variables to better align with naming conventions used in other MM Jekyll themes.
|
||||||
|
- Removed Chrome Frame references.
|
||||||
|
- Added global CSS3 transitions to text and block elements.
|
||||||
|
- Improved typography in a few places.
|
||||||
|
|
||||||
|
## [1.0.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/v1.0.2)
|
||||||
|
|
||||||
|
### Enhancements
|
||||||
|
|
||||||
|
- Google Analytics, Google Authorship, webmaster verifies, and Twitter card meta are now optional.
|
||||||
|
|
||||||
|
## [1.0.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/v1.0.1)
|
15
_docs/18-contributing.md
Normal file
15
_docs/18-contributing.md
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
title: "Contributing"
|
||||||
|
permalink: /docs/contributing/
|
||||||
|
excerpt: "How you can contribute to make this theme better."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
Having trouble working with the theme? Found a typo in the documentation? Interested in adding a feature or [fixing a bug]({{ site.gh_repo }}/issues)? Then by all means [submit an issue]({{ site.gh_repo }}/issues/new) or [pull request]({{ site.gh_repo }}/compare). If this is your first pull request, it may be helpful to read up on the [GitHub Flow](https://guides.github.com/introduction/flow/) first.
|
||||||
|
|
||||||
|
As the theme's name implies strives to keep things as minimal as possible. It has been designed as a base for you to build off of.
|
||||||
|
|
||||||
|
Please keep this in mind when requesting features and/or submitting pull requests. If it's not something that most people will use, I probably won't consider it. When in doubt ask :smile:.
|
|
@ -1,12 +1,14 @@
|
||||||
---
|
---
|
||||||
title: "Theme Setup"
|
title: "2.2 Documentation"
|
||||||
permalink: /theme-setup/
|
permalink: /docs/docs-2-2/
|
||||||
modified: 2016-01-19
|
excerpt: "Setup and installation instructions for Minimal Mistakes 2.2 (deprecated)."
|
||||||
excerpt: "Instructions on how to install and customize the Jekyll theme Minimal Mistakes."
|
sidebar:
|
||||||
share: true
|
title: "v3.0"
|
||||||
comments: true
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:54:02-04:00
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
{% include toc %}
|
{% include toc %}
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
@ -22,7 +24,7 @@ If you are creating a new Jekyll site using Minimal Mistakes follow these steps:
|
||||||
|
|
||||||
If you want to use Minimal Mistakes with an existing Jekyll site follow these steps:
|
If you want to use Minimal Mistakes with an existing Jekyll site follow these steps:
|
||||||
|
|
||||||
1. [Download Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes/archive/master.zip) and unzip.
|
1. [Download Minimal Mistakes](https://github.com/mmistakes/minimal-mistakes/releases/tag/2.2.1) and unzip.
|
||||||
2. Rename `minimal-mistakes-master` to something meaningful ie: `new-site`
|
2. Rename `minimal-mistakes-master` to something meaningful ie: `new-site`
|
||||||
3. Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), etc)
|
3. Run `bundle install` to install all dependencies (Jekyll, [Jekyll-Sitemap](https://github.com/jekyll/jekyll-sitemap), [Octopress](https://github.com/octopress/octopress), etc)
|
||||||
4. Remove demo posts/pages and replace with your own posts, pages, and any other content you want to move over.
|
4. Remove demo posts/pages and replace with your own posts, pages, and any other content you want to move over.
|
||||||
|
@ -32,29 +34,23 @@ If you want to use Minimal Mistakes with an existing Jekyll site follow these st
|
||||||
**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you won't want.
|
**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo site that I'm guessing you won't want.
|
||||||
{: .notice}
|
{: .notice}
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Running Jekyll
|
## Running Jekyll
|
||||||
|
|
||||||
The preferred method for running Jekyll is with `bundle exec`, but if you're willing to deal gem conflicts feel free to go cowboy with a `jekyll build` or `jekyll serve`.
|
The preferred method for running Jekyll is with `bundle exec`, but if you're willing to deal gem conflicts feel free to go cowboy with a `jekyll serve` or `jekyll build`.
|
||||||
|
|
||||||
> In some cases, running executables without bundle exec may work, if the executable happens to be installed in your system and does not pull in any gems that conflict with your bundle.
|
> In some cases, running executables without bundle exec may work, if the executable happens to be installed in your system and does not pull in any gems that conflict with your bundle.
|
||||||
>
|
>
|
||||||
>However, this is unreliable and is the source of considerable pain. Even if it looks like it works, it may not work in the future or on another machine.
|
>However, this is unreliable and is the source of considerable pain. Even if it looks like it works, it may not work in the future or on another machine.
|
||||||
|
|
||||||
{% highlight text %}
|
```bash
|
||||||
bundle exec jekyll build
|
|
||||||
|
|
||||||
bundle exec jekyll serve
|
bundle exec jekyll serve
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Scaffolding
|
## Scaffolding
|
||||||
|
|
||||||
How Minimal Mistakes is organized and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped nicely under the root folder. The compiled Jekyll site outputs to `_site/`.
|
How Minimal Mistakes is organized and what the various files are. All posts, layouts, includes, stylesheets, assets, and whatever else is grouped nicely under the root folder. The compiled Jekyll site outputs to `_site/`.
|
||||||
|
|
||||||
{% highlight text %}
|
```bash
|
||||||
minimal-mistakes/
|
minimal-mistakes/
|
||||||
├── _includes/
|
├── _includes/
|
||||||
| ├── author-bio.html # bio stuff layout. pulls optional owner data from _config.yml
|
| ├── author-bio.html # bio stuff layout. pulls optional owner data from _config.yml
|
||||||
|
@ -89,9 +85,7 @@ minimal-mistakes/
|
||||||
├── index.md # sample homepage. lists 5 latest posts
|
├── index.md # sample homepage. lists 5 latest posts
|
||||||
├── posts/ # sample post index page. lists all posts in reverse chronology
|
├── posts/ # sample post index page. lists all posts in reverse chronology
|
||||||
└── theme-setup/ # theme setup page. safe to remove
|
└── theme-setup/ # theme setup page. safe to remove
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Site Setup
|
## Site Setup
|
||||||
|
|
||||||
|
@ -113,12 +107,12 @@ Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for generating
|
||||||
|
|
||||||
Examples:
|
Examples:
|
||||||
|
|
||||||
{% highlight yaml %}
|
```yaml
|
||||||
url: http://mmistakes.github.io/minimal-mistakes
|
url: http://mmistakes.github.io/minimal-mistakes
|
||||||
url: http://localhost:4000
|
url: http://localhost:4000
|
||||||
url: //cooldude.github.io
|
url: //cooldude.github.io
|
||||||
url:
|
url:
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
#### Google Analytics and Webmaster Tools
|
#### Google Analytics and Webmaster Tools
|
||||||
|
|
||||||
|
@ -128,50 +122,46 @@ Google Analytics UA and Webmaster Tool verification tags can be entered under `o
|
||||||
|
|
||||||
To set what links appear in the top navigation edit `_data/navigation.yml`. Use the following format to set the URL and title for as many links as you'd like. *External links will open in a new window.*
|
To set what links appear in the top navigation edit `_data/navigation.yml`. Use the following format to set the URL and title for as many links as you'd like. *External links will open in a new window.*
|
||||||
|
|
||||||
{% highlight yaml %}
|
```yaml
|
||||||
- title: Portfolio
|
- title: Portfolio
|
||||||
url: /portfolio/
|
url: /portfolio/
|
||||||
|
|
||||||
- title: Made Mistakes
|
- title: Made Mistakes
|
||||||
url: http://mademistakes.com
|
url: http://mademistakes.com
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Adding New Content with Octopress
|
## Adding New Content with Octopress
|
||||||
|
|
||||||
While completely optional, I've included Octopress and some starter templates to automate the creation of new posts and pages. To take advantage of it start by installing the [Octopress](https://github.com/octopress/octopress) gem if it isn't already.
|
While completely optional, I've included Octopress and some starter templates to automate the creation of new posts and pages. To take advantage of it start by installing the [Octopress](https://github.com/octopress/octopress) gem if it isn't already.
|
||||||
|
|
||||||
{% highlight bash %}
|
```bash
|
||||||
$ gem install octopress
|
$ gem install octopress
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
### New Post
|
### New Post
|
||||||
|
|
||||||
Default command
|
Default command
|
||||||
|
|
||||||
{% highlight bash %}
|
```bash
|
||||||
$ octopress new post "Post Title"
|
$ octopress new post "Post Title"
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
Default works great if you want all your posts in one directory, but if you're like me and want to group them into subfolders like `/posts`, `/portfolio`, etc. Then this is the command for you. By specifying the DIR it will create a new post in that folder and populate the `categories:` YAML with the same value.
|
Default works great if you want all your posts in one directory, but if you're like me and want to group them into subfolders like `/posts`, `/portfolio`, etc. Then this is the command for you. By specifying the DIR it will create a new post in that folder and populate the `categories:` YAML with the same value.
|
||||||
|
|
||||||
{% highlight bash %}
|
```bash
|
||||||
$ octopress new post "New Portfolio Post Title" --dir portfolio
|
$ octopress new post "New Portfolio Post Title" --dir portfolio
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
### New Page
|
### New Page
|
||||||
|
|
||||||
To create a new page use the following command.
|
To create a new page use the following command.
|
||||||
|
|
||||||
{% highlight bash %}
|
```bash
|
||||||
$ octopress new page new-page/
|
$ octopress new page new-page/
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
This will create a page at `/new-page/index.md`
|
This will create a page at `/new-page/index.md`
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Layouts and Content
|
## Layouts and Content
|
||||||
|
|
||||||
Explanations of the various `_layouts` included with the theme and when to use them.
|
Explanations of the various `_layouts` included with the theme and when to use them.
|
||||||
|
@ -184,12 +174,14 @@ These two layouts are very similar. Both have an author sidebar, allow for large
|
||||||
|
|
||||||
A [sample index page]({{ site.url }}/posts/) listing all posts grouped by the year they were published has been provided. The name can be customized to your liking by editing a few references. For example, to change **Posts** to **Writing** update the following:
|
A [sample index page]({{ site.url }}/posts/) listing all posts grouped by the year they were published has been provided. The name can be customized to your liking by editing a few references. For example, to change **Posts** to **Writing** update the following:
|
||||||
|
|
||||||
* In `_config.yml` under `links:` rename the title and URL to the following:
|
In `_config.yml` under `links:` rename the title and URL to the following:
|
||||||
{% highlight yaml %}
|
|
||||||
|
```yaml
|
||||||
links:
|
links:
|
||||||
- title: Writing
|
- title: Writing
|
||||||
url: /writing/
|
url: /writing/
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
* Rename `posts/index.md` to `writing/index.md` and update the YAML front matter accordingly.
|
* Rename `posts/index.md` to `writing/index.md` and update the YAML front matter accordingly.
|
||||||
* Update the **View all posts** link in the `post.html` layout found in `_layouts` to match title and URL set previously.
|
* Update the **View all posts** link in the `post.html` layout found in `_layouts` to match title and URL set previously.
|
||||||
|
|
||||||
|
@ -201,20 +193,20 @@ A good rule of thumb is to keep feature images nice and wide so you don't push t
|
||||||
|
|
||||||
The post and page layouts make the assumption that the feature images live in the `images/` folder. To add a feature image to a post or page just include the filename in the front matter like so. It's probably best to host all your images from this folder, but you can hotlink from external sources if you desire.
|
The post and page layouts make the assumption that the feature images live in the `images/` folder. To add a feature image to a post or page just include the filename in the front matter like so. It's probably best to host all your images from this folder, but you can hotlink from external sources if you desire.
|
||||||
|
|
||||||
{% highlight yaml %}
|
```yaml
|
||||||
image:
|
image:
|
||||||
feature: feature-image-filename.jpg
|
feature: feature-image-filename.jpg
|
||||||
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
|
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
To add attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source if supplied.
|
To add attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source if supplied.
|
||||||
|
|
||||||
{% highlight yaml %}
|
```yaml
|
||||||
image:
|
image:
|
||||||
feature: feature-image-filename.jpg
|
feature: feature-image-filename.jpg
|
||||||
credit: Michael Rose #name of the person or site you want to credit
|
credit: Michael Rose #name of the person or site you want to credit
|
||||||
creditlink: http://mademistakes.com #url to their site or licensing
|
creditlink: http://mademistakes.com #url to their site or licensing
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
### Thumbnails for OG and Twitter Cards
|
### Thumbnails for OG and Twitter Cards
|
||||||
|
|
||||||
|
@ -229,7 +221,7 @@ By making use of data files you can assign different authors for each post.
|
||||||
|
|
||||||
Start by modifying `authors.yml` file in the `_data` folder and add your authors using the following format.
|
Start by modifying `authors.yml` file in the `_data` folder and add your authors using the following format.
|
||||||
|
|
||||||
{% highlight yaml %}
|
```yaml
|
||||||
# Authors
|
# Authors
|
||||||
|
|
||||||
billy_rick:
|
billy_rick:
|
||||||
|
@ -248,39 +240,39 @@ cornelius_fiddlebone:
|
||||||
avatar : "bio-photo.jpg"
|
avatar : "bio-photo.jpg"
|
||||||
twitter : "rhymeswithsackit"
|
twitter : "rhymeswithsackit"
|
||||||
google_plus : "CorneliusFiddlebone"
|
google_plus : "CorneliusFiddlebone"
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
To assign Billy Rick as an author for our post. We'd add the following YAML front matter to a post:
|
To assign Billy Rick as an author for our post. We'd add the following YAML front matter to a post:
|
||||||
|
|
||||||
{% highlight yaml %}
|
```yaml
|
||||||
author: billy_rick
|
author: billy_rick
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
### Kramdown Table of Contents
|
### Kramdown Table of Contents
|
||||||
|
|
||||||
To include an auto-generated **table of contents** for posts and pages, add the following `_include` before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into list of links.
|
To include an auto-generated **table of contents** for posts and pages, add the following `_include` before the actual content. [Kramdown will take care of the rest](http://kramdown.rubyforge.org/converter/html.html#toc) and convert all headlines into list of links.
|
||||||
|
|
||||||
{% highlight html %}
|
```html
|
||||||
{% raw %}{% include toc.html %}{% endraw %}
|
{% raw %}{% include toc.html %}{% endraw %}
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
### Paragraph Indentation
|
### Paragraph Indentation
|
||||||
|
|
||||||
By default the margin below paragraphs has been removed and indent added to each. This is an intentional design decision to mimic the look of type set in a printed book or manuscript.
|
By default the margin below paragraphs has been removed and indent added to each. This is an intentional design decision to mimic the look of type set in a printed book or manuscript.
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img src="{{ site.url }}/images/paragraph-indent.png" alt="screen shot of paragraphs with default indent style set">
|
<img src="{{ base_path }}/images/paragraph-indent.png" alt="screen shot of paragraphs with default indent style set">
|
||||||
<figcaption>Example of the default paragraph style (indented first line and bottom margin removed).</figcaption>
|
<figcaption>Example of the default paragraph style (indented first line and bottom margin removed).</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
To disable the indents and add spacing between paragraphs change the following line in `_sass/variables.scss` from `true !default` to `false` like so.
|
To disable the indents and add spacing between paragraphs change the following line in `_sass/variables.scss` from `true !default` to `false` like so.
|
||||||
|
|
||||||
{% highlight css %}
|
```scss
|
||||||
$paragraph-indent: false;
|
$paragraph-indent: false;
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
<img src="{{ site.url }}/images/paragraph-no-indent.png" alt="screen shot of paragraphs with indent style disabled">
|
<img src="{{ base_path }}/images/paragraph-no-indent.png" alt="screen shot of paragraphs with indent style disabled">
|
||||||
<figcaption>Example of paragraphs with $paragraph-indent disabled.</figcaption>
|
<figcaption>Example of paragraphs with $paragraph-indent disabled.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
@ -290,16 +282,14 @@ Video embeds are responsive and scale with the width of the main content block w
|
||||||
|
|
||||||
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
|
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
|
||||||
|
|
||||||
{% highlight html %}
|
```html
|
||||||
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
|
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
### Social Sharing Links
|
### Social Sharing Links
|
||||||
|
|
||||||
Social sharing links for Twitter, Facebook, and Google+ are included on posts/pages by default. To hide them on specific posts or pages add `share: false` to the YAML Front Matter. If you'd like to use different social networks modify `_includes/social-share` to your liking. Icons are set using [Font Awesome](http://fontawesome.io).
|
Social sharing links for Twitter, Facebook, and Google+ are included on posts/pages by default. To hide them on specific posts or pages add `share: false` to the YAML Front Matter. If you'd like to use different social networks modify `_includes/social-share` to your liking. Icons are set using [Font Awesome](http://fontawesome.io).
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Further Customization
|
## Further Customization
|
||||||
|
|
||||||
Jekyll 2.x added support for Sass files making it much easier to modify a theme's fonts and colors. By editing values found in `_sass/variables.scss` you can fine tune the site's colors and typography.
|
Jekyll 2.x added support for Sass files making it much easier to modify a theme's fonts and colors. By editing values found in `_sass/variables.scss` you can fine tune the site's colors and typography.
|
||||||
|
@ -308,20 +298,8 @@ For example if you wanted a red background instead of white you'd change `$bodyc
|
||||||
|
|
||||||
To modify the site's JavaScript files I setup a Grunt build script to lint/concatenate/minify all scripts into `scripts.min.js`. [Install Node.js](http://nodejs.org/), then [install Grunt](http://gruntjs.com/getting-started), and then finally install the dependencies for the theme contained in `package.json`:
|
To modify the site's JavaScript files I setup a Grunt build script to lint/concatenate/minify all scripts into `scripts.min.js`. [Install Node.js](http://nodejs.org/), then [install Grunt](http://gruntjs.com/getting-started), and then finally install the dependencies for the theme contained in `package.json`:
|
||||||
|
|
||||||
{% highlight bash %}
|
```bash
|
||||||
npm install
|
npm install
|
||||||
{% endhighlight %}
|
```
|
||||||
|
|
||||||
From the theme's root, use `grunt` concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the `images/` folder. You can also use `grunt dev` in combination with `jekyll build --watch` to watch for updates JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.
|
From the theme's root, use `grunt` concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the `images/` folder. You can also use `grunt dev` in combination with `jekyll build --watch` to watch for updates JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Questions?
|
|
||||||
|
|
||||||
Found a bug or aren't quite sure how something works? By all means Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/minimal-mistakes/issues/new). And if you make something cool with this theme feel free to let me know.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
This theme is free and open source software, distributed under the MIT License. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer.
|
|
31
_docs/20-license.md
Normal file
31
_docs/20-license.md
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
---
|
||||||
|
title: "License"
|
||||||
|
permalink: /docs/license/
|
||||||
|
excerpt: "License for Minimal Mistakes Jekyll Theme."
|
||||||
|
sidebar:
|
||||||
|
title: "v3.0"
|
||||||
|
nav: docs
|
||||||
|
modified: 2016-04-13T15:05:12-04:00
|
||||||
|
---
|
||||||
|
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) {{ site.time | date: '%Y' }} Michael Rose
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
|
@ -4,6 +4,6 @@
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
|
||||||
ga('create', {{ site.analytics.google.tracking_id }}', 'auto');
|
ga('create', '{{ site.analytics.google.tracking_id }}', 'auto');
|
||||||
ga('send', 'pageview');
|
ga('send', 'pageview');
|
||||||
</script>
|
</script>
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% if post.header.teaser %}
|
{% if post.header.teaser %}
|
||||||
{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
|
{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
|
||||||
{% else %}
|
{% else %}
|
||||||
|
@ -11,7 +13,7 @@
|
||||||
<a href="{{ base_path }}{{ post.url }}">
|
<a href="{{ base_path }}{{ post.url }}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
|
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
|
||||||
{% if include.type == "grid" %}
|
{% if include.type == "grid" and teaser != blank %}
|
||||||
<div class="archive__item-teaser">
|
<div class="archive__item-teaser">
|
||||||
<img src=
|
<img src=
|
||||||
{% if teaser contains "http" %}
|
{% if teaser contains "http" %}
|
||||||
|
@ -23,7 +25,9 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}{% if post.link %}<i class="fa fa-star" aria-hidden="true"></i>{% endif %}</h2>
|
<h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}{% if post.link %}<i class="fa fa-star" aria-hidden="true"></i>{% endif %}</h2>
|
||||||
{% if site.read_time and post.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
|
{% if post.read_time %}
|
||||||
|
<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
|
||||||
|
{% endif %}
|
||||||
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
|
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
|
||||||
</article>
|
</article>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% if page.author %}
|
{% if page.author %}
|
||||||
{% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.author %}
|
{% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.author %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -18,73 +20,82 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="author__urls-wrapper">
|
<div class="author__urls-wrapper">
|
||||||
<button class="btn btn--inverse btn--small">Follow</button>
|
<button class="btn btn--inverse">Follow</button>
|
||||||
<ul class="author__urls social-icons">
|
<ul class="author__urls social-icons">
|
||||||
|
{% if author.location %}
|
||||||
|
<li><i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> {{ author.location }}</li>
|
||||||
|
{% endif %}
|
||||||
{% if author.uri %}
|
{% if author.uri %}
|
||||||
<li><a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a></li>
|
<li><a href="{{ author.uri }}"><i class="fa fa-fw fa-chain" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].website_label }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.email %}
|
{% if author.email %}
|
||||||
<li><a href="mailto:{{ author.email }}" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a></li>
|
<li><a href="mailto:{{ author.email }}"><i class="fa fa-fw fa-envelope-square" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].email_label }}</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.keybase %}
|
||||||
|
<li><a href="https://keybase.io/{{ author.keybase }}"><i class="fa fa-fw fa-key" aria-hidden="true"></i> Keybase</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.twitter %}
|
{% if author.twitter %}
|
||||||
<li><a href="http://twitter.com/{{ author.twitter }}" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a></li>
|
<li><a href="http://twitter.com/{{ author.twitter }}"><i class="fa fa-fw fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.facebook %}
|
{% if author.facebook %}
|
||||||
<li><a href="http://facebook.com/{{ author.facebook }}" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a></li>
|
<li><a href="http://facebook.com/{{ author.facebook }}"><i class="fa fa-fw fa-facebook-square" aria-hidden="true"></i> Facebook</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.google_plus %}
|
{% if author.google_plus %}
|
||||||
<li><a href="http://plus.google.com/+{{ author.google_plus }}" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a></li>
|
<li><a href="http://plus.google.com/+{{ author.google_plus }}"><i class="fa fa-fw fa-google-plus-square" aria-hidden="true"></i> Google+</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.linkedin %}
|
{% if author.linkedin %}
|
||||||
<li><a href="http://linkedin.com/in/{{ author.linkedin }}" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a></li>
|
<li><a href="http://linkedin.com/in/{{ author.linkedin }}"><i class="fa fa-fw fa-linkedin-square" aria-hidden="true"></i> LinkedIn</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.xing %}
|
{% if author.xing %}
|
||||||
<li><a href="http://www.xing.com/profile/{{ author.xing }}" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a></li>
|
<li><a href="http://www.xing.com/profile/{{ author.xing }}"><i class="fa fa-fw fa-xing-square" aria-hidden="true"></i> XING</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.instagram %}
|
{% if author.instagram %}
|
||||||
<li><a href="http://instagram.com/{{ author.instagram }}" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a></li>
|
<li><a href="http://instagram.com/{{ author.instagram }}"><i class="fa fa-fw fa-instagram" aria-hidden="true"></i> Instagram</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.tumblr %}
|
{% if author.tumblr %}
|
||||||
<li><a href="http://{{ author.tumblr }}.tumblr.com" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a></li>
|
<li><a href="http://{{ author.tumblr }}.tumblr.com"><i class="fa fa-fw fa-tumblr-square" aria-hidden="true"></i> Tumblr</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.bitbucket %}
|
||||||
|
<li><a href="http://bitbucket.org//{{ author.bitbucket }}"><i class="fa fa-fw fa-bitbucket" aria-hidden="true"></i> Bitbucket</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.github %}
|
{% if author.github %}
|
||||||
<li><a href="http://github.com/{{ author.github }}" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a></li>
|
<li><a href="http://github.com/{{ author.github }}"><i class="fa fa-fw fa-github" aria-hidden="true"></i> Github</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.stackoverflow %}
|
{% if author.stackoverflow %}
|
||||||
<li><a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a></li>
|
<li><a href="http://stackoverflow.com/users/{{ author.stackoverflow }}"><i class="fa fa-fw fa-stack-overflow" aria-hidden="true"></i> Stackoverflow</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.lastfm %}
|
{% if author.lastfm %}
|
||||||
<li><a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-lastfm-square"></i> Last.fm</a></li>
|
<li><a href="http://lastfm.com/user/{{ author.lastfm }}"><i class="fa fa-fw fa-lastfm-square" aria-hidden="true"></i> Last.fm</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.dribbble %}
|
{% if author.dribbble %}
|
||||||
<li><a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a></li>
|
<li><a href="http://dribbble.com/{{ author.dribbble }}"><i class="fa fa-fw fa-dribbble" aria-hidden="true"></i> Dribbble</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.pinterest %}
|
{% if author.pinterest %}
|
||||||
<li><a href="http://www.pinterest.com/{{ author.pinterest }}" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a></li>
|
<li><a href="http://www.pinterest.com/{{ author.pinterest }}"><i class="fa fa-fw fa-pinterest" aria-hidden="true"></i> Pinterest</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.foursquare %}
|
{% if author.foursquare %}
|
||||||
<li><a href="http://foursquare.com/{{ author.foursquare }}" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a></li>
|
<li><a href="http://foursquare.com/{{ author.foursquare }}"><i class="fa fa-fw fa-foursquare" aria-hidden="true"></i> Foursquare</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.steam %}
|
{% if author.steam %}
|
||||||
<li><a href="http://steamcommunity.com/id/{{ author.steam }}" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a></li>
|
<li><a href="http://steamcommunity.com/id/{{ author.steam }}"><i class="fa fa-fw fa-steam-square" aria-hidden="true"></i> Steam</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.youtube %}
|
{% if author.youtube %}
|
||||||
<li><a href="https://youtube.com/user/{{ author.youtube }}" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a></li>
|
<li><a href="https://youtube.com/user/{{ author.youtube }}"><i class="fa fa-fw fa-youtube-square" aria-hidden="true"></i> Youtube</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.soundcloud %}
|
{% if author.soundcloud %}
|
||||||
<li><a href="http://soundcloud.com/{{ author.soundcloud }}" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a></li>
|
<li><a href="http://soundcloud.com/{{ author.soundcloud }}"><i class="fa fa-fw fa-soundcloud" aria-hidden="true"></i> Soundcloud</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.weibo %}
|
{% if author.weibo %}
|
||||||
<li><a href="http://www.weibo.com/{{ author.weibo }}" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a></li>
|
<li><a href="http://www.weibo.com/{{ author.weibo }}"><i class="fa fa-fw fa-weibo" aria-hidden="true"></i> Weibo</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.flickr %}
|
{% if author.flickr %}
|
||||||
<li><a href="http://www.flickr.com/{{ author.flickr }}" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a></li>
|
<li><a href="http://www.flickr.com/{{ author.flickr }}"><i class="fa fa-fw fa-flickr" aria-hidden="true"></i> Flickr</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.codepen %}
|
{% if author.codepen %}
|
||||||
<li><a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a></li>
|
<li><a href="http://codepen.io/{{ author.codepen }}"><i class="fa fa-fw fa-codepen" aria-hidden="true"></i> CodePen</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if author.vine %}
|
{% if author.vine %}
|
||||||
<li><a href="https://vine.co/u/{{ author.vine }}" target="_blank"><i class="fa fa-fw fa-vine"></i> Vine</a></li>
|
<li><a href="https://vine.co/u/{{ author.vine }}"><i class="fa fa-fw fa-vine" aria-hidden="true"></i> Vine</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% case site.categories.type %}
|
{% case site.categories.type %}
|
||||||
{% when "liquid" %}
|
{% when "liquid" %}
|
||||||
{% assign path_type = "#" %}
|
{% assign path_type = "#" %}
|
||||||
|
@ -19,20 +21,20 @@
|
||||||
{% for crumb in crumbs offset: 1 %}
|
{% for crumb in crumbs offset: 1 %}
|
||||||
{% if forloop.first %}
|
{% if forloop.first %}
|
||||||
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
||||||
<a href="{{ base_path }}/" itemprop="item"><span itemprop="name">{{ site.breadcrumb_home_label }}</span></a>
|
<a href="{{ base_path }}/" itemprop="item"><span itemprop="name">{{ site.data.ui-text[site.locale].breadcrumb_home_label }}</span></a>
|
||||||
<meta itemprop="position" content="{{ i }}" />
|
<meta itemprop="position" content="{{ i }}" />
|
||||||
</li>
|
</li>
|
||||||
<span class="sep">{{ site.breadcrumb_separator }}</span>
|
<span class="sep">{{ site.data.ui-text[site.locale].breadcrumb_separator }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if forloop.last %}
|
{% if forloop.last %}
|
||||||
<li class="current">{{ page.title }}</li>
|
<li class="current">{{ page.title }}</li>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% assign i = i | plus: 1 %}
|
{% assign i = i | plus: 1 %}
|
||||||
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
|
||||||
<a href="{{ base_path }}{{ crumb | slugify | prepend: path_type | prepend: crumb_path }}" itemprop="item"><span itemprop="name">{{ crumb | replace: '-', ' ' | replace: '%20', ' ' | capitalize }}</span></a>
|
<a href="{{ base_path }}{{ crumb | downcase | replace: '%20', '-' | prepend: path_type | prepend: crumb_path }}" itemprop="item"><span itemprop="name">{{ crumb | replace: '-', ' ' | replace: '%20', ' ' | capitalize }}</span></a>
|
||||||
<meta itemprop="position" content="{{ i }}" />
|
<meta itemprop="position" content="{{ i }}" />
|
||||||
</li>
|
</li>
|
||||||
<span class="sep">{{ site.breadcrumb_separator }}</span>
|
<span class="sep">{{ site.data.ui-text[site.locale].breadcrumb_separator }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ol>
|
</ol>
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
<div class="notice--danger center">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
|
<div class="notice--danger align-center" style="margin: 0;">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div>
|
||||||
<![endif]-->
|
<![endif]-->
|
|
@ -1,5 +1,7 @@
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% case site.categories.type %}
|
{% case site.categories.type %}
|
||||||
{% when "liquid" %}
|
{% when "liquid" %}
|
||||||
{% assign path_type = "#" %}
|
{% assign path_type = "#" %}
|
||||||
|
@ -16,7 +18,7 @@
|
||||||
{% assign category_hashes = (page_categories | split: ',' | sort:0) %}
|
{% assign category_hashes = (page_categories | split: ',' | sort:0) %}
|
||||||
|
|
||||||
<p class="page__taxonomy">
|
<p class="page__taxonomy">
|
||||||
{% if site.data.ui-text[site.locale].categories_label %}<strong>{{ site.data.ui-text[site.locale].categories_label }} </strong>{% endif %}
|
<strong><i class="fa fa-fw fa-folder-open" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].categories_label }} </strong>
|
||||||
<span itemprop="keywords">
|
<span itemprop="keywords">
|
||||||
{% for hash in category_hashes %}
|
{% for hash in category_hashes %}
|
||||||
{% assign keyValue = hash | split: '#' %}
|
{% assign keyValue = hash | split: '#' %}
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
<div class="page__comments">
|
<div class="page__comments">
|
||||||
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label }}</h4>
|
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label }}</h4>
|
||||||
{% case site.comments.provider %}
|
{% case site.comments.provider %}
|
||||||
|
|
|
@ -9,6 +9,13 @@
|
||||||
<div class="feature__wrapper">
|
<div class="feature__wrapper">
|
||||||
|
|
||||||
{% for f in feature_row %}
|
{% for f in feature_row %}
|
||||||
|
|
||||||
|
{% if f.url contains "http" %}
|
||||||
|
{% capture f_url %}{{ f.url }}{% endcapture %}
|
||||||
|
{% else %}
|
||||||
|
{% capture f_url %}{{ f.url | prepend: base_path }}{% endcapture %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div class="feature__item{% if include.type %}--{{ include.type }}{% endif %}">
|
<div class="feature__item{% if include.type %}--{{ include.type }}{% endif %}">
|
||||||
<div class="archive__item">
|
<div class="archive__item">
|
||||||
{% if f.image_path %}
|
{% if f.image_path %}
|
||||||
|
@ -35,7 +42,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if f.url %}
|
{% if f.url %}
|
||||||
<p><a href="{{ f.url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
|
<p><a href="{{ f_url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -1,31 +1,17 @@
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
|
|
||||||
{% if site.owner.google.ad-client and site.owner.google.ad-slot %}
|
|
||||||
<div class="google-ads">
|
|
||||||
<!-- 320 x 50 ad -->
|
|
||||||
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
|
||||||
<ins class="adsbygoogle"
|
|
||||||
style="display:inline-block;width:320px;height:50px"
|
|
||||||
data-ad-client="{{ site.owner.google.ad-client }}"
|
|
||||||
data-ad-slot="{{ site.owner.google.ad-slot }}"></ins>
|
|
||||||
<script>
|
|
||||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
||||||
</script>
|
|
||||||
</div><!-- /.google-ads -->
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="page__footer-follow">
|
<div class="page__footer-follow">
|
||||||
<ul class="social-icons">
|
<ul class="social-icons">
|
||||||
{% if site.data.ui-text[site.locale].follow_label %}
|
{% if site.data.ui-text[site.locale].follow_label %}
|
||||||
<li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
|
<li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if site.twitter.username %}
|
{% if site.twitter.username %}
|
||||||
<li><a href="https://twitter.com/{{ site.twitter.username }}"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a></li>
|
<li><a href="https://twitter.com/{{ site.twitter.username }}"><i class="fa fa-fw fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if site.facebook.username %}
|
{% if site.facebook.username %}
|
||||||
<li><a href="https://facebook.com/{{ site.facebook.username }}"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a></li>
|
<li><a href="https://facebook.com/{{ site.facebook.username }}"><i class="fa fa-fw fa-facebook-square" aria-hidden="true"></i> Facebook</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li><a href="{{ base_path }}/feed.xml"><i class="fa fa-fw fa-rss-square"></i> {{ site.data.ui-text[site.locale].feed_label }}</a></li>
|
<li><a href="{{ base_path }}/feed.xml"><i class="fa fa-fw fa-rss-square" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].feed_label }}</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% include seo.html %}
|
{% include seo.html %}
|
||||||
|
@ -17,7 +19,3 @@
|
||||||
<link rel="stylesheet" href="{{ base_path }}/assets/css/main.css">
|
<link rel="stylesheet" href="{{ base_path }}/assets/css/main.css">
|
||||||
|
|
||||||
<meta http-equiv="cleartype" content="on">
|
<meta http-equiv="cleartype" content="on">
|
||||||
|
|
||||||
<!-- Icons -->
|
|
||||||
<link rel="shortcut icon" href="{{ base_path }}/favicon.ico">
|
|
||||||
<link rel="shortcut icon" href="{{ base_path }}/favicon.png">
|
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
<!-- start custom head snippets -->
|
<!-- start custom head snippets -->
|
||||||
|
|
||||||
|
<!-- insert favicons. use http://realfavicongenerator.net/ -->
|
||||||
|
|
||||||
<!-- end custom head snippets -->
|
<!-- end custom head snippets -->
|
|
@ -1,22 +1,23 @@
|
||||||
<div class="masthead">
|
{% include base_path %}
|
||||||
<div class="site-name">
|
|
||||||
<a href="{{ base_path }}/">{{ site.title }}</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="masthead__menu">
|
<div class="masthead">
|
||||||
<nav id="site-nav" class="greedy-nav">
|
<div class="masthead__inner-wrap">
|
||||||
<button><div class="navicon"></div></button>
|
<div class="masthead__menu">
|
||||||
<ul class="visible-links">
|
<nav id="site-nav" class="greedy-nav">
|
||||||
{% for link in site.data.navigation %}
|
<button><div class="navicon"></div></button>
|
||||||
{% if link.url contains 'http' %}
|
<ul class="visible-links">
|
||||||
{% assign domain = '' %}
|
<li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ base_path }}/">{{ site.title }}</a></li>
|
||||||
{% else %}
|
{% for link in site.data.navigation.main %}
|
||||||
{% assign domain = base_path %}
|
{% if link.url contains 'http' %}
|
||||||
{% endif %}
|
{% assign domain = '' %}
|
||||||
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
{% else %}
|
||||||
{% endfor %}
|
{% assign domain = base_path %}
|
||||||
</ul>
|
{% endif %}
|
||||||
<ul class="hidden-links hidden"></ul>
|
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
|
||||||
</nav>
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
<ul class="hidden-links hidden"></ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
25
_includes/nav_list
Normal file
25
_includes/nav_list
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
{% include base_path %}
|
||||||
|
{% assign navigation = site.data.navigation[page.sidebar.nav] %}
|
||||||
|
|
||||||
|
<nav class="nav__list">
|
||||||
|
{% if page.sidebar.title %}<header><h4 class="nav__title" style="padding: 0;">{{ page.sidebar.title }}</h4></header>{% endif %}
|
||||||
|
<ul>
|
||||||
|
{% for nav in navigation %}
|
||||||
|
<li><span class="nav__sub-title">{{ nav.title }}</span>
|
||||||
|
{% if nav.children != null %}
|
||||||
|
<ul>
|
||||||
|
{% for child in nav.children %}
|
||||||
|
{% assign nav_url = child.path | prepend: "/" | prepend: page.sidebar.nav | prepend: "/" | append: "/" %}
|
||||||
|
{% if nav_url == page.url %}
|
||||||
|
{% assign active = "active" %}
|
||||||
|
{% else %}
|
||||||
|
{% assign active = "" %}
|
||||||
|
{% endif %}
|
||||||
|
<li><a href="{{ nav_url | prepend: base_path }}" class="{{ active }}">{{ child.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
|
@ -1,9 +1,17 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% if page.header.image contains "http" %}
|
{% if page.header.image contains "http" %}
|
||||||
{% capture img_path %}{{ page.header.image }}{% endcapture %}
|
{% capture img_path %}{{ page.header.image }}{% endcapture %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
|
{% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.header.cta_url contains "http" %}
|
||||||
|
{% capture cta_path %}{{ page.header.cta_url }}{% endcapture %}
|
||||||
|
{% else %}
|
||||||
|
{% capture cta_path %}{{ page.header.cta_url | prepend: base_path }}{% endcapture %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% if page.header.overlay_image contains "http" %}
|
{% if page.header.overlay_image contains "http" %}
|
||||||
{% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
|
{% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
|
||||||
{% elsif page.header.overlay_image %}
|
{% elsif page.header.overlay_image %}
|
||||||
|
@ -19,7 +27,7 @@
|
||||||
{% if paginator %}
|
{% if paginator %}
|
||||||
{{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page }} {{ paginator.page }}{% endunless %}
|
{{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page }} {{ paginator.page }}{% endunless %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}
|
{{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</h1>
|
</h1>
|
||||||
{% if page.excerpt %}
|
{% if page.excerpt %}
|
||||||
|
@ -29,7 +37,7 @@
|
||||||
<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
|
<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if page.header.cta_url %}
|
{% if page.header.cta_url %}
|
||||||
<p><a href="{{ page.header.cta_url }}" class="btn btn--light-outline btn--x-large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
|
<p><a href="{{ cta_path }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label }}</a></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% if site.tags.type and page.tags[0] %}
|
{% if site.tags.type and page.tags[0] %}
|
||||||
{% include tag-list.html %}
|
{% include tag-list.html %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -6,15 +6,17 @@
|
||||||
{% comment %} Link for previous page {% endcomment %}
|
{% comment %} Link for previous page {% endcomment %}
|
||||||
{% if paginator.previous_page %}
|
{% if paginator.previous_page %}
|
||||||
{% if paginator.previous_page == 1 %}
|
{% if paginator.previous_page == 1 %}
|
||||||
<li><a href="{{ base_path }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
|
<li><a href="{{ base_path }}/">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
|
<li><a href="{{ base_path }}/page{{ paginator.previous_page }}/">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous }}</span></a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% comment %}First page{% endcomment %}
|
{% comment %} First page {% endcomment %}
|
||||||
{% if paginator.page == 1 %}
|
{% if paginator.page == 1 %}
|
||||||
<li><strong class="current">1</strong></li>
|
<li><a href="#" class="disabled current">1</a></li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li><a href="{{ base_path }}/">1</a></li>
|
<li><a href="{{ base_path }}/">1</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -23,7 +25,7 @@
|
||||||
{% if paginator.page > 4 %}
|
{% if paginator.page > 4 %}
|
||||||
{% assign page_start = paginator.page | minus: 2 %}
|
{% assign page_start = paginator.page | minus: 2 %}
|
||||||
{% comment %} Ellipsis for truncated links {% endcomment %}
|
{% comment %} Ellipsis for truncated links {% endcomment %}
|
||||||
<li>…</li>
|
<li><a href="#" class="disabled">…</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% assign page_end = paginator.total_pages | minus: 1 %}
|
{% assign page_end = paginator.total_pages | minus: 1 %}
|
||||||
|
@ -34,32 +36,34 @@
|
||||||
|
|
||||||
{% for index in (page_start..page_end) %}
|
{% for index in (page_start..page_end) %}
|
||||||
{% if index == paginator.page %}
|
{% if index == paginator.page %}
|
||||||
<li><strong class="current">{{ index }}</strong></li>
|
<li><a href="{{ base_path }}/page{{ index }}/" class="disabled current">{{ index }}</a></li>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% comment %}Distance from current page and this link{% endcomment %}
|
{% comment %} Distance from current page and this link {% endcomment %}
|
||||||
{% assign dist = paginator.page | minus: index %}
|
{% assign dist = paginator.page | minus: index %}
|
||||||
{% if dist < 0 %}
|
{% if dist < 0 %}
|
||||||
{% comment %}Distance must be a positive value{% endcomment %}
|
{% comment %} Distance must be a positive value {% endcomment %}
|
||||||
{% assign dist = 0 | minus: dist %}
|
{% assign dist = 0 | minus: dist %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li><a href="{{ base_path }}/page{{ index }}/">{{ index }}</a></li>
|
<li><a href="{{ base_path }}/page{{ index }}/">{{ index }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
{% comment %}Ellipsis for truncated links{% endcomment %}
|
{% comment %} Ellipsis for truncated links {% endcomment %}
|
||||||
{% if pages_to_end > 3 %}
|
{% if pages_to_end > 3 %}
|
||||||
<li>…</li>
|
<li><a href="#" class="disabled">…</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if paginator.page == paginator.total_pages %}
|
{% if paginator.page == paginator.total_pages %}
|
||||||
<li><strong class="current">{{ paginator.page }}</strong></li>
|
<li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li><a href="{{ base_path }}/page{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
|
<li><a href="{{ base_path }}/page{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% comment %}Link next page{% endcomment %}
|
{% comment %} Link next page {% endcomment %}
|
||||||
{% if paginator.next_page %}
|
{% if paginator.next_page %}
|
||||||
<li><a href="{{ base_path }}/page{{ paginator.next_page }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
|
<li><a href="{{ base_path }}/page{{ paginator.next_page }}/">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_next }}</span></a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
16
_includes/post_pagination.html
Normal file
16
_includes/post_pagination.html
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
{% if page.previous or page.next %}
|
||||||
|
<nav class="pagination">
|
||||||
|
{% if page.previous %}
|
||||||
|
<a href="{{ base_path }}{{ page.previous.url }}" class="pagination--pager" title="{{ page.previous.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_previous }}</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if page.next %}
|
||||||
|
<a href="{{ base_path }}{{ page.next.url }}" class="pagination--pager" title="{{ page.next.title | markdownify | strip_html }}">{{ site.data.ui-text[site.locale].pagination_next }}</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="#" class="pagination--pager disabled">{{ site.data.ui-text[site.locale].pagination_next }}</a>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
<!-- begin SEO -->
|
<!-- begin SEO -->
|
||||||
{% if site.url %}
|
{% if site.url %}
|
||||||
{% assign seo_url = site.url | append: site.baseurl %}
|
{% assign seo_url = site.url | append: site.baseurl %}
|
||||||
|
@ -61,8 +63,8 @@
|
||||||
<meta name="twitter:image" content="{% if page.header.image contains "http" %}{{ page.header.image }}{% else %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endif %}">
|
<meta name="twitter:image" content="{% if page.header.image contains "http" %}{{ page.header.image }}{% else %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endif %}">
|
||||||
{% else %}
|
{% else %}
|
||||||
<meta name="twitter:card" content="summary">
|
<meta name="twitter:card" content="summary">
|
||||||
{% if site.logo %}
|
{% if site.og_image %}
|
||||||
<meta name="twitter:image" content="{{ site.logo | prepend: "/images/" | prepend: base_path }}">
|
<meta name="twitter:image" content="{{ site.og_image | prepend: "/images/" | prepend: base_path }}">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
@ -96,13 +98,13 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if site.logo %}
|
{% if site.og_image %}
|
||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{
|
{
|
||||||
"@context": "http://schema.org",
|
"@context": "http://schema.org",
|
||||||
"@type": "Organization",
|
"@type": "Organization",
|
||||||
"url": {{ seo_url | jsonify }},
|
"url": {{ seo_url | jsonify }},
|
||||||
"logo": {{ site.logo | prepend: "/" | prepend: seo_url | jsonify }}
|
"logo": {{ site.og_image | prepend: "/" | prepend: seo_url | jsonify }}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% if page.author_profile or page.sidebar %}
|
{% if page.author_profile or page.sidebar %}
|
||||||
<div class="sidebar sticky">
|
<div class="sidebar sticky">
|
||||||
{% if page.author_profile %}{% include author-profile.html %}{% endif %}
|
{% if page.author_profile %}{% include author-profile.html %}{% endif %}
|
||||||
|
@ -15,6 +17,9 @@
|
||||||
{% if s.title %}<h3>{{ s.title }}</h3>{% endif %}
|
{% if s.title %}<h3>{{ s.title }}</h3>{% endif %}
|
||||||
{% if s.text %}{{ s.text | markdownify }}{% endif %}
|
{% if s.text %}{{ s.text | markdownify }}{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
{% if page.sidebar.nav %}
|
||||||
|
{% include nav_list items=page.sidebar.nav %}
|
||||||
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
|
@ -1,8 +1,15 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
<section class="page__share">
|
<section class="page__share">
|
||||||
{% if site.data.ui-text[site.locale].share_on_label %}
|
{% if site.data.ui-text[site.locale].share_on_label %}
|
||||||
<h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label }}</h4>
|
<h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label }}</h4>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="https://twitter.com/intent/tweet?text={{ base_path }}{{ page.url }}" class="btn btn--twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
|
|
||||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ base_path }}{{ page.url }}" class="btn btn--facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
|
<a href="https://twitter.com/intent/tweet?text={{ base_path }}{{ page.url }}" class="btn btn--twitter" title="{{ site.data.ui-text[site.locale].share_on_label }} Twitter"><i class="fa fa-fw fa-twitter" aria-hidden="true"></i><span> Twitter</span></a>
|
||||||
<a href="https://plus.google.com/share?url={{ base_path }}{{ page.url }}" class="btn btn--google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
|
|
||||||
</section><!-- /.social-share -->
|
<a href="https://www.facebook.com/sharer/sharer.php?u={{ base_path }}{{ page.url }}" class="btn btn--facebook" title="{{ site.data.ui-text[site.locale].share_on_label }} Facebook"><i class="fa fa-fw fa-facebook" aria-hidden="true"></i><span> Facebook</span></a>
|
||||||
|
|
||||||
|
<a href="https://plus.google.com/share?url={{ base_path }}{{ page.url }}" class="btn btn--google-plus" title="{{ site.data.ui-text[site.locale].share_on_label }} Google Plus"><i class="fa fa-fw fa-google-plus" aria-hidden="true"></i><span> Google+</span></a>
|
||||||
|
|
||||||
|
<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ base_path }}{{ page.url }}" class="btn btn--linkedin" title="{{ site.data.ui-text[site.locale].share_on_label }} LinkedIn"><i class="fa fa-fw fa-linkedin" aria-hidden="true"></i><span> LinkedIn</span></a>
|
||||||
|
</section>
|
|
@ -16,7 +16,7 @@
|
||||||
{% assign tag_hashes = (page_tags | split: ',' | sort:0) %}
|
{% assign tag_hashes = (page_tags | split: ',' | sort:0) %}
|
||||||
|
|
||||||
<p class="page__taxonomy">
|
<p class="page__taxonomy">
|
||||||
{% if site.data.ui-text[site.locale].tags_label %}<strong>{{ site.data.ui-text[site.locale].tags_label }} </strong>{% endif %}
|
<strong><i class="fa fa-fw fa-tags" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].tags_label }} </strong>
|
||||||
<span itemprop="keywords">
|
<span itemprop="keywords">
|
||||||
{% for hash in tag_hashes %}
|
{% for hash in tag_hashes %}
|
||||||
{% assign keyValue = hash | split: '#' %}
|
{% assign keyValue = hash | split: '#' %}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<aside class="sidebar__right">
|
<aside class="sidebar__right">
|
||||||
<nav class="toc" markdown="1">
|
<nav class="toc" markdown="1">
|
||||||
<header><h4 class="toc__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
|
<header><h4 class="nav__title"><i class="fa fa-{{ include.icon | default: 'file-text' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
|
||||||
* Auto generated table of contents
|
* Auto generated table of contents
|
||||||
{:toc .toc__menu}
|
{:toc .toc__menu}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
@ -3,10 +3,14 @@ layout: default
|
||||||
author_profile: false
|
author_profile: false
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="archive">
|
<div id="main" role="main">
|
||||||
<h1 class="page__title">{{ page.title }}</h1>
|
{% include sidebar.html %}
|
||||||
{% include base_path %}
|
|
||||||
{% for post in page.posts %}
|
<div class="archive">
|
||||||
{% include archive-single.html %}
|
<h1 class="page__title">{{ page.title }}</h1>
|
||||||
{% endfor %}
|
{% include base_path %}
|
||||||
|
{% for post in page.posts %}
|
||||||
|
{% include archive-single.html %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -6,8 +6,10 @@ layout: default
|
||||||
{% include page__hero.html %}
|
{% include page__hero.html %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.url != "/" and site.breadcrumbs and site.categories.type == "jekyll-archives" %}
|
{% if page.url != "/" and site.breadcrumbs %}
|
||||||
{% include breadcrumbs.html %}
|
{% unless paginator %}
|
||||||
|
{% include breadcrumbs.html %}
|
||||||
|
{% endunless %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div id="main" role="main">
|
<div id="main" role="main">
|
||||||
|
|
|
@ -4,28 +4,28 @@ layout: compress
|
||||||
|
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="{{ site.locale | slice: 0,2 }}" class="no-js">
|
<html lang="{{ site.locale | slice: 0,2 }}" class="no-js">
|
||||||
<head>
|
<head>
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
{% include head/custom.html %}
|
{% include head/custom.html %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
{% include browser-upgrade.html %}
|
{% include browser-upgrade.html %}
|
||||||
{% include masthead.html %}
|
{% include masthead.html %}
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
<div class="page__footer">
|
<div class="page__footer">
|
||||||
<footer>
|
<footer>
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include scripts.html %}
|
{% include scripts.html %}
|
||||||
{% include footer/custom.html %}
|
{% include footer/custom.html %}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -8,8 +8,10 @@ layout: default
|
||||||
{% include page__hero.html %}
|
{% include page__hero.html %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.url != "/" and site.breadcrumbs and site.categories.type == "jekyll-archives" %}
|
{% if page.url != "/" and site.breadcrumbs %}
|
||||||
{% include breadcrumbs.html %}
|
{% unless paginator %}
|
||||||
|
{% include breadcrumbs.html %}
|
||||||
|
{% endunless %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div id="main" role="main">
|
<div id="main" role="main">
|
||||||
|
@ -25,7 +27,9 @@ layout: default
|
||||||
{% unless page.header.overlay_color or page.header.overlay_image %}
|
{% unless page.header.overlay_color or page.header.overlay_image %}
|
||||||
<header>
|
<header>
|
||||||
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
|
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
|
||||||
{% if site.read_time and page.read_time %}<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>{% endif %}
|
{% if page.read_time %}
|
||||||
|
<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
|
||||||
|
{% endif %}
|
||||||
</header>
|
</header>
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
|
|
||||||
|
@ -40,13 +44,15 @@ layout: default
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% include page__taxonomy.html %}
|
{% include page__taxonomy.html %}
|
||||||
{% if page.modified %}
|
{% if page.modified %}
|
||||||
<p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time></p>
|
<p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time></p>
|
||||||
{% elsif page.date %}
|
{% elsif page.date %}
|
||||||
<p class="page__date"><strong>{{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></p>
|
<p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label }}</strong> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
{% if site.share and page.share %}{% include social-share.html %}{% endif %}
|
{% if page.share %}{% include social-share.html %}{% endif %}
|
||||||
|
|
||||||
|
{% include post_pagination.html %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if site.comments.provider and page.comments %}
|
{% if site.comments.provider and page.comments %}
|
||||||
|
|
|
@ -1,19 +1,84 @@
|
||||||
---
|
---
|
||||||
permalink: /about/
|
permalink: /about/
|
||||||
title: "About the Theme"
|
title: "About"
|
||||||
modified: 2014-08-08T20:53:07.573882-04:00
|
excerpt: "Minimal Mistakes is a flexible two-column Jekyll theme."
|
||||||
|
layouts_gallery:
|
||||||
|
- url: mm-layout-splash.png
|
||||||
|
image_path: mm-layout-splash.png
|
||||||
|
alt: "splash layout example"
|
||||||
|
- url: mm-layout-single-meta.png
|
||||||
|
image_path: mm-layout-single-meta.png
|
||||||
|
alt: "single layout with comments and related posts"
|
||||||
|
- url: mm-layout-archive.png
|
||||||
|
image_path: mm-layout-archive.png
|
||||||
|
alt: "archive layout example"
|
||||||
|
modified: 2016-04-14T10:26:26-04:00
|
||||||
---
|
---
|
||||||
|
|
||||||
Minimal Mistakes is responsive Jekyll theme with large featured images and solid typography. As the name implies the styling is fairly minimal to make it easier for you to build on top of.
|
{% include base_path %}
|
||||||
|
|
||||||
## Minimal Mistakes is all about:
|
Minimal Mistakes is a flexible two-column Jekyll theme. Perfect for hosting your personal site, blog, or portfolio on GitHub or self-hosting on your own server. As the name implies --- styling is purposely minimalistic to be enhanced and customized by you :smile:.
|
||||||
|
|
||||||
* Responsive templates. Looking good on mobile, tablet, and desktop.
|
The theme includes responsive layouts (`single`, `archive`, and `splash` pages) that look great on mobile and desktop browsers.
|
||||||
* Gracefully degrading in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
|
|
||||||
* Minimal embellishments -- content first.
|
|
||||||
* Optional large feature images for posts and pages.
|
|
||||||
* Simple and clear permalink structure.
|
|
||||||
* [Custom 404 page](http://mmistakes.github.io/minimal-mistakes/404.html) to get you started.
|
|
||||||
* Support for Disqus Comments
|
|
||||||
|
|
||||||
<a markdown="0" href="{{ site.url }}{{ site.baseurl }}/theme-setup/" class="btn">Install Minimal Mistakes Theme</a>
|
{% include gallery id="layouts_gallery" caption="Examples of included layouts `splash`, `single`, and `archive`." %}
|
||||||
|
|
||||||
|
[Install the Theme]({{ base_path }}/docs/quick-start-guide/){: .btn .btn--success .btn--large}
|
||||||
|
|
||||||
|
## Notable Features
|
||||||
|
|
||||||
|
- Compatible with GitHub Pages
|
||||||
|
- Several layout options (single, archive, splash pages)
|
||||||
|
- SEO optimized with support for [Twitter Cards](https://dev.twitter.com/cards/overview) and [Open Graph](http://ogp.me/) data
|
||||||
|
- Optional header images, sidebars, table of contents, galleries, related posts, breadcrumb links, and more.
|
||||||
|
- Optional comments ([Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), Google+, and custom)
|
||||||
|
- Optional analytics ([Google Analytics](https://www.google.com/analytics/) and custom)
|
||||||
|
|
||||||
|
## Demo Pages
|
||||||
|
|
||||||
|
| Name | Description |
|
||||||
|
| ------------------------------------------- | ----------------------------------------------------- |
|
||||||
|
| [Post with Header Image][header-image-post] | A post with a large header image. |
|
||||||
|
| [HTML Tags and Formatting Post][html-tags-post] | A variety of common markup showing how the theme styles them. |
|
||||||
|
| [Syntax Highlighting Post][syntax-post] | Post displaying highlighted code. |
|
||||||
|
| [Post with a Gallery][gallery-post] | A post showing several images wrapped in `<figure>` elements. |
|
||||||
|
| [Sample Collection Page][sample-collection] | Single page from a collection. |
|
||||||
|
| [Categories Archive][categories-archive] | Posts grouped by category. |
|
||||||
|
| [Tags Archive][tags-archive] | Posts grouped by tags. |
|
||||||
|
|
||||||
|
For even more demo pages check the [posts archive][year-archive].
|
||||||
|
|
||||||
|
[header-image-post]: {{ base_path }}{% post_url 2012-03-15-layout-header-image-text-readability %}
|
||||||
|
[gallery-post]: {{ base_path }}{% post_url 2010-09-09-post-gallery %}
|
||||||
|
[html-tags-post]: {{ base_path }}{% post_url 2013-01-11-markup-html-tags-and-formatting %}
|
||||||
|
[syntax-post]: {{ base_path }}{% post_url 2013-08-16-markup-syntax-highlighting %}
|
||||||
|
[sample-collection]: {{ base_path }}/recipes/chocolate-chip-cookies/
|
||||||
|
[categories-archive]: {{ base_path }}/categories/
|
||||||
|
[tags-archive]: {{ base_path }}/tags/
|
||||||
|
[year-archive]: {{ base_path }}/year-archive/
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
### Icons + Demo Images:
|
||||||
|
|
||||||
|
- [The Noun Project](https://thenounproject.com) -- Garrett Knoll, Arthur Shlain, and [tracy tam](https://thenounproject.com/tracytam)
|
||||||
|
- [Font Awesome](http://fortawesome.github.io/Font-Awesome/)
|
||||||
|
- [Unsplash](https://unsplash.com/)
|
||||||
|
|
||||||
|
### Other:
|
||||||
|
|
||||||
|
- [Jekyll](http://jekyllrb.com/)
|
||||||
|
- [jQuery](http://jquery.com/)
|
||||||
|
- [Susy](http://susy.oddbird.net/)
|
||||||
|
- [Breakpoint](http://breakpoint-sass.com/)
|
||||||
|
- [Magnific Popup](http://dimsemenov.com/plugins/magnific-popup/)
|
||||||
|
- [FitVids.JS](http://fitvidsjs.com/)
|
||||||
|
- Greedy Navigation - [lukejacksonn](http://codepen.io/lukejacksonn/pen/PwmwWV)
|
||||||
|
- [jQuery Smooth Scroll](https://github.com/kswedberg/jquery-smooth-scroll)
|
||||||
|
- [Stickyfill](https://github.com/wilddeer/stickyfill)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Minimal Mistakes is designed, developed, and maintained by Michael Rose. Just another boring, tattooed, designer from Buffalo New York.
|
39
_pages/home.md
Normal file
39
_pages/home.md
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
layout: splash
|
||||||
|
permalink: /home/
|
||||||
|
date:
|
||||||
|
header:
|
||||||
|
overlay_color: "#5e616c"
|
||||||
|
overlay_image: mm-home-page-feature.jpg
|
||||||
|
cta_label: "<i class='fa fa-download'></i> Install Now"
|
||||||
|
cta_url: "/docs/quick-start-guide/"
|
||||||
|
caption:
|
||||||
|
excerpt: 'A flexible two-column Jekyll theme. Perfect for personal sites, blogs, and portfolios hosted on GitHub or on your own server.<br /> <small>Currently at version 3.0</small><br /><br /> {::nomarkdown}<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> <iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>{:/nomarkdown}'
|
||||||
|
feature_row:
|
||||||
|
- image_path: mm-customizable-feature.png
|
||||||
|
alt: ""
|
||||||
|
title: "Super Customizable"
|
||||||
|
excerpt: "Everything from the menus, sidebars, comments, and more can be configured or set with YAML Front Matter."
|
||||||
|
url: "/docs/configuration/"
|
||||||
|
btn_label: "Learn More"
|
||||||
|
- image_path: mm-responsive-feature.png
|
||||||
|
alt: ""
|
||||||
|
title: "Responsive Layouts"
|
||||||
|
excerpt: "Built on HTML5 + CSS3. All layouts are fully responsive with helpers to augment your content."
|
||||||
|
url: "/docs/layouts/"
|
||||||
|
btn_label: "Learn More"
|
||||||
|
- image_path: mm-free-feature.png
|
||||||
|
alt: ""
|
||||||
|
title: "100% Free"
|
||||||
|
excerpt: "Free to use however you want under the MIT License."
|
||||||
|
url: "/docs/license/"
|
||||||
|
btn_label: "Learn More"
|
||||||
|
github:
|
||||||
|
- excerpt: '{::nomarkdown}<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe> <iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=mmistakes&repo=minimal-mistakes&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="158px" height="30px"></iframe>{:/nomarkdown}'
|
||||||
|
intro:
|
||||||
|
- excerpt: 'Get notified when I add new stuff [<i class="fa fa-twitter"></i> @mmistakes](https://twitter.com/mmistakes){: .btn .btn--twitter}'
|
||||||
|
---
|
||||||
|
|
||||||
|
{% include feature_row id="intro" type="center" %}
|
||||||
|
|
||||||
|
{% include feature_row %}
|
|
@ -23,7 +23,7 @@ feature_row:
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
||||||
url: "#test-link"
|
url: "#test-link"
|
||||||
btn_label: "Read More"
|
btn_label: "Read More"
|
||||||
btn_class: "btn--inverse btn--large"
|
btn_class: "btn--inverse"
|
||||||
- image_path: unsplash-gallery-image-3-th.jpg
|
- image_path: unsplash-gallery-image-3-th.jpg
|
||||||
title: "Placeholder 3"
|
title: "Placeholder 3"
|
||||||
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
excerpt: "This is some sample content that goes here with **Markdown** formatting."
|
||||||
|
@ -34,7 +34,7 @@ feature_row2:
|
||||||
excerpt: 'This is some sample content that goes here with **Markdown** formatting. Left aligned with `type="left"`'
|
excerpt: 'This is some sample content that goes here with **Markdown** formatting. Left aligned with `type="left"`'
|
||||||
url: "#test-link"
|
url: "#test-link"
|
||||||
btn_label: "Read More"
|
btn_label: "Read More"
|
||||||
btn_class: "btn--inverse btn--large"
|
btn_class: "btn--inverse"
|
||||||
feature_row3:
|
feature_row3:
|
||||||
- image_path: unsplash-gallery-image-2-th.jpg
|
- image_path: unsplash-gallery-image-2-th.jpg
|
||||||
alt: "placeholder image 2"
|
alt: "placeholder image 2"
|
||||||
|
@ -42,7 +42,7 @@ feature_row3:
|
||||||
excerpt: 'This is some sample content that goes here with **Markdown** formatting. Right aligned with `type="right"`'
|
excerpt: 'This is some sample content that goes here with **Markdown** formatting. Right aligned with `type="right"`'
|
||||||
url: "#test-link"
|
url: "#test-link"
|
||||||
btn_label: "Read More"
|
btn_label: "Read More"
|
||||||
btn_class: "btn--inverse btn--large"
|
btn_class: "btn--inverse"
|
||||||
feature_row4:
|
feature_row4:
|
||||||
- image_path: unsplash-gallery-image-2-th.jpg
|
- image_path: unsplash-gallery-image-2-th.jpg
|
||||||
alt: "placeholder image 2"
|
alt: "placeholder image 2"
|
||||||
|
@ -50,15 +50,15 @@ feature_row4:
|
||||||
excerpt: 'This is some sample content that goes here with **Markdown** formatting. Centered with `type="center"`'
|
excerpt: 'This is some sample content that goes here with **Markdown** formatting. Centered with `type="center"`'
|
||||||
url: "#test-link"
|
url: "#test-link"
|
||||||
btn_label: "Read More"
|
btn_label: "Read More"
|
||||||
btn_class: "btn--inverse btn--large"
|
btn_class: "btn--inverse"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include feature-row id="intro" type="center" %}
|
{% include feature_row id="intro" type="center" %}
|
||||||
|
|
||||||
{% include feature-row %}
|
{% include feature_row %}
|
||||||
|
|
||||||
{% include feature-row id="feature_row2" type="left" %}
|
{% include feature_row id="feature_row2" type="left" %}
|
||||||
|
|
||||||
{% include feature-row id="feature_row3" type="right" %}
|
{% include feature_row id="feature_row3" type="right" %}
|
||||||
|
|
||||||
{% include feature-row id="feature_row4" type="center" %}
|
{% include feature_row id="feature_row4" type="center" %}
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Foo Bar Identify"
|
title: "Foo Bar Identity"
|
||||||
excerpt: "Foo Bar design system including logo mark, website design, and branding applications."
|
excerpt: "Foo Bar design system including logo mark, website design, and branding applications."
|
||||||
header:
|
header:
|
||||||
image: foo-bar-identity.jpg
|
image: foo-bar-identity.jpg
|
||||||
|
|
|
@ -11,14 +11,29 @@ A notice displays information that explains nearby content. Often used to call a
|
||||||
|
|
||||||
When using Kramdown `{: .notice}` can be added after a sentence to assign the `.notice` to the `<p></p>` element.
|
When using Kramdown `{: .notice}` can be added after a sentence to assign the `.notice` to the `<p></p>` element.
|
||||||
|
|
||||||
**Changes in Service:** We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.
|
**Changes in Service:** We just updated our [privacy policy](#) here to better service our customers. We recommend reviewing the changes.
|
||||||
{: .notice}
|
{: .notice}
|
||||||
|
|
||||||
|
**Primary Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. [Praesent libero](#). Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
|
||||||
|
{: .notice--primary}
|
||||||
|
|
||||||
|
**Info Notice:** Lorem ipsum dolor sit amet, [consectetur adipiscing elit](#). Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
|
||||||
|
{: .notice--info}
|
||||||
|
|
||||||
|
**Warning Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. [Integer nec odio](#). Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
|
||||||
|
{: .notice--warning}
|
||||||
|
|
||||||
|
**Danger Notice:** Lorem ipsum dolor sit amet, [consectetur adipiscing](#) elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
|
||||||
|
{: .notice--danger}
|
||||||
|
|
||||||
|
**Success Notice:** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at [nibh elementum](#) imperdiet.
|
||||||
|
{: .notice--success}
|
||||||
|
|
||||||
Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with `markdownify` is a good way to go.
|
Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with `markdownify` is a good way to go.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
{% raw %}{% capture notice-2 %}
|
{% raw %}{% capture notice-2 %}
|
||||||
### New Site Features
|
#### New Site Features
|
||||||
|
|
||||||
* You can now have cover images on blog pages
|
* You can now have cover images on blog pages
|
||||||
* Drafts will now auto-save while writing
|
* Drafts will now auto-save while writing
|
||||||
|
@ -28,7 +43,7 @@ Want to wrap several paragraphs or other elements in a notice? Using Liquid to c
|
||||||
```
|
```
|
||||||
|
|
||||||
{% capture notice-2 %}
|
{% capture notice-2 %}
|
||||||
### New Site Features
|
#### New Site Features
|
||||||
|
|
||||||
* You can now have cover images on blog pages
|
* You can now have cover images on blog pages
|
||||||
* Drafts will now auto-save while writing
|
* Drafts will now auto-save while writing
|
||||||
|
@ -42,12 +57,12 @@ Or you could skip the capture and stick with straight HTML.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="notice">
|
<div class="notice">
|
||||||
<h3>Message</h3>
|
<h4>Message</h4>
|
||||||
<p>A basic message.</p>
|
<p>A basic message.</p>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
<div class="notice">
|
<div class="notice">
|
||||||
<h3>Message</h3>
|
<h4>Message</h4>
|
||||||
<p>A basic message.</p>
|
<p>A basic message.</p>
|
||||||
</div>
|
</div>
|
|
@ -9,6 +9,20 @@ tags:
|
||||||
|
|
||||||
The preferred way of using images is placing them in the `/images/` directory and referencing them with an absolute path. Prepending the filename with `{% raw %}{{ site.url }}{{ site.baseurl }}/images/{% endraw %}` will make sure your images display properly in feeds and such.
|
The preferred way of using images is placing them in the `/images/` directory and referencing them with an absolute path. Prepending the filename with `{% raw %}{{ site.url }}{{ site.baseurl }}/images/{% endraw %}` will make sure your images display properly in feeds and such.
|
||||||
|
|
||||||
|
Standard image with no width modifier classes applied.
|
||||||
|
|
||||||
|
**HTML:**
|
||||||
|
|
||||||
|
```html
|
||||||
|
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/images/filename.jpg" alt="">{% endraw %}
|
||||||
|
```
|
||||||
|
|
||||||
|
**or Kramdown:**
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg){% endraw %}
|
||||||
|
```
|
||||||
|
|
||||||
![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-9.jpg)
|
![Unsplash image 9]({{ site.url }}{{ site.baseurl }}/images/unsplash-image-9.jpg)
|
||||||
|
|
||||||
Image that fills page content container by adding the `.full` class with:
|
Image that fills page content container by adding the `.full` class with:
|
||||||
|
@ -16,13 +30,13 @@ Image that fills page content container by adding the `.full` class with:
|
||||||
**HTML:**
|
**HTML:**
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<img src="/images/filename.jpg" alt="" class="full">
|
{% raw %}<img src="{{ site.url }}{{ site.baseurl }}/images/filename.jpg" alt="" class="full">{% endraw %}
|
||||||
```
|
```
|
||||||
|
|
||||||
**or Kramdown:**
|
**or Kramdown:**
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
{% raw %}![alt](/images/filename.jpg)
|
{% raw %}![alt]({{ site.url }}{{ site.baseurl }}/images/filename.jpg)
|
||||||
{: .full}{% endraw %}
|
{: .full}{% endraw %}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
@ -5,14 +5,15 @@ categories:
|
||||||
tags:
|
tags:
|
||||||
- image
|
- image
|
||||||
- Post Formats
|
- Post Formats
|
||||||
- shortcode
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
{% capture fig_img %}
|
{% capture fig_img %}
|
||||||
![Foo](http://wpthemetestdata.files.wordpress.com/2008/06/100_5478.jpg?w=604)
|
![Foo]({{ base_path }}/images/unsplash-gallery-image-3.jpg)
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
{{ fig_img | markdownify | remove: "<p>" | remove: "</p>" }}
|
{{ fig_img | markdownify | remove: "<p>" | remove: "</p>" }}
|
||||||
<figcaption>Bell on wharf in San Francisco</figcaption>
|
<figcaption>Photo from Unsplash.</figcaption>
|
||||||
</figure>
|
</figure>
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: Comments Disabled"
|
title: "Layout: Comments Disabled"
|
||||||
comments: false
|
comments: false
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- comments
|
- comments
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post has its comments disabled.
|
This post has its comments disabled.
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: Comments Enabled"
|
title: "Layout: Comments Enabled"
|
||||||
comments: true
|
comments: true
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- comments
|
- comments
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post should display comments.
|
This post should display comments.
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Template: Read Time Disabled"
|
title: "Layout: Read Time Disabled"
|
||||||
read_time: false
|
read_time: false
|
||||||
tags:
|
tags:
|
||||||
- read time
|
- read time
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Template: Read Time Enabled"
|
title: "Layout: Read Time Enabled"
|
||||||
read_time: true
|
read_time: true
|
||||||
tags:
|
tags:
|
||||||
- read time
|
- read time
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: Related Posts Disabled"
|
title: "Layout: Related Posts Disabled"
|
||||||
related: false
|
related: false
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- related posts
|
- related posts
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post has related posts disabled.
|
This post has related posts disabled.
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: Related Posts Enabled"
|
title: "Layout: Related Posts Enabled"
|
||||||
related: true
|
related: true
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- related posts
|
- related posts
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post has related posts enabled.
|
This post has related posts enabled.
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: Social Sharing Links Disabled"
|
title: "Layout: Social Sharing Links Disabled"
|
||||||
share: false
|
share: false
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- social
|
- social
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post has social sharing disabled.
|
This post has social sharing disabled.
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: Social Sharing Links Enabled"
|
title: "Layout: Social Sharing Links Enabled"
|
||||||
share: true
|
share: true
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- social
|
- social
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post should display social sharing links.
|
This post should display social sharing links.
|
|
@ -1,16 +1,17 @@
|
||||||
---
|
---
|
||||||
title: "Template: Reading Time, Comments, Social Sharing Links, and Related Posts Disabled"
|
title: "Layout: Reading Time, Comments, Social Sharing Links, and Related Posts Disabled"
|
||||||
|
read_time: false
|
||||||
comments: false
|
comments: false
|
||||||
share: false
|
share: false
|
||||||
related: false
|
related: false
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- related posts
|
- related posts
|
||||||
- social
|
- social
|
||||||
- comments
|
- comments
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post has reading time, comments, social sharing links, and related posts disabled.
|
This post has reading time, comments, social sharing links, and related posts disabled.
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Template: Post with Table Of Contents"
|
title: "Layout: Post with Table Of Contents"
|
||||||
header:
|
header:
|
||||||
image: unsplash-image-9.jpg
|
image: unsplash-image-9.jpg
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||||
|
@ -19,17 +19,12 @@ Testing Kramdown auto-generated table of contents with unique title and icon ass
|
||||||
|
|
||||||
Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.
|
Below is just about everything you'll need to style in the theme. Check the source code to see the many embedded elements within paragraphs.
|
||||||
|
|
||||||
# Heading 1
|
<h1>Heading 1</h1>
|
||||||
|
<h2>Heading 2</h2>
|
||||||
## Heading 2
|
<h3>Heading 3</h3>
|
||||||
|
<h4>Heading 4</h4>
|
||||||
### Heading 3
|
<h5>Heading 5</h5>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
#### Heading 4
|
|
||||||
|
|
||||||
##### Heading 5
|
|
||||||
|
|
||||||
###### Heading 6
|
|
||||||
|
|
||||||
## Body text
|
## Body text
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: Code Excerpt (Generated)"
|
title: "Layout: Code Excerpt (Generated)"
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- content
|
- content
|
||||||
- excerpt
|
- excerpt
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This is the post content with inline code, (e.g. `<span style="color: red;">red</span>`. It should be displayed in place of the auto-generated excerpt in single-page views. Archive-index pages should display an auto-generated excerpt of this content.
|
This is the post content with inline code, (e.g. `<span style="color: red;">red</span>`. It should be displayed in place of the auto-generated excerpt in single-page views. Archive-index pages should display an auto-generated excerpt of this content.
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
title: "Template: Excerpt (Defined)"
|
title: "Layout: Excerpt (Defined)"
|
||||||
excerpt: "This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages."
|
excerpt: "This is a user-defined post excerpt. It should be displayed in place of the post content in archive-index pages."
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- content
|
- content
|
||||||
- excerpt
|
- excerpt
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This is the post content. It should be displayed in place of the user-defined excerpt in archive-index pages.
|
This is the post content. It should be displayed in place of the user-defined excerpt in archive-index pages.
|
|
@ -1,13 +1,13 @@
|
||||||
---
|
---
|
||||||
title: "Template: Excerpt (Generated)"
|
title: "Layout: Excerpt (Generated)"
|
||||||
excerpt_separator: "<!--more-->"
|
excerpt_separator: "<!--more-->"
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- content
|
- content
|
||||||
- excerpt
|
- excerpt
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This is the post content. Archive-index pages should display an auto-generated excerpt of this content.
|
This is the post content. Archive-index pages should display an auto-generated excerpt of this content.
|
38
_posts/2012-03-15-layout-author-override.md
Normal file
38
_posts/2012-03-15-layout-author-override.md
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
---
|
||||||
|
title: "Layout: Author Override"
|
||||||
|
author: Billy Rick
|
||||||
|
excerpt: "A post to test author overrides using a data file."
|
||||||
|
---
|
||||||
|
|
||||||
|
Sites that may have content authored from various individuals can be accommodated by using [data files](https://jekyllrb.com/docs/datafiles/).
|
||||||
|
|
||||||
|
To attribute 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. Anything variables found under `author` in `_config.yml` can be used (e.g. `name`, `avatar`, `uri`, social media profiles, etc.).
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# /_data/authors.yml
|
||||||
|
|
||||||
|
Billy Rick:
|
||||||
|
name: "Billy Rick"
|
||||||
|
uri: "http://thewhip.com"
|
||||||
|
email: "billy@rick.com"
|
||||||
|
bio: "What do you want, jewels? I am a very extravagant man."
|
||||||
|
avatar: "bio-photo-2.jpg"
|
||||||
|
twitter: "extravagantman"
|
||||||
|
|
||||||
|
Cornelius Fiddlebone:
|
||||||
|
name: "Cornelius Fiddlebone"
|
||||||
|
email: "cornelius@thewhip.com"
|
||||||
|
bio: "I ordered what?"
|
||||||
|
avatar: "bio-photo.jpg"
|
||||||
|
twitter: "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,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Template: Author Sidebar Disabled"
|
title: "Layout: Author Sidebar Disabled"
|
||||||
excerpt: "A post to test disabling author sidebar."
|
excerpt: "A post to test disabling author sidebar."
|
||||||
author_profile: false
|
author_profile: false
|
||||||
---
|
---
|
|
@ -1,15 +1,15 @@
|
||||||
---
|
---
|
||||||
title: "Template: Header Image (External URL)"
|
title: "Layout: Header Image (External URL)"
|
||||||
header:
|
header:
|
||||||
image: https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg
|
image: https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- edge case
|
- edge case
|
||||||
- featured image
|
- featured image
|
||||||
- image
|
- image
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post should display a **header image**, if the theme supports it.
|
This post should display a **header image**, if the theme supports it.
|
|
@ -1,16 +1,16 @@
|
||||||
---
|
---
|
||||||
title: "Template: Header Image (Horizontal)"
|
title: "Layout: Header Image (Horizontal)"
|
||||||
header:
|
header:
|
||||||
image: unsplash-image-1.jpg
|
image: unsplash-image-1.jpg
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- edge case
|
- edge case
|
||||||
- featured image
|
- featured image
|
||||||
- image
|
- image
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post should display a **header image**, if the theme supports it.
|
This post should display a **header image**, if the theme supports it.
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Template: Header Image and Text Readability"
|
title: "Layout: Header Image and Text Readability"
|
||||||
header:
|
header:
|
||||||
image: unsplash-image-4.jpg
|
image: unsplash-image-4.jpg
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
|
@ -1,17 +1,16 @@
|
||||||
---
|
---
|
||||||
title: "Template: Header Image (Vertical)"
|
title: "Layout: Header Image (Vertical)"
|
||||||
header:
|
header:
|
||||||
image: unsplash-image-6.jpg
|
image: unsplash-image-6.jpg
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- Codex
|
|
||||||
- edge case
|
- edge case
|
||||||
- featured image
|
- featured image
|
||||||
- image
|
- image
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post should display a **header image**, if the theme supports it.
|
This post should display a **header image**, if the theme supports it.
|
|
@ -1,14 +1,14 @@
|
||||||
---
|
---
|
||||||
title: "Template: Header Overlay with Background Fill"
|
title: "Layout: Header Overlay with Background Fill"
|
||||||
header:
|
header:
|
||||||
overlay_color: "#333"
|
overlay_color: "#333"
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- edge case
|
- edge case
|
||||||
- image
|
- image
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post should display a **header with a solid background color**, if the theme supports it.
|
This post should display a **header with a solid background color**, if the theme supports it.
|
|
@ -1,16 +1,16 @@
|
||||||
---
|
---
|
||||||
title: "Template: Header Image Overlay"
|
title: "Layout: Header Image Overlay"
|
||||||
header:
|
header:
|
||||||
overlay_image: unsplash-image-1.jpg
|
overlay_image: unsplash-image-1.jpg
|
||||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||||
cta_url: "https://unsplash.com"
|
cta_url: "https://unsplash.com"
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- edge case
|
- edge case
|
||||||
- image
|
- image
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This post should display a **header with an overlay image**, if the theme supports it.
|
This post should display a **header with an overlay image**, if the theme supports it.
|
|
@ -1,12 +1,12 @@
|
||||||
---
|
---
|
||||||
title: "Template: More Tag"
|
title: "Layout: More Tag"
|
||||||
categories:
|
categories:
|
||||||
- Template
|
- Layout
|
||||||
- Uncategorized
|
- Uncategorized
|
||||||
tags:
|
tags:
|
||||||
- content
|
- content
|
||||||
- read more
|
- read more
|
||||||
- template
|
- layout
|
||||||
---
|
---
|
||||||
|
|
||||||
This content is before the [excerpt separator tag](http://jekyllrb.com/docs/posts/#post-excerpts).
|
This content is before the [excerpt separator tag](http://jekyllrb.com/docs/posts/#post-excerpts).
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Template: Sidebar Custom"
|
title: "Layout: Sidebar Custom"
|
||||||
excerpt: "A post to custom sidebar content."
|
excerpt: "A post to custom sidebar content."
|
||||||
author_profile: false
|
author_profile: false
|
||||||
sidebar:
|
sidebar:
|
|
@ -1,36 +0,0 @@
|
||||||
---
|
|
||||||
title: "Template: Author Override"
|
|
||||||
author: Billy Rick
|
|
||||||
excerpt: "A post to test author overrides using a data file."
|
|
||||||
---
|
|
||||||
|
|
||||||
For those of you who may have content written by multiple authors on your site you can now assign different authors to each post if desired.
|
|
||||||
|
|
||||||
Previously the theme used a global author for the entire site and those attributes would be used in all bylines, social networking links, Twitter Card attribution, and Google Authorship. These `owner` variables were defined in `config.yml`
|
|
||||||
|
|
||||||
Start by modifying or creating a new `authors.yml` file in the `_data` folder and add your authors using the following format.
|
|
||||||
|
|
||||||
{% highlight yaml %}
|
|
||||||
# /_data/authors.yml
|
|
||||||
|
|
||||||
Billy Rick:
|
|
||||||
name: Billy Rick
|
|
||||||
uri: http://thewhip.com
|
|
||||||
email: billy@rick.com
|
|
||||||
bio: "What do you want, jewels? I am a very extravagant man."
|
|
||||||
avatar: bio-photo-2.jpg
|
|
||||||
twitter: extravagantman
|
|
||||||
|
|
||||||
Cornelius Fiddlebone:
|
|
||||||
name: Cornelius Fiddlebone
|
|
||||||
email: cornelius@thewhip.com
|
|
||||||
bio: "I ordered what?"
|
|
||||||
avatar: bio-photo.jpg
|
|
||||||
twitter: rhymeswithsackit
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
To assign Billy Rick as an author for our post. You'd add the following YAML front matter to a post:
|
|
||||||
|
|
||||||
{% highlight yaml %}
|
|
||||||
author: Billy Rick
|
|
||||||
{% endhighlight %}
|
|
|
@ -13,21 +13,21 @@ tags:
|
||||||
|
|
||||||
Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let's get started.
|
Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let's get started.
|
||||||
|
|
||||||
![image-center](http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg){: .align-center}
|
![image-center]({{ site.url }}{{ site.baseurl }}/images/image-alignment-580x300.jpg){: .align-center}
|
||||||
|
|
||||||
The image above happens to be **centered**.
|
The image above happens to be **centered**.
|
||||||
|
|
||||||
![image-left](http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg){: .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**.
|
![image-left]({{ site.url }}{{ site.baseurl }}/images/image-alignment-150x150.jpg){: .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**.
|
||||||
|
|
||||||
As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished!
|
As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we'll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it's thing. Mission accomplished!
|
||||||
|
|
||||||
And now for a **massively large image**. It also has **no alignment**.
|
And now for a **massively large image**. It also has **no alignment**.
|
||||||
|
|
||||||
![no-alignment](http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg)
|
![no-alignment]({{ site.url }}{{ site.baseurl }}/images/image-alignment-1200x4002.jpg)
|
||||||
|
|
||||||
The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.
|
The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.
|
||||||
|
|
||||||
![image-right](http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg){: .align-right}
|
![image-right]({{ site.url }}{{ site.baseurl }}/images/image-alignment-300x200.jpg){: .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.
|
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.
|
||||||
|
|
||||||
|
@ -36,14 +36,14 @@ In just a bit here, you should see the text start to wrap below the right aligne
|
||||||
And just when you thought we were done, we're going to do them all over again with captions!
|
And just when you thought we were done, we're going to do them all over again with captions!
|
||||||
|
|
||||||
<figure class="align-center">
|
<figure class="align-center">
|
||||||
<img src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-580x300.jpg" alt="">
|
<img src="{{ site.url }}{{ site.baseurl }}/images/image-alignment-580x300.jpg" alt="">
|
||||||
<figcaption>Look at 580 x 300 getting some love.</figcaption>
|
<figcaption>Look at 580 x 300 getting some love.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
The figure above happens to be **centered**. The caption also has a link in it, just to see if it does anything funky.
|
The figure above happens to be **centered**. The caption also has a link in it, just to see if it does anything funky.
|
||||||
|
|
||||||
<figure style="width: 150px" class="align-left">
|
<figure style="width: 150px" class="align-left">
|
||||||
<img src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-150x150.jpg" alt="">
|
<img src="{{ site.url }}{{ site.baseurl }}/images/image-alignment-150x150.jpg" alt="">
|
||||||
<figcaption>Itty-bitty caption.</figcaption>
|
<figcaption>Itty-bitty caption.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
@ -54,14 +54,14 @@ As you can see the should be some space above, below, and to the right of the im
|
||||||
And now for a **massively large image**. It also has **no alignment**.
|
And now for a **massively large image**. It also has **no alignment**.
|
||||||
|
|
||||||
<figure style="width: 1200px">
|
<figure style="width: 1200px">
|
||||||
<img src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-1200x4002.jpg" alt="">
|
<img src="{{ site.url }}{{ site.baseurl }}/images/image-alignment-1200x4002.jpg" alt="">
|
||||||
<figcaption>Massive image comment for your eyeballs.</figcaption>
|
<figcaption>Massive image comment for your eyeballs.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.
|
The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.
|
||||||
|
|
||||||
<figure style="width: 300px" class="align-right">
|
<figure style="width: 300px" class="align-right">
|
||||||
<img src="http://wpthemetestdata.files.wordpress.com/2013/03/image-alignment-300x200.jpg" alt="">
|
<img src="{{ site.url }}{{ site.baseurl }}/images/image-alignment-300x200.jpg" alt="">
|
||||||
<figcaption>Feels good to be right all the time.</figcaption>
|
<figcaption>Feels good to be right all the time.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
---
|
---
|
||||||
title: "Markup: HTML Tags and Formatting"
|
title: "Markup: HTML Tags and Formatting"
|
||||||
|
header:
|
||||||
|
teaser: "markup-syntax-highlighting-teaser.jpg"
|
||||||
categories:
|
categories:
|
||||||
- Markup
|
- Markup
|
||||||
tags:
|
tags:
|
||||||
|
@ -10,7 +12,7 @@ tags:
|
||||||
- markup
|
- markup
|
||||||
---
|
---
|
||||||
|
|
||||||
## Headings
|
A variety of common markup showing how the theme styles them.
|
||||||
|
|
||||||
# Header one
|
# Header one
|
||||||
|
|
||||||
|
@ -35,6 +37,7 @@ Multi line blockquote with a cite reference:
|
||||||
> People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.
|
> People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.
|
||||||
|
|
||||||
<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
|
<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
|
||||||
|
{: .small}
|
||||||
|
|
||||||
## Tables
|
## Tables
|
||||||
|
|
||||||
|
@ -112,6 +115,8 @@ Make any link standout more when applying the `.btn` class.
|
||||||
[Warning Button](#){: .btn .btn--warning}
|
[Warning Button](#){: .btn .btn--warning}
|
||||||
[Danger Button](#){: .btn .btn--danger}
|
[Danger Button](#){: .btn .btn--danger}
|
||||||
[Info Button](#){: .btn .btn--info}
|
[Info Button](#){: .btn .btn--info}
|
||||||
|
[Inverse Button](#){: .btn .btn--inverse}
|
||||||
|
[Light Outline Button](#){: .btn .btn--light-outline}
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
[Primary Button Text](#link){: .btn}
|
[Primary Button Text](#link){: .btn}
|
||||||
|
@ -119,20 +124,20 @@ Make any link standout more when applying the `.btn` class.
|
||||||
[Warning Button Text](#link){: .btn .btn--warning}
|
[Warning Button Text](#link){: .btn .btn--warning}
|
||||||
[Danger Button Text](#link){: .btn .btn--danger}
|
[Danger Button Text](#link){: .btn .btn--danger}
|
||||||
[Info Button Text](#link){: .btn .btn--info}
|
[Info Button Text](#link){: .btn .btn--info}
|
||||||
|
[Inverse Button](#link){: .btn .btn--inverse}
|
||||||
|
[Light Outline Button](#link){: .btn .btn--light-outline}
|
||||||
```
|
```
|
||||||
|
|
||||||
[X-Large Button](#){: .btn .btn--x-large}
|
[X-Large Button](#){: .btn .btn--x-large}
|
||||||
[Large Button](#){: .btn .btn--large}
|
[Large Button](#){: .btn .btn--large}
|
||||||
[Default Button](#){: .btn}
|
[Default Button](#){: .btn}
|
||||||
[Small Button](#){: .btn .btn--small}
|
[Small Button](#){: .btn .btn--small}
|
||||||
[X-Small Button](#){: .btn .btn--x-small}
|
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
[X-Large Button](#){: .btn .btn--x-large}
|
[X-Large Button](#link){: .btn .btn--x-large}
|
||||||
[Large Button](#){: .btn .btn--large}
|
[Large Button](#link){: .btn .btn--large}
|
||||||
[Default Button](#){: .btn}
|
[Default Button](#link){: .btn}
|
||||||
[Small Button](#){: .btn .btn--small}
|
[Small Button](#link){: .btn .btn--small}
|
||||||
[X-Small Button](#){: .btn .btn--x-small}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Notices
|
## Notices
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Markup: Another Post with Images"
|
title: "Markup: Another Post with Images"
|
||||||
excerpt: "Examples and code for displaying images in posts."
|
excerpt: "Examples and code for displaying images in posts."
|
||||||
|
header:
|
||||||
|
teaser: "http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg"
|
||||||
tags:
|
tags:
|
||||||
- sample post
|
- sample post
|
||||||
- images
|
- images
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Markup: Syntax Highlighting"
|
title: "Markup: Syntax Highlighting"
|
||||||
excerpt: "Post displaying the various ways of highlighting code in Markdown."
|
excerpt: "Post displaying the various ways of highlighting code in Markdown."
|
||||||
|
header:
|
||||||
|
teaser: "markup-syntax-highlighting-teaser.jpg"
|
||||||
tags:
|
tags:
|
||||||
- code
|
- code
|
||||||
- syntax highlighting
|
- syntax highlighting
|
||||||
|
|
12
assets/_scss/_animations.scss
Normal file
12
assets/_scss/_animations.scss
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
ANIMATIONS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@keyframes intro {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
|
@ -18,26 +18,32 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive__subtitle {
|
.archive__subtitle {
|
||||||
margin: 2em 0 0;
|
margin: 1.414em 0 0;
|
||||||
padding-bottom: 0.5em;
|
padding-bottom: 0.5em;
|
||||||
font-size: 14px;
|
font-size: $type-size-5;
|
||||||
color: mix(#fff, $gray, 25%);
|
color: mix(#fff, $gray, 25%);
|
||||||
border-bottom: 1px solid $border-color;
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
+ .list__item .archive__item-title {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive__item-title {
|
.archive__item-title {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 0.25em;
|
||||||
font-family: $sans-serif-narrow;
|
font-family: $sans-serif-narrow;
|
||||||
font-size: 20px;
|
font-size: $type-size-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive__item-excerpt {
|
.archive__item-excerpt {
|
||||||
font-size: 14px;
|
margin-top: 0;
|
||||||
|
font-size: $type-size-6;
|
||||||
|
|
||||||
& + p {
|
& + p {
|
||||||
text-indent: 0;
|
text-indent: 0;
|
||||||
|
@ -97,6 +103,11 @@ a:hover {
|
||||||
margin: 0 0 4px;
|
margin: 0 0 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.archive__item-title {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
font-size: $type-size-5;
|
||||||
|
}
|
||||||
|
|
||||||
.archive__item-excerpt {
|
.archive__item-excerpt {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -119,6 +130,7 @@ a:hover {
|
||||||
|
|
||||||
.archive__item-excerpt {
|
.archive__item-excerpt {
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: $type-size-6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -136,8 +148,10 @@ a:hover {
|
||||||
|
|
||||||
.feature__item {
|
.feature__item {
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
|
margin-bottom: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@include gallery(4 of 12);
|
@include gallery(4 of 12);
|
||||||
|
|
||||||
|
@ -147,23 +161,19 @@ a:hover {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive__item-title {
|
.archive__item-body {
|
||||||
margin-bottom: 0.5em;
|
padding-left: 0.5em;
|
||||||
font-size: 30px;
|
padding-right: 0.5em;
|
||||||
}
|
|
||||||
|
|
||||||
.archive__item-excerpt {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--left {
|
&--left {
|
||||||
@include full();
|
@include full();
|
||||||
margin-bottom: 2em;
|
// margin-bottom: 2em;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
|
||||||
|
.archive__item-teaser {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
.archive__item-teaser {
|
.archive__item-teaser {
|
||||||
|
@ -176,25 +186,17 @@ a:hover {
|
||||||
@include suffix(1 of 12);
|
@include suffix(1 of 12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive__item-title {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive__item-excerpt {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--right {
|
&--right {
|
||||||
@include full();
|
@include full();
|
||||||
margin-bottom: 2em;
|
// margin-bottom: 2em;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
|
||||||
|
.archive__item-teaser {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
|
@ -208,25 +210,17 @@ a:hover {
|
||||||
@include suffix(1 of 12);
|
@include suffix(1 of 12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive__item-title {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive__item-excerpt {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--center {
|
&--center {
|
||||||
@include full();
|
@include full();
|
||||||
margin-bottom: 2em;
|
// margin-bottom: 2em;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
|
||||||
|
.archive__item-teaser {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
@ -240,19 +234,5 @@ a:hover {
|
||||||
width: span(7 of 12);
|
width: span(7 of 12);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive__item-title {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive__item-excerpt {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-size: 18px;
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,9 +6,8 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
font-family: $serif;
|
font-family: $global-font-family;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
background-color: $body-color;
|
|
||||||
|
|
||||||
&.overflow--hidden {
|
&.overflow--hidden {
|
||||||
/* when primary navigation is visible, the content in the background won't scroll */
|
/* when primary navigation is visible, the content in the background won't scroll */
|
||||||
|
@ -17,36 +16,43 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
line-height: 1.25;
|
margin: 2em 0 0.5em;
|
||||||
font-family: $sans-serif;
|
line-height: 1.2;
|
||||||
|
font-family: $header-font-family;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 32px;
|
margin-top: 0;
|
||||||
|
font-size: $type-size-3;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 28px;
|
font-size: $type-size-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 24px;
|
font-size: $type-size-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 18px;
|
font-size: $type-size-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5 {
|
h5 {
|
||||||
font-size: 16px;
|
font-size: $type-size-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
font-size: 14px;
|
font-size: $type-size-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
small {
|
small, .small {
|
||||||
font-size: 0.8rem;
|
font-size: $type-size-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
u,
|
u,
|
||||||
|
@ -85,16 +91,10 @@ blockquote {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
border-left: 0.25em solid $accent-color;
|
border-left: 0.25em solid $primary-color;
|
||||||
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
cite {
|
cite {
|
||||||
font-family: $sans-serif;
|
font-style: italic;
|
||||||
font-size: 14px;
|
|
||||||
font-style: normal;
|
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
content: "\2014";
|
content: "\2014";
|
||||||
|
@ -114,45 +114,30 @@ a {
|
||||||
&:active {
|
&:active {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
img {
|
|
||||||
box-shadow: 0 0 10px rgba(#000, 0.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* lists */
|
|
||||||
|
|
||||||
ol, ul {
|
|
||||||
@include breakpoint($small) {
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
ol, ul {
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* code */
|
/* code */
|
||||||
|
|
||||||
tt, code, kbd, samp, pre {
|
tt, code, kbd, samp, pre {
|
||||||
font-family: $monospace;
|
font-family: $monospace;
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
overflow-x: auto; // add scrollbars to wide code blocks
|
overflow-x: auto; // add scrollbars to wide code blocks
|
||||||
}
|
}
|
||||||
|
|
||||||
p code,
|
p > code,
|
||||||
li code,
|
a > code,
|
||||||
figcaption code {
|
li > code,
|
||||||
|
figcaption > code,
|
||||||
|
td > code {
|
||||||
padding-top: 0.1rem;
|
padding-top: 0.1rem;
|
||||||
padding-bottom: 0.1rem;
|
padding-bottom: 0.1rem;
|
||||||
|
font-size: $type-size-6;
|
||||||
background: $code-background-color;
|
background: $code-background-color;
|
||||||
border: 1px solid $lighter-gray;
|
border: 1px solid $lighter-gray;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
|
box-shadow: $box-shadow;
|
||||||
|
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
letter-spacing: -0.2em;
|
letter-spacing: -0.2em;
|
||||||
|
@ -169,6 +154,18 @@ hr {
|
||||||
border-top: 1px solid $border-color;
|
border-top: 1px solid $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* lists */
|
||||||
|
|
||||||
|
ul li,
|
||||||
|
ol li {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li ul,
|
||||||
|
li ol {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Media and embeds
|
Media and embeds
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
@ -191,7 +188,7 @@ figure {
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
transition: box-shadow 0.3s;
|
transition: $global-transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
|
@ -228,26 +225,22 @@ figure {
|
||||||
/* Figure captions */
|
/* Figure captions */
|
||||||
|
|
||||||
figcaption {
|
figcaption {
|
||||||
margin-bottom: 0.65rem;
|
margin-bottom: 0.5em;
|
||||||
color: mix(#fff, $text-color, 25%);
|
color: mix(#fff, $text-color, 25%);
|
||||||
font-family: $sans-serif;
|
font-family: $caption-font-family;
|
||||||
font-size: 0.8rem;
|
font-size: $type-size-6;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: 1px solid $light-gray;
|
border-bottom: 1px solid $light-gray;
|
||||||
transition: border 0.4s ease-in-out;
|
transition: $global-transition;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #000;
|
color: #000;
|
||||||
border-bottom-color: #000;
|
border-bottom-color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
|
||||||
font-size: 0.64rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -288,6 +281,17 @@ nav {
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* override white-space for nested lists */
|
||||||
|
ul li,
|
||||||
|
ol li {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li ul,
|
||||||
|
li ol {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -295,5 +299,5 @@ nav {
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
|
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
|
||||||
transition: all 0.2s ease-in-out;
|
transition: $global-transition;
|
||||||
}
|
}
|
|
@ -13,9 +13,8 @@
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
font-family: $sans-serif;
|
font-family: $sans-serif;
|
||||||
font-size: 14px;
|
font-size: $type-size-6;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 1.5;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: $primary-color;
|
background-color: $primary-color;
|
||||||
|
@ -122,7 +121,8 @@
|
||||||
$social:
|
$social:
|
||||||
(facebook, $facebook-color),
|
(facebook, $facebook-color),
|
||||||
(twitter, $twitter-color),
|
(twitter, $twitter-color),
|
||||||
(google-plus, $google-plus-color);
|
(google-plus, $google-plus-color),
|
||||||
|
(linkedin, $linkedin-color);
|
||||||
|
|
||||||
@each $socialnetwork, $color in $social {
|
@each $socialnetwork, $color in $social {
|
||||||
&--#{$socialnetwork} {
|
&--#{$socialnetwork} {
|
||||||
|
@ -137,24 +137,18 @@
|
||||||
/* extra large button */
|
/* extra large button */
|
||||||
|
|
||||||
&--x-large {
|
&--x-large {
|
||||||
font-size: 24px;
|
font-size: $type-size-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* large button */
|
/* large button */
|
||||||
|
|
||||||
&--large {
|
&--large {
|
||||||
font-size: 18px;
|
font-size: $type-size-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* small button */
|
/* small button */
|
||||||
|
|
||||||
&--small {
|
&--small {
|
||||||
font-size: 12px;
|
font-size: $type-size-7;
|
||||||
}
|
|
||||||
|
|
||||||
/* extra small button */
|
|
||||||
&--x-small {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -7,6 +7,9 @@
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
margin-top: 3em;
|
margin-top: 3em;
|
||||||
padding: 0 2em 3em;
|
padding: 0 2em 3em;
|
||||||
|
color: mix(#fff, $gray, 25%);
|
||||||
|
animation: intro 0.3s both;
|
||||||
|
animation-delay: 0.45s;
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
@ -18,6 +21,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -27,6 +31,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__footer-copyright {
|
.page__footer-copyright {
|
||||||
|
font-family: $global-font-family;
|
||||||
|
font-size: $type-size-7;
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
@include prefix(2 of 12);
|
@include prefix(2 of 12);
|
||||||
}
|
}
|
||||||
|
@ -34,8 +41,6 @@
|
||||||
@include breakpoint($x-large) {
|
@include breakpoint($x-large) {
|
||||||
@include prefix(2.5 of 12);
|
@include prefix(2.5 of 12);
|
||||||
}
|
}
|
||||||
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__footer-follow {
|
.page__footer-follow {
|
||||||
|
@ -58,7 +63,7 @@
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
font-family: $sans-serif-narrow;
|
font-family: $sans-serif-narrow;
|
||||||
font-size: 14px;
|
font-size: $type-size-6;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -51,7 +51,7 @@ input,
|
||||||
button,
|
button,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
font-family: $serif;
|
font-family: $sans-serif;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -81,7 +81,7 @@ select {
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: mix(#fff, $accent-color, 50%);
|
border-color: mix(#fff, $primary-color, 50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -212,7 +212,7 @@ textarea[readonly] {
|
||||||
|
|
||||||
input:focus,
|
input:focus,
|
||||||
textarea:focus {
|
textarea:focus {
|
||||||
border-color: $accent-color;
|
border-color: $primary-color;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
outline: thin dotted \9;
|
outline: thin dotted \9;
|
||||||
}
|
}
|
||||||
|
@ -336,7 +336,7 @@ select:focus {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding: 8px 20px;
|
padding: 8px 20px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 14px;
|
font-size: $type-size-6;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
border-width: 2px !important;
|
border-width: 2px !important;
|
||||||
|
|
|
@ -3,42 +3,37 @@
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.masthead {
|
.masthead {
|
||||||
@include container;
|
position: relative;
|
||||||
@include clearfix;
|
border-bottom: 1px solid $border-color;
|
||||||
padding: 2em 2em 1em;
|
animation: intro 0.3s both;
|
||||||
font-family: $sans-serif-narrow;
|
animation-delay: 0.15s;
|
||||||
font-weight: 700;
|
z-index: 20;
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
@include breakpoint($large) {
|
&__inner-wrap {
|
||||||
padding-left: 1em;
|
@include container;
|
||||||
padding-right: 1em;
|
@include clearfix;
|
||||||
|
padding: 1em 2em 1em;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
max-width: $x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint($x-large) {
|
|
||||||
max-width: $x-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Site name */
|
|
||||||
.site-name {
|
|
||||||
@include breakpoint($large) {
|
|
||||||
@include prefix(2 of 12);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint($x-large) {
|
|
||||||
@include prefix(2.5 of 12);
|
|
||||||
}
|
|
||||||
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.masthead__menu {
|
.masthead__menu {
|
||||||
|
@ -61,6 +56,10 @@
|
||||||
.masthead__menu-item {
|
.masthead__menu-item {
|
||||||
display: block;
|
display: block;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
font-size: 16px;
|
font-size: $type-size-6;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&--lg {
|
||||||
|
font-size: $type-size-5;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -14,6 +14,8 @@
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
font-family: $sans-serif;
|
font-family: $sans-serif;
|
||||||
|
animation: intro 0.3s both;
|
||||||
|
animation-delay: 0.30s;
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
@ -27,7 +29,7 @@
|
||||||
ol {
|
ol {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
font-size: 14px;
|
font-size: $type-size-6;
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
@include span(10 of 12 last);
|
@include span(10 of 12 last);
|
||||||
|
@ -53,29 +55,116 @@
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
padding-top: 0.5em;
|
@include full();
|
||||||
border-top: 1px solid $border-color;
|
@include clearfix();
|
||||||
|
margin-top: 1em;
|
||||||
|
padding-top: 1em;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
font-family: $sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-left: -1px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: mix(#fff, $gray, 25%);
|
||||||
|
border: 1px solid $light-gray;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $link-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
color: #fff;
|
||||||
|
background: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: $light-gray;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
border-top-left-radius: $border-radius;
|
||||||
|
border-bottom-left-radius: $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
a {
|
||||||
|
border-top-right-radius: $border-radius;
|
||||||
|
border-bottom-right-radius: $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li + li:before {
|
/* next/previous buttons */
|
||||||
content: "";
|
&--pager {
|
||||||
padding-right: 10px;
|
display: block;
|
||||||
}
|
padding: 1em 2em;
|
||||||
|
float: left;
|
||||||
.current {
|
width: 50%;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: $type-size-5;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
color: mix(#fff, $gray, 25%);
|
||||||
|
border: 1px solid $light-gray;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $link-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-left: -1px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: $light-gray;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page__content + .pagination,
|
||||||
|
.page__meta + .pagination,
|
||||||
|
.page__share + .pagination,
|
||||||
|
.page__comments + .pagination {
|
||||||
|
margin-top: 2em;
|
||||||
|
padding-top: 2em;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Priority plus navigation
|
Priority plus navigation
|
||||||
|
@ -84,17 +173,17 @@
|
||||||
.greedy-nav {
|
.greedy-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 250px;
|
min-width: 250px;
|
||||||
background: #fff;
|
background: $background-color;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 20px;
|
margin: 0 1rem;
|
||||||
padding: 10px 0;
|
padding: 0.5rem 0;
|
||||||
color: $gray;
|
color: $masthead-link-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #000;
|
color: $masthead-link-color-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -102,19 +191,20 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 0 10px;
|
padding: 0 0.5rem;
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: none;
|
outline: none;
|
||||||
background-color: #000;
|
background-color: $primary-color;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visible-links {
|
.visible-links {
|
||||||
display: inline-table;
|
display: table;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -139,15 +229,12 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: $light-gray;
|
background: mix(#fff, $primary-color, 50%);
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: 0.3s;
|
transition: $global-transition;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #000;
|
|
||||||
border-bottom-color: $border-color;
|
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -169,11 +256,11 @@
|
||||||
a {
|
a {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
font-size: 0.8em;
|
font-size: $type-size-5;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #000;
|
color: $masthead-link-color-hover;
|
||||||
background: $border-color;
|
background: mix(#fff, $primary-color, 75%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -213,3 +300,126 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Navigation list
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.nav__list {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.125em 0;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
margin-left: -0.5em;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
background: $primary-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
font-size: $type-size-5;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__sub-title {
|
||||||
|
display: block;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
font-size: $type-size-6;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Table of contents navigation
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.toc {
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
color: $gray;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
box-shadow: $box-shadow;
|
||||||
|
|
||||||
|
.nav__title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: $type-size-6;
|
||||||
|
background: $primary-color;
|
||||||
|
border-top-left-radius: $border-radius;
|
||||||
|
border-top-right-radius: $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc__menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
list-style: none;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
color: $gray;
|
||||||
|
font-size: $type-size-7;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #000;
|
||||||
|
background: $lighter-gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> li:last-child {
|
||||||
|
a {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li ul > li a {
|
||||||
|
padding-left: 2rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// hide sub sub links on small screens
|
||||||
|
li > ul li {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -13,36 +13,27 @@
|
||||||
@mixin notice($notice-color) {
|
@mixin notice($notice-color) {
|
||||||
margin: 2em 0 !important; // override
|
margin: 2em 0 !important; // override
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
font-family: $global-font-family;
|
||||||
|
font-size: $type-size-6 !important;
|
||||||
text-indent: initial; // override
|
text-indent: initial; // override
|
||||||
background-color: mix(#fff, $notice-color, 90%);
|
background-color: mix(#fff, $notice-color, 90%);
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
|
box-shadow: 0 1px 1px rgba($notice-color, 0.25);
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
margin-top: 0 !important; // override
|
margin-top: 0 !important; // override
|
||||||
margin-bottom: 0.75em;
|
margin-bottom: 0.75em;
|
||||||
line-height: 1 !important; // override
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@at-root .page__content #{&} h4 {
|
@at-root .page__content #{&} h4 {
|
||||||
// using at-root to override .page-content h4 font size
|
// using at-root to override .page-content h4 font size
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
font-size: 1rem;
|
font-size: 1em;
|
||||||
}
|
|
||||||
|
|
||||||
@at-root .page__content #{&} a {
|
|
||||||
border-bottom-width: 2px;
|
|
||||||
box-shadow: none !important; // override
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: transparent !important; // override
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
&:last-child {
|
||||||
|
margin-bottom: 0 !important; // override
|
||||||
a {
|
|
||||||
border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -52,14 +43,34 @@
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $notice-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: mix(#000, $notice-color, 40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background-color: mix(#fff, $notice-color, 95%)
|
background-color: mix(#fff, $notice-color, 95%)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0; // override
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Default notice */
|
/* Default notice */
|
||||||
|
|
||||||
.notice {
|
.notice {
|
||||||
|
@include notice($light-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Primary notice */
|
||||||
|
|
||||||
|
.notice--primary {
|
||||||
@include notice($primary-color);
|
@include notice($primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -5,11 +5,11 @@
|
||||||
#main {
|
#main {
|
||||||
@include container;
|
@include container;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
position: relative;
|
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
padding-right: 2em;
|
padding-right: 2em;
|
||||||
z-index: 0;
|
animation: intro 0.3s both;
|
||||||
|
animation-delay: 0.35s;
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
|
@ -22,25 +22,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
@include breakpoint($medium) {
|
|
||||||
padding-right: $right-sidebar-width-narrow;
|
|
||||||
}
|
|
||||||
|
|
||||||
@include breakpoint($large) {
|
@include breakpoint($large) {
|
||||||
@include span(10 of 12 last);
|
@include span(10 of 12 last);
|
||||||
padding-right: $right-sidebar-width;
|
@include suffix(2 of 12);
|
||||||
}
|
}
|
||||||
|
|
||||||
@include breakpoint($x-large) {
|
@include breakpoint($x-large) {
|
||||||
@include prefix(0.5 of 12);
|
@include prefix(0.5 of 12);
|
||||||
padding-right: $right-sidebar-width-wide;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__inner-wrap {
|
.page__inner-wrap {
|
||||||
|
@include full();
|
||||||
|
|
||||||
.page__content,
|
.page__content,
|
||||||
.page__meta,
|
.page__meta,
|
||||||
.page__share {
|
.page__share {
|
||||||
@include clearfix();
|
|
||||||
@include full();
|
@include full();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -48,21 +44,21 @@
|
||||||
|
|
||||||
.page__title {
|
.page__title {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-family: $serif;
|
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
||||||
& + .page__meta {
|
& + .page__meta {
|
||||||
margin-top: -1.5em;
|
margin-top: -0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__lead {
|
.page__lead {
|
||||||
font-family: $sans-serif;
|
font-family: $global-font-family;
|
||||||
font-size: 20px;
|
font-size: $type-size-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__content {
|
.page__content {
|
||||||
p, li {
|
p, li, dl {
|
||||||
font-size: 16px;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* paragraph indents */
|
/* paragraph indents */
|
||||||
|
@ -77,12 +73,48 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
img {
|
||||||
|
box-shadow: 0 0 10px rgba(#000, 0.25);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
margin-top: 1em;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-left: 1em;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: $type-size-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
font-size: $type-size-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blockquote citations */
|
||||||
|
blockquote + .small {
|
||||||
|
margin-top: -1.5em;
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__hero {
|
.page__hero {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
|
animation: intro 0.3s both;
|
||||||
|
animation-delay: 0.25s;
|
||||||
|
|
||||||
&--overlay {
|
&--overlay {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -93,6 +125,8 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
animation: intro 0.3s both;
|
||||||
|
animation-delay: 0.25s;
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
|
@ -108,16 +142,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__title {
|
.page__title {
|
||||||
font-size: 48px;
|
font-size: $type-size-2;
|
||||||
|
|
||||||
@include breakpoint($small) {
|
@include breakpoint($small) {
|
||||||
font-size: 60px;
|
font-size: $type-size-1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__lead {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -134,8 +164,8 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: $sans-serif;
|
font-family: $caption-font-family;
|
||||||
font-size: 10px;
|
font-size: $type-size-7;
|
||||||
background: #000;
|
background: #000;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
|
@ -160,11 +190,24 @@
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
border-top: 1px solid $border-color;
|
border-top: 1px solid $border-color;
|
||||||
|
|
||||||
|
@include breakpoint(max-width $small) {
|
||||||
|
.btn span {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__share-title {
|
.page__share-title {
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
font-size: $type-size-6;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -177,16 +220,20 @@
|
||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
color: mix(#fff, $gray, 25%);
|
color: mix(#fff, $gray, 25%);
|
||||||
font-family: $sans-serif;
|
font-family: $sans-serif;
|
||||||
font-size: 14px;
|
font-size: $type-size-6;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0.5em;
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__meta-title {
|
.page__meta-title {
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
font-size: $type-size-6;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -216,7 +263,7 @@
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-color: $gray;
|
color: $link-color-hover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -226,15 +273,14 @@
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
.page__comments {
|
.page__comments {
|
||||||
@include clearfix();
|
|
||||||
@include full();
|
@include full();
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__comments-title {
|
.page__comments-title {
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding-top: 2rem;
|
padding-top: 2rem;
|
||||||
|
font-size: $type-size-6;
|
||||||
border-top: 1px solid $border-color;
|
border-top: 1px solid $border-color;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
@ -260,12 +306,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page__related-title {
|
.page__related-title {
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
font-size: $type-size-6;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue