N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'release/1.2.0'

Browse source
This commit is contained in:
Michael Rose 2013-12-09 09:38:28 -05:00
parent a253f65bd0 855ca19f2c
commit e9a7679b47
22 changed files with 60 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_config.yml
View file

@ -1,8 +1,8 @@
title: Site Title title: Site Title
tagline: A short tagline tagline: A short tagline
description: Describe your website. description: Describe your website.
#Comment out url when working locally to resolve base urls correctly # Your site's domain goes here. Leave localhost server or blank when working locally.
url: http://your-site.com url: http://localhost:4000
# Owner/author information # Owner/author information
owner: owner:
@ -31,11 +31,11 @@ bing_verify:
# For external links add external: true # For external links add external: true
links: links:
- title: About - title: About
url: /about url: /about/
- title: Articles - title: Articles
url: /articles url: /articles/
- title: Theme Setup - title: Theme Setup
url: /theme-setup url: /theme-setup/
- title: Made Mistakes - title: Made Mistakes
url: http://mademistakes.com url: http://mademistakes.com
external: true external: true

0
_includes/author-bio.html → _includes/_author-bio.html
View file

0
_includes/browser-upgrade.html → _includes/_browser-upgrade.html
View file

0
_includes/footer.html → _includes/_footer.html
View file

0
_includes/head.html → _includes/_head.html
View file

0
_includes/navigation.html → _includes/_navigation.html
View file

0
_includes/scripts.html → _includes/_scripts.html
View file

18
_layouts/home.html
View file

