Finish porting CSS to SASS

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .idea
 
-# When running outside of docker, Hugo writes content here
+# Hugo generated content 
 /site/public
+/site/resources

site/assets/style.sass

@@ -1,14 +0,0 @@
-@import style/fonts
-@import style/reset
-@import style/colours
-@import style/headings
-@import style/text
-
-@import style/modules/code
-@import style/modules/figures
-@import style/modules/header
-@import style/modules/updates
-
-@import style/font-awesome
-@import style/font-awesome.min
-@import style/legacy

site/assets/style/_colours.sass

@@ -1,7 +1,9 @@
 // Site-wide colour definitions
 
 $dark-gray: #565656
-$light-gray: #787878
+$gray: #787878
+$light-gray: #efefef
+$lightest-gray: #f7f7f7
 $cyan: #49bf9d
 
 $light-green: #eeffee
@@ -9,3 +11,6 @@ $green: #669966
 
 $update-border: $green
 $update-background: $light-green
+
+$code-border: $light-gray
+$code-background: $lightest-gray

site/assets/style/_general.sass

@@ -0,0 +1,48 @@
+body
+  background: #ffffff
+  min-width: 400px
+
+p
+  margin: 0 0 2em 0
+
+hr
+  border: 0
+  border-bottom: solid 2px $light-gray
+  margin: 2em 0
+
+summary
+  cursor: pointer
+
+#main
+  margin-left: calc(60% - 27em)
+  max-width: 54em
+  padding: 8em 4em 4em 4em
+  width: calc(100% - 20%)
+
+  @media screen and (max-width: 1280px)
+    margin-left: 30%
+    max-width: none
+    padding: 6em 3em 3em 3em
+    width: calc(100% - 30%)
+
+  @media screen and (max-width: 980px)
+    margin: 0
+    padding: 6em 4em
+    width: 100%
+
+  @media screen and (max-width: 736px), screen and (max-height: 700px)
+    padding: 2.25em 1.5em 0.25em 1.5em
+
+  & > section
+    border-top: solid 2px $light-gray
+    margin: 4em 0 0 0
+    padding: 4em 0 0 0
+
+    @media screen and (max-width: 736px), screen and (max-height: 700px)
+      margin: 2.25em 0 0 0
+      padding: 2.25em 0 0 0
+
+    &:first-child
+      border-top: 0
+      margin-top: 0
+      padding-top: 0

site/assets/style/_text.sass

@@ -6,13 +6,17 @@ body
   font-size: 16pt
   font-weight: 400
   line-height: 1.75em
+  -webkit-text-size-adjust: none
+
+  @media screen and (max-width: 1800px)
+    font-size: 12pt
 
 a
   color: $cyan
   text-decoration-skip-ink: auto
 
 strong, b
-  color: $light-gray
+  color: $gray
   font-weight: 400
 
 em, i
@@ -27,3 +31,12 @@ sup
   font-size: 0.8em
   position: relative
   top: -0.5em
+
+p code
+  background: $code-background
+  border-radius: .35em
+  border: solid 2px $code-border
+  font-family: "Courier New", monospace
+  font-size: .9em
+  margin: 0 .25em
+  padding: .25em .65em

site/assets/style/font-awesome.css

@@ -1,3 +0,0 @@
-.fa-key:before { content: '\e800' !important; }
-.fa-twitter:before { content: '\f099' !important; }
-.fa-github:before { content: '\f09b' !important; }

site/assets/style/legacy.css

