Merge branch 'feature/visual-refresh' into develop
This commit is contained in:
Michael Rose
commit
c7ebe1d4b3
229 changed files with 8624 additions and 3067 deletions
4
Gemfile
4
Gemfile
|
|
@ -1,3 +1,5 @@
|
||||||
source "https://rubygems.org"
|
source "https://rubygems.org"
|
||||||
|
|
||||||
gem "github-pages"
|
gem "github-pages"
|
||||||
|
# gem "jekyll-archives"
|
||||||
|
gem "wdm", "~> 0.1.0" if Gem.win_platform?
|
||||||
42
Gemfile.lock
42
Gemfile.lock
|
|
@ -2,13 +2,13 @@ GEM
|
||||||
remote: https://rubygems.org/
|
remote: https://rubygems.org/
|
||||||
specs:
|
specs:
|
||||||
RedCloth (4.2.9)
|
RedCloth (4.2.9)
|
||||||
activesupport (4.2.5.1)
|
activesupport (4.2.6)
|
||||||
i18n (~> 0.7)
|
i18n (~> 0.7)
|
||||||
json (~> 1.7, >= 1.7.7)
|
json (~> 1.7, >= 1.7.7)
|
||||||
minitest (~> 5.1)
|
minitest (~> 5.1)
|
||||||
thread_safe (~> 0.3, >= 0.3.4)
|
thread_safe (~> 0.3, >= 0.3.4)
|
||||||
tzinfo (~> 1.1)
|
tzinfo (~> 1.1)
|
||||||
addressable (2.3.8)
|
addressable (2.4.0)
|
||||||
coffee-script (2.4.1)
|
coffee-script (2.4.1)
|
||||||
coffee-script-source
|
coffee-script-source
|
||||||
execjs
|
execjs
|
||||||
|
|
@ -20,22 +20,23 @@ GEM
|
||||||
faraday (0.9.2)
|
faraday (0.9.2)
|
||||||
multipart-post (>= 1.2, < 3)
|
multipart-post (>= 1.2, < 3)
|
||||||
ffi (1.9.10)
|
ffi (1.9.10)
|
||||||
|
ffi (1.9.10-x64-mingw32)
|
||||||
gemoji (2.1.0)
|
gemoji (2.1.0)
|
||||||
github-pages (51)
|
github-pages (56)
|
||||||
RedCloth (= 4.2.9)
|
RedCloth (= 4.2.9)
|
||||||
github-pages-health-check (= 1.0.1)
|
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.0.1)
|
jekyll-mentions (= 1.1.1)
|
||||||
jekyll-paginate (= 1.1.0)
|
jekyll-paginate (= 1.1.0)
|
||||||
jekyll-redirect-from (= 0.9.1)
|
jekyll-redirect-from (= 0.9.1)
|
||||||
jekyll-sass-converter (= 1.3.0)
|
jekyll-sass-converter (= 1.3.0)
|
||||||
jekyll-seo-tag (= 1.2.0)
|
jekyll-seo-tag (= 1.3.2)
|
||||||
jekyll-sitemap (= 0.10.0)
|
jekyll-sitemap (= 0.10.0)
|
||||||
jekyll-textile-converter (= 0.1.0)
|
jekyll-textile-converter (= 0.1.0)
|
||||||
jemoji (= 0.5.1)
|
jemoji (= 0.6.1)
|
||||||
kramdown (= 1.9.0)
|
kramdown (= 1.9.0)
|
||||||
liquid (= 3.0.6)
|
liquid (= 3.0.6)
|
||||||
mercenary (~> 0.3)
|
mercenary (~> 0.3)
|
||||||
|
|
@ -43,7 +44,7 @@ GEM
|
||||||
redcarpet (= 3.3.3)
|
redcarpet (= 3.3.3)
|
||||||
rouge (= 1.10.1)
|
rouge (= 1.10.1)
|
||||||
terminal-table (~> 1.4)
|
terminal-table (~> 1.4)
|
||||||
github-pages-health-check (1.0.1)
|
github-pages-health-check (1.1.0)
|
||||||
addressable (~> 2.3)
|
addressable (~> 2.3)
|
||||||
net-dns (~> 0.8)
|
net-dns (~> 0.8)
|
||||||
octokit (~> 4.0)
|
octokit (~> 4.0)
|
||||||
|
|
@ -67,7 +68,7 @@ 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.0.1)
|
jekyll-mentions (1.1.1)
|
||||||
html-pipeline (~> 2.3)
|
html-pipeline (~> 2.3)
|
||||||
jekyll (~> 3.0)
|
jekyll (~> 3.0)
|
||||||
jekyll-paginate (1.1.0)
|
jekyll-paginate (1.1.0)
|
||||||
|
|
@ -75,17 +76,17 @@ GEM
|
||||||
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.2.0)
|
jekyll-seo-tag (1.3.2)
|
||||||
jekyll (>= 2.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.5.1)
|
jemoji (0.6.1)
|
||||||
gemoji (~> 2.0)
|
gemoji (~> 2.0)
|
||||||
html-pipeline (~> 2.2)
|
html-pipeline (~> 2.2)
|
||||||
jekyll (>= 2.0)
|
jekyll (>= 3.0)
|
||||||
json (1.8.3)
|
json (1.8.3)
|
||||||
kramdown (1.9.0)
|
kramdown (1.9.0)
|
||||||
liquid (3.0.6)
|
liquid (3.0.6)
|
||||||
|
|
@ -99,8 +100,10 @@ GEM
|
||||||
net-dns (0.8.0)
|
net-dns (0.8.0)
|
||||||
nokogiri (1.6.7.2)
|
nokogiri (1.6.7.2)
|
||||||
mini_portile2 (~> 2.0.0.rc2)
|
mini_portile2 (~> 2.0.0.rc2)
|
||||||
octokit (4.2.0)
|
nokogiri (1.6.7.2-x64-mingw32)
|
||||||
sawyer (~> 0.6.0, >= 0.5.3)
|
mini_portile2 (~> 2.0.0.rc2)
|
||||||
|
octokit (4.3.0)
|
||||||
|
sawyer (~> 0.7.0, >= 0.5.3)
|
||||||
public_suffix (1.5.3)
|
public_suffix (1.5.3)
|
||||||
rb-fsevent (0.9.7)
|
rb-fsevent (0.9.7)
|
||||||
rb-inotify (0.9.7)
|
rb-inotify (0.9.7)
|
||||||
|
|
@ -109,9 +112,9 @@ 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.4.21)
|
sass (3.3.14)
|
||||||
sawyer (0.6.0)
|
sawyer (0.7.0)
|
||||||
addressable (~> 2.3.5)
|
addressable (>= 2.3.5, < 2.5)
|
||||||
faraday (~> 0.8, < 0.10)
|
faraday (~> 0.8, < 0.10)
|
||||||
terminal-table (1.5.2)
|
terminal-table (1.5.2)
|
||||||
thread_safe (0.3.5)
|
thread_safe (0.3.5)
|
||||||
|
|
@ -119,12 +122,15 @@ GEM
|
||||||
ethon (>= 0.8.0)
|
ethon (>= 0.8.0)
|
||||||
tzinfo (1.2.2)
|
tzinfo (1.2.2)
|
||||||
thread_safe (~> 0.1)
|
thread_safe (~> 0.1)
|
||||||
|
wdm (0.1.1)
|
||||||
|
|
||||||
PLATFORMS
|
PLATFORMS
|
||||||
ruby
|
ruby
|
||||||
|
x64-mingw32
|
||||||
|
|
||||||
DEPENDENCIES
|
DEPENDENCIES
|
||||||
github-pages
|
github-pages
|
||||||
|
wdm (~> 0.1.0)
|
||||||
|
|
||||||
BUNDLED WITH
|
BUNDLED WITH
|
||||||
1.11.2
|
1.11.2
|
||||||
|
|
|
||||||
|
|
@ -1,137 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Coderay syntax highlighting
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.CodeRay {
|
|
||||||
background-color: #efefef;
|
|
||||||
font-family: $code-font;
|
|
||||||
@include font(12);
|
|
||||||
color: #333332;
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
@include rounded(4px);
|
|
||||||
pre {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.CodeRay { }
|
|
||||||
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
|
|
||||||
|
|
||||||
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
|
|
||||||
table.CodeRay td {
|
|
||||||
padding: 1em 0.5em;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeRay .line-numbers, .CodeRay .no {
|
|
||||||
background-color: #ECECEC;
|
|
||||||
color: #AAA;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeRay .line-numbers a {
|
|
||||||
color: #AAA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CodeRay .line-numbers tt { font-weight: bold }
|
|
||||||
.CodeRay .line-numbers .highlighted { color: red }
|
|
||||||
.CodeRay .line { display: block; float: left; width: 100%; }
|
|
||||||
.CodeRay span.line-numbers { padding: 0 24px 0 4px }
|
|
||||||
.CodeRay .code { width: 100% }
|
|
||||||
|
|
||||||
ol.CodeRay { font-size: 10pt }
|
|
||||||
ol.CodeRay li { white-space: pre }
|
|
||||||
|
|
||||||
.CodeRay .code pre { overflow: auto }
|
|
||||||
.CodeRay .debug { color:white ! important; background:blue ! important; }
|
|
||||||
|
|
||||||
.CodeRay .annotation { color:#007 }
|
|
||||||
.CodeRay .attribute-name { color:#f08 }
|
|
||||||
.CodeRay .attribute-value { color:#700 }
|
|
||||||
.CodeRay .binary { color:#509; font-weight:bold }
|
|
||||||
.CodeRay .comment { color:#998; font-style: italic;}
|
|
||||||
.CodeRay .char { color:#04D }
|
|
||||||
.CodeRay .char .content { color:#04D }
|
|
||||||
.CodeRay .char .delimiter { color:#039 }
|
|
||||||
.CodeRay .class { color:#458; font-weight:bold }
|
|
||||||
.CodeRay .complex { color:#A08; font-weight:bold }
|
|
||||||
.CodeRay .constant { color:teal; }
|
|
||||||
.CodeRay .color { color:#0A0 }
|
|
||||||
.CodeRay .class-variable { color:#369 }
|
|
||||||
.CodeRay .decorator { color:#B0B; }
|
|
||||||
.CodeRay .definition { color:#099; font-weight:bold }
|
|
||||||
.CodeRay .directive { color:#088; font-weight:bold }
|
|
||||||
.CodeRay .delimiter { color:black }
|
|
||||||
.CodeRay .doc { color:#970 }
|
|
||||||
.CodeRay .doctype { color:#34b }
|
|
||||||
.CodeRay .doc-string { color:#D42; font-weight:bold }
|
|
||||||
.CodeRay .escape { color:#666; font-weight:bold }
|
|
||||||
.CodeRay .entity { color:#800; font-weight:bold }
|
|
||||||
.CodeRay .error { color:#F00; background-color:#FAA }
|
|
||||||
.CodeRay .exception { color:#C00; font-weight:bold }
|
|
||||||
.CodeRay .filename { color:#099; }
|
|
||||||
.CodeRay .function { color:#900; font-weight:bold }
|
|
||||||
.CodeRay .global-variable { color:teal; font-weight:bold }
|
|
||||||
.CodeRay .hex { color:#058; font-weight:bold }
|
|
||||||
.CodeRay .integer { color:#099; }
|
|
||||||
.CodeRay .include { color:#B44; font-weight:bold }
|
|
||||||
.CodeRay .inline { color: black }
|
|
||||||
.CodeRay .inline .inline { background: #ccc }
|
|
||||||
.CodeRay .inline .inline .inline { background: #bbb }
|
|
||||||
.CodeRay .inline .inline-delimiter { color: #D14; }
|
|
||||||
.CodeRay .inline-delimiter { color: #D14; }
|
|
||||||
.CodeRay .important { color:#f00; }
|
|
||||||
.CodeRay .interpreted { color:#B2B; font-weight:bold }
|
|
||||||
.CodeRay .instance-variable { color:teal }
|
|
||||||
.CodeRay .label { color:#970; font-weight:bold }
|
|
||||||
.CodeRay .local-variable { color:#963 }
|
|
||||||
.CodeRay .octal { color:#40E; font-weight:bold }
|
|
||||||
.CodeRay .operator { }
|
|
||||||
.CodeRay .predefined-constant { font-weight:bold }
|
|
||||||
.CodeRay .predefined { color:#369; font-weight:bold }
|
|
||||||
.CodeRay .preprocessor { color:#579; }
|
|
||||||
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
|
|
||||||
.CodeRay .predefined-type { color:#074; font-weight:bold }
|
|
||||||
.CodeRay .reserved, .keyword { color:#000; font-weight:bold }
|
|
||||||
|
|
||||||
.CodeRay .key { color: #808; }
|
|
||||||
.CodeRay .key .delimiter { color: #606; }
|
|
||||||
.CodeRay .key .char { color: #80f; }
|
|
||||||
.CodeRay .value { color: #088; }
|
|
||||||
|
|
||||||
.CodeRay .regexp { background-color:#fff0ff }
|
|
||||||
.CodeRay .regexp .content { color:#808 }
|
|
||||||
.CodeRay .regexp .delimiter { color:#404 }
|
|
||||||
.CodeRay .regexp .modifier { color:#C2C }
|
|
||||||
.CodeRay .regexp .function { color:#404; font-weight: bold }
|
|
||||||
|
|
||||||
.CodeRay .string { color: #D20; }
|
|
||||||
.CodeRay .string .string { }
|
|
||||||
.CodeRay .string .string .string { background-color:#ffd0d0 }
|
|
||||||
.CodeRay .string .content { color: #D14; }
|
|
||||||
.CodeRay .string .char { color: #D14; }
|
|
||||||
.CodeRay .string .delimiter { color: #D14; }
|
|
||||||
|
|
||||||
.CodeRay .shell { color:#D14 }
|
|
||||||
.CodeRay .shell .content { }
|
|
||||||
.CodeRay .shell .delimiter { color:#D14 }
|
|
||||||
|
|
||||||
.CodeRay .symbol { color:#990073 }
|
|
||||||
.CodeRay .symbol .content { color:#A60 }
|
|
||||||
.CodeRay .symbol .delimiter { color:#630 }
|
|
||||||
|
|
||||||
.CodeRay .tag { color:#070 }
|
|
||||||
.CodeRay .tag-special { color:#D70; font-weight:bold }
|
|
||||||
.CodeRay .type { color:#339; font-weight:bold }
|
|
||||||
.CodeRay .variable { color:#036 }
|
|
||||||
|
|
||||||
.CodeRay .insert { background: #afa; }
|
|
||||||
.CodeRay .delete { background: #faa; }
|
|
||||||
.CodeRay .change { color: #aaf; background: #007; }
|
|
||||||
.CodeRay .head { color: #f8f; background: #505 }
|
|
||||||
|
|
||||||
.CodeRay .insert .insert { color: #080; font-weight:bold }
|
|
||||||
.CodeRay .delete .delete { color: #800; font-weight:bold }
|
|
||||||
.CodeRay .change .change { color: #66f; }
|
|
||||||
.CodeRay .head .head { color: #f4f; }
|
|
||||||
|
|
@ -1,166 +0,0 @@
|
||||||
/*
|
|
||||||
Rules
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
hr {
|
|
||||||
display: block;
|
|
||||||
margin: 1em 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 1px;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid #ccc;
|
|
||||||
border-bottom: 1px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Figures and images
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin-bottom: $indent-var;
|
|
||||||
}
|
|
||||||
|
|
||||||
article img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-width: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
-ms-interpolation-mode: bicubic;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 2 images of equal dimensions in a row */
|
|
||||||
|
|
||||||
.half {
|
|
||||||
@include container;
|
|
||||||
@include clearfix;
|
|
||||||
@media #{$micro} {
|
|
||||||
img {
|
|
||||||
@include grid(12,6);
|
|
||||||
}
|
|
||||||
figcaption {
|
|
||||||
@include grid(12,12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 3 images of equal dimensions in a row */
|
|
||||||
|
|
||||||
.third {
|
|
||||||
@include container;
|
|
||||||
@include clearfix;
|
|
||||||
@media #{$micro} {
|
|
||||||
img {
|
|
||||||
@include grid(12,4);
|
|
||||||
}
|
|
||||||
figcaption {
|
|
||||||
@include grid(12,12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Buttons
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* Default button */
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 8px 20px;
|
|
||||||
@include font-rem(14);
|
|
||||||
font-family: $heading-font;
|
|
||||||
font-weight: 700;
|
|
||||||
background-color: $primary;
|
|
||||||
color: $white;
|
|
||||||
border-width: 2px !important;
|
|
||||||
border-style: solid !important;
|
|
||||||
border-color: $primary;
|
|
||||||
text-decoration: none !important;
|
|
||||||
@include rounded(3px);
|
|
||||||
&:visited {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $white;
|
|
||||||
color: $primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Success button */
|
|
||||||
|
|
||||||
.btn-success {
|
|
||||||
background-color: $success;
|
|
||||||
color: $white;
|
|
||||||
border-color: $success;
|
|
||||||
&:visited {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $white;
|
|
||||||
color: $success;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Warning button */
|
|
||||||
|
|
||||||
.btn-warning {
|
|
||||||
background-color: $warning;
|
|
||||||
color: $white;
|
|
||||||
border-color: $warning;
|
|
||||||
&:visited {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $white;
|
|
||||||
color: $warning;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Danger button */
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background-color: $danger;
|
|
||||||
color: $white;
|
|
||||||
border-color: $danger;
|
|
||||||
&:visited {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $white;
|
|
||||||
color: $danger;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Information button */
|
|
||||||
|
|
||||||
.btn-info {
|
|
||||||
background-color: $info;
|
|
||||||
color: $white;
|
|
||||||
border-color: $info;
|
|
||||||
&:visited {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $white;
|
|
||||||
color: $info;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Wells
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.well {
|
|
||||||
min-height: 20px;
|
|
||||||
padding: 19px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border: 1px solid #e3e3e3;
|
|
||||||
@include rounded(4px);
|
|
||||||
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.05));
|
|
||||||
}
|
|
||||||
|
|
@ -1,273 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Forms
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
btnform {
|
|
||||||
margin: 0 0 5px 0;
|
|
||||||
fieldset {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding: 0;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 5px * 2;
|
|
||||||
*margin-left: -7px;
|
|
||||||
padding: 0;
|
|
||||||
color: $textcolor;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid lighten($black, 80);
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: 5px / 2;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0 0 5px 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
br {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
label,
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
vertical-align: baseline;
|
|
||||||
*vertical-align: middle;
|
|
||||||
}
|
|
||||||
input,
|
|
||||||
button,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: $base-font;
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px / 8;
|
|
||||||
font-weight: bold;
|
|
||||||
color: $textcolor;
|
|
||||||
cursor: pointer;
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 4px;
|
|
||||||
margin-bottom: 5px / 4;
|
|
||||||
background-color: $white;
|
|
||||||
border: 1px solid lighten($black, 80);
|
|
||||||
color: $textcolor;
|
|
||||||
&:hover {
|
|
||||||
border-color: lighten($accentcolor, 50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input-mini {
|
|
||||||
width: 60px;
|
|
||||||
}
|
|
||||||
.input-small {
|
|
||||||
width: 90px;
|
|
||||||
}
|
|
||||||
input[type="image"],
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
padding: 0;
|
|
||||||
margin: 3px 0;
|
|
||||||
*margin-top: 0;
|
|
||||||
line-height: normal;
|
|
||||||
cursor: pointer;
|
|
||||||
@include rounded(0);
|
|
||||||
border: 0 \9;
|
|
||||||
}
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
padding: 0;
|
|
||||||
*width: 13px;
|
|
||||||
*height: 13px;
|
|
||||||
}
|
|
||||||
input[type="image"] {
|
|
||||||
border: 0;
|
|
||||||
@include box-shadow(none);
|
|
||||||
}
|
|
||||||
input[type="file"] {
|
|
||||||
width: auto;
|
|
||||||
padding: initial;
|
|
||||||
line-height: initial;
|
|
||||||
border: initial;
|
|
||||||
background-color: transparent;
|
|
||||||
background-color: initial;
|
|
||||||
@include box-shadow(none);
|
|
||||||
}
|
|
||||||
input[type="button"],
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="submit"] {
|
|
||||||
width : auto;
|
|
||||||
height : auto;
|
|
||||||
cursor : pointer;
|
|
||||||
*overflow : visible;
|
|
||||||
}
|
|
||||||
select,
|
|
||||||
input[type="file"] {
|
|
||||||
*margin-top : 4px;
|
|
||||||
}
|
|
||||||
select {
|
|
||||||
width : auto;
|
|
||||||
background-color : $white;
|
|
||||||
}
|
|
||||||
select[multiple],
|
|
||||||
select[size] {
|
|
||||||
height : auto;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
@include resize(vertical);
|
|
||||||
height : auto;
|
|
||||||
overflow : auto;
|
|
||||||
vertical-align : top;
|
|
||||||
}
|
|
||||||
input[type="hidden"] {
|
|
||||||
display : none;
|
|
||||||
}
|
|
||||||
.radio,
|
|
||||||
.checkbox {
|
|
||||||
padding-left : 18px;
|
|
||||||
font-weight : normal;
|
|
||||||
}
|
|
||||||
.radio input[type="radio"],
|
|
||||||
.checkbox input[type="checkbox"] {
|
|
||||||
float : left;
|
|
||||||
margin-left : -18px;
|
|
||||||
}
|
|
||||||
.radio.inline,
|
|
||||||
.checkbox.inline {
|
|
||||||
display : inline-block;
|
|
||||||
padding-top : 5px;
|
|
||||||
margin-bottom : 0;
|
|
||||||
vertical-align : middle;
|
|
||||||
}
|
|
||||||
.radio.inline + .radio.inline,
|
|
||||||
.checkbox.inline + .checkbox.inline {
|
|
||||||
margin-left : 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Disabled state
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
input[disabled],
|
|
||||||
select[disabled],
|
|
||||||
textarea[disabled],
|
|
||||||
input[readonly],
|
|
||||||
select[readonly],
|
|
||||||
textarea[readonly] {
|
|
||||||
@include opacity(.5);
|
|
||||||
cursor : not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Focus & active state
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
input:focus,
|
|
||||||
textarea:focus {
|
|
||||||
border-color : $accentcolor;
|
|
||||||
outline : 0;
|
|
||||||
outline : thin dotted \9;
|
|
||||||
}
|
|
||||||
input[type="file"]:focus,
|
|
||||||
input[type="radio"]:focus,
|
|
||||||
input[type="checkbox"]:focus,
|
|
||||||
select:focus {
|
|
||||||
@include box-shadow(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Help text
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.help-block,
|
|
||||||
.help-inline {
|
|
||||||
color : lighten($black, 50);
|
|
||||||
}
|
|
||||||
.help-block {
|
|
||||||
display : block;
|
|
||||||
margin-bottom : 1em;
|
|
||||||
line-height : 1em;
|
|
||||||
}
|
|
||||||
.help-inline {
|
|
||||||
display : inline-block;
|
|
||||||
vertical-align : middle;
|
|
||||||
padding-left : 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
.form-inline
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.form-inline input,
|
|
||||||
.form-inline textarea,
|
|
||||||
.form-inline select {
|
|
||||||
display : inline-block;
|
|
||||||
margin-bottom : 0;
|
|
||||||
}
|
|
||||||
.form-inline label {
|
|
||||||
display : inline-block;
|
|
||||||
}
|
|
||||||
.form-inline .radio,
|
|
||||||
.form-inline .checkbox,
|
|
||||||
.form-inline .radio {
|
|
||||||
padding-left : 0;
|
|
||||||
margin-bottom : 0;
|
|
||||||
vertical-align : middle;
|
|
||||||
}
|
|
||||||
.form-inline .radio input[type="radio"],
|
|
||||||
.form-inline .checkbox input[type="checkbox"] {
|
|
||||||
float : left;
|
|
||||||
margin-left : 0;
|
|
||||||
margin-right : 3px; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
.form-search
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.form-search input,
|
|
||||||
.form-search textarea,
|
|
||||||
.form-search select {
|
|
||||||
display : inline-block;
|
|
||||||
margin-bottom : 0;
|
|
||||||
}
|
|
||||||
.form-search .search-query {
|
|
||||||
padding-left : 14px;
|
|
||||||
padding-right : 14px;
|
|
||||||
margin-bottom : 0;
|
|
||||||
@include rounded(14px);
|
|
||||||
}
|
|
||||||
.form-search label {
|
|
||||||
display : inline-block;
|
|
||||||
}
|
|
||||||
.form-search .radio,
|
|
||||||
.form-search .checkbox,
|
|
||||||
.form-inline .radio {
|
|
||||||
padding-left : 0;
|
|
||||||
margin-bottom : 0;
|
|
||||||
vertical-align : middle;
|
|
||||||
}
|
|
||||||
.form-search .radio input[type="radio"],
|
|
||||||
.form-search .checkbox input[type="checkbox"] {
|
|
||||||
float : left;
|
|
||||||
margin-left : 0;
|
|
||||||
margin-right : 3px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Grid mixins
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
Define number of columns in the grid
|
|
||||||
Common values would be 12, 16 or 24
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
$width: 100%;
|
|
||||||
$def_grid: 12;
|
|
||||||
$margin: 0;
|
|
||||||
|
|
||||||
@mixin container(){
|
|
||||||
margin:0 auto;
|
|
||||||
width:$width;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Works out the width of elements based on total number of columns and width
|
|
||||||
number of columns being displayed. Removes 20px for margins.
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
|
|
||||||
display:$display;
|
|
||||||
float:$float;
|
|
||||||
width:(100%/$grid * $cols) - ($margin * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add x amount of column padding before an element
|
|
||||||
Example: @include prefix(1,12);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin prefix($grid:$def_grid,$cols:''){
|
|
||||||
margin-left:(100%/$grid * $cols);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Add x amount of column padding after an element
|
|
||||||
Example: @include suffix(2,12);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin suffix($grid:$def_grid,$cols:''){
|
|
||||||
margin-right:(100%/$grid * $cols);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove left margin
|
|
||||||
Example: @include first;
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin first(){
|
|
||||||
margin-left:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Remove right margin
|
|
||||||
Example: @include last;
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin last(){
|
|
||||||
margin-right:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Push an element x amount of column(s) to the right
|
|
||||||
Example: @include push(2,12);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin push($grid:$def_grid,$move:'') {
|
|
||||||
position:relative;
|
|
||||||
left:(100%/$grid * $move);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Pull an element x amount of column(s) to the left
|
|
||||||
Example: @include pull(1,12);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin pull($grid:$def_grid,$move:''){
|
|
||||||
position:relative;
|
|
||||||
left:(100%/$grid * $move) * -1;
|
|
||||||
}
|
|
||||||
|
|
@ -1,376 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Utility mixins
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
Clearfix
|
|
||||||
For clearing floats like a boss h5bp.com/q
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin clearfix {
|
|
||||||
*zoom: 1;
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
/* Fixes Opera/contenteditable bug: */
|
|
||||||
/* http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 */
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Webkit-style focus
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin tab-focus() {
|
|
||||||
/* Default */
|
|
||||||
outline: thin dotted #333;
|
|
||||||
/* Webkit */
|
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
|
||||||
outline-offset: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Center-align a block level element
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin center-block() {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Typography related mixins
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
Maintains vertical rhythm by setting a font-sizes proportional to
|
|
||||||
line-height and bottom margin
|
|
||||||
example: @font-size(16);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin font-size($size) {
|
|
||||||
font-size: 0px + $size;
|
|
||||||
font-size: 0rem + $size / $doc-font-size;
|
|
||||||
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
|
||||||
margin-bottom: 0px + $doc-line-height;
|
|
||||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Just font-size (REMs + pixel fallback)
|
|
||||||
example: @include font-rem(16);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin font-rem($size) {
|
|
||||||
font-size: 0px + $size;
|
|
||||||
font-size: 0rem + $size / $doc-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Just font-size (REMs + pixel fallback) and line-height
|
|
||||||
@include font(16);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin font($size) {
|
|
||||||
font-size: 0px + $size;
|
|
||||||
font-size: 0rem + $size / $doc-font-size;
|
|
||||||
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Hide text overflow and end with ...
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin text-overflow() {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Indentation variable */
|
|
||||||
|
|
||||||
$indent-var: 0rem + ($doc-line-height / $doc-font-size);
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Gradient mixins
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
|
|
||||||
background-color: $endColor;
|
|
||||||
background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
||||||
background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
||||||
background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
|
||||||
background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
|
||||||
background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
|
||||||
background-image : linear-gradient(left, $startColor, $endColor); // W3C
|
|
||||||
background-repeat : repeat-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin vertical($startColor : $white, $endColor: $lightergrey) {
|
|
||||||
background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
||||||
background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
||||||
background-color : $endColor;
|
|
||||||
background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
|
||||||
background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
|
||||||
background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
|
||||||
background-image : linear-gradient(top, $startColor, $endColor); // W3C
|
|
||||||
background-repeat : repeat-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
|
|
||||||
background-color : $endColor;
|
|
||||||
background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
|
||||||
background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
|
||||||
background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
||||||
background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
|
||||||
background-image : linear-gradient($deg, $startColor, $endColor); // W3C
|
|
||||||
background-repeat : repeat-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
// .bordered(COLOR, COLOR, COLOR, COLOR);
|
|
||||||
@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
|
|
||||||
border-top : solid 1px $top-color;
|
|
||||||
border-left : solid 1px $left-color;
|
|
||||||
border-right : solid 1px $right-color;
|
|
||||||
border-bottom : solid 1px $bottom-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Rounded corners
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Round all corners
|
|
||||||
example: @include rounded(4px);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin rounded($radius:4px) {
|
|
||||||
border-radius : $radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Round individual corners (top right, bottom right, bottom left, top left)
|
|
||||||
example: @include border-radius(4px, 0, 0, 4px);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
|
|
||||||
border-top-right-radius: $topright;
|
|
||||||
border-bottom-right-radius: $bottomright;
|
|
||||||
border-bottom-left-radius: $bottomleft;
|
|
||||||
border-top-left-radius: $topleft;
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
-moz-background-clip: padding;
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Box shadow
|
|
||||||
example: @include box-shadow(HORIZONTAL VERTICAL BLUR COLOR));
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
|
||||||
-webkit-box-shadow: $shadow;
|
|
||||||
-moz-box-shadow: $shadow;
|
|
||||||
box-shadow: $shadow;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Drop shadow
|
|
||||||
example: @include drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
|
|
||||||
-webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
|
||||||
-moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
|
||||||
box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Text shadow
|
|
||||||
example: @include text-shadow(0 2px 3px rgba(0,0,0,.25));
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
|
||||||
text-shadow: $shadow; }
|
|
||||||
|
|
||||||
/*
|
|
||||||
Opacity
|
|
||||||
example: @include opacity(0.5); // 50% opacity
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin opacity($opacity: 0.5) {
|
|
||||||
opacity: $opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Transformations
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
@include rotate(VALUEdeg);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin rotate($deg) {
|
|
||||||
-webkit-transform: rotate($deg);
|
|
||||||
-moz-transform: rotate($deg);
|
|
||||||
-ms-transform: rotate($deg);
|
|
||||||
-o-transform: rotate($deg);
|
|
||||||
transform: rotate($deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
@include scale(VALUE);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin scale($ratio) {
|
|
||||||
-webkit-transform: scale($ratio);
|
|
||||||
-moz-transform: scale($ratio);
|
|
||||||
-ms-transform: scale($ratio);
|
|
||||||
-o-transform: scale($ratio);
|
|
||||||
transform: scale($ratio);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
@include skew(VALUE, VALUE);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin skew($x: 0, $y: 0) {
|
|
||||||
-webkit-transform: skew($x, $y);
|
|
||||||
-moz-transform: skew($x, $y);
|
|
||||||
-ms-transform: skew($x, $y);
|
|
||||||
-o-transform: skew($x, $y);
|
|
||||||
transform: skew($x, $y);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
@include transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin transition($transition) {
|
|
||||||
-webkit-transition: $transition;
|
|
||||||
-moz-transition: $transition;
|
|
||||||
-ms-transition: $transition;
|
|
||||||
-o-transition: $transition;
|
|
||||||
transition: $transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
@include translate(VALUE, VALUE);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin translate($x: 0, $y: 0) {
|
|
||||||
-webkit-transform: translate($x, $y);
|
|
||||||
-moz-transform: translate($x, $y);
|
|
||||||
-ms-transform: translate($x, $y);
|
|
||||||
-o-transform: translate($x, $y);
|
|
||||||
transform: translate($x, $y);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin translate3d($x: 0, $y: 0, $z: 0) {
|
|
||||||
-webkit-transform: translate($x, $y, $z);
|
|
||||||
-moz-transform: translate($x, $y, $z);
|
|
||||||
-ms-transform: translate($x, $y, $z);
|
|
||||||
-o-transform: translate($x, $y, $z);
|
|
||||||
transform: translate($x, $y, $z);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
|
|
||||||
-webkit-animation: $name $duration $delay $ease;
|
|
||||||
-moz-animation: $name $duration $delay $ease;
|
|
||||||
-ms-animation: $name $duration $delay $ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Background
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
@include background-alpha(VALUE VALUE);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin background-alpha($color: $white, $alpha: 1) {
|
|
||||||
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
@include background-size(VALUE VALUE);
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin background-size($size){
|
|
||||||
-webkit-background-size: $size;
|
|
||||||
-moz-background-size: $size;
|
|
||||||
-o-background-size: $size;
|
|
||||||
background-size: $size;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Box-sizing
|
|
||||||
example: @include box-sizing(VALUE); //(border-box, padding-box, content-box)
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin box-sizing($boxsize: border-box) {
|
|
||||||
-webkit-box-sizing: $boxsize;
|
|
||||||
-moz-box-sizing: $boxsize;
|
|
||||||
-ms-box-sizing: $boxsize;
|
|
||||||
box-sizing: $boxsize;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Image replacement
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin hide-text() {
|
|
||||||
text-indent: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Hide from visual and speaking browsers
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin hidden {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Hide but maintain layout
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin invisible() {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Resize
|
|
||||||
example: @include resize(VALUE); //(none, both, horizontal, vertical, inherit)
|
|
||||||
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin resize($direction: both) {
|
|
||||||
resize: $direction;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Hidden but available to speaking browsers
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@mixin visuallyhidden() {
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
clip: rect(0 0 0 0);
|
|
||||||
height: 1px;
|
|
||||||
width: 1px;
|
|
||||||
margin: -1px;
|
|
||||||
padding: 0;
|
|
||||||
border: 0; }
|
|
||||||
|
|
@ -1,398 +0,0 @@
|
||||||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
HTML5 display definitions
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct `block` display not defined in IE 8/9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
details,
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
hgroup,
|
|
||||||
main,
|
|
||||||
nav,
|
|
||||||
section,
|
|
||||||
summary {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct `inline-block` display not defined in IE 8/9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
audio,
|
|
||||||
canvas,
|
|
||||||
video {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent modern browsers from displaying `audio` without controls.
|
|
||||||
* Remove excess height in iOS 5 devices.
|
|
||||||
*/
|
|
||||||
|
|
||||||
audio:not([controls]) {
|
|
||||||
display: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address styling not present in IE 8/9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Base
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Set default font family to sans-serif.
|
|
||||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
|
||||||
* user zoom.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: sans-serif; /* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
|
||||||
-ms-text-size-adjust: 100%; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove default margin.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Links
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address `outline` inconsistency between Chrome and other browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a:focus {
|
|
||||||
outline: thin dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Improve readability when focused and also mouse hovered in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Typography
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address variable `h1` font-size and margin within `section` and `article`
|
|
||||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: 1px dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address styling not present in Safari 5 and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
dfn {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address differences between Firefox and other browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address styling not present in IE 8/9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background: #ff0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct font family set oddly in Safari 5 and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
pre,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, serif;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Improve readability of pre-formatted text in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre {
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set consistent quote types.
|
|
||||||
*/
|
|
||||||
|
|
||||||
q {
|
|
||||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address inconsistent and variable font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Embedded content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove border when inside `a` element in IE 8/9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct overflow displayed oddly in IE 9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Figures
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address margin not present in IE 8/9 and Safari 5.
|
|
||||||
*/
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Forms
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Define consistent border, margin, and padding.
|
|
||||||
*/
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid #c0c0c0;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct `color` not being inherited in IE 8/9.
|
|
||||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
|
||||||
*/
|
|
||||||
|
|
||||||
legend {
|
|
||||||
border: 0; /* 1 */
|
|
||||||
padding: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct font family not being inherited in all browsers.
|
|
||||||
* 2. Correct font size not being inherited in all browsers.
|
|
||||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit; /* 1 */
|
|
||||||
font-size: 100%; /* 2 */
|
|
||||||
margin: 0; /* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
|
||||||
* the UA stylesheet.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
|
||||||
* All other form control elements do not inherit `text-transform` values.
|
|
||||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
|
||||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
|
||||||
* and `video` controls.
|
|
||||||
* 2. Correct inability to style clickable `input` types in iOS.
|
|
||||||
* 3. Improve usability and consistency of cursor style between image-type
|
|
||||||
* `input` and others.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
html input[type="button"], /* 1 */
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="submit"] {
|
|
||||||
-webkit-appearance: button; /* 2 */
|
|
||||||
cursor: pointer; /* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Re-set default cursor for disabled elements.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button[disabled],
|
|
||||||
html input[disabled] {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
|
||||||
* 2. Remove excess padding in IE 8/9.
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
padding: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
|
||||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
|
||||||
* (include `-moz` to future-proof).
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-appearance: textfield; /* 1 */
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
-webkit-box-sizing: content-box; /* 2 */
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
|
||||||
* on OS X.
|
|
||||||
*/
|
|
||||||
|
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
|
||||||
input[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove inner padding and border in Firefox 4+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
input::-moz-focus-inner {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
|
||||||
* 2. Improve readability and alignment in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto; /* 1 */
|
|
||||||
vertical-align: top; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Tables
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove most spacing between table cells.
|
|
||||||
*/
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
width: 100%; /* make full width */
|
|
||||||
}
|
|
||||||
|
|
@ -1,732 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Page layout
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: $bodycolor;
|
|
||||||
font-family: $base-font;
|
|
||||||
color: $text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Header
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.navigation-wrapper {
|
|
||||||
@include container;
|
|
||||||
padding: 2em 0 1em;
|
|
||||||
font-family: $heading-font;
|
|
||||||
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;
|
|
||||||
@include font-rem(24);
|
|
||||||
@media #{$small} {
|
|
||||||
@include grid(12,2);
|
|
||||||
@include prefix(12,0.5);
|
|
||||||
@include suffix(12,0.5);
|
|
||||||
@include font-rem(16);
|
|
||||||
}
|
|
||||||
@media #{$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;
|
|
||||||
@media #{$small} {
|
|
||||||
@include grid(12,9);
|
|
||||||
@include prefix(12,0);
|
|
||||||
@include suffix(12,0);
|
|
||||||
}
|
|
||||||
@media #{$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($black,80);
|
|
||||||
border-bottom: 1px solid fade($black,10);
|
|
||||||
@include font-rem(16);
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: 0 solid transparent;
|
|
||||||
}
|
|
||||||
@media #{$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 transition(all .2s);
|
|
||||||
@media #{$small} {
|
|
||||||
display: inline;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animated lines for mobile nav button */
|
|
||||||
$button-size: 1.5rem;
|
|
||||||
@mixin navicon-line() {
|
|
||||||
display: inline-block;
|
|
||||||
width: $button-size;
|
|
||||||
height: $button-size/7;
|
|
||||||
// line color
|
|
||||||
background: $white;
|
|
||||||
border-radius: $button-size/14;
|
|
||||||
transition: .3s;
|
|
||||||
}
|
|
||||||
.navicon-lines-button {
|
|
||||||
padding: $button-size/4 $button-size/2;
|
|
||||||
transition: .3s;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
border-radius: $button-size/7;
|
|
||||||
}
|
|
||||||
.navicon-lines-button:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.navicon-lines-button:active {
|
|
||||||
transition: 0;
|
|
||||||
}
|
|
||||||
.navicon-lines {
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: $button-size/5;
|
|
||||||
// create middle line
|
|
||||||
@include navicon-line;
|
|
||||||
position: relative;
|
|
||||||
// create the upper and lower lines as pseudo-elements of the middle line
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
@include navicon-line;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
content: '';
|
|
||||||
-webkit-transform-origin: $button-size/14 center;
|
|
||||||
transform-origin: $button-size/14 center;
|
|
||||||
}
|
|
||||||
&:before { top: $button-size/4; }
|
|
||||||
&:after { top: -$button-size/4; }
|
|
||||||
}
|
|
||||||
.navicon-lines-button:hover {
|
|
||||||
opacity: 1;
|
|
||||||
.navicon-lines {
|
|
||||||
&:before { top: $button-size/3.5; }
|
|
||||||
&:after { top: -$button-size/3.5; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navicon-lines-button.x.active .navicon-lines {
|
|
||||||
// hide the middle line
|
|
||||||
background: transparent;
|
|
||||||
// overlap the lines by setting both their top values to 0
|
|
||||||
&:before,
|
|
||||||
&:after {
|
|
||||||
-webkit-transform-origin: 50% 50%;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
top: 0;
|
|
||||||
width: $button-size;
|
|
||||||
}
|
|
||||||
// rotate the lines to form the x shape
|
|
||||||
&:before {
|
|
||||||
-webkit-transform: rotate3d(0,0,1,45deg);
|
|
||||||
transform: rotate3d(0,0,1,45deg);
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
-webkit-transform: rotate3d(0,0,1,-45deg);
|
|
||||||
transform: rotate3d(0,0,1,-45deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Style the toggle menu link and hide it
|
|
||||||
.nav .navtoggle {
|
|
||||||
@include font-rem(18);
|
|
||||||
font-weight: normal;
|
|
||||||
background-color: $black;
|
|
||||||
color: $white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
@media #{$small} {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav button {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
.navtoggle i {
|
|
||||||
z-index:-1;
|
|
||||||
}
|
|
||||||
.icon-menu {
|
|
||||||
position: relative;
|
|
||||||
top: 3px;
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
// When JavaScript is disabled, we hide the toggle button
|
|
||||||
.no-js .nav .navtoggle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
// When JavaScript is disabled, we show the menu
|
|
||||||
.no-js .nav ul {
|
|
||||||
max-height: 30em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
// When JavaScript is enabled, we hide the menu
|
|
||||||
.js .nav ul {
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
@media #{$small} {
|
|
||||||
max-height: 30em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Displaying the menu when the user has clicked on the button
|
|
||||||
.js .nav .active + ul {
|
|
||||||
max-height: 30em;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-transition: max-height .4s;
|
|
||||||
-moz-transition: max-height .4s;
|
|
||||||
-o-transition: max-height .4s;
|
|
||||||
-ms-transition: max-height .4s;
|
|
||||||
transition: max-height .4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Main content */
|
|
||||||
#main {
|
|
||||||
counter-reset: captions;
|
|
||||||
@include container;
|
|
||||||
@include clearfix;
|
|
||||||
clear: both;
|
|
||||||
margin-top: 2em;
|
|
||||||
h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.post {
|
|
||||||
@include container;
|
|
||||||
@include grid(12,10);
|
|
||||||
@include prefix(12,1);
|
|
||||||
@include suffix(12,1);
|
|
||||||
margin-bottom: 2em;
|
|
||||||
@media #{$small} {
|
|
||||||
@include grid(12,8);
|
|
||||||
@include prefix(12,0);
|
|
||||||
@include suffix(12,0);
|
|
||||||
}
|
|
||||||
@media #{$large} {
|
|
||||||
@include grid(12,6);
|
|
||||||
}
|
|
||||||
@media #{$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;
|
|
||||||
@media #{$small} {
|
|
||||||
@include grid(12,8);
|
|
||||||
@include prefix(12,0);
|
|
||||||
@include suffix(12,0);
|
|
||||||
}
|
|
||||||
@media #{$large} {
|
|
||||||
@include grid(12,6);
|
|
||||||
}
|
|
||||||
@media #{$x-large} {
|
|
||||||
@include grid(12,5);
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
padding-bottom: .5em;
|
|
||||||
@include font-rem(28);
|
|
||||||
border-bottom: 1px solid lighten($black,70);
|
|
||||||
}
|
|
||||||
article {
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
@include font-rem(20);
|
|
||||||
&.link-post {
|
|
||||||
margin-bottom: 0px + $doc-line-height;
|
|
||||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
@include font-rem(14);
|
|
||||||
}
|
|
||||||
p+p {
|
|
||||||
text-indent: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Large feature header image */
|
|
||||||
.image-wrap {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
@include clearfix;
|
|
||||||
&:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 8%;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border: 10px solid transparent;
|
|
||||||
border-bottom-color: $bodycolor;
|
|
||||||
@media #{$small} {
|
|
||||||
left: 25%;
|
|
||||||
}
|
|
||||||
@media #{$large} {
|
|
||||||
border-width: 20px;
|
|
||||||
}
|
|
||||||
@media #{$x-large} {
|
|
||||||
left: 33.333333333%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
-ms-interpolation-mode: bicubic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Post byline */
|
|
||||||
.byline {
|
|
||||||
clear: both;
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Author profile */
|
|
||||||
.sidebar {
|
|
||||||
display: none;
|
|
||||||
a, a:hover {
|
|
||||||
border-bottom: 0 solid transparent;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@media #{$small} {
|
|
||||||
display: block;
|
|
||||||
@include grid(12,2);
|
|
||||||
@include prefix(12,0.5);
|
|
||||||
@include suffix(12,0.5);
|
|
||||||
}
|
|
||||||
@media #{$x-large} {
|
|
||||||
@include grid(12,1.5);
|
|
||||||
@include prefix(12,2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.author-name {
|
|
||||||
margin-bottom: 0;
|
|
||||||
@media #{$small} {
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.author-bio {
|
|
||||||
font-size: 80%;
|
|
||||||
font-style: italic;
|
|
||||||
@media #{$small} {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.author-avatar {
|
|
||||||
max-width: 110px;
|
|
||||||
@include rounded(150px);
|
|
||||||
}
|
|
||||||
.author-social {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
@include font-rem(14);
|
|
||||||
color: $black;
|
|
||||||
&:visited {
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
@include scale(1.1);
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
@include translate(0, 2px);
|
|
||||||
}
|
|
||||||
.fa {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media #{$small} {
|
|
||||||
display: block;
|
|
||||||
max-width: 125px;
|
|
||||||
}
|
|
||||||
@media #{$large} {
|
|
||||||
.author-name,
|
|
||||||
.author-avatar,
|
|
||||||
.author-bio,
|
|
||||||
.author-social {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Table of contents */
|
|
||||||
.toc {
|
|
||||||
font-size: 95%;
|
|
||||||
@media #{$large} {
|
|
||||||
display: block;
|
|
||||||
@include grid(12,2);
|
|
||||||
@include prefix(12,0.5);
|
|
||||||
@include suffix(12,0.5);
|
|
||||||
position: absolute;
|
|
||||||
top: 5.5em;
|
|
||||||
right: 0;
|
|
||||||
background-color: $white;
|
|
||||||
}
|
|
||||||
header {
|
|
||||||
background: lighten($black, 10);
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 5px 10px;
|
|
||||||
color: $white;
|
|
||||||
@include font-rem(16);
|
|
||||||
text-transform: uppercase;
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin: 2px 0 0;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
margin: 0 0 1px 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: $heading-font;
|
|
||||||
list-style-type: none;
|
|
||||||
&:last-child {
|
|
||||||
border-bottom-width: 0;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
padding: 10px;
|
|
||||||
display: block;
|
|
||||||
color: $white;
|
|
||||||
text-decoration: none;
|
|
||||||
background: lighten($black, 30);
|
|
||||||
@include opacity(0.7);
|
|
||||||
@include transition(opacity 0.2s ease-in-out);
|
|
||||||
&:hover {
|
|
||||||
@include opacity(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin: 1px 0 0;
|
|
||||||
li a {
|
|
||||||
padding-left: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TOC trigger for collapsing */
|
|
||||||
#drawer {
|
|
||||||
max-height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
&.js-hidden {
|
|
||||||
max-height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image grid - not used */
|
|
||||||
.image-grid {
|
|
||||||
@include clearfix;
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 0 1em;
|
|
||||||
padding: 0;
|
|
||||||
li {
|
|
||||||
@include grid(12,6);
|
|
||||||
@media #{$micro} {
|
|
||||||
width: 33.333333%;
|
|
||||||
}
|
|
||||||
@media #{$small} {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
@media #{$medium} {
|
|
||||||
width: 20%;
|
|
||||||
}
|
|
||||||
@media #{$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 media brand buttons */
|
|
||||||
.social-share {
|
|
||||||
margin-bottom: 0px + $doc-line-height;
|
|
||||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
|
||||||
ul, li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
$social:
|
|
||||||
(facebook, $facebook-color),
|
|
||||||
(flickr, $flickr-color),
|
|
||||||
(foursquare, $foursquare-color),
|
|
||||||
(google-plus, $google-plus-color),
|
|
||||||
(instagram, $instagram-color),
|
|
||||||
(linkedin, $linkedin-color),
|
|
||||||
(pinterest, $pinterest-color),
|
|
||||||
(rss, $rss-color),
|
|
||||||
(tumblr, $tumblr-color),
|
|
||||||
(twitter, $twitter-color),
|
|
||||||
(vimeo, $vimeo-color),
|
|
||||||
(youtube, $youtube-color);
|
|
||||||
@each $socialnetwork, $color in $social {
|
|
||||||
.#{$socialnetwork} {
|
|
||||||
background: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 8px 20px;
|
|
||||||
text-decoration: none !important;
|
|
||||||
text-transform: uppercase;
|
|
||||||
@include font-rem(14);
|
|
||||||
font-family: $heading-font;
|
|
||||||
font-weight: 700;
|
|
||||||
color: $white;
|
|
||||||
opacity: 0.8;
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
display: none;
|
|
||||||
@media #{$medium} {
|
|
||||||
display: inline;
|
|
||||||
padding-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
@include font-rem(14);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Footer wrapper */
|
|
||||||
.footer-wrap {
|
|
||||||
@include container;
|
|
||||||
@include clearfix;
|
|
||||||
clear: both;
|
|
||||||
padding-bottom: 3em;
|
|
||||||
a,
|
|
||||||
a:active,
|
|
||||||
a:visited,
|
|
||||||
p,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
span {
|
|
||||||
@include font-rem(14);
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
@include grid(12,10);
|
|
||||||
@include prefix(12,1);
|
|
||||||
@include suffix(12,1);
|
|
||||||
@media #{$small} {
|
|
||||||
@include grid(12,6);
|
|
||||||
@include prefix(12,3);
|
|
||||||
@include suffix(12,3);
|
|
||||||
}
|
|
||||||
@media #{$x-large} {
|
|
||||||
@include grid(12,4.5);
|
|
||||||
@include prefix(12,4);
|
|
||||||
@include suffix(12,3.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Related articles list */
|
|
||||||
.related-articles {
|
|
||||||
@include grid(12,10);
|
|
||||||
@include prefix(12,1);
|
|
||||||
@include suffix(12,1);
|
|
||||||
margin-bottom: 2em;
|
|
||||||
@media #{$small} {
|
|
||||||
@include grid(12,6);
|
|
||||||
@include prefix(12,3);
|
|
||||||
@include suffix(12,3);
|
|
||||||
}
|
|
||||||
@media #{$x-large} {
|
|
||||||
@include grid(12,4.5);
|
|
||||||
@include prefix(12,4);
|
|
||||||
@include suffix(12,3.5);
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Browser upgrade alert
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.browser-upgrade {
|
|
||||||
background: #000;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0 2em 0;
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
color: $white;
|
|
||||||
a {
|
|
||||||
color: $white;
|
|
||||||
border-bottom: 1px dotted $white;
|
|
||||||
text-decoration: none;
|
|
||||||
&:hover {
|
|
||||||
border-bottom: 1px solid $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Google search form
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
#goog-fixurl {
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin-left: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#goog-wm-qt {
|
|
||||||
width: auto;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 8px 20px;
|
|
||||||
display: inline-block;
|
|
||||||
@include font-rem(14);
|
|
||||||
background-color: $white;
|
|
||||||
color: $black;
|
|
||||||
border-width: 2px !important;
|
|
||||||
border-style: solid !important;
|
|
||||||
border-color: lighten($black,50);
|
|
||||||
@include rounded(3px);
|
|
||||||
}
|
|
||||||
#goog-wm-sb {
|
|
||||||
@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 lighten($black,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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Site wide styles
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
Selection
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background-color: lighten($basecolor, 65%);
|
|
||||||
color: $basecolor;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
::selection {
|
|
||||||
background-color: lighten($basecolor, 65%);
|
|
||||||
color: $basecolor;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Global transition
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
|
|
||||||
@include transition(all .2s ease);
|
|
||||||
}
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Syntax highlighting
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
pre.highlight {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
background-color: #efefef;
|
|
||||||
font-family: $code-font;
|
|
||||||
@include font-rem(12);
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #333332;
|
|
||||||
margin-bottom: 1.5em;
|
|
||||||
@include rounded(4px);
|
|
||||||
pre {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
.lineno { padding-right: 24px; color: lighten(#333332,50);}
|
|
||||||
.hll { background-color: #ffffcc }
|
|
||||||
.c { color: #999988; font-style: italic } /* Comment */
|
|
||||||
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
|
|
||||||
.k { color: #000000; font-weight: bold } /* Keyword */
|
|
||||||
.o { color: #000000; font-weight: bold } /* Operator */
|
|
||||||
.cm { color: #999988; font-style: italic } /* Comment.Multiline */
|
|
||||||
.cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
|
|
||||||
.c1 { color: #999988; font-style: italic } /* Comment.Single */
|
|
||||||
.cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
|
|
||||||
.gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
|
|
||||||
.ge { color: #000000; font-style: italic } /* Generic.Emph */
|
|
||||||
.gr { color: #aa0000 } /* Generic.Error */
|
|
||||||
.gh { color: #999999 } /* Generic.Heading */
|
|
||||||
.gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
|
|
||||||
.go { color: #888888 } /* Generic.Output */
|
|
||||||
.gp { color: #555555 } /* Generic.Prompt */
|
|
||||||
.gs { font-weight: bold } /* Generic.Strong */
|
|
||||||
.gu { color: #aaaaaa } /* Generic.Subheading */
|
|
||||||
.gt { color: #aa0000 } /* Generic.Traceback */
|
|
||||||
.kc { color: #000000; font-weight: bold } /* Keyword.Constant */
|
|
||||||
.kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
|
|
||||||
.kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
|
|
||||||
.kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
|
|
||||||
.kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
|
|
||||||
.kt { color: #445588; font-weight: bold } /* Keyword.Type */
|
|
||||||
.m { color: #009999 } /* Literal.Number */
|
|
||||||
.s { color: #d01040 } /* Literal.String */
|
|
||||||
.na { color: #008080 } /* Name.Attribute */
|
|
||||||
.nb { color: #0086B3 } /* Name.Builtin */
|
|
||||||
.nc { color: #445588; font-weight: bold } /* Name.Class */
|
|
||||||
.no { color: #008080 } /* Name.Constant */
|
|
||||||
.nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
|
|
||||||
.ni { color: #800080 } /* Name.Entity */
|
|
||||||
.ne { color: #990000; font-weight: bold } /* Name.Exception */
|
|
||||||
.nf { color: #990000; font-weight: bold } /* Name.Function */
|
|
||||||
.nl { color: #990000; font-weight: bold } /* Name.Label */
|
|
||||||
.nn { color: #555555 } /* Name.Namespace */
|
|
||||||
.nt { color: #000080 } /* Name.Tag */
|
|
||||||
.nv { color: #008080 } /* Name.Variable */
|
|
||||||
.ow { color: #000000; font-weight: bold } /* Operator.Word */
|
|
||||||
.w { color: #bbbbbb } /* Text.Whitespace */
|
|
||||||
.mf { color: #009999 } /* Literal.Number.Float */
|
|
||||||
.mh { color: #009999 } /* Literal.Number.Hex */
|
|
||||||
.mi { color: #009999 } /* Literal.Number.Integer */
|
|
||||||
.mo { color: #009999 } /* Literal.Number.Oct */
|
|
||||||
.sb { color: #d01040 } /* Literal.String.Backtick */
|
|
||||||
.sc { color: #d01040 } /* Literal.String.Char */
|
|
||||||
.sd { color: #d01040 } /* Literal.String.Doc */
|
|
||||||
.s2 { color: #d01040 } /* Literal.String.Double */
|
|
||||||
.se { color: #d01040 } /* Literal.String.Escape */
|
|
||||||
.sh { color: #d01040 } /* Literal.String.Heredoc */
|
|
||||||
.si { color: #d01040 } /* Literal.String.Interpol */
|
|
||||||
.sx { color: #d01040 } /* Literal.String.Other */
|
|
||||||
.sr { color: #009926 } /* Literal.String.Regex */
|
|
||||||
.s1 { color: #d01040 } /* Literal.String.Single */
|
|
||||||
.ss { color: #990073 } /* Literal.String.Symbol */
|
|
||||||
.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
|
||||||
.vc { color: #008080 } /* Name.Variable.Class */
|
|
||||||
.vg { color: #008080 } /* Name.Variable.Global */
|
|
||||||
.vi { color: #008080 } /* Name.Variable.Instance */
|
|
||||||
.il { color: #009999 } /* Literal.Number.Integer.Long */
|
|
||||||
}
|
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Typography
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
Headings
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: $heading-font;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
@include font-size(32);
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
@include font-size(28);
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
@include font-size(24);
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
@include font-size(18);
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
@include font-size(16);
|
|
||||||
}
|
|
||||||
h6 {
|
|
||||||
@include font-size(14);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Links
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $link-color;
|
|
||||||
&:visited {
|
|
||||||
color: $linkcolorvisited;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: $linkcolorhover;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
outline: thin dotted;
|
|
||||||
color: $linkcolorfocus;
|
|
||||||
}
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Figure captions
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
figcaption {
|
|
||||||
padding-top: 10px;
|
|
||||||
@include font(14);
|
|
||||||
line-height: 1.3;
|
|
||||||
color: lighten($text-color, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Feature image captions
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.image-caption {
|
|
||||||
@include grid(12,10);
|
|
||||||
@include prefix(12,1);
|
|
||||||
@include suffix(12,1);
|
|
||||||
display: block;
|
|
||||||
text-align: right;
|
|
||||||
@include font(12);
|
|
||||||
line-height: 1.3;
|
|
||||||
font-style: italic;
|
|
||||||
color: lighten($text-color, 30);
|
|
||||||
@media #{$small} {
|
|
||||||
@include grid(12,9);
|
|
||||||
@include prefix(12,0);
|
|
||||||
@include suffix(12,0);
|
|
||||||
}
|
|
||||||
@media #{$x-large} {
|
|
||||||
@include grid(12,8.5);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: lighten($text-color, 30);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Notices
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.notice {
|
|
||||||
margin-top: 1.5em;
|
|
||||||
padding: .5em 1em;
|
|
||||||
text-indent: 0;
|
|
||||||
@include font-rem(14);
|
|
||||||
background-color: $body-color;
|
|
||||||
border: 1px solid darken($body-color,20);
|
|
||||||
@include rounded(3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Blockquotes
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
margin-left: -28px;
|
|
||||||
padding-left: 20px;
|
|
||||||
border-left: 8px solid $border-color;
|
|
||||||
font-family: $alt-font;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Footnotes
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.footnotes {
|
|
||||||
ol, li, p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
@include font-rem(14);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Paragraphs
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 $indent-var;
|
|
||||||
// sibling indentation
|
|
||||||
@if $paragraph-indent == true {
|
|
||||||
& + p {
|
|
||||||
text-indent: $indent-var;
|
|
||||||
margin-top: -($indent-var);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Code snippets
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
tt, code, kbd, samp, pre {
|
|
||||||
font-family: $code-font;
|
|
||||||
}
|
|
||||||
p,
|
|
||||||
li {
|
|
||||||
code {
|
|
||||||
@include font-rem(12);
|
|
||||||
line-height: 1.5;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0 5px;
|
|
||||||
border: 1px solid lighten($black, 90);
|
|
||||||
background-color: #efefef;
|
|
||||||
@include rounded(3px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
@include font-rem(12);
|
|
||||||
line-height: 1.5;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
Sass variables
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
Typography
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
$doc-font-size: 16;
|
|
||||||
$doc-line-height: 26;
|
|
||||||
$paragraph-indent: true !default;
|
|
||||||
$base-font: 'PT Serif', serif;
|
|
||||||
$heading-font: 'PT Sans Narrow', sans-serif;
|
|
||||||
$code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
|
|
||||||
$alt-font: $base-font;
|
|
||||||
|
|
||||||
/*
|
|
||||||
Colors
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
$bodycolor : #fff;
|
|
||||||
$body-color : $bodycolor;
|
|
||||||
$textcolor : #333332;
|
|
||||||
$text-color : $textcolor;
|
|
||||||
$border-color : $text-color;
|
|
||||||
$basecolor : #343434;
|
|
||||||
$compcolor : spin($basecolor, 180);
|
|
||||||
$bordercolor : $basecolor;
|
|
||||||
$white : #fff;
|
|
||||||
$black : #111;
|
|
||||||
$accentcolor : $black;
|
|
||||||
|
|
||||||
/* buttons */
|
|
||||||
$primary : $black;
|
|
||||||
$success : #5cb85c;
|
|
||||||
$warning : #dd8338;
|
|
||||||
$danger : #C64537;
|
|
||||||
$info : #308cbc;
|
|
||||||
|
|
||||||
/* brands */
|
|
||||||
$facebook-color : #3b5998;
|
|
||||||
$flickr-color : #ff0084;
|
|
||||||
$foursquare-color : #0cbadf;
|
|
||||||
$google-plus-color : #dd4b39;
|
|
||||||
$instagram-color : #4e433c;
|
|
||||||
$linkedin-color : #4875b4;
|
|
||||||
$pinterest-color : #cb2027;
|
|
||||||
$rss-color : #fa9b39;
|
|
||||||
$tumblr-color : #2c4762;
|
|
||||||
$twitter-color : #55acee;
|
|
||||||
$vimeo-color : #1ab7ea;
|
|
||||||
$youtube-color : #ff3333;
|
|
||||||
|
|
||||||
/* links */
|
|
||||||
$linkcolor : #343434;
|
|
||||||
$link-color : $linkcolor;
|
|
||||||
$linkcolorhover : darken($linkcolor, 10);
|
|
||||||
$linkcolorvisited : lighten($linkcolorhover, 20);
|
|
||||||
$linkcolorfocus : darken($linkcolorvisited, 10);
|
|
||||||
|
|
||||||
/*
|
|
||||||
Breakpoints
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
$micro : "only screen and (min-width: 30em)";
|
|
||||||
$small : "only screen and (min-width: 37.5em)";
|
|
||||||
$medium : "only screen and (min-width: 48em)";
|
|
||||||
$large : "only screen and (min-width: 62em)";
|
|
||||||
$x-large : "only screen and (min-width: 86.375em)";
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
/*
|
|
||||||
*
|
|
||||||
* Minimal Mistakes
|
|
||||||
*
|
|
||||||
* Designer: Michael Rose
|
|
||||||
* Twitter: http://twitter.com/mmistakes
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Partials
|
|
||||||
@import "variables";
|
|
||||||
@import "grid";
|
|
||||||
@import "mixins";
|
|
||||||
@import "normalize";
|
|
||||||
@import "site";
|
|
||||||
@import "typography";
|
|
||||||
@import "syntax";
|
|
||||||
@import "coderay";
|
|
||||||
@import "elements";
|
|
||||||
@import "forms";
|
|
||||||
@import "page";
|
|
||||||
@import "vendor/font-awesome/font-awesome";
|
|
||||||
@import "vendor/magnific-popup/magnific-popup";
|
|
||||||
@import "print";
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
/*! Responsive Menu */
|
|
||||||
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
|
|
||||||
// The function to change the class
|
|
||||||
var changeClass = function (r,className1,className2) {
|
|
||||||
var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
|
|
||||||
if( regex.test(r.className) ) {
|
|
||||||
r.className = r.className.replace(regex,' '+className2+' ');
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
|
|
||||||
}
|
|
||||||
return r.className;
|
|
||||||
};
|
|
||||||
// Creating our button in JS for smaller screens
|
|
||||||
var menuElements = document.getElementById('site-nav');
|
|
||||||
menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoggle navicon-lines-button x" aria-hidden="true"><span class="navicon-lines"></span>menu</button>');
|
|
||||||
|
|
||||||
// Toggle the class on click to show / hide the menu
|
|
||||||
document.getElementById('menutoggle').onclick = function() {
|
|
||||||
changeClass(this, 'navtoggle active', 'navtoggle');
|
|
||||||
};
|
|
||||||
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
|
|
||||||
document.onclick = function(e) {
|
|
||||||
var mobileButton = document.getElementById('menutoggle'),
|
|
||||||
buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
|
|
||||||
|
|
||||||
if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
|
|
||||||
changeClass(mobileButton, 'navtoggle active', 'navtoggle');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/*! Plugin options and other jQuery stuff */
|
|
||||||
|
|
||||||
// FitVids options
|
|
||||||
$(function() {
|
|
||||||
$("article").fitVids();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Table of Contents toggle
|
|
||||||
$(function() {
|
|
||||||
$(".toc h3").click(function () {
|
|
||||||
$("#drawer").toggleClass("js-hidden");
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add lightbox class to all image links
|
|
||||||
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
|
|
||||||
|
|
||||||
// Magnific-Popup options
|
|
||||||
$(document).ready(function() {
|
|
||||||
$('.image-popup').magnificPopup({
|
|
||||||
type: 'image',
|
|
||||||
tLoading: 'Loading image #%curr%...',
|
|
||||||
gallery: {
|
|
||||||
enabled: true,
|
|
||||||
navigateByImgClick: true,
|
|
||||||
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
|
|
||||||
},
|
|
||||||
removalDelay: 300, // Delay in milliseconds before popup is removed
|
|
||||||
// Class that is added to body when popup is open.
|
|
||||||
// make it unique to apply your CSS animations just to this exact popup
|
|
||||||
mainClass: 'mfp-fade'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
52
_config.yml
52
_config.yml
|
|
@ -15,7 +15,8 @@ url : "http://localhost:4000" # the base hostname & protoco
|
||||||
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"
|
email : "your-email@domain.com"
|
||||||
logo : "site-logo.png"
|
logo : "site-logo.png"
|
||||||
breadcrumbs : false # true / false (default)
|
teaser : "500x300.png"
|
||||||
|
breadcrumbs : true # true / false (default)
|
||||||
breadcrumb_home_label : "Home"
|
breadcrumb_home_label : "Home"
|
||||||
breadcrumb_separator : "/"
|
breadcrumb_separator : "/"
|
||||||
twitter:
|
twitter:
|
||||||
|
|
@ -47,7 +48,7 @@ google_ad_client :
|
||||||
google_ad_slot :
|
google_ad_slot :
|
||||||
|
|
||||||
# For specifying social profiles.
|
# 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
|
||||||
|
|
@ -67,6 +68,9 @@ exclude:
|
||||||
- .bundle
|
- .bundle
|
||||||
- .jekyll-assets-cache
|
- .jekyll-assets-cache
|
||||||
- .sass-cache
|
- .sass-cache
|
||||||
|
- assets/js/plugins
|
||||||
|
- assets/js/_main.js
|
||||||
|
- assets/js/vendor
|
||||||
- Capfile
|
- Capfile
|
||||||
- config
|
- config
|
||||||
- Gemfile
|
- Gemfile
|
||||||
|
|
@ -110,13 +114,13 @@ kramdown:
|
||||||
collections:
|
collections:
|
||||||
recipes:
|
recipes:
|
||||||
output: true
|
output: true
|
||||||
permalink: /:collection/:categories/:path/
|
permalink: /:collection/:path/
|
||||||
pets:
|
pets:
|
||||||
output: true
|
output: true
|
||||||
permalink: /:collection/:categories/:path/
|
permalink: /:collection/:path/
|
||||||
portfolio:
|
portfolio:
|
||||||
output: true
|
output: true
|
||||||
permalink: /:collection/:categories/:path/
|
permalink: /:collection/:path/
|
||||||
|
|
||||||
# Defaults
|
# Defaults
|
||||||
defaults:
|
defaults:
|
||||||
|
|
@ -170,6 +174,14 @@ gems:
|
||||||
- jekyll-sitemap
|
- jekyll-sitemap
|
||||||
- jekyll-gist
|
- jekyll-gist
|
||||||
- jekyll-feed
|
- jekyll-feed
|
||||||
|
# - jekyll-archives
|
||||||
|
|
||||||
|
# mimic GitHub Pages with --safe
|
||||||
|
whitelist:
|
||||||
|
- jekyll-paginate
|
||||||
|
- jekyll-sitemap
|
||||||
|
- jekyll-gist
|
||||||
|
- jekyll-feed
|
||||||
|
|
||||||
# Outputting
|
# Outputting
|
||||||
permalink: /:categories/:title/
|
permalink: /:categories/:title/
|
||||||
|
|
@ -177,8 +189,36 @@ paginate: 5 # amount of posts to show
|
||||||
paginate_path: /page:num/
|
paginate_path: /page:num/
|
||||||
timezone: America/New_York # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
|
timezone: America/New_York # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
|
||||||
|
|
||||||
|
# Archives
|
||||||
|
# Type
|
||||||
|
# - GitHub Pages compatible archive pages built with Liquid ~> type: liquid (default)
|
||||||
|
# - Jekyll Archives plugin archive pages ~> type: jekyll-archives
|
||||||
|
# Path (examples)
|
||||||
|
# - Archive page should exist at path when using Liquid method or you can
|
||||||
|
# expect broken links (especially with breadcrumbs enabled)
|
||||||
|
# - <base_path>/tags/my-awesome-tag/index.html ~> path: /tags/
|
||||||
|
# - <base_path/categories/my-awesome-category/index.html ~> path: /categories/
|
||||||
|
# - <base_path/my-awesome-category/index.html ~> path: /
|
||||||
|
categories:
|
||||||
|
type: liquid
|
||||||
|
path: /categories/
|
||||||
|
tags:
|
||||||
|
type: liquid
|
||||||
|
path: /tags/
|
||||||
|
# https://github.com/jekyll/jekyll-archives
|
||||||
|
# jekyll-archives:
|
||||||
|
# enabled:
|
||||||
|
# - categories
|
||||||
|
# - tags
|
||||||
|
# layouts:
|
||||||
|
# category: archive-taxonomy
|
||||||
|
# tag: archive-taxonomy
|
||||||
|
# permalinks:
|
||||||
|
# category: /: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:
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,18 @@
|
||||||
|
|
||||||
- title: "Theme Setup"
|
- title: "Theme Setup"
|
||||||
url: /theme-setup/
|
url: /theme-setup/
|
||||||
|
|
||||||
- title: "Posts"
|
- title: "Posts"
|
||||||
url: /year-archive/
|
url: /year-archive/
|
||||||
|
|
||||||
- title: "Categories"
|
- title: "Categories"
|
||||||
url: /category-archive/
|
url: /categories/
|
||||||
|
|
||||||
- title: "Tags"
|
- title: "Tags"
|
||||||
url: /tag-archive/
|
url: /tags/
|
||||||
|
|
||||||
- title: "Pages"
|
- title: "Pages"
|
||||||
url: /page-archive/
|
url: /page-archive/
|
||||||
|
|
||||||
- title: "Collections"
|
- title: "Collections"
|
||||||
url: /collection-archive/
|
url: /collection-archive/
|
||||||
26
_data/ui-text.yml
Normal file
26
_data/ui-text.yml
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
# User interface text and labels
|
||||||
|
|
||||||
|
# English (default)
|
||||||
|
# -----------------
|
||||||
|
en: &DEFAULT_EN
|
||||||
|
pagination_previous : "Previous"
|
||||||
|
pagination_next : "Next"
|
||||||
|
toc_label : "Overview"
|
||||||
|
ext_link_label : "Direct Link"
|
||||||
|
share_on_label : "Share on"
|
||||||
|
meta_label :
|
||||||
|
tags_label : "Tags:"
|
||||||
|
categories_label : "Categories:"
|
||||||
|
date_label : "Last Updated:"
|
||||||
|
comments_label : "Leave a Comment"
|
||||||
|
related_label : "You May Also Enjoy"
|
||||||
|
follow_label : "Follow "
|
||||||
|
feed_label : "Feed"
|
||||||
|
powered_by : "Powered by"
|
||||||
|
en_US:
|
||||||
|
<<: *DEFAULT_EN
|
||||||
|
en_UK:
|
||||||
|
<<: *DEFAULT_EN
|
||||||
|
|
||||||
|
# Another locale
|
||||||
|
# --------------
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
---
|
---
|
||||||
layout: single
|
layout: single
|
||||||
title: "Draft Post"
|
title: "Draft Post"
|
||||||
|
header:
|
||||||
|
teaser: "unsplash-gallery-image-2-th.jpg"
|
||||||
categories:
|
categories:
|
||||||
- Jekyll
|
- Jekyll
|
||||||
tags:
|
tags:
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,11 @@
|
||||||
|
|
||||||
{% case site.analytics.provider %}
|
{% case site.analytics.provider %}
|
||||||
{% when "google" %}
|
{% when "google" %}
|
||||||
{% include /analytics-providers/google %}
|
{% include /analytics-providers/google.html %}
|
||||||
{% when "google-universal" %}
|
{% when "google-universal" %}
|
||||||
{% include /analytics-providers/google-universal %}
|
{% include /analytics-providers/google-universal.html %}
|
||||||
{% when "custom" %}
|
{% when "custom" %}
|
||||||
{% include /analytics-providers/custom %}
|
{% include /analytics-providers/custom.html %}
|
||||||
{% endcase %}
|
{% endcase %}
|
||||||
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
<article itemscope itemtype="http://schema.org/CreativeWork">
|
|
||||||
{% 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>
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% if post.excerpt %}<p itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
|
|
||||||
</article>
|
|
||||||
29
_includes/archive-single.html
Normal file
29
_includes/archive-single.html
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
{% if post.header.teaser %}
|
||||||
|
{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
|
||||||
|
{% else %}
|
||||||
|
{% capture teaser %}{{ site.teaser }}{% endcapture %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="{{ include.type | default: "list" }}__item">
|
||||||
|
{% if post.link %}
|
||||||
|
<a href="{{ post.link }}" target="_blank">
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ base_path }}{{ post.url }}">
|
||||||
|
{% endif %}
|
||||||
|
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
|
||||||
|
{% if include.type == "grid" %}
|
||||||
|
<div class="archive__item-teaser">
|
||||||
|
<img src=
|
||||||
|
{% if teaser contains "http" %}
|
||||||
|
"{{ teaser }}"
|
||||||
|
{% else %}
|
||||||
|
"{{ teaser | prepend: "/images/" | prepend: base_path }}"
|
||||||
|
{% endif %}
|
||||||
|
alt="{{ page.title }}">
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<h2 class="archive__item-title" itemprop="headline">{% if post.id %}{{ post.title | markdownify | remove: "<p>" | remove: "</p>" }}{% else %}{{ post.title }}{% endif %}</h2>
|
||||||
|
{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
|
||||||
|
</article>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
{% if page.author %}
|
|
||||||
{% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.author %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div itemscope itemtype="http://schema.org/Person">
|
|
||||||
|
|
||||||
{% if author.avatar contains "http" %}
|
|
||||||
<img src="{{ author.avatar }}" class="author-avatar" alt="{{ author.name }} photo">
|
|
||||||
{% else %}
|
|
||||||
<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author-avatar" alt="{{ author.name }} photo">
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<h3 class="author-name">{{ author.name }}</h3>
|
|
||||||
{% if author.bio %}<p class="author-bio">{{ author.bio }}</p>{% endif %}
|
|
||||||
{% if author.uri %}
|
|
||||||
<a href="{{ author.uri }}" class="author-social" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a>
|
|
||||||
{% endif %}
|
|
||||||
{% if author.email %}
|
|
||||||
<a href="mailto:{{ author.email }}" class="author-social" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
88
_includes/author-profile.html
Normal file
88
_includes/author-profile.html
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
{% if page.author %}
|
||||||
|
{% assign author = site.data.authors[page.author] %}{% else %}{% assign author = site.author %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div itemscope itemtype="http://schema.org/Person">
|
||||||
|
|
||||||
|
<div class="author__avatar">
|
||||||
|
{% if author.avatar contains "http" %}
|
||||||
|
<img src="{{ author.avatar }}" alt="{{ author.name }}">
|
||||||
|
{% else %}
|
||||||
|
<img src="{{ author.avatar | prepend: "/images/" | prepend: base_path }}" class="author__avatar" alt="{{ author.name }}">
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="author__content">
|
||||||
|
<h3 class="author__name">{{ author.name }}</h3>
|
||||||
|
{% if author.bio %}<p class="author__bio">{{ author.bio }}</p>{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="author__urls-wrapper">
|
||||||
|
<button class="btn btn--inverse">Follow</button>
|
||||||
|
<ul class="author__urls">
|
||||||
|
{% if author.uri %}
|
||||||
|
<li><a href="{{ author.uri }}" target="_blank"><i class="fa fa-fw fa-globe"></i>Website</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.email %}
|
||||||
|
<li><a href="mailto:{{ author.email }}" target="_blank"><i class="fa fa-fw fa-envelope-square"></i> Email</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.instagram %}
|
||||||
|
<li><a href="http://instagram.com/{{ author.instagram }}" target="_blank"><i class="fa fa-fw fa-instagram"></i> Instagram</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.github %}
|
||||||
|
<li><a href="http://github.com/{{ author.github }}" target="_blank"><i class="fa fa-fw fa-github"></i> Github</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.lastfm %}
|
||||||
|
<li><a href="http://lastfm.com/user/{{ author.lastfm }}" target="_blank"><i class="fa fa-fw fa-music"></i> Last.fm</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.dribbble %}
|
||||||
|
<li><a href="http://dribbble.com/{{ author.dribbble }}" target="_blank"><i class="fa fa-fw fa-dribbble"></i> Dribbble</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.foursquare %}
|
||||||
|
<li><a href="http://foursquare.com/{{ author.foursquare }}" target="_blank"><i class="fa fa-fw fa-foursquare"></i> Foursquare</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.soundcloud %}
|
||||||
|
<li><a href="http://soundcloud.com/{{ author.soundcloud }}" target="_blank"><i class="fa fa-fw fa-soundcloud"></i> Soundcloud</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% if author.codepen %}
|
||||||
|
<li><a href="http://codepen.io/{{ author.codepen }}" target="_blank"><i class="fa fa-fw fa-codepen"></i> CodePen</a></li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,3 +1,17 @@
|
||||||
|
{% case site.categories.type %}
|
||||||
|
{% when "liquid" %}
|
||||||
|
{% assign path_type = "#" %}
|
||||||
|
{% when "jekyll-archives" %}
|
||||||
|
{% assign path_type = nil %}
|
||||||
|
{% endcase %}
|
||||||
|
|
||||||
|
{% if page.collection != 'posts' %}
|
||||||
|
{% assign path_type = nil %}
|
||||||
|
{% assign crumb_path = '/' %}
|
||||||
|
{% else %}
|
||||||
|
{% assign crumb_path = site.categories.path %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<nav class="breadcrumbs">
|
<nav class="breadcrumbs">
|
||||||
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
|
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
|
||||||
{% assign crumbs = page.url | split: '/' %}
|
{% assign crumbs = page.url | split: '/' %}
|
||||||
|
|
@ -15,7 +29,7 @@
|
||||||
{% 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 }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}" itemprop="item"><span itemprop="name">{{ crumb | replace: '-', ' ' | replace: '%20', ' ' | capitalize }}</span></a>
|
<a href="{{ base_path }}{{ crumb | slugify | 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.breadcrumb_separator }}</span>
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<!--[if lt IE 9]><div class="browser-upgrade alert alert-info">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</div><![endif]-->
|
|
||||||
3
_includes/browser-upgrade.html
Normal file
3
_includes/browser-upgrade.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<!--[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>
|
||||||
|
<![endif]-->
|
||||||
28
_includes/category-list.html
Normal file
28
_includes/category-list.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
{% case site.categories.type %}
|
||||||
|
{% when "liquid" %}
|
||||||
|
{% assign path_type = "#" %}
|
||||||
|
{% when "jekyll-archives" %}
|
||||||
|
{% assign path_type = nil %}
|
||||||
|
{% endcase %}
|
||||||
|
|
||||||
|
{% if site.categories.path %}
|
||||||
|
{% comment %}
|
||||||
|
<!-- Sort alphabetically regardless of case e.g. a B c d E -->
|
||||||
|
<!-- modified from http://www.codeofclimber.ru/2015/sorting-site-tags-in-jekyll/ -->
|
||||||
|
{% endcomment %}
|
||||||
|
{% capture page_categories %}{% for category in page.categories %}{{ category | downcase }}#{{ category }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
|
||||||
|
{% assign category_hashes = (page_categories | split: ',' | sort:0) %}
|
||||||
|
|
||||||
|
<p class="page__taxonomy">
|
||||||
|
{% if site.data.ui-text[site.locale].categories_label %}<strong>{{ site.data.ui-text[site.locale].categories_label }} </strong>{% endif %}
|
||||||
|
<span itemprop="keywords">
|
||||||
|
{% for hash in category_hashes %}
|
||||||
|
{% assign keyValue = hash | split: '#' %}
|
||||||
|
{% capture category_word %}{{ keyValue[1] | strip_newlines }}{% endcapture %}
|
||||||
|
<a href="{{ base_path }}{{ category_word | slugify | prepend: path_type | prepend: site.categories.path }}" class="page__taxonomy-item" rel="tag">{{ category_word }}</a>{% unless forloop.last %}<span class="sep">, </span>{% endunless %}
|
||||||
|
{% endfor %}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
{% if site.comments.provider and page.comments %}
|
|
||||||
|
|
||||||
{% case site.comments.provider %}
|
|
||||||
{% when "disqus" %}
|
|
||||||
{% include /comments-providers/disqus %}
|
|
||||||
{% when "facebook" %}
|
|
||||||
{% include /comments-providers/facebook %}
|
|
||||||
{% when "google-plus" %}
|
|
||||||
{% include /comments-providers/google-plus %}
|
|
||||||
{% when "custom" %}
|
|
||||||
{% include /comments-providers/custom %}
|
|
||||||
{% endcase %}
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
14
_includes/comments.html
Normal file
14
_includes/comments.html
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{% if site.comments.provider and page.comments %}
|
||||||
|
|
||||||
|
{% case site.comments.provider %}
|
||||||
|
{% when "disqus" %}
|
||||||
|
{% include /comments-providers/disqus.html %}
|
||||||
|
{% when "facebook" %}
|
||||||
|
{% include /comments-providers/facebook.html %}
|
||||||
|
{% when "google-plus" %}
|
||||||
|
{% include /comments-providers/google-plus.html %}
|
||||||
|
{% when "custom" %}
|
||||||
|
{% include /comments-providers/custom.html %}
|
||||||
|
{% endcase %}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
{% 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 %}
|
|
||||||
|
|
||||||
<span>© {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> using the <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a> theme.</span>
|
|
||||||
32
_includes/footer.html
Normal file
32
_includes/footer.html
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
{% 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">
|
||||||
|
<ul>
|
||||||
|
{% if site.data.ui-text[site.locale].follow_label %}
|
||||||
|
<li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% endif %}
|
||||||
|
{% 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>
|
||||||
|
{% 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>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page__footer-copyright">© {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. {{ site.data.ui-text[site.locale].powered_by }} <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> & <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a>.</div>
|
||||||
3
_includes/footer/custom.html
Normal file
3
_includes/footer/custom.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<!-- start custom footer snippets -->
|
||||||
|
|
||||||
|
<!-- end custom footer snippets -->
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
{% assign gallery-layout = '' %}
|
{% assign gallery-layout = '' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<figure class="{{ gallery-layout }}">
|
<figure class="{{ gallery-layout }} {{ include.class }}">
|
||||||
{% for img in gallery %}
|
{% for img in gallery %}
|
||||||
{% if img.url %}
|
{% if img.url %}
|
||||||
<a href=
|
<a href=
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
||||||
{% include seo %}
|
{% include seo.html %}
|
||||||
|
|
||||||
<link href="{{ base_path }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
|
<link href="{{ base_path }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
|
||||||
|
|
||||||
|
|
@ -9,22 +9,15 @@
|
||||||
<meta name="MobileOptimized" content="320">
|
<meta name="MobileOptimized" content="320">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';
|
||||||
|
</script>
|
||||||
|
|
||||||
<!-- For all browsers -->
|
<!-- For all browsers -->
|
||||||
<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">
|
||||||
|
|
||||||
<!-- HTML5 Shiv and Media Query Support -->
|
|
||||||
<!--[if lt IE 9]>
|
|
||||||
<script src="{{ base_path }}/assets/js/vendor/html5shiv.min.js"></script>
|
|
||||||
<script src="{{ base_path }}/assets/js/vendor/respond.min.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<!-- Modernizr -->
|
|
||||||
<script src="{{ base_path }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
|
|
||||||
|
|
||||||
<link href="//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700%7CPT+Serif:400,700,400italic" rel="stylesheet" type="text/css">
|
|
||||||
|
|
||||||
<!-- Icons -->
|
<!-- Icons -->
|
||||||
<link rel="shortcut icon" href="{{ base_path }}/favicon.ico">
|
<link rel="shortcut icon" href="{{ base_path }}/favicon.ico">
|
||||||
<link rel="shortcut icon" href="{{ base_path }}/favicon.png">
|
<link rel="shortcut icon" href="{{ base_path }}/favicon.png">
|
||||||
3
_includes/head/custom.html
Normal file
3
_includes/head/custom.html
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<!-- start custom head snippets -->
|
||||||
|
|
||||||
|
<!-- end custom head snippets -->
|
||||||
22
_includes/masthead.html
Normal file
22
_includes/masthead.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<div class="masthead">
|
||||||
|
<div class="site-name">
|
||||||
|
<a href="{{ base_path }}/">{{ site.title }}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="masthead__menu">
|
||||||
|
<nav id="site-nav" class="greedy-nav">
|
||||||
|
<button><div class="navicon"></div></button>
|
||||||
|
<ul class="visible-links">
|
||||||
|
{% for link in site.data.navigation %}
|
||||||
|
{% if link.url contains 'http' %}
|
||||||
|
{% assign domain = '' %}
|
||||||
|
{% else %}
|
||||||
|
{% assign domain = base_path %}
|
||||||
|
{% endif %}
|
||||||
|
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
<ul class="hidden-links hidden"></ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<div class="navigation-wrapper">
|
|
||||||
<div class="site-name">
|
|
||||||
<a href="{{ base_path }}/">{{ site.title }}</a>
|
|
||||||
</div><!-- /.site-name -->
|
|
||||||
<div class="top-navigation">
|
|
||||||
<nav id="site-nav" class="nav">
|
|
||||||
<ul>
|
|
||||||
{% for link in site.data.navigation %}
|
|
||||||
{% if link.url contains 'http' %}
|
|
||||||
{% assign domain = '' %}
|
|
||||||
{% else %}
|
|
||||||
{% assign domain = base_path %}
|
|
||||||
{% endif %}
|
|
||||||
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div><!-- /.top-navigation -->
|
|
||||||
</div><!-- /.navigation-wrapper -->
|
|
||||||
7
_includes/page__taxonomy.html
Normal file
7
_includes/page__taxonomy.html
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{% if site.tags.type and page.tags[0] %}
|
||||||
|
{% include tag-list.html %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if site.categories.type and page.categories[0] %}
|
||||||
|
{% include category-list.html %}
|
||||||
|
{% endif %}
|
||||||
|
|
@ -6,9 +6,9 @@
|
||||||
{% 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">Previous</a></li>
|
<li><a href="{{ base_path }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn">Previous</a></li>
|
<li><a href="{{ base_path }}/page{{ paginator.previous_page }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_previous }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|
@ -36,10 +36,10 @@
|
||||||
{% if index == paginator.page %}
|
{% if index == paginator.page %}
|
||||||
<li><strong class="current">{{ index }}</strong></li>
|
<li><strong class="current">{{ index }}</strong></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>
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
|
|
||||||
{% 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">Next</a></li>
|
<li><a href="{{ base_path }}/page{{ paginator.next_page }}/" class="btn">{{ site.data.ui-text[site.locale].pagination_next }}</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
|
||||||
<script>window.jQuery || document.write('<script src="{{ base_path }}/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
|
|
||||||
<script src="{{ base_path }}/assets/js/main.min.js"></script>
|
|
||||||
|
|
||||||
{% include analytics %}
|
|
||||||
{% include comments %}
|
|
||||||
4
_includes/scripts.html
Normal file
4
_includes/scripts.html
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<script src="{{ base_path }}/assets/js/main.min.js"></script>
|
||||||
|
|
||||||
|
{% include analytics.html %}
|
||||||
|
{% include comments.html %}
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<div class="social-share">
|
|
||||||
<h4>Share on</h4>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://twitter.com/intent/tweet?text={{ base_path }}{{ page.url }}" class="twitter" title="Share on Twitter"><i class="fa fa-twitter"></i><span> Twitter</span></a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://www.facebook.com/sharer/sharer.php?u={{ base_path }}{{ page.url }}" class="facebook" title="Share on Facebook"><i class="fa fa-facebook"></i><span> Facebook</span></a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://plus.google.com/share?url={{ base_path }}{{ page.url }}" class="google-plus" title="Share on Google Plus"><i class="fa fa-google-plus"></i><span> Google+</span></a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div><!-- /.social-share -->
|
|
||||||
8
_includes/social-share.html
Normal file
8
_includes/social-share.html
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<section class="page__share">
|
||||||
|
{% 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>
|
||||||
|
{% 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://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 -->
|
||||||
28
_includes/tag-list.html
Normal file
28
_includes/tag-list.html
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{% include base_path %}
|
||||||
|
|
||||||
|
{% case site.tags.type %}
|
||||||
|
{% when "liquid" %}
|
||||||
|
{% assign path_type = "#" %}
|
||||||
|
{% when "jekyll-archives" %}
|
||||||
|
{% assign path_type = nil %}
|
||||||
|
{% endcase %}
|
||||||
|
|
||||||
|
{% if site.tags.path %}
|
||||||
|
{% comment %}
|
||||||
|
<!-- Sort alphabetically regardless of case e.g. a B c d E -->
|
||||||
|
<!-- modified from http://www.codeofclimber.ru/2015/sorting-site-tags-in-jekyll/ -->
|
||||||
|
{% endcomment %}
|
||||||
|
{% capture page_tags %}{% for tag in page.tags %}{{ tag | downcase }}#{{ tag }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
|
||||||
|
{% assign tag_hashes = (page_tags | split: ',' | sort:0) %}
|
||||||
|
|
||||||
|
<p class="page__taxonomy">
|
||||||
|
{% if site.data.ui-text[site.locale].tags_label %}<strong>{{ site.data.ui-text[site.locale].tags_label }} </strong>{% endif %}
|
||||||
|
<span itemprop="keywords">
|
||||||
|
{% for hash in tag_hashes %}
|
||||||
|
{% assign keyValue = hash | split: '#' %}
|
||||||
|
{% capture tag_word %}{{ keyValue[1] | strip_newlines }}{% endcapture %}
|
||||||
|
<a href="{{ base_path }}{{ tag_word | slugify | prepend: path_type | prepend: site.tags.path }}" class="page__taxonomy-item" rel="tag">{{ tag_word }}</a>{% unless forloop.last %}<span class="sep">, </span>{% endunless %}
|
||||||
|
{% endfor %}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{% endif %}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<section id="table-of-contents" class="toc">
|
<aside class="sidebar__right">
|
||||||
<header><h3><i class="fa fa-{{ include.icon | default: 'book' }}"></i> {{ include.title | default: "Overview" }}</h3></header>
|
<nav class="toc" markdown="1">
|
||||||
<div id="drawer" 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>
|
||||||
* Auto generated table of contents
|
* Auto generated table of contents
|
||||||
{:toc}
|
{:toc .toc__menu}
|
||||||
</div>
|
</nav>
|
||||||
</section>
|
</aside>
|
||||||
12
_layouts/archive-taxonomy.html
Normal file
12
_layouts/archive-taxonomy.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
layout: default
|
||||||
|
author_profile: false
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="archive">
|
||||||
|
<h1 class="page__title">{{ page.title }}</h1>
|
||||||
|
{% include base_path %}
|
||||||
|
{% for post in page.posts %}
|
||||||
|
{% include archive-single.html %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
@ -3,6 +3,6 @@ layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="archive">
|
<div class="archive">
|
||||||
<h1>{{ page.title }}</h1>
|
<h1 class="page__title">{{ page.title }}</h1>
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div><!-- /.archive -->
|
</div><!-- /.archive -->
|
||||||
|
|
@ -5,38 +5,39 @@ layout: compress
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ site.locale | slice: 0,2 }}">
|
<html lang="{{ site.locale | slice: 0,2 }}" class="no-js">
|
||||||
<head>
|
<head>
|
||||||
{% include head %}
|
{% include head.html %}
|
||||||
|
{% include head/custom.html %}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
{% include browser-upgrade %}
|
{% include browser-upgrade.html %}
|
||||||
{% include navigation %}
|
{% include masthead.html %}
|
||||||
|
|
||||||
{% 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>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if site.breadcrumbs %}
|
{% if site.breadcrumbs and site.categories.type == 'jekyll-archives' %}
|
||||||
{% include breadcrumbs %}
|
{% include breadcrumbs.html %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div id="main" role="main">
|
<div id="main" role="main">
|
||||||
<div class="sidebar">
|
{% if page.author_profile or page.sidebar %}<div class="sidebar sticky">
|
||||||
{% if page.author_profile %}{% include author-profile %}{% endif %}
|
{% if page.author_profile %}{% include author-profile.html %}{% endif %}
|
||||||
{% if page.sidebar %}
|
{% if page.sidebar %}
|
||||||
{% for s in page.sidebar %}
|
{% for s in page.sidebar %}
|
||||||
{% if s.image %}
|
{% if s.image %}
|
||||||
|
|
@ -52,18 +53,18 @@ layout: compress
|
||||||
{% if s.text %}{{ s.text | markdownify }}{% endif %}
|
{% if s.text %}{{ s.text | markdownify }}{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% unless page.author_profile or page.sidebar %} {% endunless %}
|
</div>{% endif %}
|
||||||
</div>
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div><!-- /#main -->
|
</div>
|
||||||
|
|
||||||
<div class="footer-wrap">
|
<div class="page__footer">
|
||||||
<footer>
|
<footer>
|
||||||
{% include footer %}
|
{% include footer.html %}
|
||||||
</footer>
|
</footer>
|
||||||
</div><!-- /.footer-wrap -->
|
</div>
|
||||||
|
|
||||||
{% include scripts %}
|
{% include scripts.html %}
|
||||||
|
{% include footer/custom.html %}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4,35 +4,38 @@ layout: default
|
||||||
|
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
|
|
||||||
<article class="post" itemscope itemtype="http://schema.org/CreativeWork">
|
<article class="page" itemscope itemtype="http://schema.org/CreativeWork">
|
||||||
{% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
|
{% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
|
||||||
{% 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>
|
||||||
{% if page.link %}
|
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
|
||||||
<h1 itemprop="headline"><a href="{{ page.link }}">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</a></h1>
|
|
||||||
{% else %}
|
|
||||||
<h1 itemprop="headline"><a href="{{ base_path }}{{ page.url }}" rel="bookmark">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</a></h1>
|
|
||||||
{% endif %}
|
|
||||||
</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 %}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<footer class="page__meta">
|
||||||
|
{% if site.data.ui-text[site.locale].meta_label %}
|
||||||
<footer role="contentinfo">
|
<h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
|
||||||
{% if site.share and page.share %}{% include social-share %}{% endif %}
|
{% endif %}
|
||||||
{% if page.date %}
|
{% include page__taxonomy.html %}
|
||||||
<p class="byline"><strong>{{ page.title }}</strong> was published on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time>{% if page.modified %} and last modified on <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time>{% endif %}.</p>
|
{% 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>
|
||||||
|
{% 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>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</footer>
|
</footer>
|
||||||
</div><!-- /.article-wrap -->
|
|
||||||
|
{% if site.share and page.share %}{% include social-share.html %}{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
{% if site.comments.provider and page.comments %}
|
{% if site.comments.provider and page.comments %}
|
||||||
|
<h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label }}</h4>
|
||||||
{% case site.comments.provider %}
|
{% case site.comments.provider %}
|
||||||
{% when "disqus" %}
|
{% when "disqus" %}
|
||||||
<section id="disqus_thread"></section>
|
<section id="disqus_thread"></section>
|
||||||
|
|
@ -48,13 +51,14 @@ layout: default
|
||||||
|
|
||||||
{% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
|
{% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
|
||||||
{% if page.id and page.related and site.related_posts.size > 0 %}
|
{% if page.id and page.related and site.related_posts.size > 0 %}
|
||||||
<div class="related-articles">
|
<div class="page__related">
|
||||||
<h4>You might also enjoy <small class="pull-right">(<a href="{{ base_path }}/posts/">View all posts</a>)</small></h4>
|
{% if site.data.ui-text[site.locale].related_label %}
|
||||||
<ul>
|
<h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label }}</h4>
|
||||||
{% for post in site.related_posts limit:3 %}
|
{% endif %}
|
||||||
<li><a href="{{ base_path }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></li>
|
<div class="grid__wrapper">
|
||||||
{% endfor %}
|
{% for post in site.related_posts limit:4 %}
|
||||||
</ul>
|
{% include archive-single.html type="grid" %}
|
||||||
<hr />
|
{% endfor %}
|
||||||
</div><!-- /.related-articles -->
|
</div>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
---
|
---
|
||||||
layout: archive
|
layout: archive
|
||||||
permalink: /category-archive/
|
permalink: /categories/
|
||||||
title: "Posts by Category"
|
title: "Posts by Category"
|
||||||
author_profile: false
|
author_profile: false
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
{% include group-by-array collection=site.posts field='categories' %}
|
{% include group-by-array collection=site.posts field="categories" %}
|
||||||
|
|
||||||
{% for category in group_names %}
|
{% for category in group_names %}
|
||||||
{% assign posts = group_items[forloop.index0] %}
|
{% assign posts = group_items[forloop.index0] %}
|
||||||
<h3>{{ category }}</h3>
|
<h2 id="{{ category | slugify }}" class="archive__subtitle">{{ category }}</h2>
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -9,16 +9,16 @@ author_profile: false
|
||||||
{% capture written_label %}'None'{% endcapture %}
|
{% capture written_label %}'None'{% endcapture %}
|
||||||
|
|
||||||
{% for collection in site.collections %}
|
{% for collection in site.collections %}
|
||||||
{% 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 %}
|
||||||
<h3>{{ label }}</h3>
|
<h2 id="{{ label | slugify }}" class="archive__subtitle">{{ label }}</h2>
|
||||||
{% capture written_label %}{{ label }}{% endcapture %}
|
{% capture written_label %}{{ label }}{% endcapture %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% for post in collection.docs %}
|
{% for post in collection.docs %}
|
||||||
{% unless collection.output == false or collection.label == 'posts' %}
|
{% unless collection.output == false or collection.label == "posts" %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -7,5 +7,5 @@ author_profile: false
|
||||||
|
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
{% for post in site.pages %}
|
{% for post in site.pages %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -2,15 +2,13 @@
|
||||||
layout: archive
|
layout: archive
|
||||||
title: "Portfolio"
|
title: "Portfolio"
|
||||||
permalink: /portfolio/
|
permalink: /portfolio/
|
||||||
|
author_profile: false
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
{% include group-by-array collection=site.portfolio field='categories' %}
|
|
||||||
|
|
||||||
{% for category in group_names %}
|
<div class="grid__wrapper">
|
||||||
{% assign posts = group_items[forloop.index0] %}
|
{% for post in site.portfolio %}
|
||||||
<h3>{{ category }}</h3>
|
{% include archive-single.html type="grid" %}
|
||||||
{% for post in posts %}
|
|
||||||
{% include archive-list-single %}
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endfor %}
|
</div>
|
||||||
|
|
@ -6,12 +6,7 @@ author_profile: false
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
{% include group-by-array collection=site.recipes field='categories' %}
|
|
||||||
|
|
||||||
{% for category in group_names %}
|
{% for post in site.recipes %}
|
||||||
{% assign posts = group_items[forloop.index0] %}
|
{% include archive-single.html %}
|
||||||
<h3>{{ category }}</h3>
|
|
||||||
{% for post in posts %}
|
|
||||||
{% include archive-list-single %}
|
|
||||||
{% endfor %}
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -9,29 +9,29 @@ author_profile: false
|
||||||
|
|
||||||
A list of all the posts and pages found on the site. For you robots out there is an [XML version]({{ base_path }}/sitemap.xml) available for digesting as well.
|
A list of all the posts and pages found on the site. For you robots out there is an [XML version]({{ base_path }}/sitemap.xml) available for digesting as well.
|
||||||
|
|
||||||
<h3>Pages</h3>
|
<h2>Pages</h2>
|
||||||
{% for post in site.pages %}
|
{% for post in site.pages %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
<h3>Posts</h3>
|
<h2>Posts</h2>
|
||||||
{% for post in site.posts %}
|
{% for post in site.posts %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
{% capture written_label %}'None'{% endcapture %}
|
{% capture written_label %}'None'{% endcapture %}
|
||||||
|
|
||||||
{% for collection in site.collections %}
|
{% for collection in site.collections %}
|
||||||
{% 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 %}
|
||||||
<h3>{{ label }}</h3>
|
<h2>{{ label }}</h2>
|
||||||
{% capture written_label %}{{ label }}{% endcapture %}
|
{% capture written_label %}{{ label }}{% endcapture %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% for post in collection.docs %}
|
{% for post in collection.docs %}
|
||||||
{% unless collection.output == false or collection.label == 'posts' %}
|
{% unless collection.output == false or collection.label == "posts" %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -1,17 +1,17 @@
|
||||||
---
|
---
|
||||||
layout: archive
|
layout: archive
|
||||||
permalink: /tag-archive/
|
permalink: /tags/
|
||||||
title: "Posts by Tags"
|
title: "Posts by Tags"
|
||||||
author_profile: false
|
author_profile: false
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include base_path %}
|
{% include base_path %}
|
||||||
{% include group-by-array collection=site.posts field='tags' %}
|
{% include group-by-array collection=site.posts field="tags" %}
|
||||||
|
|
||||||
{% for tag in group_names %}
|
{% for tag in group_names %}
|
||||||
{% assign posts = group_items[forloop.index0] %}
|
{% assign posts = group_items[forloop.index0] %}
|
||||||
<h3>{{ tag }}</h3>
|
<h2 id="{{ tag | slugify }}" class="archive__subtitle">{{ tag }}</h2>
|
||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -10,8 +10,8 @@ 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 %}
|
||||||
<h3>{{ year }}</h3>
|
<h2 id="{{ year | slugify }}" class="archive__subtitle">{{ year }}</h2>
|
||||||
{% capture written_year %}{{ year }}{% endcapture %}
|
{% capture written_year %}{{ year }}{% endcapture %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% include archive-list-single %}
|
{% include archive-single.html %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
---
|
---
|
||||||
title: "Lhasa Apso"
|
title: "Lhasa Apso"
|
||||||
excerpt: "The Lhasa Apso is a non-sporting dog breed originating in Tibet."
|
excerpt: "The Lhasa Apso is a non-sporting dog breed originating in Tibet."
|
||||||
categories:
|
|
||||||
- dog
|
|
||||||
---
|
---
|
||||||
|
|
||||||
> The Lhasa Apso (/ˈlɑːsə ˈæpsoʊ/ lah-sə ap-soh) is a non-sporting dog breed originating in Tibet. It was bred as an interior sentinel in the Buddhist monasteries, to alert the monks to any intruders who entered. Lhasa is the capital city of Tibet, and apso is a word in the Tibetan language meaning "bearded", so, Lhasa Apso simply means "long-haired Lhasa dog". There are, however, some who claim that the word "apso" is a form of the Tibetan word "rapso", meaning "goat-like", which would make the equivalent translation "wooly Lhasa dog".
|
> The Lhasa Apso (/ˈlɑːsə ˈæpsoʊ/ lah-sə ap-soh) is a non-sporting dog breed originating in Tibet. It was bred as an interior sentinel in the Buddhist monasteries, to alert the monks to any intruders who entered. Lhasa is the capital city of Tibet, and apso is a word in the Tibetan language meaning "bearded", so, Lhasa Apso simply means "long-haired Lhasa dog". There are, however, some who claim that the word "apso" is a form of the Tibetan word "rapso", meaning "goat-like", which would make the equivalent translation "wooly Lhasa dog".
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
---
|
---
|
||||||
title: "Tabby"
|
title: "Tabby"
|
||||||
excerpt: "A tabby is any domestic cat that has a coat featuring distinctive stripes, dots, lines or swirling patterns, usually with a mark resembling an 'M' on its forehead."
|
excerpt: "A tabby is any domestic cat that has a coat featuring distinctive stripes, dots, lines or swirling patterns, usually with a mark resembling an 'M' on its forehead."
|
||||||
categories:
|
|
||||||
- cat
|
|
||||||
---
|
---
|
||||||
|
|
||||||
> A tabby is any domestic cat that has a coat featuring distinctive stripes, dots, lines or swirling patterns, usually together with a mark resembling an 'M' on its forehead. Tabbies are sometimes erroneously assumed to be a cat breed. In fact, the tabby pattern is found in many breeds, as well as among the general mixed-breed population. The tabby pattern is a naturally occurring feature that may be related to the coloration of the domestic cat's direct ancestor, the African wildcat, which (along with the European wildcat and Asiatic wildcat) has a similar coloration.
|
> A tabby is any domestic cat that has a coat featuring distinctive stripes, dots, lines or swirling patterns, usually together with a mark resembling an 'M' on its forehead. Tabbies are sometimes erroneously assumed to be a cat breed. In fact, the tabby pattern is found in many breeds, as well as among the general mixed-breed population. The tabby pattern is a naturally occurring feature that may be related to the coloration of the domestic cat's direct ancestor, the African wildcat, which (along with the European wildcat and Asiatic wildcat) has a similar coloration.
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@ title: "Foo Bar Identify"
|
||||||
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
|
||||||
|
teaser: foo-bar-identity-th.jpg
|
||||||
sidebar:
|
sidebar:
|
||||||
- title: "Role"
|
- title: "Role"
|
||||||
image: http://placehold.it/350x250
|
image: http://placehold.it/350x250
|
||||||
|
|
@ -20,10 +21,6 @@ gallery:
|
||||||
- url: unsplash-gallery-image-3.jpg
|
- url: unsplash-gallery-image-3.jpg
|
||||||
image_path: unsplash-gallery-image-3-th.jpg
|
image_path: unsplash-gallery-image-3-th.jpg
|
||||||
alt: "placeholder image 3"
|
alt: "placeholder image 3"
|
||||||
categories:
|
|
||||||
- branding
|
|
||||||
- web design
|
|
||||||
- development
|
|
||||||
---
|
---
|
||||||
|
|
||||||
Pictures of Goats section West Seattle Blog dingbat newspaper rubber cement Google+ newsroom cafe news.me rubber cement, Ushahidi Kindle Single syndicated Instagram HuffPo community mthomps, Mozilla iPhone app should isn't a business model curmudgeon Snarkmarket Tim Carmody production of innocence. Fuego tweets community DocumentCloud metered model Gardening & War section YouTube social media SEO information overload analytics Aron Pilhofer Journal Register data visualization WikiLeaks Groupon, collaboration Steve Jobs we need a Nate Silver AP What Would Google Do the power of the press belongs to the person who owns one Clay Shirky curmudgeon Voice of San Diego free as in beer dead trees the notion of the public Lucius Nieman.
|
Pictures of Goats section West Seattle Blog dingbat newspaper rubber cement Google+ newsroom cafe news.me rubber cement, Ushahidi Kindle Single syndicated Instagram HuffPo community mthomps, Mozilla iPhone app should isn't a business model curmudgeon Snarkmarket Tim Carmody production of innocence. Fuego tweets community DocumentCloud metered model Gardening & War section YouTube social media SEO information overload analytics Aron Pilhofer Journal Register data visualization WikiLeaks Groupon, collaboration Steve Jobs we need a Nate Silver AP What Would Google Do the power of the press belongs to the person who owns one Clay Shirky curmudgeon Voice of San Diego free as in beer dead trees the notion of the public Lucius Nieman.
|
||||||
|
|
|
||||||
14
_posts/2010-01-07-post-modified.md
Normal file
14
_posts/2010-01-07-post-modified.md
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
---
|
||||||
|
title: "Post: Modified Date"
|
||||||
|
modified: 2016-03-09T16:20:02-05:00
|
||||||
|
categories:
|
||||||
|
- Post Formats
|
||||||
|
tags:
|
||||||
|
- Post Formats
|
||||||
|
- readability
|
||||||
|
- standard
|
||||||
|
---
|
||||||
|
|
||||||
|
This post has been updated and should show a modified date if used in a layout.
|
||||||
|
|
||||||
|
All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, "Oh, why can't you remain like this for ever!" This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.
|
||||||
|
|
@ -7,6 +7,24 @@ tags:
|
||||||
- Post Formats
|
- Post Formats
|
||||||
---
|
---
|
||||||
|
|
||||||
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 %}` well 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Image that fills page content container by adding the `.full` class with:
|
||||||
|
|
||||||
|
**HTML:**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="/images/filename.jpg" alt="" class="full">
|
||||||
|
```
|
||||||
|
|
||||||
|
**or Kramdown:**
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{% raw %}
|
||||||
|
{: .full}{% endraw %}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
{: .full}
|
||||||
|
|
@ -16,6 +16,15 @@ gallery:
|
||||||
- url: unsplash-gallery-image-3.jpg
|
- url: unsplash-gallery-image-3.jpg
|
||||||
image_path: unsplash-gallery-image-3-th.jpg
|
image_path: unsplash-gallery-image-3-th.jpg
|
||||||
alt: "placeholder image 3"
|
alt: "placeholder image 3"
|
||||||
|
- 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"
|
||||||
gallery2:
|
gallery2:
|
||||||
- url: https://flic.kr/p/8a6Ven
|
- url: https://flic.kr/p/8a6Ven
|
||||||
image_path: https://farm2.staticflickr.com/1272/4697500467_8294dac099_q.jpg
|
image_path: https://farm2.staticflickr.com/1272/4697500467_8294dac099_q.jpg
|
||||||
|
|
@ -86,6 +95,6 @@ And place it like so:
|
||||||
|
|
||||||
{% include gallery id="gallery2" caption="This is a second gallery example with images hosted externally." %}
|
{% include gallery id="gallery2" caption="This is a second gallery example with images hosted externally." %}
|
||||||
|
|
||||||
And for giggles one more gallery just to make sure this works.
|
And for giggles one more gallery just to make sure this works. To fill page content container add `class="full"`.
|
||||||
|
|
||||||
{% include gallery id="gallery3" caption="This is a third gallery example with two images." %}
|
{% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %}
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Template: Post with Table Of Contents"
|
title: "Template: Post with Table Of Contents"
|
||||||
|
header:
|
||||||
|
image: unsplash-image-9.jpg
|
||||||
|
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||||
tags:
|
tags:
|
||||||
- table of contents
|
- table of contents
|
||||||
---
|
---
|
||||||
|
|
@ -28,12 +31,12 @@ Below is just about everything you'll need to style in the theme. Check the sour
|
||||||
|
|
||||||
###### Heading 6
|
###### Heading 6
|
||||||
|
|
||||||
### Body text
|
## Body text
|
||||||
|
|
||||||
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.
|
||||||
|
|
||||||
|
|
||||||
{: .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 +77,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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -38,22 +38,22 @@ Multi line blockquote with a cite reference:
|
||||||
|
|
||||||
## Tables
|
## Tables
|
||||||
|
|
||||||
| Employee | Salary | |
|
| Employee | Salary | |
|
||||||
| -------- | ------ | - |
|
| -------- | ------ | ------------------------------------------------------------ |
|
||||||
| [John Doe](#) | $1 | Because that's all Steve Jobs needed for a salary. |
|
| [John Doe](#) | $1 | Because that's all Steve Jobs needed for a salary. |
|
||||||
| [Jane Doe](#) |$100K |For all the blogging she does. |
|
| [Jane Doe](#) | $100K | For all the blogging she does. |
|
||||||
| [Fred Bloggs](#) | $100M | Pictures are worth a thousand words, right? So Jane × 1,000. |
|
| [Fred Bloggs](#) | $100M | Pictures are worth a thousand words, right? So Jane × 1,000. |
|
||||||
| [Jane Bloggs](#) | $100B | With hair like that?! Enough said. |
|
| [Jane Bloggs](#) | $100B | With hair like that?! Enough said. |
|
||||||
|
|
||||||
| Header1 | Header2 | Header3 |
|
| Header1 | Header2 | Header3 |
|
||||||
|:--------|:-------:|--------:|
|
|:--------|:-------:|--------:|
|
||||||
| cell1 | cell2 | cell3 |
|
| cell1 | cell2 | cell3 |
|
||||||
| cell4 | cell5 | cell6 |
|
| cell4 | cell5 | cell6 |
|
||||||
|----
|
|-----------------------------|
|
||||||
| cell1 | cell2 | cell3 |
|
| cell1 | cell2 | cell3 |
|
||||||
| cell4 | cell5 | cell6 |
|
| cell4 | cell5 | cell6 |
|
||||||
|=====
|
|=============================|
|
||||||
| Foot1 | Foot2 | Foot3
|
| Foot1 | Foot2 | Foot3 |
|
||||||
|
|
||||||
## Definition Lists
|
## Definition Lists
|
||||||
|
|
||||||
|
|
@ -104,21 +104,21 @@ Do It Live
|
||||||
Make any link standout more when applying the `.btn` class.
|
Make any link standout more when applying the `.btn` class.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<a href="#" class="btn btn-success">Success Button</a>
|
<a href="#" class="btn--success">Success Button</a>
|
||||||
```
|
```
|
||||||
|
|
||||||
[Primary Button](#){: .btn}
|
[Primary Button](#){: .btn}
|
||||||
[Success Button](#){: .btn .btn-success}
|
[Success Button](#){: .btn .btn--success}
|
||||||
[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}
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
[Primary Button Text](#link){: .btn}
|
[Primary Button Text](#link){: .btn}
|
||||||
[Success Button Text](#link){: .btn .btn-success}
|
[Success Button Text](#link){: .btn .btn--success}
|
||||||
[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}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Notices
|
## Notices
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
---
|
---
|
||||||
title: "Welcome to Jekyll!"
|
title: "Welcome to Jekyll!"
|
||||||
|
header:
|
||||||
|
teaser: "http://wpthemetestdata.files.wordpress.com/2008/06/100_5540.jpg?w=604"
|
||||||
categories:
|
categories:
|
||||||
- Jekyll
|
- Jekyll
|
||||||
tags:
|
tags:
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Chocolate Chip Cookies"
|
title: "Chocolate Chip Cookies"
|
||||||
categories:
|
|
||||||
- cookies
|
|
||||||
- desert
|
|
||||||
---
|
---
|
||||||
|
|
||||||
A chocolate chip cookie is a drop cookie that originated in the United States and features chocolate chips as its distinguishing ingredient.
|
A chocolate chip cookie is a drop cookie that originated in the United States and features chocolate chips as its distinguishing ingredient.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Oatmeal Cookies"
|
title: "Oatmeal Cookies"
|
||||||
categories:
|
|
||||||
- cookies
|
|
||||||
---
|
---
|
||||||
|
|
||||||
Oatmeal cookies are a proverbial favorite with both kids and adults. This crisp and chewy cookie is loaded with oats, dried fruit, and chopped nuts.
|
Oatmeal cookies are a proverbial favorite with both kids and adults. This crisp and chewy cookie is loaded with oats, dried fruit, and chopped nuts.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
---
|
---
|
||||||
title: "Peanut Butter Cookies"
|
title: "Peanut Butter Cookies"
|
||||||
categories:
|
|
||||||
- cookies
|
|
||||||
---
|
---
|
||||||
|
|
||||||
A peanut butter cookie is a type of cookie that is distinguished for having peanut butter as a principal ingredient. The cookie generally originated in the United States, its development dating back to the 1910s.
|
A peanut butter cookie is a type of cookie that is distinguished for having peanut butter as a principal ingredient. The cookie generally originated in the United States, its development dating back to the 1910s.
|
||||||
|
|
|
||||||
116
assets/_scss/_archive.scss
Normal file
116
assets/_scss/_archive.scss
Normal file
|
|
@ -0,0 +1,116 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
ARCHIVE
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.archive {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
@include span(12 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
@include span(10 of 12 last);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
@include prefix(0.5 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.archive__subtitle {
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
font-size: 14px;
|
||||||
|
color: mix(#fff, $gray, 25%);
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.archive__item-title {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.archive__item-excerpt {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
& + p {
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
.archive__item-teaser {
|
||||||
|
box-shadow: 0 0 10px rgba(#000, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.archive__item-title {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
List view
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.list__item {
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
padding-right: $right-sidebar-width-narrow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
padding-right: $right-sidebar-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
padding-right: $right-sidebar-width-wide;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Grid view
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.grid__item {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
|
||||||
|
.archive__item-excerpt {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.archive__item-teaser {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($small) {
|
||||||
|
@include gallery(5 of 10);
|
||||||
|
.archive__item-teaser {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
margin-left: 0; // reset before mixin does its thing
|
||||||
|
margin-right: 0; // reset before mixin does its thing
|
||||||
|
@include gallery(2.5 of 10);
|
||||||
|
|
||||||
|
.archive__item-teaser {
|
||||||
|
max-height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.archive__item-excerpt {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
313
assets/_scss/_base.scss
Normal file
313
assets/_scss/_base.scss
Normal file
|
|
@ -0,0 +1,313 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
BASE ELEMENTS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: $text-color;
|
||||||
|
font-family: $serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
background-color: $body-color;
|
||||||
|
|
||||||
|
&.overflow--hidden {
|
||||||
|
/* when primary navigation is visible, the content in the background won't scroll */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
line-height: 1.25;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
u,
|
||||||
|
ins {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid $text-color;
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
del a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* paragraph indents */
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 $indent-var;
|
||||||
|
|
||||||
|
// sibling indentation
|
||||||
|
@if $paragraph-indent == true {
|
||||||
|
& + p {
|
||||||
|
text-indent: $indent-var;
|
||||||
|
margin-top: -($indent-var);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* reduce orphans and widows when printing */
|
||||||
|
|
||||||
|
p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
|
||||||
|
orphans: 3;
|
||||||
|
widows: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* abbreviations */
|
||||||
|
|
||||||
|
abbr[title],
|
||||||
|
abbr[data-original-title] {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: help;
|
||||||
|
border-bottom: 1px dotted $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blockquotes */
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 2em 1em 2em 0;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
font-style: italic;
|
||||||
|
border-left: 0.25em solid $accent-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
cite {
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "\2014";
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* links */
|
||||||
|
|
||||||
|
a {
|
||||||
|
&:focus {
|
||||||
|
@extend %tab-focus;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
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 */
|
||||||
|
|
||||||
|
tt, code, kbd, samp, pre {
|
||||||
|
font-family: $monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
overflow-x: auto; // add scrollbars to wide code blocks
|
||||||
|
}
|
||||||
|
|
||||||
|
p code,
|
||||||
|
li code,
|
||||||
|
figcaption code {
|
||||||
|
padding-top: 0.1rem;
|
||||||
|
padding-bottom: 0.1rem;
|
||||||
|
background: mix(#fff, $light-gray, 40%);
|
||||||
|
border: 1px solid $light-gray;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
letter-spacing: -0.2em;
|
||||||
|
content: "\00a0"; // non-breaking space
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* horizontal rule */
|
||||||
|
|
||||||
|
hr {
|
||||||
|
display: block;
|
||||||
|
margin: 1em 0;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Media and embeds
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* Figures and images */
|
||||||
|
|
||||||
|
figure {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 2em 0;
|
||||||
|
|
||||||
|
img,
|
||||||
|
iframe,
|
||||||
|
.fluid-width-video-wrapper {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.half {
|
||||||
|
> a,
|
||||||
|
> img {
|
||||||
|
@include breakpoint($small) {
|
||||||
|
width: calc(50% - 0.5em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.third {
|
||||||
|
> a,
|
||||||
|
> img {
|
||||||
|
@include breakpoint($small) {
|
||||||
|
width: calc(33.3333% - 0.5em);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Figure captions */
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
margin-bottom: 0.65rem;
|
||||||
|
color: mix(#fff, $text-color, 25%);
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid $light-gray;
|
||||||
|
transition: border 0.4s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #000;
|
||||||
|
border-bottom-color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.64rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Fix IE9 SVG bug */
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Navigation lists
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes margins, padding, and bullet points from navigation lists
|
||||||
|
*
|
||||||
|
* Example usage:
|
||||||
|
* <nav>
|
||||||
|
* <ul>
|
||||||
|
* <li><a href="#link-1">Link 1</a></li>
|
||||||
|
* <li><a href="#link-2">Link 2</a></li>
|
||||||
|
* <li><a href="#link-3">Link 3</a></li>
|
||||||
|
* </ul>
|
||||||
|
* </nav>
|
||||||
|
*/
|
||||||
|
|
||||||
|
nav {
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Global animation transition
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
135
assets/_scss/_buttons.scss
Normal file
135
assets/_scss/_buttons.scss
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
BUTTONS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Default button
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
/* default button */
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: #fff !important;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: #000;
|
||||||
|
border: 0 !important;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: mix(white, #000, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon + .hidden {
|
||||||
|
margin-left: -0.5em; // override for hidden text
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fills width of parent container */
|
||||||
|
|
||||||
|
&--block {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
+ .btn--block {
|
||||||
|
margin-top: 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for dark backgrounds */
|
||||||
|
|
||||||
|
&--inverse {
|
||||||
|
color: currentColor !important;
|
||||||
|
border: 1px solid currentColor !important; // override
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: mix(#000, #fff, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* light outline */
|
||||||
|
|
||||||
|
&--light-outline {
|
||||||
|
border: 1px solid #fff !important; // override
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* information */
|
||||||
|
|
||||||
|
&--info {
|
||||||
|
background-color: $info-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: mix(#000, $info-color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* warning */
|
||||||
|
|
||||||
|
&--warning {
|
||||||
|
background-color: $warning-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: mix(#000, $warning-color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* success */
|
||||||
|
|
||||||
|
&--success {
|
||||||
|
background-color: $success-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: mix(#000, $success-color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* danger */
|
||||||
|
|
||||||
|
&--danger {
|
||||||
|
background-color: $danger-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: mix(#000, $danger-color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* disabled */
|
||||||
|
|
||||||
|
&--disabled {
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: not-allowed;
|
||||||
|
filter: alpha(opacity=65);
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
opacity: 0.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* social buttons */
|
||||||
|
|
||||||
|
$social:
|
||||||
|
(facebook, $facebook-color),
|
||||||
|
(twitter, $twitter-color),
|
||||||
|
(google-plus, $google-plus-color);
|
||||||
|
|
||||||
|
@each $socialnetwork, $color in $social {
|
||||||
|
&--#{$socialnetwork} {
|
||||||
|
background-color: $color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: mix(#000, $color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
71
assets/_scss/_footer.scss
Normal file
71
assets/_scss/_footer.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
FOOTER
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.page__footer {
|
||||||
|
@include container;
|
||||||
|
@include clearfix;
|
||||||
|
margin-top: 3em;
|
||||||
|
padding: 0 2em 3em;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
max-width: $x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__footer-copyright {
|
||||||
|
@include breakpoint($large) {
|
||||||
|
@include prefix(2 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
@include prefix(2.5 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__footer-follow {
|
||||||
|
@include breakpoint($large) {
|
||||||
|
@include prefix(2 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
@include prefix(2.5 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
font-size: 16px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
li + li:before {
|
||||||
|
content: "";
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
350
assets/_scss/_forms.scss
Normal file
350
assets/_scss/_forms.scss
Normal file
|
|
@ -0,0 +1,350 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
btnform {
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 0;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 5px * 2;
|
||||||
|
*margin-left: -7px;
|
||||||
|
padding: 0;
|
||||||
|
color: $text-color;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid mix(#fff, #000, 80%);
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 5px / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
br {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label,
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
vertical-align: baseline;
|
||||||
|
*vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: $serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 10px / 8;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $text-color;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 4px;
|
||||||
|
margin-bottom: 5px / 4;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid mix(#fff, #000, 80%);
|
||||||
|
color: $text-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: mix(#fff, $accent-color, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-mini {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-small {
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="image"],
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: 0;
|
||||||
|
margin: 3px 0;
|
||||||
|
*margin-top: 0;
|
||||||
|
line-height: normal;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 0 \9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
*width: 13px;
|
||||||
|
*height: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="image"] {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
width: auto;
|
||||||
|
padding: initial;
|
||||||
|
line-height: initial;
|
||||||
|
border: initial;
|
||||||
|
background-color: transparent;
|
||||||
|
background-color: initial;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
*overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
select,
|
||||||
|
input[type="file"] {
|
||||||
|
*margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
width: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
select[multiple],
|
||||||
|
select[size] {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
height: auto;
|
||||||
|
overflow: auto;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="hidden"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio,
|
||||||
|
.checkbox {
|
||||||
|
padding-left: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio input[type="radio"],
|
||||||
|
.checkbox input[type="checkbox"] {
|
||||||
|
float: left;
|
||||||
|
margin-left: -18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.inline,
|
||||||
|
.checkbox.inline {
|
||||||
|
display: inline-block;
|
||||||
|
padding-top: 5px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio.inline + .radio.inline,
|
||||||
|
.checkbox.inline + .checkbox.inline {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Disabled state
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
input[disabled],
|
||||||
|
select[disabled],
|
||||||
|
textarea[disabled],
|
||||||
|
input[readonly],
|
||||||
|
select[readonly],
|
||||||
|
textarea[readonly] {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Focus & active state
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
input:focus,
|
||||||
|
textarea:focus {
|
||||||
|
border-color: $accent-color;
|
||||||
|
outline: 0;
|
||||||
|
outline: thin dotted \9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"]:focus,
|
||||||
|
input[type="radio"]:focus,
|
||||||
|
input[type="checkbox"]:focus,
|
||||||
|
select:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Help text
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.help-block,
|
||||||
|
.help-inline {
|
||||||
|
color: $info-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-block {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help-inline {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
.form-inline
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.form-inline input,
|
||||||
|
.form-inline textarea,
|
||||||
|
.form-inline select {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-inline label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-inline .radio,
|
||||||
|
.form-inline .checkbox,
|
||||||
|
.form-inline .radio {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-inline .radio input[type="radio"],
|
||||||
|
.form-inline .checkbox input[type="checkbox"] {
|
||||||
|
float: left;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 3px; }
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
.form-search
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.form-search input,
|
||||||
|
.form-search textarea,
|
||||||
|
.form-search select {
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-search .search-query {
|
||||||
|
padding-left: 14px;
|
||||||
|
padding-right: 14px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
border-radius: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-search label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-search .radio,
|
||||||
|
.form-search .checkbox,
|
||||||
|
.form-inline .radio {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-search .radio input[type="radio"],
|
||||||
|
.form-search .checkbox input[type="checkbox"] {
|
||||||
|
float: left;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Google search form
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
#goog-fixurl {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#goog-wm-qt {
|
||||||
|
width: auto;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 8px 20px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #000;
|
||||||
|
border-width: 2px !important;
|
||||||
|
border-style: solid !important;
|
||||||
|
border-color: lighten(#000,50);
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
#goog-wm-sb {
|
||||||
|
@extend .btn;
|
||||||
|
}
|
||||||
73
assets/_scss/_masthead.scss
Normal file
73
assets/_scss/_masthead.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
MASTHEAD
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.masthead {
|
||||||
|
@include container;
|
||||||
|
@include clearfix;
|
||||||
|
padding: 2em 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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 {
|
||||||
|
@include breakpoint($large) {
|
||||||
|
@include prefix(2 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
@include prefix(2.5 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-bottom: 1em;
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
clear: both;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead__menu-item {
|
||||||
|
display: block;
|
||||||
|
list-style-type: none;
|
||||||
|
font-size: 16px;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
a {
|
||||||
|
&:hover {
|
||||||
|
color: $gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
50
assets/_scss/_mixins.scss
Normal file
50
assets/_scss/_mixins.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
MIXINS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
%tab-focus {
|
||||||
|
// Default
|
||||||
|
outline: thin dotted $warning-color;
|
||||||
|
// Webkit
|
||||||
|
outline: 5px auto $warning-color;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
em function
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@function em($target, $context: $doc-font-size) {
|
||||||
|
@return ($target / $context) * 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Bourbon clearfix
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
// Provides an easy way to include a clearfix for containing floats.
|
||||||
|
//
|
||||||
|
// @link http://cssmojo.com/latest_new_clearfix_so_far/
|
||||||
|
//
|
||||||
|
// @example scss - Usage
|
||||||
|
// .element {
|
||||||
|
// @include clearfix;
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// @example css - CSS Output
|
||||||
|
// .element::after {
|
||||||
|
// clear: both;
|
||||||
|
// content: "";
|
||||||
|
// display: table;
|
||||||
|
// }
|
||||||
|
|
||||||
|
@mixin clearfix {
|
||||||
|
clear: both;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
}
|
||||||
164
assets/_scss/_navigation.scss
Normal file
164
assets/_scss/_navigation.scss
Normal file
|
|
@ -0,0 +1,164 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
NAVIGATION
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Breadcrumb navigation links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.breadcrumbs {
|
||||||
|
@include container;
|
||||||
|
@include clearfix;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding-left: 2em;
|
||||||
|
padding-right: 2em;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
|
||||||
|
ol {
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
@include span(10 of 12);
|
||||||
|
@include pre(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Priority plus navigation
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.greedy-nav {
|
||||||
|
position: relative;
|
||||||
|
min-width: 250px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
right: 0;
|
||||||
|
padding: 0 10px;
|
||||||
|
border: 0;
|
||||||
|
outline: none;
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visible-links {
|
||||||
|
display: inline-table;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: table-cell;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
a {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
a {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-links {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 5px;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 0 10px rgba(#000, 0.25);
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -11px;
|
||||||
|
right: 10px;
|
||||||
|
width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 10px 10px;
|
||||||
|
border-color: $border-color transparent;
|
||||||
|
display: block;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 10px 10px;
|
||||||
|
border-color: #fff transparent;
|
||||||
|
display: block;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: block;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
87
assets/_scss/_notices.scss
Normal file
87
assets/_scss/_notices.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
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-radius: $border-radius;
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
195
assets/_scss/_page.scss
Normal file
195
assets/_scss/_page.scss
Normal file
|
|
@ -0,0 +1,195 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
SINGLE PAGE/POST
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
#main {
|
||||||
|
@include container;
|
||||||
|
@include clearfix;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 2em;
|
||||||
|
padding-left: 2em;
|
||||||
|
padding-right: 2em;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
max-width: $x-large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
padding-right: $right-sidebar-width-narrow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
@include span(10 of 12 last);
|
||||||
|
padding-right: $right-sidebar-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
@include prefix(0.5 of 12);
|
||||||
|
padding-right: $right-sidebar-width-wide;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__title {
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: $serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__content {
|
||||||
|
p, li {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__hero {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
@include clearfix;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__hero-image {
|
||||||
|
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($large) {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Social sharing
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.page__share {
|
||||||
|
margin-top: 2em;
|
||||||
|
padding-top: 1em;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__share-title {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Page meta
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.page__meta {
|
||||||
|
margin-top: 2em;
|
||||||
|
color: mix(#fff, $gray, 25%);
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__meta-title {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Page taxonomy
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.page__taxonomy {
|
||||||
|
.sep {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__taxonomy-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid $light-gray;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
border-color: $gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Comments
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.page__comments-title {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Related
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.page__related {
|
||||||
|
margin-top: 2em;
|
||||||
|
padding-top: 1em;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
@include clearfix();
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
@include pre(2 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
@include pre(2.5 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__related-title {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
@ -2,15 +2,17 @@
|
||||||
PRINT STYLES
|
PRINT STYLES
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Hide the following elements on print
|
Hide the following elements on print
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
.top-navigation,
|
.masthead,
|
||||||
.social-share,
|
.toc,
|
||||||
.related-articles,
|
.page__share,
|
||||||
.google-ads {
|
.page__related,
|
||||||
|
.ads,
|
||||||
|
.page__footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
179
assets/_scss/_reset.scss
Normal file
179
assets/_scss/_reset.scss
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
STYLE RESETS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@include border-box-sizing;
|
||||||
|
|
||||||
|
html {
|
||||||
|
/* apply a natural box layout model to all elements */
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: $background-color;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove margin */
|
||||||
|
|
||||||
|
body { margin: 0; }
|
||||||
|
|
||||||
|
/* Selected elements */
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: #fff;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Display HTML5 elements in IE6-9 and FF3 */
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
main,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Display block in IE6-9 and FF3 */
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevents modern browsers from displaying 'audio' without controls */
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove blue color */
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Apply focus state */
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
@extend %tab-focus;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove outline from links */
|
||||||
|
|
||||||
|
a:hover,
|
||||||
|
a:active {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevent sub and sup affecting line-height in all browsers */
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* img border in anchor's and image quality */
|
||||||
|
|
||||||
|
img {
|
||||||
|
/* Responsive images (ensure images don't scale beyond their parents) */
|
||||||
|
max-width: 100%; // part 1: Set a maximum relative to the parent
|
||||||
|
width: auto\9; // IE7-8 need help adjusting responsive images
|
||||||
|
height: auto; // part 2: Scale the height according to the width, otherwise you get stretching
|
||||||
|
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
-ms-interpolation-mode: bicubic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevent max-width from affecting Google Maps */
|
||||||
|
|
||||||
|
#map_canvas img,
|
||||||
|
.google-maps img {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Consistent form font size in all browsers, margin changes, misc */
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
*overflow: visible; // inner spacing ie IE6/7
|
||||||
|
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
|
||||||
|
}
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner { // inner padding and border oddities in FF3/4
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
-webkit-appearance: button; // corrects inability to style clickable `input` types in iOS
|
||||||
|
cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
|
||||||
|
}
|
||||||
|
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
button,
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="radio"],
|
||||||
|
input[type="checkbox"] {
|
||||||
|
cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] { // Appearance in Safari/Chrome
|
||||||
|
box-sizing: content-box;
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-decoration,
|
||||||
|
input[type="search"]::-webkit-search-cancel-button {
|
||||||
|
-webkit-appearance: none; // inner-padding issues in Chrome OSX, Safari 5
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto; // remove vertical scrollbar in IE6-9
|
||||||
|
vertical-align: top; // readability and alignment cross-browser
|
||||||
|
}
|
||||||
225
assets/_scss/_sidebar.scss
Normal file
225
assets/_scss/_sidebar.scss
Normal file
|
|
@ -0,0 +1,225 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
SIDEBAR
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Default
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
@include clearfix();
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
@include span(2 of 12);
|
||||||
|
@include suffix(0.25 of 12);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h3, h4, h5, h6 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__right {
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 1em;
|
||||||
|
width: $right-sidebar-width-narrow;
|
||||||
|
padding-left: 2em;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
width: $right-sidebar-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
width: $right-sidebar-width-wide;
|
||||||
|
padding-left: span(1 of 12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint($x-large) {
|
||||||
|
right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Author profile and links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.author__avatar {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 110px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.author__content {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.author__name {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sidebar .author__name {
|
||||||
|
font-family: $sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author__bio {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.author__urls-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
z-index: 9999;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px 10px;
|
||||||
|
color: mix(#fff, $gray, 25%);
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.author__urls {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
list-style-type: none;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
background: #fff;
|
||||||
|
z-index: -1;
|
||||||
|
box-shadow: 0 0 10px rgba(#000, 0.25);
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -11px;
|
||||||
|
left: calc(50% - 10px);
|
||||||
|
width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 10px 10px;
|
||||||
|
border-color: $border-color transparent;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: calc(50% - 10px);
|
||||||
|
width: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 0 10px 10px;
|
||||||
|
border-color: #fff transparent;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
@include breakpoint($large) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
118
assets/_scss/_syntax.scss
Normal file
118
assets/_scss/_syntax.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
Syntax highlighting
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
div.highlighter-rouge, figure.highlight {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
margin: 0;
|
||||||
|
font-family: $monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight table td { padding: 5px; }
|
||||||
|
.highlight table pre { margin: 0; }
|
||||||
|
.highlight, .highlight .w {
|
||||||
|
color: #303030;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .err {
|
||||||
|
color: #151515;
|
||||||
|
background-color: #ac4142;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
|
||||||
|
color: #505050;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .cp {
|
||||||
|
color: #f4bf75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .nt {
|
||||||
|
color: #f4bf75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .o, .highlight .ow {
|
||||||
|
color: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .p, .highlight .pi {
|
||||||
|
color: #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .gi {
|
||||||
|
color: #90a959;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .gd {
|
||||||
|
color: #ac4142;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .gh {
|
||||||
|
color: #6a9fb5;
|
||||||
|
background-color: #151515;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
|
||||||
|
color: #aa759f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .kc {
|
||||||
|
color: #d28445;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .kt {
|
||||||
|
color: #d28445;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .kd {
|
||||||
|
color: #d28445;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
|
||||||
|
color: #90a959;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .sr {
|
||||||
|
color: #75b5aa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .si {
|
||||||
|
color: #8f5536;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .se {
|
||||||
|
color: #8f5536;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .nn {
|
||||||
|
color: #f4bf75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .nc {
|
||||||
|
color: #f4bf75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .no {
|
||||||
|
color: #f4bf75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .na {
|
||||||
|
color: #6a9fb5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
|
||||||
|
color: #90a959;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight .ss {
|
||||||
|
color: #90a959;
|
||||||
|
}
|
||||||
34
assets/_scss/_tables.scss
Normal file
34
assets/_scss/_tables.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
TABLES
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-bottom: 2px solid $border-color;
|
||||||
|
|
||||||
|
& + table {
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
border-bottom: 2px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding: 0.5em;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr, td, th {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
55
assets/_scss/_toc.scss
Normal file
55
assets/_scss/_toc.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
TABLE OF CONTENTS
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.toc {
|
||||||
|
padding: 0 0 1em;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
color: $gray;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc__title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-family: $sans-serif-narrow;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc__menu {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: $gray;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #000;
|
||||||
|
background: $border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li ul > li a {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// hide sub sub links on small screens
|
||||||
|
li > ul li {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
255
assets/_scss/_utilities.scss
Normal file
255
assets/_scss/_utilities.scss
Normal file
|
|
@ -0,0 +1,255 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
UTILITY CLASSES
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Visibility
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* for preloading images */
|
||||||
|
|
||||||
|
.load {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */
|
||||||
|
|
||||||
|
.visually-hidden,
|
||||||
|
.screen-reader-text,
|
||||||
|
.screen-reader-text span,
|
||||||
|
.screen-reader-shortcut {
|
||||||
|
position: absolute !important;
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
height: 1px !important;
|
||||||
|
width: 1px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body:hover .visually-hidden a,
|
||||||
|
body:hover .visually-hidden input,
|
||||||
|
body:hover .visually-hidden button {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* screen readers */
|
||||||
|
|
||||||
|
.screen-reader-text:focus,
|
||||||
|
.screen-reader-shortcut:focus {
|
||||||
|
clip: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
width: auto !important;
|
||||||
|
display: block;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 15px 23px 14px;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 100000;
|
||||||
|
text-decoration: none;
|
||||||
|
box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Skip links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.skip-link {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 20;
|
||||||
|
margin: 0;
|
||||||
|
font-family: $sans-serif;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link li {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Type
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* center align */
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Alignment
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* clearfix */
|
||||||
|
|
||||||
|
.cf { clear: both; }
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Images
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* image align left */
|
||||||
|
|
||||||
|
.align-left {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
@include breakpoint($small) {
|
||||||
|
float: left;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* image align right */
|
||||||
|
|
||||||
|
.align-right {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
|
||||||
|
@include breakpoint($small) {
|
||||||
|
float: right;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* file page content container */
|
||||||
|
|
||||||
|
.full {
|
||||||
|
@include breakpoint($large){
|
||||||
|
margin-right: -1 * $right-sidebar-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Icons
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
fill: currentColor;
|
||||||
|
width: 1em;
|
||||||
|
height: 1.1em;
|
||||||
|
line-height: 1;
|
||||||
|
position: relative;
|
||||||
|
top: -0.1em;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Navicons
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
$navicon-width : 32px;
|
||||||
|
$navicon-height : 4px;
|
||||||
|
|
||||||
|
.navicon {
|
||||||
|
position: relative;
|
||||||
|
width: $navicon-width;
|
||||||
|
height: $navicon-height;
|
||||||
|
background: #fff;
|
||||||
|
margin: auto;
|
||||||
|
transition: 0.3s;
|
||||||
|
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: $navicon-width;
|
||||||
|
height: $navicon-height;
|
||||||
|
background: #fff;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
top: (-2 * $navicon-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
bottom: (-2 * $navicon-height);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close .navicon {
|
||||||
|
// hide the middle line
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
// overlay the lines by setting both their top values to 0
|
||||||
|
&:before, &:after{
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
top: 0;
|
||||||
|
width: $navicon-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// rotate the lines to form the x shape
|
||||||
|
&:before{
|
||||||
|
transform: rotate3d(0,0,1,45deg);
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
transform: rotate3d(0,0,1,-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Sticky, fixed to top content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.sticky {
|
||||||
|
@include breakpoint($medium) {
|
||||||
|
@include clearfix();
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 3em;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Wells
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.well {
|
||||||
|
min-height: 20px;
|
||||||
|
padding: 19px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1px solid #e3e3e3;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Footnotes
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.footnotes {
|
||||||
|
ol, li, p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
114
assets/_scss/_variables.scss
Normal file
114
assets/_scss/_variables.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
/* ==========================================================================
|
||||||
|
Variables
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
Typography
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
$doc-font-size : 16;
|
||||||
|
$doc-line-height : 26;
|
||||||
|
$paragraph-indent : false !default;
|
||||||
|
$indent-var : 0rem + ($doc-line-height / $doc-font-size);
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
|
||||||
|
/* sans serif typefaces */
|
||||||
|
$sans-serif-narrow : $sans-serif;
|
||||||
|
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
|
||||||
|
/* serif typefaces */
|
||||||
|
$georgia : Georgia, serif;
|
||||||
|
$times : Times, serif;
|
||||||
|
$bodoni : "Bodoni MT", serif;
|
||||||
|
$calisto : "Calisto MT", serif;
|
||||||
|
$garamond : Garamond, serif;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Colors
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
$gray : #4c4c4c;
|
||||||
|
$dark-gray : #191413;
|
||||||
|
$light-gray : #e2e2e2;
|
||||||
|
$lighter-gray : #f9f9f9;
|
||||||
|
|
||||||
|
$body-color : #fff;
|
||||||
|
$background-color : #fff;
|
||||||
|
$text-color : #333332;
|
||||||
|
$border-color : $light-gray;
|
||||||
|
$base-color : #343434;
|
||||||
|
$comp-color : spin($base-color, 180);
|
||||||
|
$accent-color : #000;
|
||||||
|
|
||||||
|
/* buttons */
|
||||||
|
$primary-color : #000;
|
||||||
|
$success-color : #5cb85c;
|
||||||
|
$warning-color : #dd8338;
|
||||||
|
$danger-color : #C64537;
|
||||||
|
$info-color : #308cbc;
|
||||||
|
|
||||||
|
/* brands */
|
||||||
|
$facebook-color : #3b5998;
|
||||||
|
$flickr-color : #ff0084;
|
||||||
|
$foursquare-color : #0cbadf;
|
||||||
|
$google-plus-color : #dd4b39;
|
||||||
|
$instagram-color : #4e433c;
|
||||||
|
$linkedin-color : #4875b4;
|
||||||
|
$pinterest-color : #cb2027;
|
||||||
|
$rss-color : #fa9b39;
|
||||||
|
$tumblr-color : #2c4762;
|
||||||
|
$twitter-color : #55acee;
|
||||||
|
$vimeo-color : #1ab7ea;
|
||||||
|
$youtube-color : #ff3333;
|
||||||
|
|
||||||
|
/* links */
|
||||||
|
$link-color : #343434;
|
||||||
|
$link-color-hover : darken($link-color, 10);
|
||||||
|
$link-color-visited : lighten($link-color-hover, 20);
|
||||||
|
$link-color-focus : darken($link-color-visited, 10);
|
||||||
|
|
||||||
|
$border-radius : 4px;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Breakpoints
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@include breakpoint-set("to ems", true);
|
||||||
|
|
||||||
|
$small : 600px;
|
||||||
|
$medium : 768px;
|
||||||
|
$medium-wide : 900px;
|
||||||
|
$large : 1024px;
|
||||||
|
$x-large : 1280px;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Grid
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
$right-sidebar-width-narrow : 200px;
|
||||||
|
$right-sidebar-width : 300px;
|
||||||
|
$right-sidebar-width-wide : 400px;
|
||||||
|
|
||||||
|
$susy: (
|
||||||
|
columns: 12,
|
||||||
|
// column-width: 90px,
|
||||||
|
gutters: 1/4,
|
||||||
|
math: fluid,
|
||||||
|
output: float,
|
||||||
|
gutter-position: after,
|
||||||
|
container: $large,
|
||||||
|
global-box-sizing: border-box,
|
||||||
|
// debug: (
|
||||||
|
// image: show,
|
||||||
|
// color: blue,
|
||||||
|
// output: overlay,
|
||||||
|
// toggle: top right,
|
||||||
|
// ),
|
||||||
|
);
|
||||||
36
assets/_scss/main.scss
Normal file
36
assets/_scss/main.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
/*
|
||||||
|
* Minimal Mistakes Jekyll Theme
|
||||||
|
*
|
||||||
|
* - Michael Rose
|
||||||
|
* - mademistakes.com
|
||||||
|
* - https://twitter.com/mmistakes
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import "vendor/breakpoint/breakpoint"; // media query mixins
|
||||||
|
@import "variables";
|
||||||
|
@import "mixins";
|
||||||
|
@import "vendor/susy/susy";
|
||||||
|
|
||||||
|
@import "reset";
|
||||||
|
@import "base";
|
||||||
|
|
||||||
|
@import "utilities";
|
||||||
|
@import "tables";
|
||||||
|
@import "buttons";
|
||||||
|
@import "notices";
|
||||||
|
@import "masthead";
|
||||||
|
@import "navigation";
|
||||||
|
@import "toc"; // table of contents
|
||||||
|
@import "footer";
|
||||||
|
@import "syntax";
|
||||||
|
|
||||||
|
@import "forms";
|
||||||
|
|
||||||
|
@import "page";
|
||||||
|
@import "archive";
|
||||||
|
@import "sidebar";
|
||||||
|
|
||||||
|
@import "vendor/font-awesome/font-awesome";
|
||||||
|
@import "vendor/magnific-popup/magnific-popup";
|
||||||
|
@import "print";
|
||||||
114
assets/_scss/vendor/breakpoint/_breakpoint.scss
vendored
Normal file
114
assets/_scss/vendor/breakpoint/_breakpoint.scss
vendored
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
//////////////////////////////
|
||||||
|
// Default Variables
|
||||||
|
//////////////////////////////
|
||||||
|
$Breakpoint-Settings: (
|
||||||
|
'default media': all,
|
||||||
|
'default feature': min-width,
|
||||||
|
'default pair': width,
|
||||||
|
|
||||||
|
'force all media type': false,
|
||||||
|
'to ems': false,
|
||||||
|
'transform resolutions': true,
|
||||||
|
|
||||||
|
'no queries': false,
|
||||||
|
'no query fallbacks': false,
|
||||||
|
|
||||||
|
'base font size': 16px,
|
||||||
|
|
||||||
|
'legacy syntax': false
|
||||||
|
);
|
||||||
|
|
||||||
|
$breakpoint: () !default;
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Imports
|
||||||
|
//////////////////////////////
|
||||||
|
@import "settings";
|
||||||
|
@import "context";
|
||||||
|
@import "helpers";
|
||||||
|
@import "parsers";
|
||||||
|
@import "no-query";
|
||||||
|
|
||||||
|
@import "respond-to";
|
||||||
|
|
||||||
|
@import "legacy-settings";
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Breakpoint Mixin
|
||||||
|
//////////////////////////////
|
||||||
|
|
||||||
|
@mixin breakpoint($query, $no-query: false) {
|
||||||
|
@include legacy-settings-warning;
|
||||||
|
|
||||||
|
// Reset contexts
|
||||||
|
@include private-breakpoint-reset-contexts();
|
||||||
|
|
||||||
|
$breakpoint: breakpoint($query, false);
|
||||||
|
|
||||||
|
$query-string: map-get($breakpoint, 'query');
|
||||||
|
$query-fallback: map-get($breakpoint, 'fallback');
|
||||||
|
|
||||||
|
$private-breakpoint-context-holder: map-get($breakpoint, 'context holder') !global;
|
||||||
|
$private-breakpoint-query-count: map-get($breakpoint, 'query count') !global;
|
||||||
|
|
||||||
|
// Allow for an as-needed override or usage of no query fallback.
|
||||||
|
@if $no-query != false {
|
||||||
|
$query-fallback: $no-query;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $query-fallback != false {
|
||||||
|
$context-setter: private-breakpoint-set-context('no-query', $query-fallback);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Print Out Query String
|
||||||
|
@if not breakpoint-get('no queries') {
|
||||||
|
@media #{$query-string} {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@if breakpoint-get('no query fallbacks') != false or breakpoint-get('no queries') == true {
|
||||||
|
|
||||||
|
$type: type-of(breakpoint-get('no query fallbacks'));
|
||||||
|
$print: false;
|
||||||
|
|
||||||
|
@if ($type == 'bool') {
|
||||||
|
$print: true;
|
||||||
|
}
|
||||||
|
@else if ($type == 'string') {
|
||||||
|
@if $query-fallback == breakpoint-get('no query fallbacks') {
|
||||||
|
$print: true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if ($type == 'list') {
|
||||||
|
@each $wrapper in breakpoint-get('no query fallbacks') {
|
||||||
|
@if $query-fallback == $wrapper {
|
||||||
|
$print: true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Write Fallback
|
||||||
|
@if ($query-fallback != false) and ($print == true) {
|
||||||
|
$type-fallback: type-of($query-fallback);
|
||||||
|
|
||||||
|
@if ($type-fallback != 'bool') {
|
||||||
|
#{$query-fallback} & {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include private-breakpoint-reset-contexts();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@mixin mq($query, $no-query: false) {
|
||||||
|
@include breakpoint($query, $no-query) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
95
assets/_scss/vendor/breakpoint/_context.scss
vendored
Normal file
95
assets/_scss/vendor/breakpoint/_context.scss
vendored
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
//////////////////////////////
|
||||||
|
// Private Breakpoint Variables
|
||||||
|
//////////////////////////////
|
||||||
|
$private-breakpoint-context-holder: ();
|
||||||
|
$private-breakpoint-query-count: 0 !default;
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Breakpoint Has Context
|
||||||
|
// Returns whether or not you are inside a Breakpoint query
|
||||||
|
//////////////////////////////
|
||||||
|
@function breakpoint-has-context() {
|
||||||
|
@if length($private-breakpoint-query-count) {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Breakpoint Get Context
|
||||||
|
// $feature: Input feature to get it's current MQ context. Returns false if no context
|
||||||
|
//////////////////////////////
|
||||||
|
@function breakpoint-get-context($feature) {
|
||||||
|
@if map-has-key($private-breakpoint-context-holder, $feature) {
|
||||||
|
$get: map-get($private-breakpoint-context-holder, $feature);
|
||||||
|
// Special handling of no-query from get side so /false/ prepends aren't returned
|
||||||
|
@if $feature == 'no-query' {
|
||||||
|
@if type-of($get) == 'list' and length($get) > 1 and nth($get, 1) == false {
|
||||||
|
$get: nth($get, length($get));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return $get;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@if breakpoint-has-context() and $feature == 'media' {
|
||||||
|
@return breakpoint-get('default media');
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Private function to set context
|
||||||
|
//////////////////////////////
|
||||||
|
@function private-breakpoint-set-context($feature, $value) {
|
||||||
|
@if $value == 'monochrome' {
|
||||||
|
$feature: 'monochrome';
|
||||||
|
}
|
||||||
|
|
||||||
|
$current: map-get($private-breakpoint-context-holder, $feature);
|
||||||
|
@if $current and length($current) == $private-breakpoint-query-count {
|
||||||
|
@warn "You have already queried against `#{$feature}`. Unexpected things may happen if you query against the same feature more than once in the same `and` query. Breakpoint is overwriting the current context with `#{$value}`";
|
||||||
|
}
|
||||||
|
|
||||||
|
@if not map-has-key($private-breakpoint-context-holder, $feature) {
|
||||||
|
$v-holder: ();
|
||||||
|
@for $i from 1 to $private-breakpoint-query-count {
|
||||||
|
@if $feature == 'media' {
|
||||||
|
$v-holder: append($v-holder, breakpoint-get('default media'));
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
$v-holder: append($v-holder, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$v-holder: append($v-holder, $value);
|
||||||
|
$private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
$v-holder: map-get($private-breakpoint-context-holder, $feature);
|
||||||
|
$length: length($v-holder);
|
||||||
|
@for $i from $length to $private-breakpoint-query-count - 1 {
|
||||||
|
@if $feature == 'media' {
|
||||||
|
$v-holder: append($v-holder, breakpoint-get('default media'));
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
$v-holder: append($v-holder, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$v-holder: append($v-holder, $value);
|
||||||
|
$private-breakpoint-context-holder: map-merge($private-breakpoint-context-holder, ($feature: $v-holder)) !global;
|
||||||
|
}
|
||||||
|
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Private function to reset context
|
||||||
|
//////////////////////////////
|
||||||
|
@mixin private-breakpoint-reset-contexts {
|
||||||
|
$private-breakpoint-context-holder: () !global;
|
||||||
|
$private-breakpoint-query-count: 0 !global;
|
||||||
|
}
|
||||||
151
assets/_scss/vendor/breakpoint/_helpers.scss
vendored
Normal file
151
assets/_scss/vendor/breakpoint/_helpers.scss
vendored
Normal file
|
|
@ -0,0 +1,151 @@
|
||||||
|
//////////////////////////////
|
||||||
|
// Converts the input value to Base EMs
|
||||||
|
//////////////////////////////
|
||||||
|
@function breakpoint-to-base-em($value) {
|
||||||
|
$value-unit: unit($value);
|
||||||
|
|
||||||
|
// Will convert relative EMs into root EMs.
|
||||||
|
@if breakpoint-get('base font size') and type-of(breakpoint-get('base font size')) == 'number' and $value-unit == 'em' {
|
||||||
|
$base-unit: unit(breakpoint-get('base font size'));
|
||||||
|
|
||||||
|
@if $base-unit == 'px' or $base-unit == '%' or $base-unit == 'em' or $base-unit == 'pt' {
|
||||||
|
@return base-conversion($value) / base-conversion(breakpoint-get('base font size')) * 1em;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@warn '#{breakpoint-get(\'base font size\')} is not set in valid units for font size!';
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@return base-conversion($value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@function base-conversion($value) {
|
||||||
|
$unit: unit($value);
|
||||||
|
|
||||||
|
@if $unit == 'px' {
|
||||||
|
@return $value / 16px * 1em;
|
||||||
|
}
|
||||||
|
@else if $unit == '%' {
|
||||||
|
@return $value / 100% * 1em;
|
||||||
|
}
|
||||||
|
@else if $unit == 'em' {
|
||||||
|
@return $value;
|
||||||
|
}
|
||||||
|
@else if $unit == 'pt' {
|
||||||
|
@return $value / 12pt * 1em;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
@return $value;
|
||||||
|
// @warn 'Everything is terrible! What have you done?!';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Returns whether the feature can have a min/max pair
|
||||||
|
//////////////////////////////
|
||||||
|
$breakpoint-min-max-features: 'color',
|
||||||
|
'color-index',
|
||||||
|
'aspect-ratio',
|
||||||
|
'device-aspect-ratio',
|
||||||
|
'device-height',
|
||||||
|
'device-width',
|
||||||
|
'height',
|
||||||
|
'monochrome',
|
||||||
|
'resolution',
|
||||||
|
'width';
|
||||||
|
|
||||||
|
@function breakpoint-min-max($feature) {
|
||||||
|
@each $item in $breakpoint-min-max-features {
|
||||||
|
@if $feature == $item {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Returns whether the feature can have a string value
|
||||||
|
//////////////////////////////
|
||||||
|
$breakpoint-string-features: 'orientation',
|
||||||
|
'scan',
|
||||||
|
'color',
|
||||||
|
'aspect-ratio',
|
||||||
|
'device-aspect-ratio',
|
||||||
|
'pointer',
|
||||||
|
'luminosity';
|
||||||
|
|
||||||
|
@function breakpoint-string-value($feature) {
|
||||||
|
@each $item in $breakpoint-string-features {
|
||||||
|
@if breakpoint-min-max($item) {
|
||||||
|
@if $feature == 'min-#{$item}' or $feature == 'max-#{$item}' {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@else if $feature == $item {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Returns whether the feature is a media type
|
||||||
|
//////////////////////////////
|
||||||
|
$breakpoint-media-types: 'all',
|
||||||
|
'braille',
|
||||||
|
'embossed',
|
||||||
|
'handheld',
|
||||||
|
'print',
|
||||||
|
'projection',
|
||||||
|
'screen',
|
||||||
|
'speech',
|
||||||
|
'tty',
|
||||||
|
'tv';
|
||||||
|
|
||||||
|
@function breakpoint-is-media($feature) {
|
||||||
|
@each $media in $breakpoint-media-types {
|
||||||
|
@if ($feature == $media) or ($feature == 'not #{$media}') or ($feature == 'only #{$media}') {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Returns whether the feature can stand alone
|
||||||
|
//////////////////////////////
|
||||||
|
$breakpoint-single-string-features: 'color',
|
||||||
|
'color-index',
|
||||||
|
'grid',
|
||||||
|
'monochrome';
|
||||||
|
|
||||||
|
@function breakpoint-single-string($feature) {
|
||||||
|
@each $item in $breakpoint-single-string-features {
|
||||||
|
@if $feature == $item {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
//////////////////////////////
|
||||||
|
// Returns whether the feature
|
||||||
|
//////////////////////////////
|
||||||
|
@function breakpoint-is-resolution($feature) {
|
||||||
|
$resolutions: 'device-pixel-ratio', 'dpr';
|
||||||
|
|
||||||
|
@if breakpoint-get('transform resolutions') {
|
||||||
|
$resolutions: append($resolutions, 'resolution');
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $reso in $resolutions {
|
||||||
|
@if index($feature, $reso) or index($feature, 'min-#{$reso}') or index($feature, 'max-#{$reso}') {
|
||||||
|
@return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@return false;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue