Massive CSS refactor!

* Also... Dark mode

.gitignore

@@ -2,3 +2,4 @@ _site
 .sass-cache
 .deploy
 .asset-cache
+.jekyll-cache

Gemfile

@@ -11,6 +11,7 @@ gem "jekyll"
 group :jekyll_plugins do
   gem "jekyll-archives"
   gem "jekyll-assets"
+  gem "jekyll-inline-svg"
   gem "jekyll-paginate"
   gem "jekyll-picture-tag",
     git: "https://github.com/danbee/jekyll-picture-tag.git",

Gemfile.lock

@@ -11,6 +11,11 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
+    activesupport (5.2.1)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
     addressable (2.5.2)
       public_suffix (>= 2.0.2, < 4.0)
     bourbon (5.1.0)
@@ -18,7 +23,7 @@ GEM
       thor (~> 0.19)
     coderay (1.1.2)
     colorator (1.1.0)
-    concurrent-ruby (1.0.5)
+    concurrent-ruby (1.1.3)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
@@ -33,7 +38,7 @@ GEM
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.8.4)
+    jekyll (3.8.5)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -48,23 +53,34 @@ GEM
       safe_yaml (~> 1.0)
     jekyll-archives (2.1.1)
       jekyll (>= 2.4)
-    jekyll-assets (2.3.2)
+    jekyll-assets (3.0.11)
-      concurrent-ruby (~> 1.0)
+      activesupport (~> 5.0)
+      execjs (~> 2.7)
       extras (~> 0.2)
       fastimage (~> 2.0, >= 1.8)
-      jekyll (~> 3.1, >= 3.0)
+      jekyll (>= 3.5, < 4.0)
-      pathutil (>= 0.8)
+      jekyll-sanity (~> 1.2)
-      rack (~> 1.6)
+      liquid-tag-parser (~> 1.0)
-      sprockets (~> 3.3, < 3.8)
+      nokogiri (~> 1.8)
+      pathutil (~> 0.16)
+      sprockets (>= 3.3, < 4.1.beta)
+    jekyll-inline-svg (1.1.1)
+      jekyll (~> 3.3)
+      svg_optimizer (= 0.1.0)
     jekyll-paginate (1.1.0)
+    jekyll-sanity (1.2.0)
+      jekyll (~> 3.1)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
     jekyll-staging (1.0.6)
     jekyll-video-tag (0.1.0)
-    jekyll-watch (2.0.0)
+    jekyll-watch (2.1.2)
       listen (~> 3.0)
     kramdown (1.17.0)
-    liquid (4.0.0)
+    liquid (4.0.1)
+    liquid-tag-parser (1.9.0)
+      extras (~> 0.3)
+      liquid (>= 3.0, < 5.0)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -72,6 +88,10 @@ GEM
     mercenary (0.3.6)
     method_source (0.9.0)
     mini_magick (4.8.0)
+    mini_portile2 (2.3.0)
+    minitest (5.11.3)
+    nokogiri (1.8.5)
+      mini_portile2 (~> 2.3.0)
     octopress (3.0.12.pre.1)
       jekyll (>= 2.0)
       mercenary (~> 0.3.2)
@@ -86,22 +106,22 @@ GEM
       jekyll (~> 3.0)
     octopress-hooks (2.6.2)
       jekyll (>= 2.0)
-    pathutil (0.16.1)
+    pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     pry (0.11.3)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
     public_suffix (3.0.3)
-    rack (1.6.10)
+    rack (2.0.6)
     rake (12.3.1)
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     redcarpet (3.4.0)
-    rouge (3.2.1)
+    rouge (3.3.0)
     ruby_dep (1.5.0)
     safe_yaml (1.0.4)
-    sass (3.6.0)
+    sass (3.7.2)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -109,8 +129,13 @@ GEM
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
+    svg_optimizer (0.1.0)
+      nokogiri
     thor (0.20.0)
+    thread_safe (0.3.6)
     titlecase (0.1.1)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
     uglifier (4.1.19)
       execjs (>= 0.3.0, < 3)
 
@@ -124,6 +149,7 @@ DEPENDENCIES
   jekyll
   jekyll-archives
   jekyll-assets
+  jekyll-inline-svg
   jekyll-paginate
   jekyll-picture-tag!
   jekyll-staging

_assets/images/logo.svg

@@ -1,4 +1,4 @@
-<svg width="109" height="79" viewBox="0 0 109 79" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 109 79" xmlns="http://www.w3.org/2000/svg">
   <title>Dan Barber</title>
   <path d="M93.45 47.384c0-8.752-6.996-15.847-15.626-15.847-7.88 0-14.906 6.66-15.824 14.463v33H47v-5c-4.425 3.093-10.13 5-15.824 5C13.958 79 0 64.845 0 47.384 0 29.95 13.916 15.81 31 16h13v16H31c-8.454-.463-15.45 6.632-15.45 15.384s6.996 15.848 15.626 15.848C39.194 63.232 46.272 55.748 47 48c.136-.747 0-48 0-48h15v20c4.402-2.37 10.193-4.232 15.824-4.232C95.042 15.768 109 29.923 109 47.384 109 64.844 95.042 79 77.824 79l-12.834-.003L65 63h13c8.454.232 15.45-6.864 15.45-15.616z" fill="#fff" fill-rule="evenodd"/>
 </svg>

_assets/stylesheets/components/_blog-post.scss