@ -4,27 +4,27 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="home" itemscope itemtype="http://schema.org/WebPage"> <body class="home" itemscope itemtype="http://schema.org/WebPage">
{% include browser-upgrade.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
{% if page.image.feature %}<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %} {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
</div><!-- /.image-wrap -->{% endif %} </div><!-- /.image-wrap -->{% endif %}
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog"> <div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
<h3><a href="{{ site.url}}/articles">Articles</a></h3> <h3><a href="{{ site.url}}/articles/">Articles</a></h3>
{% for post in site.categories.articles limit:5 %} {% for post in site.posts limit:5 %}
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost"> <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
<h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2> <h2 itemprop="headline"><a href="{{ site.url }}{{ post.url }}" rel="bookmark" title="{{ post.title }}">{{ post.title }}</a></h2>
<p itemprop="text">{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p> <p itemprop="text">{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 120 }}{% endif %}</p>
@ -34,11 +34,11 @@
<div class="footer-wrap"> <div class="footer-wrap">
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>

14
_layouts/page.html
View file

@ -4,14 +4,14 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="page" itemscope itemtype="http://schema.org/WebPage"> <body class="page" itemscope itemtype="http://schema.org/WebPage">
{% include browser-upgrade.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
{% if page.image.feature %}<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
@ -19,8 +19,8 @@
</div><!-- /.image-wrap -->{% endif %} </div><!-- /.image-wrap -->{% endif %}
<div id="main" role="main" itemprop="mainContentOfPage"> <div id="main" role="main" itemprop="mainContentOfPage">
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<article itemscope itemtype="http://schema.org/CreativeWork"> <article itemscope itemtype="http://schema.org/CreativeWork">
<h1 itemprop="name">{{ page.title }}</h1> <h1 itemprop="name">{{ page.title }}</h1>
@ -32,11 +32,11 @@
<div class="footer-wrap"> <div class="footer-wrap">
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>

14
_layouts/post-index.html
View file

@ -4,22 +4,22 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="articles" itemscope itemtype="http://schema.org/WebPage"> <body class="articles" itemscope itemtype="http://schema.org/WebPage">
{% include browser-upgrade.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
{% if page.image.feature %}<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
{% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %} {% if page.image.credit %}<span class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></span>{% endif %}
</div><!-- /.image-wrap -->{% endif %} </div><!-- /.image-wrap -->{% endif %}
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog"> <div id="index" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
@ -43,11 +43,11 @@
<div class="footer-wrap"> <div class="footer-wrap">
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>

16
_layouts/post.html
View file

@ -4,14 +4,14 @@
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head> <head>
{% include head.html %} {% include _head.html %}
</head> </head>
<body class="article" itemscope itemtype="http://schema.org/WebPage"> <body class="article" itemscope itemtype="http://schema.org/WebPage">
{% include browser-upgrade.html %} {% include _browser-upgrade.html %}
{% include navigation.html %} {% include _navigation.html %}
{% if page.image.feature %}<div class="image-wrap"> {% if page.image.feature %}<div class="image-wrap">
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage"> <img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }} feature image" itemprop="primaryImageOfPage">
@ -19,8 +19,8 @@
</div><!-- /.image-wrap -->{% endif %} </div><!-- /.image-wrap -->{% endif %}
<div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog"> <div id="main" role="main" itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Blog">
<div class="article-author-top"> <div class="article-author-side">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost"> <article itemscope itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
<div class="headline-wrap"> <div class="headline-wrap">
@ -32,7 +32,7 @@
<hr /> <hr />
<footer role="contentinfo"> <footer role="contentinfo">
<div class="article-author-bottom"> <div class="article-author-bottom">
{% include author-bio.html %} {% include _author-bio.html %}
</div> </div>
<p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}" itemprop="dateModified">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %} by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a href="{{ site.url }}/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>.</p> <p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}" itemprop="dateModified">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %} by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a href="{{ site.url }}/about" title="About {{ site.owner.name }}" itemprop="url">{{ site.owner.name }}</a></span></span>.</p>
</footer> </footer>
@ -59,11 +59,11 @@
<hr /> <hr />
</div><!-- /.related-articles -->{% endif %} </div><!-- /.related-articles -->{% endif %}
<footer> <footer>
{% include footer.html %} {% include _footer.html %}
</footer> </footer>
</div><!-- /.footer-wrap --> </div><!-- /.footer-wrap -->
{% include scripts.html %} {% include _scripts.html %}
</body> </body>
</html> </html>

5
about.md
View file

@ -17,10 +17,13 @@ Jekyll is pretty rad and figured releasing a cleaned up version of [my site](htt
* 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 --- other widget nonsense never. * Minimal embellishments --- content first.
* Large feature images for posts and pages. * Large feature images for posts and pages.
* Author sidebar to pimp your bio, photo[^2], and social media links.
* Simple and clear permalink structure *(ie: domain.com/category/post-title)* * Simple and clear permalink structure *(ie: domain.com/category/post-title)*
<a markdown="0" href="{{ site.url }}/theme-setup" class="btn">Install Minimal Mistakes Theme</a> <a markdown="0" href="{{ site.url }}/theme-setup" class="btn">Install Minimal Mistakes Theme</a>
[^1]: Since open sourcing this theme I have released a couple other Jekyll themes. My website [Made Mistakes](http://mademistakes.com) is currently using a modified version of my [So Simple Theme](http://mmistakes.github.io/so-simple-theme/). [^1]: Since open sourcing this theme I have released a couple other Jekyll themes. My website [Made Mistakes](http://mademistakes.com) is currently using a modified version of my [So Simple Theme](http://mmistakes.github.io/so-simple-theme/).
[^2]: Fancy avatars provided by [Brandon Mathis](http://brandonmathis.com/projects/fancy-avatars/demo/) under a [Creative Commons Attribution 3.0 License](http://creativecommons.org/licenses/by/3.0/).

2
articles.md
View file

@ -1,6 +1,6 @@
--- ---
layout: post-index layout: post-index
permalink: /articles/index.html permalink: /articles/
title: Articles title: Articles
tagline: A List of Posts tagline: A List of Posts
tags: [blog, graphic design] tags: [blog, graphic design]

2
assets/css/ie.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
assets/less/1382.less
View file

@ -37,7 +37,7 @@
.prefix(12,4); .prefix(12,4);
.suffix(12,3.5); .suffix(12,3.5);
} }
.article-author-top { .article-author-side {
.grid(12,1.5); .grid(12,1.5);
.prefix(12,2); .prefix(12,2);
} }

2
assets/less/600.less
View file

@ -40,7 +40,7 @@
.prefix(12,3); .prefix(12,3);
.suffix(12,3); .suffix(12,3);
} }
.article-author-top { .article-author-side {
display: block; display: block;
.grid(12,2); .grid(12,2);
.prefix(12,0.5); .prefix(12,0.5);

2
assets/less/992.less
View file

@ -3,7 +3,7 @@
// TEXTURE ==================================================== // TEXTURE ====================================================
// ELEMENTS =================================================== // ELEMENTS ===================================================
// LAYOUT ===================================================== // LAYOUT =====================================================
.article-author-top, .article-author-side,
.article-author-bottom { .article-author-bottom {
h3, h3,
.bio-photo, .bio-photo,

19
assets/less/page.less
View file

@ -75,7 +75,6 @@ body {
h2 { h2 {
margin-bottom: 4px; margin-bottom: 4px;
.font-rem(20); .font-rem(20);
text-transform: uppercase;
} }
p { p {
.font-rem(14); .font-rem(14);
@ -118,7 +117,7 @@ body {
clear: both; clear: both;
font-size: 80%; font-size: 80%;
} }
.article-author-top, .article-author-side,
.article-author-bottom { .article-author-bottom {
h3 { h3 {
margin-bottom: 0; margin-bottom: 0;
@ -151,7 +150,7 @@ body {
.translate(0, 2px); .translate(0, 2px);
} }
} }
.article-author-top { .article-author-side {
display: none; display: none;
} }
.article-author-bottom { .article-author-bottom {
@ -294,10 +293,7 @@ body {
.container(); .container();
.clearfix(); .clearfix();
clear: both; clear: both;
margin-top: 1em;
padding-top: 2em;
padding-bottom: 3em; padding-bottom: 3em;
background-color: @black;
a, a,
a:active, a:active,
a:visited, a:visited,
@ -305,19 +301,9 @@ body {
h4, h4,
h5, h5,
h6, h6,
span {
color: darken(@white, 25);
}
span { span {
.font-rem(14); .font-rem(14);
} }
a {
border-bottom: 0 solid transparent;
&:hover {
color: @white;
border-bottom: 0 solid transparent;
}
}
footer { footer {
.grid(12,10); .grid(12,10);
.prefix(12,1); .prefix(12,1);
@ -336,7 +322,6 @@ body {
} }
li { li {
margin-bottom: 0; margin-bottom: 0;
color: @white;
} }
} }
.footer-icons { .footer-icons {

3
assets/less/typography.less
View file

@ -103,7 +103,8 @@ blockquote {
// -------------------------------------------------- // --------------------------------------------------
.footnotes { .footnotes {
ol, li, p { ol, li, p {
.font-size(14); margin-bottom: 0;
.font-rem(14);
} }
} }

BIN
images/bio-photo.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

18
theme-setup.md
View file

@ -33,12 +33,12 @@ General notes and suggestions for customizing Minimal Mistakes.
{% highlight text %} {% highlight text %}
minimal-mistakes/ minimal-mistakes/
├── _includes/ ├── _includes/
| ├── author-bio.html #bio stuff goes here | ├── _author-bio.html #bio stuff goes here
| ├── browser-upgrade.html #displays on IE8 and less | ├── _browser-upgrade.html #displays on IE8 and less
| ├── footer.html #site footer | ├── _footer.html #site footer
| ├── head.html #site head | ├── _head.html #site head
| ├── navigation.html #site top nav | ├── _navigation.html #site top nav
| └── scripts.html #jQuery, plugins, GA, etc. | └── _scripts.html #jQuery, plugins, GA, etc.
├── _layouts/ ├── _layouts/
| ├── home.html #homepage layout | ├── home.html #homepage layout
| ├── page.html #page layout | ├── page.html #page layout
@ -69,7 +69,7 @@ Most of the variables found here are used in the .html files found in `_includes
#### Owner/Author Information #### Owner/Author Information
Change your name, bio, and avatar photo (100x100 pixels or larger), Twitter url, email, and Google+ url. If you want to link to an external image on Gravatar or something similiar you'll need to edit the path in `author-bio.html` since it assumes it is located in `\images`. Change your name, bio, and avatar photo (100x100 pixels or larger), Twitter url, email, and Google+ url. If you want to link to an external image on Gravatar or something similiar you'll need to edit the path in `_author-bio.html` since it assumes it is located in `\images`.
Including a link to your Google+ profile has the added benefit of displaying [Google Authorship](https://plus.google.com/authorship) in Google search results if you've went ahead and applied for it. Don't have a Google+ account? Just leave it blank. Including a link to your Google+ profile has the added benefit of displaying [Google Authorship](https://plus.google.com/authorship) in Google search results if you've went ahead and applied for it. Don't have a Google+ account? Just leave it blank.
@ -122,7 +122,7 @@ image:
#### Thumbnails for OG and Twitter Cards #### Thumbnails for OG and Twitter Cards
Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options. Post and page thumbnails work the same way. These are used by [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) meta tags found in *_head.html*. If you don't assign a thumbnail the default graphic *(default-thumb.png)* is used. I'd suggest changing this to something more meaningful --- your logo or avatar are good options.
#### Table of Contents #### Table of Contents
@ -180,6 +180,6 @@ Having a problem getting something to work or want to know why I setup something
This theme is free and open source software, distributed under the [GNU General Public License]({{ site.url }}/LICENSE) version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer. This theme is free and open source software, distributed under the [GNU General Public License]({{ site.url }}/LICENSE) version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer.
[^1]: Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for canonical urls in `head.html`. Don't include a trailing `/` in your base url ie: `http://mademistakes.com`. When developing locally remove or comment out this line so local .css, .js, and images are used. [^1]: Used to generate absolute urls in `sitemap.xml`, `feed.xml`, and for canonical urls in `_head.html`. Don't include a trailing `/` in your base url ie: `http://mademistakes.com`. When developing locally remove or comment out this line so local .css, .js, and images are used.
[^2]: If you're using GitHub Pages to host your site be aware that plugins are disabled. So you'll need to build your site locally and then manually deploy if you want to use this sweet plugin. [^2]: If you're using GitHub Pages to host your site be aware that plugins are disabled. So you'll need to build your site locally and then manually deploy if you want to use this sweet plugin.