@@ -1,594 +0,0 @@
-body {
-  -webkit-text-size-adjust: none
-}
-
-/* hire */
-.hire {
-  background-color: #afb6d9;
-  border-radius: 10px;
-  padding: 1em 1.5em;
-  margin-bottom: 2em;
-}
-
-.hire h3, .hire p {
-  margin: 0;
-}
-
-.hire a, .hire a:hover, .hire a:active {
-  color: #4565ad !important;
-}
-
-summary {
-  cursor: pointer;
-}
-
-
-/* Basic */
-
-  body {
-    background: #ffffff;
-    min-width: 400px;
-  }
-
-p { margin: 0 0 2em 0; }
-
-
-hr {
-    border: 0;
-    border-bottom: solid 2px #efefef;
-    margin: 2em 0;
-  }
-
-  blockquote {
-    border-left: solid 6px #efefef;
-    font-style: italic;
-    margin: 0 0 2em 0;
-    padding: 0.5em 0 0.5em 1.5em;
-  }
-
-  blockquote p {
-    margin-bottom: 0.5em;
-  }
-
-  blockquote p:last-child {
-    margin-bottom: 0;
-  }
-
-  .align-left {
-    text-align: left;
-  }
-
-  .align-center {
-    text-align: center;
-  }
-
-  .align-right {
-    text-align: right;
-  }
-
-/* Section/Article */
-
-  article + article {
-    padding-top: 100px;
-    border-top: 10px solid rgba(200, 200, 200, 0.3);
-    margin-top: 100px;
-  }
-
-  header p {
-    color: #d2d2d2;
-    position: relative;
-    margin: 0 0 1.5em 0;
-  }
-
-  header h2 + p {
-    color: #939393;
-    font-size: 1.25em;
-    margin-top: -1em;
-    line-height: 1.5em;
-  }
-
-  header h3 + p {
-    font-size: 1.1em;
-    margin-top: -0.8em;
-    line-height: 1.5em;
-  }
-
-  header h4 + p,
-  header h5 + p,
-  header h6 + p {
-    font-size: 0.9em;
-    margin-top: -0.6em;
-    line-height: 1.5em;
-  }
-
-/* Image */
-
-article img {
-  max-width: 100%;
-}
-
-.image {
-  border-radius: 0.35em;
-  border: 0;
-  display: inline-block;
-  position: relative;
-}
-
-    .image:before {
-      -moz-transition: opacity 0.2s ease-in-out;
-      -webkit-transition: opacity 0.2s ease-in-out;
-      -ms-transition: opacity 0.2s ease-in-out;
-      transition: opacity 0.2s ease-in-out;
-      background: url("/res/images/overlay.png");
-      border-radius: 0.35em;
-      content: '';
-      display: block;
-      height: 100%;
-      left: 0;
-      opacity: 0.5;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-
-    .image.thumb {
-      text-align: center;
-    }
-
-      .image.thumb:after {
-        -moz-transition: opacity 0.2s ease-in-out;
-        -webkit-transition: opacity 0.2s ease-in-out;
-        -ms-transition: opacity 0.2s ease-in-out;
-        transition: opacity 0.2s ease-in-out;
-        border-radius: 0.35em;
-        border: solid 3px rgba(255, 255, 255, 0.5);
-        color: #fff;
-        content: 'View';
-        display: inline-block;
-        font-size: 0.8em;
-        font-weight: 400;
-        left: 50%;
-        line-height: 2.25em;
-        margin: -1.25em 0 0 -3em;
-        opacity: 0;
-        padding: 0 1.5em;
-        position: absolute;
-        text-align: center;
-        text-decoration: none;
-        top: 50%;
-        white-space: nowrap;
-      }
-
-      .image.thumb:hover:after {
-        opacity: 1.0;
-      }
-
-      .image.thumb:hover:before {
-        background: url("/res/images/overlay.png"), url("/res/images/overlay.png");
-        opacity: 1.0;
-      }
-
-    .image img {
-      border-radius: 0.35em;
-      display: block;
-    }
-
-    .image.left, figure.left {
-      float: left;
-      margin: 0 1.5em 1em 0;
-      top: 0.25em;
-    }
-
-    .image.right, figure.right {
-      float: right;
-      margin: 0 0 1em 1.5em;
-      top: 0.25em;
-    }
-
-    .image.left, .image.right, figure.left, figure.right {
-      max-width: 40%;
-    }
-
-      .image.left img, .image.right img, figure.left img, figure.right img {
-        width: 100%;
-      }
-
-    .image.fit {
-      display: block;
-      margin: 0 0 2em 0;
-      width: 100%;
-    }
-
-      .image.fit img {
-        width: 100%;
-      }
-
-/* List */
-
-  ol {
-    list-style: decimal;
-    margin: 0 0 2em 0;
-    padding-left: 1.25em;
-  }
-
-    ol li {
-      padding-left: 0.25em;
-    }
-
-  ul {
-    list-style: disc;
-    margin: 0 0 2em 0;
-    padding-left: 1em;
-  }
-
-    ul li {
-      padding-left: 0.5em;
-    }
-
-/* Table */
-
-  .table-wrapper {
-    -webkit-overflow-scrolling: touch;
-    overflow-x: auto;
-  }
-
-  table {
-    margin: 0 0 2em 0;
-    width: 100%;
-  }
-
-    table tbody tr {
-      border: solid 1px #efefef;
-      border-left: 0;
-      border-right: 0;
-    }
-
-      table tbody tr:nth-child(2n + 1) {
-        background-color: #f7f7f7;
-      }
-
-    table td {
-      padding: 0.75em 0.75em;
-    }
-
-    table th {
-      color: #787878;
-      font-size: 0.9em;
-      font-weight: 400;
-      padding: 0 0.75em 0.75em 0.75em;
-      text-align: left;
-    }
-
-    table thead {
-      border-bottom: solid 2px #efefef;
-    }
-
-    table tfoot {
-      border-top: solid 2px #efefef;
-    }
-
-    table.alt {
-      border-collapse: separate;
-    }
-
-      table.alt tbody tr td {
-        border: solid 2px #efefef;
-        border-left-width: 0;
-        border-top-width: 0;
-      }
-
-        table.alt tbody tr td:first-child {
-          border-left-width: 2px;
-        }
-
-      table.alt tbody tr:first-child td {
-        border-top-width: 2px;
-      }
-
-      table.alt thead {
-        border-bottom: 0;
-      }
-
-      table.alt tfoot {
-        border-top: 0;
-      }
-
-/* Main */
-
-  #main {
-    margin-left: calc(60% - 27em);
-    max-width: 54em;
-    padding: 8em 4em 4em 4em;
-    width: calc(100% - 20%);
-  }
-
-    #main > section {
-      border-top: solid 2px #efefef;
-      margin: 4em 0 0 0;
-      padding: 4em 0 0 0;
-    }
-
-      #main > section:first-child {
-        border-top: 0;
-        margin-top: 0;
-        padding-top: 0;
-      }
-
-/* Touch */
-
-  body.is-touch .image.thumb:before {
-    opacity: 0.5 !important;
-  }
-
-  body.is-touch .image.thumb:after {
-    display: none !important;
-  }
-
-  body.is-touch #header {
-    background-attachment: scroll;
-    background-size: auto, cover;
-  }
-
-/* XLarge */
-
-  @media screen and (max-width: 1800px) {
-
-    /* Basic */
-
-      body, input, select, textarea {
-        font-size: 12pt;
-      }
-
-  }
-
-/* Large */
-
-  @media screen and (max-width: 1280px) {
-
-    /* Header */
-
-      #header {
-        padding: 6em 3em 3em 3em;
-        width: 30%;
-      }
-
-        #header h1 {
-          font-size: 1.25em;
-        }
-
-          #header h1 br {
-            display: none;
-          }
-
-    /* Main */
-
-      #main {
-        margin-left: 30%;
-        max-width: none;
-        padding: 6em 3em 3em 3em;
-        width: calc(100% - 30%);
-      }
-
-  }
-
-/* Medium */
-
-  @media screen and (max-width: 980px) {
-
-    /* Basic */
-
-      h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
-        display: none;
-      }
-
-    /* List */
-
-      ul.icons li .icon {
-        font-size: 1.25em;
-      }
-
-    /* Header */
-
-      #header {
-        background-attachment: scroll;
-        background-position: top left, center center;
-        background-size: auto,    cover;
-        left: auto;
-        padding: 6em 4em;
-        position: relative;
-        text-align: center;
-        top: auto;
-        width: 100%;
-        display: block;
-      }
-
-        #header h1 {
-          font-size: 1.75em;
-        }
-
-          #header h1 br, #posts .recent *, #posts .recent a {
-            display: inline;
-            padding: 0;
-            width: auto;
-          }
-
-          #posts ul {
-            padding-left: 0;
-          }
-
-          #posts ul li {
-            text-align: left;
-            margin: 0;
-          }
-
-    /* Main */
-
-      #main {
-        margin: 0;
-        padding: 6em 4em;
-        width: 100%;
-      }
-
-  }
-
-/* Small */
-
-  @media screen and (max-width: 736px), screen and (max-height: 700px) {
-
-    /* Basic */
-
-      h1 {
-        font-size: 1.5em;
-      }
-
-      h2 {
-        font-size: 1.2em;
-      }
-
-      h3 {
-        font-size: 1em;
-      }
-
-    /* Section/Article */
-
-      section.special, article.special {
-        text-align: center;
-      }
-
-      header.major h2 {
-        font-size: 1.35em;
-      }
-
-    /* List */
-
-      ul.labeled-icons li {
-        padding-left: 2em;
-      }
-
-        ul.labeled-icons li h3 {
-          line-height: 1.75em;
-        }
-
-    /* Header */
-
-      #header {
-        padding: 2.25em 1.5em;
-        min-height: 18em;
-      }
-
-      #header section {
-        padding: 10px 0;
-      }
-
-        #header h1 {
-          font-size: 1.35em;
-        }
-
-
-        #header ul {
-          margin-bottom: 20px;
-        }
-
-        #posts {
-          position: absolute;
-          bottom: 20px;
-          right: 20px;
-        }
-
-        #posts li.recent {
-          display: none;
-        }
-
-        #posts ul li {
-          margin: 0 0;
-          font-size: 0.9em;
-          line-height: 1.3em;
-        }
-
-    /* Main */
-
-      #main {
-        padding: 2.25em 1.5em 0.25em 1.5em;
-      }
-
-        #main > section {
-          margin: 2.25em 0 0 0;
-          padding: 2.25em 0 0 0;
-        }
-
-  }
-
-/* XSmall */
-
-  @media screen and (max-width: 480px), screen and (max-height: 700px)  {
-
-    /* List */
-
-      ul.actions {
-        margin: 0 0 2em 0;
-      }
-
-        ul.actions li {
-          display: block;
-          padding: 1em 0 0 0;
-          text-align: center;
-          width: 100%;
-        }
-
-          ul.actions li:first-child {
-            padding-top: 0;
-          }
-
-          ul.actions li > * {
-            margin: 0 !important;
-            width: 100%;
-          }
-
-            ul.actions li > *.icon:before {
-              margin-left: -2em;
-            }
-
-        ul.actions.small li {
-          padding: 0.5em 0 0 0;
-        }
-
-          ul.actions.small li:first-child {
-            padding-top: 0;
-          }
-
-    /* Header */
-
-      #header {
-        padding: 2.25em 1.5em 2em;
-        min-height: 18em;
-      }
-
-      #header section {
-        padding: 0;
-      }
-
-        #header h1 br {
-          display: none;
-        }
-
-        #posts li.recent {
-          display: none;
-        }
-
-        #header ul {
-          margin-bottom: 20px;
-        }
-
-        #posts {
-          position: absolute;
-          bottom: 20px;
-          right: 20px;
-        }
-
-        #posts ul li {
-          margin: 0 0;
-          font-size: 0.9em;
-          line-height: 1.3em;
-        }
-
-  }