@@ -0,0 +1,105 @@
+.blog-post {
+  border-bottom: 1px dashed $border-color;
+  padding-bottom: 2.5rem;
+
+  @media (prefers-color-scheme: dark) {
+    border-bottom: 1px dashed $border-color-dark;
+  }
+
+  img {
+    background-color: $white;
+    height: auto;
+    max-width: 100%;
+
+    &.left {
+      float: left;
+      margin-right: 1em;
+    }
+
+    &.right {
+      float: right;
+      margin-left: 1em;
+    }
+  }
+
+  figure {
+    figcaption {
+      font-size: 0.7em;
+      font-style: italic;
+      text-align: right;
+      opacity: 0.6;
+    }
+  }
+
+  img, video, .flash-video {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+    padding: 0.5em;
+    margin: -0.5em;
+    max-width: 100%;
+
+    &.no-border {
+      box-shadow: none;
+    }
+  }
+}
+
+.blog-post__header {
+  .meta {
+    text-transform: uppercase;
+    color: $meta-text-color;
+    font-size: 0.8em;
+    letter-spacing: 0.1em;
+    width: 100%;
+    text-rendering: optimizelegibility;
+  }
+
+  h1 + .meta {
+    margin-top: -2.25rem;
+  }
+}
+
+.blog-post__title {
+  font-size: 1.35rem;
+
+  a {
+    color: $heading-color;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      color: $link-color-hover;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      color: $heading-color-dark;
+    }
+  }
+}
+
+.blog-post__content {
+  > * {
+    @include container;
+  }
+}
+
+.blog-post__read-on {
+  background: darken($background-color, 8);
+  border-radius: 2px;
+  display: inline-block;
+  padding: 0.4em 0.8em;
+  margin-right: 0.5em;
+  margin-bottom: 1.5em;
+  text-decoration: none;
+  color: mix($text-color, $text-color-light);
+  transition: background-color 0.5s;
+
+  &:hover {
+    background: $link-color-hover;
+    text-shadow: none;
+    color: $background-color;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background: lighten($background-color-dark, 8);
+    color: mix($text-color-dark, $text-color-light);
+  }
+}

_assets/stylesheets/components/_pagination.scss

@@ -0,0 +1,40 @@
+.pagination {
+  font-size: 0.95em;
+  height: 1.5em;
+  padding: {
+    bottom: 1.5em;
+    top: 1.5em;
+  };
+  position: relative;
+
+  &:after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+
+  a {
+    color: $text-color-light;
+    text-decoration: none;
+
+    &:hover {
+      color: $link-color-hover;
+    }
+
+    &[href*=archive] {
+      &:before,
+      &:after {
+        content: "—";
+        padding: 0 0.3em;
+      }
+    }
+
+    &.prev {
+      float: left;
+    }
+
+    &.next {
+      float: right;
+    }
+  }
+}

_assets/stylesheets/components/_photo.scss

@@ -1,13 +1,14 @@
 $photo-wide-max-width: 1024px;
 
