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

Continue to refine styles and layouts

Browse source
This commit is contained in:
Michael Rose 2016-03-10 13:06:59 -05:00
parent 3df0afbdc9
commit 8d046af7a9
26 changed files with 390 additions and 382 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
_assets/css/_archive.scss Normal file
View file

@ -0,0 +1,47 @@
/* ==========================================================================
ARCHIVE
========================================================================== */
.archive {
@include container;
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 2em;
@include breakpoint($small) {
@include grid(12,8);
@include prefix(12,0);
@include suffix(12,0);
}
@include breakpoint($large) {
@include grid(12,6);
}
@include breakpoint($x-large) {
@include grid(12,5);
}
}
.archive__subtitle {
margin: 0;
padding-bottom: 0.5em;
font-size: 28px;
border-bottom: 1px solid $border-color;
}
.archive__item-title {
margin-bottom: 4px;
font-size: 20px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.archive__item-excerpt {
font-size: 14px;
& + p {
text-indent: 0;
}
}

18
_base.scss → _assets/css/_base.scss
View file

@ -2,16 +2,13 @@
BASE ELEMENTS BASE ELEMENTS
========================================================================== */ ========================================================================== */
/*
Typography
========================================================================== */
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
color: $text-color; color: $text-color;
font-family: $serif; font-family: $serif;
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 */
overflow: hidden; overflow: hidden;
@ -79,7 +76,7 @@ p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
widows: 3; widows: 3;
} }
/* Abbreviations */ /* abbreviations */
abbr[title], abbr[title],
abbr[data-original-title] { abbr[data-original-title] {
@ -88,7 +85,7 @@ abbr[data-original-title] {
border-bottom: 1px dotted $text-color; border-bottom: 1px dotted $text-color;
} }
/* Blockquotes */ /* blockquotes */
blockquote { blockquote {
margin: 2em 1em 2em 0; margin: 2em 1em 2em 0;
@ -110,10 +107,9 @@ blockquote {
} }
} }
/* Links */ /* links */
a { a {
text-decoration: none;
&:focus { &:focus {
@extend %tab-focus; @extend %tab-focus;
} }
@ -123,7 +119,7 @@ a {
} }
} }
/* Lists */ /* lists */
ol, ul { ol, ul {
@include breakpoint($small) { @include breakpoint($small) {
@ -134,7 +130,7 @@ ol, ul {
} }
} }
/* Code */ /* code */
tt, code, kbd, samp, pre { tt, code, kbd, samp, pre {
font-family: $monospace; font-family: $monospace;
@ -157,7 +153,7 @@ figcaption code {
} }
} }
/* Horizontal rule */ /* horizontal rule */
hr { hr {
display: block; display: block;

1
_buttons.scss → _assets/css/_buttons.scss
View file

@ -17,6 +17,7 @@
font-weight: bold; font-weight: bold;
line-height: 1.5; line-height: 1.5;
text-align: center; text-align: center;
text-decoration: none;
background-color: #000; background-color: #000;
border: 0 !important; border: 0 !important;
border-radius: $border-radius; border-radius: $border-radius;

83
_assets/css/_masthead.scss Normal file
View file

@ -0,0 +1,83 @@
/* ==========================================================================
MASTHEAD
========================================================================== */
.masthead {
@include container;
padding: 2em 0 1em;
font-family: $sans-serif-narrow;
font-weight: 700;
text-transform: uppercase;
@include clearfix;
a {
text-decoration: none;
}
}
/* Site name */
.site-name {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 1em;
float: none;
display: block;
font-size: 24px;
@include breakpoint($small) {
@include grid(12,2);
@include prefix(12,0.5);
@include suffix(12,0.5);
font-size: 16px;
}
@include breakpoint($x-large) {
@include grid(12,1.5);
@include prefix(12,2);
}
}
.masthead__menu {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 1em;
float: none;
display: block;
@include breakpoint($small) {
@include grid(12,9);
@include prefix(12,0);
@include suffix(12,0);
}
@include breakpoint($x-large) {
@include grid(12,8);
}
ul {
margin: 0;
padding: 0;
clear: both;
list-style-type: none;
}
}
.masthead__menu-item {
display: block;
list-style-type: none;
border-bottom: 1px solid $border-color;
font-size: 16px;
&:last-child {
border-bottom: 0 solid transparent;
}
@include breakpoint($small) {
display: inline;
margin-right: 25px;
white-space: nowrap;
border-bottom: 0 solid transparent;
}
a {
display: block;
padding: 10px 0;
@include breakpoint($small) {
display: inline;
padding: 0;
}
}
}

45
_assets/css/_navigation.scss Normal file
View file

@ -0,0 +1,45 @@
/* ==========================================================================
NAVIGATION
========================================================================== */
/*
Breadcrumb navigation links
========================================================================== */
.breadcrumbs {
ol {
padding: 0;
list-style: none;
}
li {
display: inline;
}
.current {
font-weight: bold;
}
}
/*
Post pagination navigation links
========================================================================== */
.pagination {
padding-top: 0.5em;
border-top: 1px solid $border-color;
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li + li:before {
content: "";
padding-right: 10px;
}
.current {
font-weight: bold;
}
}

80
_assets/css/_notices.scss Normal file
View file

@ -0,0 +1,80 @@
/* ==========================================================================
NOTICE TEXT BLOCKS
========================================================================== */
/**
* Default Kramdown usage (no indents!):
* <div class="notice" markdown="1">
* #### Headline for the Notice
* Text for the notice
* </div>
*/
@mixin notice($notice-color) {
margin: 2em 0;
padding: 1em;
background-color: mix(#fff, $notice-color, 90%);
border-top: 0.25em solid mix(#fff, $notice-color, 50%);
border-bottom: 0.25em solid mix(#fff, $notice-color, 50%);
h4 {
margin-top: 0 !important; // override
margin-bottom: 0.75em;
line-height: 1 !important; // override
}
@at-root .page__content #{&} h4 {
// using at-root to override .page-content h4 font size
margin-bottom: 0;
font-size: 1rem;
}
@at-root .page__content #{&} a {
border-bottom-width: 2px;
box-shadow: none !important; // override
&:hover {
background-color: transparent !important; // override
}
}
p {
margin-bottom: 0;
a {
border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
}
}
h4 + p {
// remove space above paragraphs that appear directly after notice headline
margin-top: 0;
padding-top: 0;
}
code {
background-color: mix(#fff, $notice-color, 70%)
}
}
/* Default notice */
.notice {
@include notice($primary-color);
}
/* Info notice */
.notice--info {
@include notice($info-color);
}
/* Warning notice */
.notice--warning {
@include notice($warning-color);
}
/* Success notice */
.notice--success {
@include notice($success-color);
}
/* Danger notice */
.notice--danger {
@include notice($danger-color);
}

289
_assets/css/_page.scss
View file

@ -2,96 +2,6 @@
SINGLE PAGE/POST SINGLE PAGE/POST
========================================================================== */ ========================================================================== */
body {
background-color: $body-color;
font-family: $serif;
color: $text-color;
}
/*
Header
========================================================================== */
.navigation-wrapper {
@include container;
padding: 2em 0 1em;
font-family: $sans-serif-narrow;
font-weight: 700;
text-transform: uppercase;
@include clearfix;
}
/* Site name */
.site-name {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 1em;
float: none;
display: block;
font-size: 24px;
@include breakpoint($small) {
@include grid(12,2);
@include prefix(12,0.5);
@include suffix(12,0.5);
font-size: 16px;
}
@include breakpoint($x-large) {
@include grid(12,1.5);
@include prefix(12,2);
}
}
/* Top navigation links */
.top-navigation {
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 1em;
float: none;
display: block;
@include breakpoint($small) {
@include grid(12,9);
@include prefix(12,0);
@include suffix(12,0);
}
@include breakpoint($x-large) {
@include grid(12,8);
}
ul {
margin: 0;
padding: 0;
clear: both;
list-style-type: none;
}
li {
display: block;
list-style-type: none;
border-bottom: 1px solid lighten(#000,80);
border-bottom: 1px solid fade(#000,10);
font-size: 16px;
&:last-child {
border-bottom: 0 solid transparent;
}
@include breakpoint($small) {
display: inline;
margin-right: 25px;
white-space: nowrap;
border-bottom: 0 solid transparent;
}
a {
display: block;
padding: 10px 0;
decoration: none;
border-bottom: 0 solid transparent;
@include breakpoint($small) {
display: inline;
padding: 0;
}
}
}
}
/* Main content */ /* Main content */
#main { #main {
counter-reset: captions; counter-reset: captions;
@ -107,64 +17,38 @@ body {
@include prefix(12,1); @include prefix(12,1);
@include suffix(12,1); @include suffix(12,1);
margin-bottom: 2em; margin-bottom: 2em;
@include breakpoint($small) {
@include grid(12,8);
@include prefix(12,0);
@include suffix(12,0);
}
@include breakpoint($large) {
@include grid(12,6);
}
@include breakpoint($x-large) {
@include grid(12,5);
}
}
/* Archive listing specific styling */
.archive {
@include container;
@include grid(12,10);
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 2em;
@include breakpoint($small) { @include breakpoint($small) {
@include grid(12,8); @include grid(12,8);
@include prefix(12,0); @include prefix(12,0);
@include suffix(12,0); @include suffix(12,0);
} }
@include breakpoint($large) { @include breakpoint($large) {
@include grid(12,6); @include grid(12,6);
} }
@include breakpoint($x-large) { @include breakpoint($x-large) {
@include grid(12,5); @include grid(12,5);
} }
h3 { }
margin: 0;
padding-bottom: .5em; .page__title {}
font-size: 28px;
border-bottom: 1px solid mix(#fff, #000, 70%); .page__content {
} ul, ol {
article { li + li {
h2 { margin-top: 0.5em;
margin-bottom: 4px;
font-size: 20px;
}
p {
font-size: 14px;
}
p + p {
text-indent: 0;
} }
} }
} }
/* Large feature header image */ .page__hero {
.image-wrap {
position: relative; position: relative;
margin-bottom: 2em; margin-bottom: 2em;
@include clearfix; @include clearfix;
&:after { &:after {
content: " "; content: "";
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -183,10 +67,34 @@ body {
left: 33.333333333%; left: 33.333333333%;
} }
} }
img { }
width: 100%;
height: auto; .page__hero-image {
-ms-interpolation-mode: bicubic; width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
}
.page__hero-caption {
position: absolute;
bottom: 0;
right: 0;
margin: 0 auto;
padding: 2px 5px;
color: #fff;
font-family: $sans-serif;
font-size: 10px;
background: #000;
text-align: right;
z-index: 5;
opacity: 0.5;
border-radius: $border-radius 0 $border-radius 0;
@include breakpoint($medium) {
padding: 5px 10px;
}
a {
color: #fff;
text-decoration: none;
} }
} }
@ -216,37 +124,35 @@ body {
@include prefix(12,2); @include prefix(12,2);
} }
} }
.author-name { .author__name {
margin-bottom: 0; margin-bottom: 0;
@include breakpoint($small) { @include breakpoint($small) {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.author-bio { .author__bio {
font-size: 80%; font-size: 80%;
font-style: italic; font-style: italic;
@include breakpoint($small) { @include breakpoint($small) {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.author-avatar { .author__avatar {
max-width: 110px; max-width: 110px;
border-radius: 50%; border-radius: 50%;
} }
.author-social { .author__social-url {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px; font-size: 14px;
color: #000; color: #000;
text-decoration: none;
&:visited { &:visited {
color: #000; color: #000;
} }
&:hover { &:hover {
transform: scale(1.1); text-decoration: underline;
}
&:active {
transform: translate(0, 2px);
} }
.fa { .fa {
margin-right: 5px; margin-right: 5px;
@ -257,68 +163,14 @@ body {
max-width: 125px; max-width: 125px;
} }
@include breakpoint($large) { @include breakpoint($large) {
.author-name, .author__name,
.author-avatar, .author__avatar,
.author-bio, .author__bio,
.author-social { .author__social-url {
max-width: 150px; max-width: 150px;
} }
} }
/* Post content wrapper */
.article-wrap {
// Dotted line underlines for links
p > a,
p > em > a,
p > strong > a,
li > a {
text-decoration: underline;
}
}
/* Image grid - not used */
.image-grid {
@include clearfix;
list-style: none;
margin: 0 0 1em;
padding: 0;
li {
@include grid(12,6);
@include breakpoint($micro) {
width: 33.333333%;
}
@include breakpoint($small) {
width: 25%;
}
@include breakpoint($medium) {
width: 20%;
}
@include breakpoint($large) {
width: 16.666666666%;
}
}
}
/* Recent grid - not used */
.recent-grid {
@include clearfix;
list-style: none;
margin: 1em 0;
li {
display: inline;
a {
border-bottom: 0 solid transparent;
&:hover {
border-bottom: 0 solid transparent;
}
}
}
img {
width: 19%;
margin-bottom: 1%;
}
}
/* Social sharing links */ /* Social sharing links */
.social-share { .social-share {
h4 { h4 {
@ -447,45 +299,4 @@ body {
} }
#goog-wm-sb { #goog-wm-sb {
@extend .btn; @extend .btn;
}
/*
Breadcrumbs
========================================================================== */
.breadcrumbs {
ol {
padding: 0;
list-style: none;
}
li {
display: inline;
}
.current {
font-weight: bold;
}
}
/*
Post pagination links
========================================================================== */
.pagination {
padding-top: 0.5em;
border-top: 1px solid mix(#fff, #000, 70%);
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
display: inline-block;
}
li + li:before {
content: "";
padding-right: 10px;
}
.current {
font-weight: bold;
}
} }

64
_assets/css/_site.scss
View file

@ -1,64 +0,0 @@
/* ==========================================================================
Site wide styles
========================================================================== */
/*
Selection
========================================================================== */
::-moz-selection {
background-color: mix(#fff, $base-color, 65%);
color: $base-color;
text-shadow: none;
}
::selection {
background-color: mix(#fff, $base-color, 65%);
color: $base-color;
text-shadow: none;
}
/*
Global classes
========================================================================== */
/* Capitalize */
.all-caps {
text-transform: uppercase;
}
/* Float left */
.pull-left {
float: left;
}
/* Float right */
.pull-right {
float: right;
}
.image-pull-right {
float: right;
margin-top: 0;
}
/* Clearfix */
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
/* Remove bullets and indentation from list */
.unstyled-list {
list-style: none;
margin-left: 0;
padding-left: 0;
li {
list-style-type: none;
}
}

3
_assets/css/_syntax.scss
View file

@ -2,7 +2,8 @@
Syntax highlighting Syntax highlighting
========================================================================== */ ========================================================================== */
div.highlighter-rouge { div.highlighter-rouge,
figure.highlight {
margin-bottom: 1em; margin-bottom: 1em;
padding: 1em; padding: 1em;
border: 1px solid $border-color; border: 1px solid $border-color;

1
_assets/css/_toc.scss
View file

@ -56,6 +56,7 @@
} }
a { a {
display: block; display: block;
text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }

2
_assets/css/_variables.scss
View file

@ -8,7 +8,7 @@
$doc-font-size : 16; $doc-font-size : 16;
$doc-line-height : 26; $doc-line-height : 26;
$paragraph-indent : true !default; $paragraph-indent : false !default;
$indent-var : 0rem + ($doc-line-height / $doc-font-size); $indent-var : 0rem + ($doc-line-height / $doc-font-size);
$serif : "PT Serif", serif; $serif : "PT Serif", serif;

9
_assets/css/main.scss
View file

@ -13,13 +13,20 @@
@import "reset"; @import "reset";
@import "base"; @import "base";
@import "utilities"; @import "utilities";
@import "buttons"; @import "buttons";
@import "notices";
@import "masthead";
@import "navigation";
@import "toc"; // table of contents @import "toc"; // table of contents
@import "syntax"; @import "syntax";
@import "forms"; @import "forms";
@import "page"; @import "page";
@import "archive";
@import "vendor/font-awesome/font-awesome"; @import "vendor/font-awesome/font-awesome";
@import "vendor/magnific-popup/magnific-popup"; @import "vendor/magnific-popup/magnific-popup";
@import "print"; @import "print";

8
_includes/archive-list-single
View file

@ -1,8 +1,8 @@
<article itemscope itemtype="http://schema.org/CreativeWork"> <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
{% if post.link %} {% if post.link %}
<h2 class="link-post" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a> <a href="{{ post.link }}" target="_blank"><i class="fa fa-link"></i></a></h2> <h2 class="archive__item-title link-post" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a> <a href="{{ post.link }}" target="_blank"><i class="fa fa-link"></i></a></h2>
{% else %} {% else %}
<h2 itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a></h2> <h2 class="archive__item-title" itemprop="headline"><a href="{{ base_path }}{{ post.url }}">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</a></h2>
{% endif %} {% endif %}
{% if post.excerpt %}<p 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>

48
_includes/author-profile
View file

@ -5,74 +5,74 @@
<div itemscope itemtype="http://schema.org/Person"> <div itemscope itemtype="http://schema.org/Person">
{% if author.avatar contains "http" %} {% if author.avatar contains "http" %}
<img src="{{ author.avatar }}" class="author-avatar" alt="{{ author.name }} photo"> <img src="{{ author.avatar }}" class="author__avatar" alt="{{ author.name }}">
{% else %} {% else %}
<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author-avatar" alt="{{ author.name }} photo"> <img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author__avatar" alt="{{ author.name }}">
{% endif %} {% endif %}
<h3 class="author-name">{{ author.name }}</h3> <h3 class="author-name">{{ author.name }}</h3>
{% if author.bio %}<p class="author-bio">{{ author.bio }}</p>{% endif %} {% if author.bio %}<p class="author__bio">{{ author.bio }}</p>{% endif %}
{% if author.uri %} {% if author.uri %}
<a href="{{ author.uri }}" class="author-social" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a> <a href="{{ author.uri }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a>
{% endif %} {% endif %}
{% if author.email %} {% if author.email %}
<a href="mailto:{{ author.email }}" class="author-social" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a> <a href="mailto:{{ author.email }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a>
{% endif %} {% endif %}
{% if author.twitter %} {% if author.twitter %}
<a href="http://twitter.com/{{ author.twitter }}" class="author-social" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a> <a href="http://twitter.com/{{ author.twitter }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a>
{% endif %} {% endif %}
{% if author.facebook %} {% if author.facebook %}
<a href="http://facebook.com/{{ author.facebook }}" class="author-social" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a> <a href="http://facebook.com/{{ author.facebook }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a>
{% endif %} {% endif %}
{% if author.google_plus %} {% if author.google_plus %}
<a href="http://plus.google.com/+{{ author.google_plus }}" class="author-social" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a> <a href="http://plus.google.com/+{{ author.google_plus }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-google-plus-square"></i> Google+</a>
{% endif %} {% endif %}
{% if author.linkedin %} {% if author.linkedin %}
<a href="http://linkedin.com/in/{{ author.linkedin }}" class="author-social" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a> <a href="http://linkedin.com/in/{{ author.linkedin }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-linkedin-square"></i> LinkedIn</a>
{% endif %} {% endif %}
{% if author.xing %} {% if author.xing %}
<a href="http://www.xing.com/profile/{{ author.xing }}" class="author-social" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a> <a href="http://www.xing.com/profile/{{ author.xing }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-xing-square"></i> XING</a>
{% endif %} {% endif %}
{% if author.instagram %} {% if author.instagram %}
<a href="http://instagram.com/{{ author.instagram }}" class="author-social" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a> <a href="http://instagram.com/{{ author.instagram }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a>
{% endif %} {% endif %}
{% if author.tumblr %} {% if author.tumblr %}
<a href="http://{{ author.tumblr }}.tumblr.com" class="author-social" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a> <a href="http://{{ author.tumblr }}.tumblr.com" class="author__social-url" target="_blank"><i class="fa fa-fw fa-tumblr-square"></i> Tumblr</a>
{% endif %} {% endif %}
{% if author.github %} {% if author.github %}
<a href="http://github.com/{{ author.github }}" class="author-social" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a> <a href="http://github.com/{{ author.github }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a>
{% endif %} {% endif %}
{% if author.stackoverflow %} {% if author.stackoverflow %}
<a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" class="author-social" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a> <a href="http://stackoverflow.com/users/{{ author.stackoverflow }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-stack-overflow"></i> Stackoverflow</a>
{% endif %} {% endif %}
{% if author.lastfm %} {% if author.lastfm %}
<a href="http://lastfm.com/user/{{ author.lastfm }}" class="author-social" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a> <a href="http://lastfm.com/user/{{ author.lastfm }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a>
{% endif %} {% endif %}
{% if author.dribbble %} {% if author.dribbble %}
<a href="http://dribbble.com/{{ author.dribbble }}" class="author-social" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a> <a href="http://dribbble.com/{{ author.dribbble }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a>
{% endif %} {% endif %}
{% if author.pinterest %} {% if author.pinterest %}
<a href="http://www.pinterest.com/{{ author.pinterest }}" class="author-social" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a> <a href="http://www.pinterest.com/{{ author.pinterest }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-pinterest"></i> Pinterest</a>
{% endif %} {% endif %}
{% if author.foursquare %} {% if author.foursquare %}
<a href="http://foursquare.com/{{ author.foursquare }}" class="author-social" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a> <a href="http://foursquare.com/{{ author.foursquare }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a>
{% endif %} {% endif %}
{% if author.steam %} {% if author.steam %}
<a href="http://steamcommunity.com/id/{{ author.steam }}" class="author-social" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a> <a href="http://steamcommunity.com/id/{{ author.steam }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-steam-square"></i> Steam</a>
{% endif %} {% endif %}
{% if author.youtube %} {% if author.youtube %}
<a href="https://youtube.com/user/{{ author.youtube }}" class="author-social" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a> <a href="https://youtube.com/user/{{ author.youtube }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-youtube-square"></i> Youtube</a>
{% endif %} {% endif %}
{% if author.soundcloud %} {% if author.soundcloud %}
<a href="http://soundcloud.com/{{ author.soundcloud }}" class="author-social" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a> <a href="http://soundcloud.com/{{ author.soundcloud }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a>
{% endif %} {% endif %}
{% if author.weibo %} {% if author.weibo %}
<a href="http://www.weibo.com/{{ author.weibo }}" class="author-social" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a> <a href="http://www.weibo.com/{{ author.weibo }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-weibo"></i> Weibo</a>
{% endif %} {% endif %}
{% if author.flickr %} {% if author.flickr %}
<a href="http://www.flickr.com/{{ author.flickr }}" class="author-social" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a> <a href="http://www.flickr.com/{{ author.flickr }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-flickr"></i> Flickr</a>
{% endif %} {% endif %}
{% if author.codepen %} {% if author.codepen %}
<a href="http://codepen.io/{{ author.codepen }}" class="author-social" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a> <a href="http://codepen.io/{{ author.codepen }}" class="author__social-url" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a>
{% endif %} {% endif %}
</div> </div>

26
_includes/navigation
View file

@ -1,19 +1,19 @@
<div class="navigation-wrapper"> <div class="masthead">
<div class="site-name"> <div class="site-name">
<a href="{{ base_path }}/">{{ site.title }}</a> <a href="{{ base_path }}/">{{ site.title }}</a>
</div><!-- /.site-name --> </div><!-- /.site-name -->
<div class="top-navigation"> <div class="masthead__menu">
<nav id="site-nav" class="nav"> <nav id="site-nav">
<ul> <ul>
{% for link in site.data.navigation %} {% for link in site.data.navigation %}
{% if link.url contains 'http' %} {% if link.url contains 'http' %}
{% assign domain = '' %} {% assign domain = '' %}
{% else %} {% else %}
{% assign domain = base_path %} {% assign domain = base_path %}
{% endif %} {% endif %}
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li> <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</nav> </nav>
</div><!-- /.top-navigation --> </div><!-- /.top-navigation -->
</div><!-- /.navigation-wrapper --> </div><!-- /.navigation-wrapper -->

4
_includes/toc
View file

@ -1,7 +1,7 @@
<section class="toc"> <aside class="toc">
<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="toc__title"><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
<nav markdown="1"> <nav markdown="1">
* Auto generated table of contents * Auto generated table of contents
{:toc .toc__menu} {:toc .toc__menu}
</nav> </nav>
</section> </aside>

6
_layouts/default.html
View file

@ -16,16 +16,16 @@ layout: compress
{% include navigation %} {% include navigation %}
{% if page.header.image %} {% if page.header.image %}
<div class="image-wrap"> <div class="page__hero">
<img src= <img src=
{% if page.header.image contains "http" %} {% if page.header.image contains "http" %}
"{{ page.header.image }}" "{{ page.header.image }}"
{% else %} {% else %}
"{{ page.header.image | prepend: "/images/" | prepend: base_path }}" "{{ page.header.image | prepend: "/images/" | prepend: base_path }}"
{% endif %} {% endif %}
alt="{{ page.title }}"> alt="{{ page.title }}" class="page__hero-image">
{% if page.header.caption %} {% if page.header.caption %}
<span class="image-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span> <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
{% endif %} {% endif %}
</div><!-- /.image-wrap --> </div><!-- /.image-wrap -->
{% endif %} {% endif %}

6
_layouts/single.html
View file

@ -9,12 +9,12 @@ layout: default
{% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %} {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
{% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %} {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
<div class="article-wrap"> <div class="page__inner-wrap">
<header> <header>
<h1 itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1> <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
</header> </header>
<section itemprop="text"> <section class="page__content" itemprop="text">
{{ content }} {{ content }}
{% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label }}</a></div>{% endif %} {% if page.link %}<div><a href="{{ page.link }}" class="btn">{{ site.data.ui-text[site.locale].ext_link_label }}</a></div>{% endif %}
</section> </section>

2
_pages/category-archive.html
View file

@ -10,7 +10,7 @@ author_profile: false
{% for category in group_names %} {% for category in group_names %}
{% assign posts = group_items[forloop.index0] %} {% assign posts = group_items[forloop.index0] %}
<h2>{{ category }}</h2> <h2 class="archive__subtitle">{{ category }}</h2>
{% for post in posts %} {% for post in posts %}
{% include archive-list-single %} {% include archive-list-single %}
{% endfor %} {% endfor %}

2
_pages/collection-archive.html
View file

@ -12,7 +12,7 @@ author_profile: false
{% unless collection.output == false or collection.label == 'posts' %} {% unless collection.output == false or collection.label == 'posts' %}
{% capture label %}{{ collection.label }}{% endcapture %} {% capture label %}{{ collection.label }}{% endcapture %}
{% if label != written_label %} {% if label != written_label %}
<h2>{{ label }}</h2> <h2 class="archive__subtitle">{{ label }}</h2>
{% capture written_label %}{{ label }}{% endcapture %} {% capture written_label %}{{ label }}{% endcapture %}
{% endif %} {% endif %}
{% endunless %} {% endunless %}

2
_pages/portfolio-archive.html
View file

@ -9,7 +9,7 @@ permalink: /portfolio/
{% for category in group_names %} {% for category in group_names %}
{% assign posts = group_items[forloop.index0] %} {% assign posts = group_items[forloop.index0] %}
<h2>{{ category }}</h2> <h2 class="archive__subtitle">{{ category }}</h2>
{% for post in posts %} {% for post in posts %}
{% include archive-list-single %} {% include archive-list-single %}
{% endfor %} {% endfor %}

2
_pages/recipes-archive.html
View file

@ -10,7 +10,7 @@ author_profile: false
{% for category in group_names %} {% for category in group_names %}
{% assign posts = group_items[forloop.index0] %} {% assign posts = group_items[forloop.index0] %}
<h2>{{ category }}</h2> <h2 class="archive__subtitle">{{ category }}</h2>
{% for post in posts %} {% for post in posts %}
{% include archive-list-single %} {% include archive-list-single %}
{% endfor %} {% endfor %}

2
_pages/tag-archive.html
View file

@ -10,7 +10,7 @@ author_profile: false
{% for tag in group_names %} {% for tag in group_names %}
{% assign posts = group_items[forloop.index0] %} {% assign posts = group_items[forloop.index0] %}
<h2>{{ tag }}</h2> <h2 class="archive__subtitle">{{ tag }}</h2>
{% for post in posts %} {% for post in posts %}
{% include archive-list-single %} {% include archive-list-single %}
{% endfor %} {% endfor %}

2
_pages/year-archive.html
View file

@ -10,7 +10,7 @@ author_profile: false
{% for post in site.posts %} {% for post in site.posts %}
{% capture year %}{{ post.date | date: '%Y' }}{% endcapture %} {% capture year %}{{ post.date | date: '%Y' }}{% endcapture %}
{% if year != written_year %} {% if year != written_year %}
<h2>{{ year }}</h2> <h2 class="archive__subtitle">{{ year }}</h2>
{% capture written_year %}{{ year }}{% endcapture %} {% capture written_year %}{{ year }}{% endcapture %}
{% endif %} {% endif %}
{% include archive-list-single %} {% include archive-list-single %}

18
_posts/2012-01-03-template-table-of-contents-post.md
View file

@ -33,7 +33,7 @@ Below is just about everything you'll need to style in the theme. Check the sour
Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam. Lorem ipsum dolor sit amet, test link adipiscing elit. **This is strong**. Nullam dignissim convallis est. Quisque aliquam.
![Smithsonian Image]({{ site.url }}{{ site.baseurl }}/images/3953273590_704e3899d5_m.jpg) ![Smithsonian Image]({{ site.url }}{{ site.baseurl }}/images/3953273590_704e3899d5_m.jpg)
{: .image-pull-right} {: .image-right}
*This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. *This is emphasized*. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline.Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
@ -74,27 +74,27 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
## Code Snippets ## Code Snippets
{% highlight css %} ```css
#container { #container {
float: left; float: left;
margin: 0 -240px 0 0; margin: 0 -240px 0 0;
width: 100%; width: 100%;
} }
{% endhighlight %} ```
## Buttons ## Buttons
Make any link standout more when applying the `.btn` class. Make any link standout more when applying the `.btn` class.
{% highlight html %} ```html
<a href="#" class="btn btn-success">Success Button</a> <a href="#" class="btn btn-success">Success Button</a>
{% endhighlight %} ```
<div markdown="0"><a href="#" class="btn">Primary Button</a></div> <div markdown="0"><a href="#" class="btn">Primary Button</a></div>
<div markdown="0"><a href="#" class="btn btn-success">Success Button</a></div> <div markdown="0"><a href="#" class="btn btn--success">Success Button</a></div>
<div markdown="0"><a href="#" class="btn btn-warning">Warning Button</a></div> <div markdown="0"><a href="#" class="btn btn--warning">Warning Button</a></div>
<div markdown="0"><a href="#" class="btn btn-danger">Danger Button</a></div> <div markdown="0"><a href="#" class="btn btn--danger">Danger Button</a></div>
<div markdown="0"><a href="#" class="btn btn-info">Info Button</a></div> <div markdown="0"><a href="#" class="btn btn--info">Info Button</a></div>
## Notices ## Notices

2
assets/css/main.css
View file

File diff suppressed because one or more lines are too long