site/assets/style/lightbox.min.css.disabled

@@ -1 +0,0 @@
-.lb-loader,.lightbox{text-align:center;line-height:0}body:after{content:url(/res/images/close.png) url(/res/images/loading.gif) url(/res/images/prev.png) url(/res/images/next.png);display:none}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;border-radius:3px}.lightbox a img{border:none}.lb-outerContainer{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;border-radius:4px}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-container{padding:4px}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(/res/images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(/res/images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(/res/images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;-moz-border-radius-bottomleft:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(/res/images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}

site/assets/style/modules/_articles.sass

@@ -0,0 +1,22 @@
+// Deals with article-specific layouts
+
+article
+
+  & + article
+    padding-top: 100px
+    border-top: 10px solid rgba(200, 200, 200, 0.3)
+    margin-top: 100px
+
+    @media screen and (max-width: 1800px)
+      padding-top: 50px
+      margin-top: 50px
+
+  header p
+    position: relative
+    margin: -1em 0 1.5em 0
+    color: #939393
+    font-size: 1.25em
+    line-height: 1.5em
+
+  img
+    max-width: 100%

site/assets/style/modules/_blockquotes.sass

@@ -0,0 +1,13 @@
+// Blockquotes
+
+blockquote
+  border-left: solid 6px $light-gray
+  font-style: italic
+  margin: 0 0 2em 0
+  padding: 0.5em 0 0.5em 1.5em
+
+  p
+    margin-bottom: 0.5em
+
+    &:last-child
+      margin-bottom: 0

site/assets/style/modules/_figures.sass

@@ -22,10 +22,12 @@ figure
 
   &.left
     float: left
+    margin-left: 0
     margin-right: 1.5em
     max-width: 40%
 
   &.right
     float: right
     margin-left: 1.5em
+    margin-right: 0
     max-width: 40%

site/assets/style/modules/_fontawesome.sass

@@ -0,0 +1,34 @@
+// Font awesome, used for icons in the header
+
+.fa-key:before
+  content: '\e800'
+
+.fa-twitter:before
+  content: '\f099'
+
+.fa-github:before
+  content: '\f09b'
+
+.fa-ul
+  padding-left: 0
+  margin-left: 2.14285714em
+  list-style-type: none
+
+  & > li
+    position: relative
+
+.fa
+  display: inline-block
+  font: normal normal normal 14px/1 FontAwesome
+  text-rendering: auto
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  font-size: 1.33333333em
+  line-height: .75em
+
+  position: absolute
+  vertical-align: -15%
+  left: -1.85714286em
+  width: 2.14285714em
+  top: .14285714em
+  text-align: center

site/assets/style/modules/_header.sass

@@ -21,8 +21,38 @@
   top: 0
 
   position: fixed
-  padding: 8em 2em 8em 1em
   text-align: right
+  padding: 8em 2em 8em 1em
+
+  @media screen and (max-width: 1280px)
+    padding: 6em 3em 3em 3em
+    width: 30%
+
+  @media screen and (max-width: 980px)
+    background-attachment: scroll
+    background-position: top left, center center
+    background-size: auto, cover
+    left: auto
+    padding: 6em 4em
+    position: relative
+    text-align: center
+    top: auto
+    width: 100%
+    display: block
+
+  @media screen and (max-width: 736px), screen and (max-height: 700px)
+    padding: 2.25em 1.5em
+    min-height: 18em
+
+    ul
+      margin-bottom: 0
+
+  @media screen and (max-width: 480px), screen and (max-height: 700px)
+    padding: 2.25em 1.5em 2em
+    min-height: 18em
+
+  ul
+    margin-bottom: 0
 
   & > *
     flex-shrink: 0
@@ -35,6 +65,9 @@
   section
     padding: 20px 0
 
+    @media screen and (max-width: 980px)
+      padding: 0
+
   a
     text-decoration: none
 
@@ -45,17 +78,39 @@
     text-transform: uppercase
     color: #3c3c3c
 
+    @media screen and (max-width: 1280px)
+      font-size: 1.25em
+
+    @media screen and (max-width: 980px)
+      font-size: 1.75em
+
+  p
+    color: #d2d2d2
+    position: relative
+    margin: 0 0 1.5em 0
+
 
 // Recent posts list
 
 #posts ul
   list-style-type: none
 
+  @media screen and (max-width: 980px)
+    position: absolute
+    bottom: 20px
+    right: 20px
+
+    .recent
+      display: none
+
   li
     margin: 20px 0
     font-size: 0.9em
     line-height: 1.3em
 
+    @media screen and (max-width: 980px)
+      margin: 0.4em
+
     &.recent a
       background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 30%)
       display: inline-block

site/assets/style/_headings.sass → site/assets/style/modules/_headings.sass

@@ -31,3 +31,14 @@ h5
 
 h6
   font-size: 0.7em
+
+@media screen and (max-width: 736px), screen and (max-height: 700px)
+
+  h1
+    font-size: 1.5em
+
+  h2
+    font-size: 1.2em
+
+  h3
+    font-size: 1em

site/assets/style/modules/_hire.sass

@@ -0,0 +1,13 @@
+// "Hire me" block at the bottom of articles
+
+.hire
+  background-color: #afb6d9
+  border-radius: 10px
+  padding: 1em 1.5em
+  margin-bottom: 2em
+
+  h3, p
+    margin: 0
+
+  a, a:hover, a:active
+    color: #4565ad !important

site/assets/style/modules/_lists.sass

@@ -0,0 +1,17 @@
+// Unordered and ordered lists
+
+ol
+  list-style: decimal
+  margin: 0 0 2em 0
+  padding-left: 1.25em
+
+  li
+    padding-left: 0.25em
+
+ul
+  list-style: disc
+  margin: 0 0 2em 0
+  padding-left: 1em
+
+  li
+    padding-left: 0.5em

site/assets/style/modules/_tables.sass

@@ -0,0 +1,33 @@
+// Basic tables
+
+.table-wrapper
+  -webkit-overflow-scrolling: touch
+  overflow-x: auto
+
+table
+  margin: 0 0 2em 0
+  width: 100%
+
+  tbody tr
+    border: solid 1px $light-gray
+    border-left: 0
+    border-right: 0
+
+    &:nth-child(2n + 1)
+      background-color: $lightest-gray
+
+  td
+    padding: 0.75em 0.75em
+
+  th
+    color: $gray
+    font-size: 0.9em
+    font-weight: 400
+    padding: 0 0.75em 0.75em 0.75em
+    text-align: left
+
+  thead
+    border-bottom: solid 2px $light-gray
+
+  tfoot
+    border-top: solid 2px $light-gray

site/assets/style/style.sass

@@ -0,0 +1,17 @@
+@import fonts
+@import reset
+@import colours
+@import general
+@import text
+
+@import modules/articles
+@import modules/blockquotes
+@import modules/code
+@import modules/figures
+@import modules/fontawesome
+@import modules/header
+@import modules/headings
+@import modules/hire
+@import modules/lists
+@import modules/tables
+@import modules/updates

site/content/post/2016-08-11-offline-gnupg-master-yubikey-subkeys.md

@@ -103,7 +103,7 @@ followed the instructions at the end of Simon's guide to import my public key an
 of the subkeys on the Yubikey. After that [Enigmail](https://www.enigmail.net/index.php/en/)
 was able to sign and encrypt e-mail in Thunderbird.
 
-<figure class="image left">
+<figure class="left">
   <img src="/res/images/yubikey/wisdom_of_the_ancients.png" alt="XKCD: Wisdom of the ancients">
   <figcaption><a href="https://xkcd.com/979/">XKCD #979: Wisdom of the ancients</a></figcaption>
 </figure>

site/layouts/partials/head.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>
       {{ if $.IsPage }}
@@ -16,7 +16,7 @@
     </title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    {{ $style := resources.Get "style.sass" | toCSS (dict "outputStyle" "compressed") | fingerprint }}
+    {{ $style := resources.Get "style/style.sass" | toCSS (dict "outputStyle" "compressed") | fingerprint }}
     <link rel="stylesheet" href="{{ $style.Permalink }}">
     <link rel="canonical" href="{{ .Permalink }}" />
     {{ with .Site.GetPage "home" }}