-figure.photo-wide {
+.photo--wide {
   padding-left: 0;
   padding-right: 0;
 }
 
 @media only screen and (max-width: 1048px) {
-  figure.photo-wide {
+  .photo--wide {
     max-width: 100%;
+
     img {
       margin: -0.5em 0;
       padding: 0.5em 0;
@@ -16,7 +17,7 @@ figure.photo-wide {
 }
 
 @media only screen and (min-width: 1049px) {
-  figure.photo-wide {
+  .photo--wide {
     max-width: $photo-wide-max-width;
   }
 }

_assets/stylesheets/components/_site-footer.scss

@@ -1,21 +1,25 @@
-body > footer {
+.site-footer {
-  text-align: center;
   font-size: 0.8em;
-  position: relative;
-  padding-top: 1em;
-  padding-bottom: 1em;
   margin-bottom: 3em;
-  border-radius-bottom: 0.4em;
+  padding-bottom: 1em;
+  padding-top: 1em;
+  position: relative;
+  text-align: center;
   z-index: 1;
 
   a {
     color: $footer-link-color;
+    text-decoration: none;
+
     &:hover { color: $footer-link-color-hover; }
     &:visited { color: $footer-link-color; }
-    text-decoration: none;
   }
 
-  p:last-child { margin-bottom: 0; }
+  p {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
   fieldset {
     border: 0;

_assets/stylesheets/components/_site-header.scss

@@ -0,0 +1,46 @@
+.site-header {
+  background-color: $header-color;
+  padding: 1rem 0 1rem;
+}
+
+.site-header__container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.site-header__logo-link {
+  color: $white;
+  line-height: 0;
+  text-decoration: none;
+}
+
+.site-header__logo {
+  width: 6rem;
+}
+
+.site-header__navigation {
+  display: inline;
+  position: relative;
+
+  ul {
+    list-style: none;
+    display: block;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    li {
+      padding-left: 1.25em;
+      float: left;
+    }
+    padding-top: 0.15em;
+  }
+  a {
+    color: white;
+    text-decoration: none;
+    transition: text-shadow 0.25s 0s ease;
+    &:hover, &:focus {
+      color: white;
+      text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
+    }
+  }
+}

_assets/stylesheets/elements/_abbr.scss

@@ -0,0 +1,7 @@
+abbr {
+  border-bottom: 1px dotted $text-color-light;
+  font-size: 0.9em;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  text-transform: uppercase;
+}

_assets/stylesheets/elements/_blockquote.scss

@@ -0,0 +1,17 @@
+blockquote {
+  font-size: 1rem;
+  font-style: italic;
+  line-height: 1.6;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+blockquote:before {
+  content: "“";
+  float: left;
+  font-family: $body-font-family;
+  font-size: 2.75em;
+  margin-top: 0.1em;
+  opacity: 0.3;
+  text-indent: -0.6em;
+}

_assets/stylesheets/elements/_body.scss

@@ -0,0 +1,11 @@
+body {
+  color: $text-color;
+  font-family: $body-font-family;
+  font-weight: 300;
+  line-height: 1.5;
+  margin: 0;
+
+  @media (prefers-color-scheme: dark) {
+    color: $text-color-dark;
+  }
+}

_assets/stylesheets/elements/_code.scss

@@ -0,0 +1,14 @@
+pre,
+code,
+tt {
+  font-family: $mono;
+  font-weight: 500;
+}
+
+code {
+  border-radius: 0.25rem;
+  display: inline-block;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  padding: 0 0.3rem;
+}

_assets/stylesheets/elements/_dl.scss

@@ -0,0 +1,19 @@
+dl {
+  margin: 1.75em 0;
+}
+
+dt {
+  font-style: italic;
+  margin-top: 1.25em;
+  font-size: 1.13em;
+  font-weight: 700;
+  border-bottom: 1px solid #999;
+  background: #DDD;
+}
+
+dd {
+  font-style: italic;
+  font-size: 0.85em;
+  margin-top: 1em;
+  line-height: 1.6em;
+}

_assets/stylesheets/elements/_headings.scss

@@ -0,0 +1,33 @@
+h1, h2, h3,
+h4, h5, h6 {
+  font-weight: 600;
+  text-rendering: optimizelegibility;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: $heading-font-family;
+}
+
+h1 {
+  font-size: 2.5rem;
+  line-height: 1.333;
+  margin: 4rem 0 2.5rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+  line-height: 1.1;
+  margin: 2rem 0 0.5rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+  margin-top: 1.5rem;
+}
+
+h4 {
+  font-size: 1rem;
+}

_assets/stylesheets/elements/_html.scss

@@ -0,0 +1,24 @@
+html {
+  background: $background-color;
+  font-size: 100%;
+
+  @media (prefers-color-scheme: dark) {
+    background: $background-color-dark;
+  }
+
+  @media only screen and (min-width: 450px) {
+    font-size: 110%;
+  }
+
+  @media only screen and (min-width: 650px) {
+    font-size: 125%;
+  }
+
+  @media only screen and (min-width: 768px) {
+    font-size: 135%;
+  }
+
+  @media only screen and (min-width: 892px) {
+    font-size: 145%;
+  }
+}

_assets/stylesheets/elements/_links.scss

@@ -0,0 +1,12 @@
+a {
+  color: $link-color;
+  transition: color 0.25s 0s ease;
+
+  &:hover {
+    color: $link-color-hover;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    color: $link-color-dark;
+  }
+}

_assets/stylesheets/elements/_lists.scss

@@ -0,0 +1,20 @@
+ul,
+ol {
+  margin: 1.5rem 0 1.5rem;
+}
+
+ul {
+  list-style-position: outside;
+  list-style-type: disc;
+  line-height: 1.5;
+  padding-left: 0;
+}
+
+li {
+  margin-bottom: 0.75em;
+}
+
+ol {
+  list-style-position: outside;
+  list-style-type: decimal;
+}

_assets/stylesheets/elements/_p.scss

@@ -0,0 +1,8 @@
+p {
+  hyphenate-after: 3;
+  hyphenate-before: 2;
+  hyphenate-lines: 3;
+  hyphenate: auto;
+  margin: 1.5rem 0;
+  orphans: 4;
+}

_assets/stylesheets/includes/layout.css.scss

@@ -1,80 +0,0 @@
-$max-width: 800px !default;
-$pad-min: 8.5% !default;
-
-header[role=banner] {
-  padding: 1em 0 0.5em;
-  h1 {
-    font-size: 1em;
-    margin: 0.25em 0 0.5em;
-    a {
-      color: white;
-      line-height: 0;
-      text-decoration: none;
-      span {
-        width: 0;
-        font-size: 0;
-        overflow: hidden;
-      }
-    }
-  }
-}
-
-article img {
-  max-width: 100%;
-  height: auto;
-}
-
-article img.left {
-  float: left;
-  margin-right: 1em;
-}
-
-article img.right {
-  float: right;
-  margin-left: 1em;
-}
-
-#content header,
-.entry-content > *,
-.container,
-footer,
-.pagination {
-  padding-left: $pad-min;
-  padding-right: $pad-min;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: $max-width;
-}
-
-nav[role=navigation] {
-  font-size: 1em;
-}
-
-header[role=banner] h1 img {
-  width: 4.6982758621em;
-  height: 3.4051724138em;
-}
-
-@media only screen and (min-width: 450px) {
-  body {
-    font-size: 110%;
-  }
-}
-
-@media only screen and (min-width: 650px) {
-  body {
-    font-size: 125%;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  body {
-    font-size: 135%;
-  }
-}
-
-@media only screen and (min-width: 892px) {
-  body {
-    font-size: 145%;
-  }
-}

_assets/stylesheets/includes/main.css.scss

@@ -1,5 +0,0 @@
-body {
-  margin: 0;
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-}

_assets/stylesheets/includes/styles.css.scss

@@ -1,137 +0,0 @@
-// This File is imported last, and will override other styles in the cascade
-// Add styles here to make changes without digging in too much
-html { background: $background-color; }
-
-body { font-weight: 300; }
-
-body > div > div {
-  border: none;
-}
-
-body > header {
-  background-color: $header-color;
-  padding-top: 0.9em;
-  padding-bottom: 0.9em;
-  h1 a {
-    //display: inline-block
-    margin-top: 0;
-    font-weight: 600;
-    //line-height: 0
-  }
-}
-
-a {
-  color: $link-color;
-  transition: color 0.25s 0s ease;
-  &:hover {
-    color: $link-color-hover;
-  }
-}
-
-header nav {
-  display: inline;
-  position: relative;
-  ul {
-    list-style: none;
-    float: right;
-    display: block;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    li {
-      padding-left: 1.25em;
-      float: left;
-    }
-    padding-top: 0.15em;
-  }
-  a {
-    color: white;
-    text-decoration: none;
-    transition: text-shadow 0.25s 0s ease;
-    &:hover, &:focus {
-      color: white;
-      text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
-    }
-  }
-}
-
-article > header {
-  text-align: left;
-}
-
-article > header h1, #content .blog-index article h1 {
-  font-size: 1.35em;
-}
-
-body > nav {
-  border: none;
-}
-
-body > nav a {
-  text-shadow: none;
-  display: inline;
-}
-
-@media only screen and (max-width: 400px) {
-  header {
-    text-align: center;
-  }
-  header nav {
-    display: none;
-  }
-}
-
-blockquote {
-  font-size: 1em;
-  border: none;
-}
-
-#content div.pagination, #content div.navigation {
-  font-size: 0.95em;
-  height: 1.5em;
-  position: relative;
-  padding: {
-    top: 1.5em;
-    bottom: 1.5em;
-  };
-  &:after {
-    display: block;
-    content: "";
-    clear: both;
-  }
-  a {
-    text-decoration: none;
-    color: $text-color-light;
-    &:hover {
-      color: $link-color-hover;
-    }
-    &[href*=archive] {
-      &:before, &:after {
-        content: "—";
-        padding: 0 0.3em;
-      }
-    }
-  }
-}
-
-#content div.navigation {
-  a {
-    &.prev {
-      float: left;
-    }
-    &.next {
-      float: right;
-    }
-  }
-}
-
-#content div.pagination {
-  a {
-    &.prev {
-      float: left;
-    }
-    &.next {
-      float: right;
-    }
-  }
-}

_assets/stylesheets/includes/typography.css.scss

@@ -1,352 +0,0 @@
-// $blockquote: $type-border !default
-$heading-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
-$body-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
-$mono: "source-code-pro", monospace !default;
-$header-title-font-family: $heading-font-family !default;
-$header-subtitle-font-family: $heading-font-family !default;
-
-/*Type-A-File "Field Report" designed by Russ Maschmeyer, aka StrangeNative.
- *http://www.strangenative.com
- *@strangenative
- *
- *Creative Commons License by Attribution. 
- *Feel free to take it, adapt it, & use it on both commercial and non-commercial projects.
- *Though I'd like a smidgeon of credit, so just leave this bit in here. K? */
-
-/*Pick Your Fonts */
-body, h5, h6, .run-in, dt {
-  font-family: $body-font-family;
-}
-
-h1, h2, h3, h4, .pullquote, .sidenote h1, aside h1, .pullquote, .drop-cap, cite {
-  font-family: $heading-font-family;
-}
-
-/*Nav Fonts */
-nav[role=navigation] {
-  font-family: $heading-font-family;
-}
-
-/*Size & Vertical Rhythm */
-body {
-  font-size: 100%;
-  font-size: 14px;
-  line-height: 1.5em;
-}
-
-/*Color */
-body {
-  color: $text-color;
-}
-
-/*HTML Standard Elements */
-h1 {
-  font-size: 2.5em;
-  line-height: 1.333em;
-  margin: 5rem 0 2.5rem;
-}
-
-h2 {
-  font-size: 1.5em;
-  line-height: 1.1em;
-  margin: 2em 0 0.5em;
-}
-
-h1 + img, h2 + img {
-  margin-top: 1em;
-}
-
-h3 {
-  font-size: 1.125em;
-}
-
-h4 {
-  font-size: 1em;
-}
-
-h1, h2, h3 {
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-}
-
-h4, h5, h6 {
-  font-weight: 600;
-  text-rendering: optimizelegibility;
-}
-
-article h1 {
-  font-size: 1.5em;
-}
-
-strong {
-  font-weight: 600;
-}
-
-small {
-  display: block;
-  font-size: 0.75em;
-  letter-spacing: 0.05em;
-  margin: 2.2em 0 -0.2em;
-  font-style: italic;
-  line-height: 1.75em;
-}
-
-p, ul, ol, form {
-  margin: 1.5rem 0 1.5rem;
-}
-
-h3 {
-  margin-top: 1.5em;
-}
-
-ul {
-  list-style-position: outside;
-  list-style-type: disc;
-  line-height: 1.5;
-  padding-left: 0;
-}
-
-li {
-  margin-bottom: 0.75em;
-}
-
-ol {
-  list-style-position: outside;
-  list-style-type: decimal;
-}
-
-blockquote {
-  font-style: italic;
-  line-height: 1.6em;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-blockquote:before {
-  font-family: Georgia, serif;
-  content: "“";
-  font-size: 2.75em;
-  text-indent: -0.6em;
-  margin-top: 0.1em;
-  float: left;
-  opacity: 0.3;
-}
-
-cite {
-  display: block;
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  margin-top: 1.5em;
-  margin-left: 1em;
-  font-weight: 900;
-  font-style: normal;
-  font-size: 0.8em;
-}
-
-cite:before {
-  content: "— ";
-  margin-left: -3.4em;
-  margin-right: 0.9em;
-  opacity: 0.3;
-}
-
-pre, code, tt {
-  font-family: $mono;
-  font-weight: 500;
-}
-
-code {
-  border: 1px solid #ddd;
-  border-radius: 0.25em;
-  display: inline-block;
-  font-size: 0.75em;
-  line-height: 1.5em;
-  padding: 0 0.3em;
-}
-
-.highlight {
-  margin: 1.5em 0;
-  overflow: auto;
-  padding: 0.5em 0.75em;
-  border-radius: 0.25em;
-  pre {
-    margin: 0;
-  }
-  code {
-    border: none;
-  }
-}
-
-dl {
-  margin: 1.75em 0 1.75em;
-}
-
-dt {
-  font-style: italic;
-  margin-top: 1.25em;
-  font-size: 1.13em;
-  font-weight: 700;
-  border-bottom: 1px solid #999;
-  background: #DDD;
-}
-
-dd {
-  font-style: italic;
-  font-size: 0.85em;
-  margin-top: 1em;
-  line-height: 1.6em;
-}
-
-abbr {
-  text-decoration: none;
-  text-transform: uppercase;
-  font-size: 0.9em;
-  letter-spacing: 0.1em;
-  border-bottom: 1px dotted $text-color-light;
-}
-
-p {
-  hyphenate: auto;
-  hyphenate-before: 2;
-  hyphenate-after: 3;
-  hyphenate-lines: 3;
-  orphans: 4;
-}
-
-p span.pullquote {
-  text-indent: 0;
-}
-
-/*Compositional Elements */
-.kicker {
-  font-size: 1.25em;
-  line-height: 1.693em;
-  /*font-style:italic; */
-  margin: (-0.35em) 0 -0.35em;
-}
-
-.kicker, .pullquote {
-  font-weight: 100;
-}
-
-.run-in {
-  font-style: italic;
-  font-weight: bold;
-}
-
-.superscript {
-  font-family: arial, sans-serif;
-  vertical-align: super;
-  font-size: 75%;
-  margin-right: 0.4em;
-  text-transform: lowercase;
-  font-variant: small-caps;
-  letter-spacing: 0.1em;
-  line-height: 0;
-}
-
-.subscript {
-  font-family: arial, sans-serif;
-  vertical-align: sub;
-  font-size: 75%;
-  margin-right: 0.4em;
-  text-transform: lowercase;
-  font-variant: small-caps;
-  letter-spacing: 0.1em;
-  line-height: 0em;
-}
-
-a.superscript, a.subscript {
-  text-decoration: none;
-}
-
-aside, .sidenote {
-  font-size: 0.83em;
-  font-style: italic;
-  margin-top: 1.25em;
-}
-
-aside h1, .sidenote h1 {
-  text-transform: uppercase;
-  font-size: 1em;
-  line-height: 1.5em;
-  font-style: normal;
-  font-weight: 900;
-}
-
-aside p, .sidenote p {
-  line-height: 1.7em;
-  margin: 1.3em 0;
-  font-style: normal;
-}
-
-aside ul, aside ol, .sidenote ul, .sidenote ol {
-  margin-top: 1.3em;
-  line-height: 1.7em;
-}
-
-aside ul li, aside ol li, .sidenote ul li, .sidenote ol li {
-  margin-bottom: 1.3em;
-}
-
-.pullquote {
-  font-style: italic;
-  letter-spacing: 0.05em;
-  margin: 0.5em 0.7em 0.3em 0em;
-  padding-top: 0.15em;
-  line-height: 1.7em;
-  display: block;
-  float: left;
-  font-size: 1.6em;
-  width: 55%;
-}
-
-.pullquote:before {
-  font-family: Georgia, serif;
-  content: "“";
-  font-size: 2em;
-  text-indent: -0.8em;
-  margin-top: 0.05em;
-  float: left;
-  opacity: 0.3;
-}
-
-.footnotes {
-  border-top: 1px solid #999;
-  font-size: 0.75em;
-  margin-top: 3.5em;
-}
-
-.footnotes li {
-  margin: 1.5em 0 1.5em;
-  word-spacing: 0.1em;
-  line-height: 1.75em;
-}
-
-.caption {
-  font-size: 0.8em;
-  font-style: italic;
-  margin: 0.6em 0 -0.2em;
-}
-
-.kicker .run-in {
-  text-transform: uppercase;
-  font-style: normal;
-  letter-spacing: 0.25em;
-  font-size: 0.9em;
-}
-
-.drop-cap {
-  display: block;
-  font-style: normal;
-  font-size: 5.1em;
-  float: left;
-  margin: 0.13em 0.1em 0 0;
-  line-height: 0.67em;
-  font-weight: 100;
-}
-
-/*Tweaks */
-.kern {
-  letter-spacing: -0.1em;
-}

_assets/stylesheets/objects/_container.scss

@@ -0,0 +1,3 @@
+.container {
+  @include container;
+}

_assets/stylesheets/objects/_highlight.scss

@@ -0,0 +1,12 @@
+@import "lib/solarized-dark";
+
+.highlight {
+  border-radius: 0.25em;
+  margin: 1.5em 0;
+  overflow: auto;
+  padding: 0.5em 0.75em;
+
+  pre {
+    margin: 0;
+  }
+}

_assets/stylesheets/objects/_video-container.scss

@@ -1,10 +1,11 @@
 .video-container {
+  height: 0;
   position: relative;
   width: 100%;
-  height: 0;
+
   iframe {
+    height: 100%;
     position: absolute;
     width: 100%;
-    height: 100%;
   }
 }

_assets/stylesheets/parts/archive.css.scss

@@ -1,116 +0,0 @@
-#archive {
-  #content > div {
-    &, > article {
-      padding-top: 0;
-    }
-  }
-}
-
-#blog-archives {
-  padding-top: 1em;
-  article {
-    padding: 0 0 1em;
-    position: relative;
-    &:last-child {
-      border: none;
-    }
-    footer {
-      padding: 0;
-      margin: 0;
-    }
-  }
-  h1 {
-    margin-top: 0;
-    color: $text-color;
-    margin-bottom: 0.3em;
-  }
-  h2 {
-    display: none;
-  }
-  h1 {
-    font-size: 1.5em;
-    a {
-      color: inherit;
-      text-decoration: none;
-      &:hover {
-        color: $link-color-hover;
-        text-decoration: underline;
-      }
-      font-weight: normal;
-      display: inline-block;
-    }
-  }
-  a.category, time {
-    color: $text-color-light;
-  }
-  color: $text-color-light;
-  .entry-content {
-    display: none;
-  }
-  time {
-    font-size: 0.9em;
-    line-height: 1.2em;
-    .month, .day {
-      display: inline-block;
-    }
-    .month {
-      text-transform: uppercase;
-    }
-  }
-  p {
-    margin-bottom: 1em;
-  }
-  &, .entry-content {
-    a {
-      color: inherit;
-      &:hover {
-        color: $link-color-hover;
-      }
-    }
-  }
-  a:hover {
-    color: $link-color-hover;
-  }
-  @media only screen and (min-width: 550px) {
-    article {
-      margin-left: 5em;
-    }
-    h2 {
-      margin-top: 0;
-      margin-bottom: 0.3em;
-      font-weight: normal;
-      display: inline-block;
-      position: relative;
-      top: -1px;
-      float: left;
-    }
-    time {
-      position: absolute;
-      text-align: right;
-      left: 0em;
-      top: 0.3em;
-    }
-    .year {
-      display: none;
-    }
-    article {
-      padding: {
-        left: 4.5em;
-        bottom: 0.7em;
-      };
-    }
-    a.category {
-      line-height: 1.1em;
-    }
-  }
-}
-
-#content > .category {
-  article {
-    margin-left: 0;
-    padding-left: 6.8em;
-  }
-  .year {
-    display: inline;
-  }
-}

_assets/stylesheets/parts/post.css.scss

@@ -1,77 +0,0 @@
-article {
-  border-bottom: 1px dashed $border-color;
-  padding-bottom: 2.5rem;
-  header {
-    .meta {
-      text-transform: uppercase;
-      color: $meta-text-color;
-      font-size: 0.8em;
-      letter-spacing: 0.1em;
-      width: 100%;
-      text-rendering: optimizelegibility;
-    }
-    h1 + .meta {
-      margin-top: -2.25rem;
-    }
-  }
-  header a {
-    color: $heading-color;
-    text-decoration: none;
-    &:hover, &:focus {
-      color: $link-color-hover;
-    }
-  }
-  figure {
-    margin: 1.5em 0 0 0;
-    figcaption {
-      font-size: 0.7em;
-      font-style: italic;
-      text-align: right;
-      opacity: 0.6;
-    }
-  }
-  img, video, .flash-video {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-    padding: 0.5em;
-    margin: -0.5em;
-    &.no-border {
-      box-shadow: none;
-    }
-  }
-  > footer {
-    margin-top: 1.75em;
-    p.meta {
-      margin-bottom: 0.8em;
-      font-size: 0.85em;
-      clear: both;
-      overflow: hidden;
-    }
-    .byline + time:before, time + time:before, .comments:before, .byline ~ .categories:before {
-      @extend .separator;
-    }
-  }
-  footer {
-    a[rel=full-article] {
-      background: darken($background-color, 8);
-      border-radius: 2px;
-      display: inline-block;
-      padding: 0.4em 0.8em;
-      margin-right: 0.5em;
-      margin-bottom: 1.5em;
-      text-decoration: none;
-      color: mix($text-color, $text-color-light);
-      transition: background-color 0.5s;
-      &:hover {
-        background: $link-color-hover;
-        text-shadow: none;
-        color: $background-color;
-      }
-    }
-  }
-}
-
-.separator {
-  content: "•";
-  padding: 0 0.4em 0 0.2em;
-  display: inline-block;
-}

_assets/stylesheets/settings/_colors.scss

@@ -1,14 +1,21 @@
-$background-color: white;
+$white: #fff;
+
+$background-color: $white;
+$background-color-dark: #222;
 
 $text-color: #333;
+$text-color-dark: #ddd;
 $text-color-light: lighten($text-color, 45%);
 $heading-color: #333;
+$heading-color-dark: #ddd;
 $meta-text-color: lighten($text-color, 45%);
 $header-color: #518F00;
 
 $border-color: #ccc;
+$border-color-dark: #666;
 
 $link-color: rgb(24, 99, 161);
+$link-color-dark: lighten($link-color, 25%);
 $link-color-hover: lighten($link-color, 10%);
 
 $footer-link-color: lighten($text-color, 25%);

_assets/stylesheets/settings/_global.scss

@@ -0,0 +1,2 @@
+$max-width: 800px !default;
+$pad-min: 8.5% !default;

_assets/stylesheets/settings/_typography.scss

@@ -0,0 +1,5 @@
+$heading-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
+$body-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
+$mono: "Source Code Pro", "Consolas", "Menlo", monospace !default;
+$header-title-font-family: $heading-font-family !default;
+$header-subtitle-font-family: $heading-font-family !default;

_assets/stylesheets/styles.css.scss

@@ -1,14 +0,0 @@
-@import "bourbon";
-
-@import "includes/main.css.scss";
-@import "includes/colors.css.scss";
-@import "includes/typography.css.scss";
-@import "includes/layout.css.scss";
-@import "includes/styles.css.scss";
-@import "includes/video.css.scss";
-@import "lib/solarized-dark.css.scss";
-
-@import "parts/photos.css.scss";
-@import "parts/post.css.scss";
-@import "parts/archive.css.scss";
-@import "parts/footer.css.scss";

_assets/stylesheets/styles.scss

@@ -0,0 +1,47 @@
+// 0. Vendor - Imported from other source
+@import "bourbon";
+
+// 1. Settings – used with preprocessors and contain font,
+//    colors definitions, etc.
+@import "settings/global";
+@import "settings/colors";
+@import "settings/typography";
+
+// 2. Tools – globally used mixins and functions.
+//    It’s important not to output any CSS in the first 2 layers.
+@import "tools/container";
+
+// 3. Generic – reset and/or normalize styles, box-sizing definition, etc.
+//    This is the first layer which generates actual CSS.
+
+// 4. Elements – styling for bare HTML elements (like H1, A, etc.).
+//    These come with default styling from the browser so we can redefine
+//    them here.
+@import "elements/abbr";
+@import "elements/blockquote";
+@import "elements/body";
+@import "elements/code";
+@import "elements/dl";
+@import "elements/headings";
+@import "elements/html";
+@import "elements/links";
+@import "elements/lists";
+@import "elements/p";
+
+// 5. Objects – class-based selectors which define undecorated design patterns,
+//    for example media object known from OOCSS
+@import "objects/container";
+@import "objects/highlight";
+@import "objects/video-container";
+
+// 6. Components – specific UI components.
+//    This is where majority of our work takes place and our UI components
+//    are often composed of Objects and Components
+@import "components/site-header";
+@import "components/site-footer";
+@import "components/blog-post";
+@import "components/pagination";
+@import "components/photo";
+
+// 7. Utilities – utilities and helper classes with ability to override
+//    anything which goes before in the triangle, eg. hide helper class

_assets/stylesheets/tools/_container.scss

@@ -0,0 +1,7 @@
+@mixin container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $max-width;
+  padding-left: $pad-min;
+  padding-right: $pad-min;
+}

_includes/article.html

@@ -1,40 +1,27 @@
-{% unless page.no_header %}
+<header class="container blog-post__header">
-  <header>
+  {% if page.external-url %}
-    {% if index %}
+  <h1 class="blog-post__title"><a href="{{ page.external-url }}">{% if site.titlecase %}{{ page.title | titlecase }} &rarr;{% else %}{{ page.title }}{% endif %}</a></h1>
-      {% if post.external-url %}<!-- This defines how Octopress will use posts with external-url. -->
+  {% else %}
-        <h1 class="entry-title"><a href="{{ post.external-url }}">{% if site.titlecase %}{{ post.title | titlecase }} &rarr;{% else %}{{ post.title }}{% endif %}</a></h1>
+  <h1 class="blog-post__title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
-      {% else %}<!-- Now we're back to normal posts. Note the links used under href in both headers.-->
-        <h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
-      {% endif %}
-      {% if post.date %}<p class="meta">{% include post/date.html date=post.date %}{{ time }}</p>{% endif %}
-    {% else %}
-      {% if page.external-url %}
-        <h1 class="entry-title"><a href="{{ page.external-url }}">{% if site.titlecase %}{{ page.title | titlecase }} &rarr;{% else %}{{ page.title }}{% endif %}</a></h1>
-      {% else %}
-        <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
-      {% endif %}
-      {% if page.date %}<p class="meta">{% include post/date.html date=page.date %}{{ time }}</p>{% endif %}
-    {% endif %}
-  </header>
-{% endunless %}
-{% if index %}
-  <div class="entry-content">{{ post.excerpt }}</div>
-  {% if post.content contains site.excerpt_separator %}
-    <footer>
-      <a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
-    </footer>
   {% endif %}
-{% else %}
+
-  <div class="entry-content">{{ content }}</div>
+  {% if page.date %}<p class="meta">{% include post/date.html date=page.date %}{{ time }}</p>{% endif %}
-  <footer>
+</header>
-    <p class="meta">
+
-      {% if page.date %}{% include post/date.html date=page.date %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}{% endif %}
+<div class="blog-post__content">
-      |
+  {{ content }}
-      {% include post/categories.html %}
+</div>
-    </p>
+
-  </footer>
+<footer class="blog-post__footer container">
-{% endif %}
+  <p class="meta">
+    {% if page.date %}{% include post/date.html date=page.date %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}{% endif %}
+    |
+    {% include post/categories.html %}
+  </p>
+</footer>
+
 {% if post.external-url %}
-  <div class="entry-content"><p><a href="{{ root_url }}{{ post.url }}">Permalink</a></p><!-- add permalink at end of link posts; could be text or glyph -->
+  <div class="blog-post__content">
+    <p><a href="{{ root_url }}{{ post.url }}">Permalink</a></p><!-- add permalink at end of link posts; could be text or glyph -->
   </div>
 {% endif %}

_includes/footer.html

@@ -1,6 +1,6 @@
-<footer role="contentinfo">
+<footer class="site-footer" role="contentinfo">
   <p>
-    Follow me <a href="http://twitter.com/_danbarber">{% img social/twitter.svg %} @_danbarber</a>
+    Follow me <a href="http://twitter.com/_danbarber">{% asset social/twitter.svg %} @_danbarber</a>
   </p>
   {% if site.simple_search %}
     <form action="{{ site.simple_search }}" method="get">

_includes/head.html

@@ -16,28 +16,28 @@
 <link rel="alternate" type="application/json" title="{{site.title}} - Photos" href="{{ site.url }}/feed.photos.json">
 
 <!-- Large favicon for Opera Speed Dial -->
-<link rel="icon" type="image/png" href="{{ 'speeddial-icon.png' | asset_path }}">
+<link rel="icon" type="image/png" href="{% asset speeddial-icon.png @path %}">
 
 <!-- iOS favicons -->
-<link href="{{ 'favicon.ico' | asset_path }}" rel="shortcut icon">
+<link href="{% asset favicon.ico @path %}" rel="shortcut icon">
-{{ 'styles' | stylesheet }}
+{% asset styles.css %}
-{{ 'main' | javascript }}
+{% asset main.js %}
 <!-- 144x144 for iPad 3rd and 4th generation -->
-<link rel="apple-touch-icon" sizes="144x144" href="{{ 'apple-touch-icon-144x144.png' | asset_path }}">
+<link rel="apple-touch-icon" sizes="144x144" href="{% asset apple-touch-icon-144x144.png @path %}">
 <!-- 114x114 for iPhone 4, 4S, 5 and 2012 iPod Touch -->
-<link rel="apple-touch-icon" sizes="114x114" href="{{ 'apple-touch-icon-114x114.png' | asset_path }}">
+<link rel="apple-touch-icon" sizes="114x114" href="{% asset apple-touch-icon-114x114.png @path %}">
 <!-- 72x72 for 1st generation iPad, iPad 2 and iPad mini -->
-<link rel="apple-touch-icon" sizes="72x72" href="{{ 'apple-touch-icon-72x72.png' | asset_path }}">
+<link rel="apple-touch-icon" sizes="72x72" href="{% asset apple-touch-icon-72x72.png @path %}">
 <!-- 57x57 for iPhone 3GS, 2011 iPod Touch and older Android devices -->
-<link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_path }}">
+<link rel="apple-touch-icon" href="{% asset apple-touch-icon.png @path %}">
 
 <!-- Windows 8 Pinned Site -->
-<meta name="msapplication-TileImage" content="{{ 'win8-pinsite.png' | asset_path }}">
+<meta name="msapplication-TileImage" content="{% asset win8-pinsite.png @path }}">
 <meta name="msapplication-TileColor" content="#4B8400">
 <meta name="application-name" content="DanBarber.me">
 
 <!-- Safari pinned tab -->
-<link rel="mask-icon" href="{{ 'favicon.svg' | asset_path }}" color="#4B8400">
+<link rel="mask-icon" href="{% asset favicon.svg @path %}" color="#4B8400">
 
 <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7434852/6285372/css/fonts.css">
 

_includes/header.html

@@ -1,6 +1,14 @@
-  <header role="banner">
+<header class="site-header" role="banner">
-    <div class="container">
+  <div class="container site-header__container">
-      <nav role="navigation">{% include navigation.html %}</nav>
+    <a class="logo" href="/" class="site-header__logo-link">
-      <h1><a class="logo" href="/">{% img logo.svg alt="Dan Barber" %}</a></h1>
+      {% svg _assets/images/logo.svg title="Dan Barber" class="site-header__logo" %}
-    </div>
+    </a>
-  </header>
+
+    <nav role="navigation" class="site-header__navigation">
+      <ul>
+        <li><a href="{{ root_url }}/">Blog</a></li>
+        <li><a href="{{ root_url }}/about">About</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>

_includes/index_article.html

@@ -0,0 +1,25 @@
+<header class="container blog-post__header">
+  {% if post.external-url %}<!-- This defines how Octopress will use posts with external-url. -->
+  <h1 class="blog-post__title"><a href="{{ post.external-url }}">{% if site.titlecase %}{{ post.title | titlecase }} &rarr;{% else %}{{ post.title }}{% endif %}</a></h1>
+  {% else %}<!-- Now we're back to normal posts. Note the links used under href in both headers.-->
+  <h1 class="blog-post__title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
+  {% endif %}
+
+  {% if post.date %}<p class="meta">{% include post/date.html date=post.date %}{{ time }}</p>{% endif %}
+</header>
+
+<div class="blog-post__content">
+  {{ post.excerpt }}
+</div>
+
+{% if post.content contains site.excerpt_separator %}
+  <footer class="blog-post__footer container">
+    <a rel="full-article" class="blog-post__read-on" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
+  </footer>
+{% endif %}
+
+{% if post.external-url %}
+  <div class="blog-post__content">
+    <p><a href="{{ root_url }}{{ post.url }}">Permalink</a></p><!-- add permalink at end of link posts; could be text or glyph -->
+  </div>
+{% endif %}

_includes/navigation.html

@@ -1,4 +0,0 @@
-<ul class="main-navigation">
-  <li><a href="{{ root_url }}/">Blog</a></li>
-  <li><a href="{{ root_url }}/about">About</a></li>
-</ul>

_layouts/post.html

@@ -5,14 +5,16 @@ single: true
 
 {% include header.html %}
 
-<div id="content">
+<div class="blog-content">
-  <article>
+  <article class="blog-post">
     {% include article.html %}
   </article>
-  <div class="pagination">
+
+  <div class="container pagination">
     {% if page.previous.url %}
       <a class="prev" href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">&laquo; {{page.previous.title}}</a>
     {% endif %}
+
     {% if page.next.url %}
       <a class="next" href="{{page.next.url}}" title="next Post: {{page.next.title}}">{{page.next.title}} &raquo;</a>
     {% endif %}

_posts/2016-08-10-the-complete-guide-to-optimising-web-images.markdown

@@ -43,7 +43,7 @@ When saving your images for the web it is usually best to use the "Web Export...
 
 <figure>
   <div style="margin-left: -5.6%; margin-right: -5.7%; margin-bottom: -5%;">
-    {% image blog/the-complete-guide-to-optimising-web-images/web-export.png alt:"Photoshop's web export dialog box" class:"no-border" %}
+    {% asset blog/the-complete-guide-to-optimising-web-images/web-export.png alt:"Photoshop's web export dialog box" class="no-border" %}
   </div>
   <figcaption>Photoshop's Web Export dialogue box</figcaption>
 </figure>
@@ -60,7 +60,7 @@ Most image editing applications will only let you export a PNG file with an 8-bi
 
 <figure>
   <div style="margin-left: -5.4%; margin-right: -5.5%; margin-bottom: -5%;">
-    {% image blog/the-complete-guide-to-optimising-web-images/imagealpha.png alt:"ImageAlpha on OS X" class:"no-border" %}
+    {% asset blog/the-complete-guide-to-optimising-web-images/imagealpha.png alt:"ImageAlpha on OS X" class="no-border" %}
   </div>
   <figcaption>ImageAlpha on OS X</figcaption>
 </figure>

_posts/2017-06-25-liberty-sunset.markdown

@@ -10,7 +10,7 @@ categories:
 layout: post
 ---
 
-<figure class="photo-wide">
+<figure class="photo photo-wide">
   {% picture photo-wide blog/liberty-sunset/DSCF3723.jpg alt="Liberty Sunset" %}
   <figcaption>Fuji X-E2, XF 55-200mm at 141mm, ISO 200, 1/1800 sec at ƒ/7.1</figcaption>
 </figure>

_posts/2017-07-21-eisenhower-executive-office-building.markdown

@@ -11,7 +11,7 @@ categories:
   - eisenhower
 ---
 
-<figure class="photo-square">
+<figure class="photo photo--square">
   {% picture photo-square blog/eisenhower-executive-office-building/DSCF4369.jpg alt="Eisenhower Executive Office Building" %}
   <figcaption>Fuji X-E2, XF 35mm, ISO 1250, 1/60 sec at ƒ/1.4</figcaption>
 </figure>

_posts/2017-08-29-four-corners.markdown

@@ -11,7 +11,7 @@ categories:
 date: 2017-08-29T18:04:53+00:00
 ---
 
-<figure class="photo-wide">
+<figure class="photo photo--wide">
   {% picture photo-wide blog/four-corners/IMG_6164.jpg alt="Four Corners" %}
   <figcaption>Taken on July 2nd, 2017. iPhone 6S & Halide App, 4.15mm, ISO 25, 1/1500 sec at ƒ/2.2</figcaption>
 </figure>

_posts/2018-09-25-barrel-race.markdown

@@ -11,7 +11,7 @@ tags:
   - horses
 ---
 
-<figure class="photo-wide">
+<figure class="photo photo--wide">
   {% picture photo-wide blog/barrel-race/DSCF8015.jpg alt="Barrel Race" %}
   <figcaption>Taken on December 10th, 2017. Fuji X-E2, XF 55-200mm at 200mm, ISO 1250, 1/60 sec at ƒ/4.8</figcaption>
 </figure>

index.html

@@ -10,12 +10,12 @@ layout: default
   {% for post in paginator.posts %}
     {% assign content = post.content %}
 
-    <article>
+    <article class="blog-post">
-      {% include article.html %}
+      {% include index_article.html %}
     </article>
   {% endfor %}
 
-  <div class="pagination">
+  <div class="container pagination">
     {% if paginator.next_page %}
       <a class="prev" href="{{ paginator.next_page_path }}">&larr; Older</a>
     {% endif %}