diff --git a/_assets/css/_archive.scss b/_assets/css/_archive.scss
new file mode 100644
index 00000000..b85559f0
--- /dev/null
+++ b/_assets/css/_archive.scss
@@ -0,0 +1,47 @@
+/* ==========================================================================
+ ARCHIVE
+ ========================================================================== */
+
+.archive {
+ @include container;
+ @include grid(12,10);
+ @include prefix(12,1);
+ @include suffix(12,1);
+ margin-bottom: 2em;
+ @include breakpoint($small) {
+ @include grid(12,8);
+ @include prefix(12,0);
+ @include suffix(12,0);
+ }
+ @include breakpoint($large) {
+ @include grid(12,6);
+ }
+ @include breakpoint($x-large) {
+ @include grid(12,5);
+ }
+}
+
+.archive__subtitle {
+ margin: 0;
+ padding-bottom: 0.5em;
+ font-size: 28px;
+ border-bottom: 1px solid $border-color;
+}
+
+.archive__item-title {
+ margin-bottom: 4px;
+ font-size: 20px;
+ a {
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.archive__item-excerpt {
+ font-size: 14px;
+ & + p {
+ text-indent: 0;
+ }
+}
\ No newline at end of file
diff --git a/_base.scss b/_assets/css/_base.scss
similarity index 95%
rename from _base.scss
rename to _assets/css/_base.scss
index 3bdb4068..1073c9ca 100644
--- a/_base.scss
+++ b/_assets/css/_base.scss
@@ -2,16 +2,13 @@
BASE ELEMENTS
========================================================================== */
-/*
- Typography
- ========================================================================== */
-
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;
@@ -79,7 +76,7 @@ p, pre, blockquote, ul, ol, dl, figure, table, fieldset {
widows: 3;
}
-/* Abbreviations */
+/* abbreviations */
abbr[title],
abbr[data-original-title] {
@@ -88,7 +85,7 @@ abbr[data-original-title] {
border-bottom: 1px dotted $text-color;
}
-/* Blockquotes */
+/* blockquotes */
blockquote {
margin: 2em 1em 2em 0;
@@ -110,10 +107,9 @@ blockquote {
}
}
-/* Links */
+/* links */
a {
- text-decoration: none;
&:focus {
@extend %tab-focus;
}
@@ -123,7 +119,7 @@ a {
}
}
-/* Lists */
+/* lists */
ol, ul {
@include breakpoint($small) {
@@ -134,7 +130,7 @@ ol, ul {
}
}
-/* Code */
+/* code */
tt, code, kbd, samp, pre {
font-family: $monospace;
@@ -157,7 +153,7 @@ figcaption code {
}
}
-/* Horizontal rule */
+/* horizontal rule */
hr {
display: block;
diff --git a/_buttons.scss b/_assets/css/_buttons.scss
similarity index 98%
rename from _buttons.scss
rename to _assets/css/_buttons.scss
index 19860e10..cf1bd329 100644
--- a/_buttons.scss
+++ b/_assets/css/_buttons.scss
@@ -17,6 +17,7 @@
font-weight: bold;
line-height: 1.5;
text-align: center;
+ text-decoration: none;
background-color: #000;
border: 0 !important;
border-radius: $border-radius;
diff --git a/_assets/css/_masthead.scss b/_assets/css/_masthead.scss
new file mode 100644
index 00000000..3ab0c406
--- /dev/null
+++ b/_assets/css/_masthead.scss
@@ -0,0 +1,83 @@
+/* ==========================================================================
+ MASTHEAD
+ ========================================================================== */
+
+.masthead {
+ @include container;
+ padding: 2em 0 1em;
+ font-family: $sans-serif-narrow;
+ font-weight: 700;
+ text-transform: uppercase;
+ @include clearfix;
+ a {
+ text-decoration: none;
+ }
+}
+
+/* Site name */
+.site-name {
+ @include grid(12,10);
+ @include prefix(12,1);
+ @include suffix(12,1);
+ margin-bottom: 1em;
+ float: none;
+ display: block;
+ font-size: 24px;
+ @include breakpoint($small) {
+ @include grid(12,2);
+ @include prefix(12,0.5);
+ @include suffix(12,0.5);
+ font-size: 16px;
+ }
+ @include breakpoint($x-large) {
+ @include grid(12,1.5);
+ @include prefix(12,2);
+ }
+}
+
+.masthead__menu {
+ @include grid(12,10);
+ @include prefix(12,1);
+ @include suffix(12,1);
+ margin-bottom: 1em;
+ float: none;
+ display: block;
+ @include breakpoint($small) {
+ @include grid(12,9);
+ @include prefix(12,0);
+ @include suffix(12,0);
+ }
+ @include breakpoint($x-large) {
+ @include grid(12,8);
+ }
+ ul {
+ margin: 0;
+ padding: 0;
+ clear: both;
+ list-style-type: none;
+ }
+}
+
+.masthead__menu-item {
+ display: block;
+ list-style-type: none;
+ border-bottom: 1px solid $border-color;
+ font-size: 16px;
+ &:last-child {
+ border-bottom: 0 solid transparent;
+ }
+ @include breakpoint($small) {
+ display: inline;
+ margin-right: 25px;
+ white-space: nowrap;
+ border-bottom: 0 solid transparent;
+ }
+ a {
+ display: block;
+ padding: 10px 0;
+ @include breakpoint($small) {
+ display: inline;
+ padding: 0;
+ }
+ }
+ }
\ No newline at end of file
diff --git a/_assets/css/_navigation.scss b/_assets/css/_navigation.scss
new file mode 100644
index 00000000..2e5148d5
--- /dev/null
+++ b/_assets/css/_navigation.scss
@@ -0,0 +1,45 @@
+/* ==========================================================================
+ NAVIGATION
+ ========================================================================== */
+
+/*
+ Breadcrumb navigation links
+ ========================================================================== */
+
+.breadcrumbs {
+ ol {
+ padding: 0;
+ list-style: none;
+ }
+ li {
+ display: inline;
+ }
+ .current {
+ font-weight: bold;
+ }
+}
+
+
+/*
+ Post pagination navigation links
+ ========================================================================== */
+
+.pagination {
+ padding-top: 0.5em;
+ border-top: 1px solid $border-color;
+ ul {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ }
+ li {
+ display: inline-block;
+ }
+ li + li:before {
+ content: "";
+ padding-right: 10px;
+ }
+ .current {
+ font-weight: bold;
+ }
+}
\ No newline at end of file
diff --git a/_assets/css/_notices.scss b/_assets/css/_notices.scss
new file mode 100644
index 00000000..3b773f6e
--- /dev/null
+++ b/_assets/css/_notices.scss
@@ -0,0 +1,80 @@
+/* ==========================================================================
+ NOTICE TEXT BLOCKS
+ ========================================================================== */
+
+/**
+ * Default Kramdown usage (no indents!):
+ *
+ * #### Headline for the Notice
+ * Text for the notice
+ *
+ */
+
+@mixin notice($notice-color) {
+ margin: 2em 0;
+ padding: 1em;
+ background-color: mix(#fff, $notice-color, 90%);
+ border-top: 0.25em solid mix(#fff, $notice-color, 50%);
+ border-bottom: 0.25em solid mix(#fff, $notice-color, 50%);
+ h4 {
+ margin-top: 0 !important; // override
+ margin-bottom: 0.75em;
+ line-height: 1 !important; // override
+ }
+ @at-root .page__content #{&} h4 {
+ // using at-root to override .page-content h4 font size
+ margin-bottom: 0;
+ font-size: 1rem;
+ }
+ @at-root .page__content #{&} a {
+ border-bottom-width: 2px;
+ box-shadow: none !important; // override
+ &:hover {
+ background-color: transparent !important; // override
+ }
+ }
+ p {
+ margin-bottom: 0;
+ a {
+ border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
+ }
+ }
+ h4 + p {
+ // remove space above paragraphs that appear directly after notice headline
+ margin-top: 0;
+ padding-top: 0;
+ }
+ code {
+ background-color: mix(#fff, $notice-color, 70%)
+ }
+}
+
+/* Default notice */
+
+.notice {
+ @include notice($primary-color);
+}
+
+/* Info notice */
+
+.notice--info {
+ @include notice($info-color);
+}
+
+/* Warning notice */
+
+.notice--warning {
+ @include notice($warning-color);
+}
+
+/* Success notice */
+
+.notice--success {
+ @include notice($success-color);
+}
+
+/* Danger notice */
+
+.notice--danger {
+ @include notice($danger-color);
+}
\ No newline at end of file
diff --git a/_assets/css/_page.scss b/_assets/css/_page.scss
index ac8ee17d..4f14f18b 100644
--- a/_assets/css/_page.scss
+++ b/_assets/css/_page.scss
@@ -2,96 +2,6 @@
SINGLE PAGE/POST
========================================================================== */
-body {
- background-color: $body-color;
- font-family: $serif;
- color: $text-color;
-}
-
-/*
- Header
- ========================================================================== */
-
-.navigation-wrapper {
- @include container;
- padding: 2em 0 1em;
- font-family: $sans-serif-narrow;
- font-weight: 700;
- text-transform: uppercase;
- @include clearfix;
-}
-
-/* Site name */
-.site-name {
- @include grid(12,10);
- @include prefix(12,1);
- @include suffix(12,1);
- margin-bottom: 1em;
- float: none;
- display: block;
- font-size: 24px;
- @include breakpoint($small) {
- @include grid(12,2);
- @include prefix(12,0.5);
- @include suffix(12,0.5);
- font-size: 16px;
- }
- @include breakpoint($x-large) {
- @include grid(12,1.5);
- @include prefix(12,2);
- }
-}
-
-/* Top navigation links */
-.top-navigation {
- @include grid(12,10);
- @include prefix(12,1);
- @include suffix(12,1);
- margin-bottom: 1em;
- float: none;
- display: block;
- @include breakpoint($small) {
- @include grid(12,9);
- @include prefix(12,0);
- @include suffix(12,0);
- }
- @include breakpoint($x-large) {
- @include grid(12,8);
- }
- ul {
- margin: 0;
- padding: 0;
- clear: both;
- list-style-type: none;
- }
- li {
- display: block;
- list-style-type: none;
- border-bottom: 1px solid lighten(#000,80);
- border-bottom: 1px solid fade(#000,10);
- font-size: 16px;
- &:last-child {
- border-bottom: 0 solid transparent;
- }
- @include breakpoint($small) {
- display: inline;
- margin-right: 25px;
- white-space: nowrap;
- border-bottom: 0 solid transparent;
- }
- a {
- display: block;
- padding: 10px 0;
- decoration: none;
- border-bottom: 0 solid transparent;
- @include breakpoint($small) {
- display: inline;
- padding: 0;
- }
- }
- }
-}
-
/* Main content */
#main {
counter-reset: captions;
@@ -107,64 +17,38 @@ body {
@include prefix(12,1);
@include suffix(12,1);
margin-bottom: 2em;
- @include breakpoint($small) {
- @include grid(12,8);
- @include prefix(12,0);
- @include suffix(12,0);
- }
- @include breakpoint($large) {
- @include grid(12,6);
- }
- @include breakpoint($x-large) {
- @include grid(12,5);
- }
-}
-/* Archive listing specific styling */
-.archive {
- @include container;
- @include grid(12,10);
- @include prefix(12,1);
- @include suffix(12,1);
- margin-bottom: 2em;
@include breakpoint($small) {
@include grid(12,8);
@include prefix(12,0);
@include suffix(12,0);
}
+
@include breakpoint($large) {
@include grid(12,6);
}
+
@include breakpoint($x-large) {
@include grid(12,5);
}
- h3 {
- margin: 0;
- padding-bottom: .5em;
- font-size: 28px;
- border-bottom: 1px solid mix(#fff, #000, 70%);
- }
- article {
- h2 {
- margin-bottom: 4px;
- font-size: 20px;
- }
- p {
- font-size: 14px;
- }
- p + p {
- text-indent: 0;
+}
+
+.page__title {}
+
+.page__content {
+ ul, ol {
+ li + li {
+ margin-top: 0.5em;
}
}
}
-/* Large feature header image */
-.image-wrap {
+.page__hero {
position: relative;
margin-bottom: 2em;
@include clearfix;
&:after {
- content: " ";
+ content: "";
display: block;
position: absolute;
bottom: 0;
@@ -183,10 +67,34 @@ body {
left: 33.333333333%;
}
}
- img {
- width: 100%;
- height: auto;
- -ms-interpolation-mode: bicubic;
+}
+
+.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($medium) {
+ padding: 5px 10px;
+ }
+ a {
+ color: #fff;
+ text-decoration: none;
}
}
@@ -216,37 +124,35 @@ body {
@include prefix(12,2);
}
}
-.author-name {
+.author__name {
margin-bottom: 0;
@include breakpoint($small) {
margin-top: 10px;
margin-bottom: 10px;
}
}
-.author-bio {
+.author__bio {
font-size: 80%;
font-style: italic;
@include breakpoint($small) {
margin-bottom: 20px;
}
}
-.author-avatar {
+.author__avatar {
max-width: 110px;
border-radius: 50%;
}
-.author-social {
+.author__social-url {
display: block;
margin-bottom: 5px;
font-size: 14px;
color: #000;
+ text-decoration: none;
&:visited {
color: #000;
}
&:hover {
- transform: scale(1.1);
- }
- &:active {
- transform: translate(0, 2px);
+ text-decoration: underline;
}
.fa {
margin-right: 5px;
@@ -257,68 +163,14 @@ body {
max-width: 125px;
}
@include breakpoint($large) {
- .author-name,
- .author-avatar,
- .author-bio,
- .author-social {
+ .author__name,
+ .author__avatar,
+ .author__bio,
+ .author__social-url {
max-width: 150px;
}
}
-/* Post content wrapper */
-.article-wrap {
- // Dotted line underlines for links
- p > a,
- p > em > a,
- p > strong > a,
- li > a {
- text-decoration: underline;
- }
-}
-
-/* Image grid - not used */
-.image-grid {
- @include clearfix;
- list-style: none;
- margin: 0 0 1em;
- padding: 0;
- li {
- @include grid(12,6);
- @include breakpoint($micro) {
- width: 33.333333%;
- }
- @include breakpoint($small) {
- width: 25%;
- }
- @include breakpoint($medium) {
- width: 20%;
- }
- @include breakpoint($large) {
- width: 16.666666666%;
- }
- }
-}
-
-/* Recent grid - not used */
-.recent-grid {
- @include clearfix;
- list-style: none;
- margin: 1em 0;
- li {
- display: inline;
- a {
- border-bottom: 0 solid transparent;
- &:hover {
- border-bottom: 0 solid transparent;
- }
- }
- }
- img {
- width: 19%;
- margin-bottom: 1%;
- }
-}
-
/* Social sharing links */
.social-share {
h4 {
@@ -447,45 +299,4 @@ body {
}
#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 mix(#fff, #000, 70%);
- ul {
- margin: 0;
- padding: 0;
- list-style-type: none;
- }
- li {
- display: inline-block;
- }
- li + li:before {
- content: "";
- padding-right: 10px;
- }
- .current {
- font-weight: bold;
- }
}
\ No newline at end of file
diff --git a/_assets/css/_site.scss b/_assets/css/_site.scss
deleted file mode 100644
index ba9e7e04..00000000
--- a/_assets/css/_site.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-/* ==========================================================================
- Site wide styles
- ========================================================================== */
-
-/*
- Selection
- ========================================================================== */
-
-::-moz-selection {
- background-color: mix(#fff, $base-color, 65%);
- color: $base-color;
- text-shadow: none;
-}
-::selection {
- background-color: mix(#fff, $base-color, 65%);
- color: $base-color;
- text-shadow: none;
-}
-
-/*
- Global classes
- ========================================================================== */
-
-/* Capitalize */
-.all-caps {
- text-transform: uppercase;
-}
-
-/* Float left */
-.pull-left {
- float: left;
-}
-
-/* Float right */
-.pull-right {
- float: right;
-}
-.image-pull-right {
- float: right;
- margin-top: 0;
-}
-
-/* Clearfix */
-.clearfix {
- *zoom: 1;
- &:before,
- &:after {
- display: table;
- content: "";
- }
- &:after {
- clear: both;
- }
-}
-
-/* Remove bullets and indentation from list */
-.unstyled-list {
- list-style: none;
- margin-left: 0;
- padding-left: 0;
- li {
- list-style-type: none;
- }
-}
\ No newline at end of file
diff --git a/_assets/css/_syntax.scss b/_assets/css/_syntax.scss
index 6d05bf6b..b5af0871 100644
--- a/_assets/css/_syntax.scss
+++ b/_assets/css/_syntax.scss
@@ -2,7 +2,8 @@
Syntax highlighting
========================================================================== */
-div.highlighter-rouge {
+div.highlighter-rouge,
+figure.highlight {
margin-bottom: 1em;
padding: 1em;
border: 1px solid $border-color;
diff --git a/_assets/css/_toc.scss b/_assets/css/_toc.scss
index 36778dd4..5a4c56ff 100644
--- a/_assets/css/_toc.scss
+++ b/_assets/css/_toc.scss
@@ -56,6 +56,7 @@
}
a {
display: block;
+ text-decoration: none;
&:hover {
text-decoration: underline;
}
diff --git a/_assets/css/_variables.scss b/_assets/css/_variables.scss
index e4d88834..67406735 100644
--- a/_assets/css/_variables.scss
+++ b/_assets/css/_variables.scss
@@ -8,7 +8,7 @@
$doc-font-size : 16;
$doc-line-height : 26;
-$paragraph-indent : true !default;
+$paragraph-indent : false !default;
$indent-var : 0rem + ($doc-line-height / $doc-font-size);
$serif : "PT Serif", serif;
diff --git a/_assets/css/main.scss b/_assets/css/main.scss
index aabd0ff2..4e39629e 100644
--- a/_assets/css/main.scss
+++ b/_assets/css/main.scss
@@ -13,13 +13,20 @@
@import "reset";
@import "base";
+
@import "utilities";
@import "buttons";
+@import "notices";
+@import "masthead";
+@import "navigation";
@import "toc"; // table of contents
-
@import "syntax";
+
@import "forms";
+
@import "page";
+@import "archive";
+
@import "vendor/font-awesome/font-awesome";
@import "vendor/magnific-popup/magnific-popup";
@import "print";
\ No newline at end of file
diff --git a/_includes/archive-list-single b/_includes/archive-list-single
index 37d421d6..0fa204cb 100644
--- a/_includes/archive-list-single
+++ b/_includes/archive-list-single
@@ -1,8 +1,8 @@
-
+
{% if post.link %}
-
+
{% else %}
-
+
{% endif %}
- {% if post.excerpt %}{{ post.excerpt | markdownify | strip_html | truncate: 160 }}
{% endif %}
+ {% if post.excerpt %}{{ post.excerpt | markdownify | strip_html | truncate: 160 }}
{% endif %}
\ No newline at end of file
diff --git a/_includes/author-profile b/_includes/author-profile
index 76bb3267..e6b4ae78 100644
--- a/_includes/author-profile
+++ b/_includes/author-profile
@@ -5,74 +5,74 @@
diff --git a/_includes/navigation b/_includes/navigation
index 04005971..73575125 100644
--- a/_includes/navigation
+++ b/_includes/navigation
@@ -1,19 +1,19 @@
-