just some SASS cleanup

assets/sass/abstracts/_responsive.scss

@@ -5,6 +5,7 @@
   @include responsive--global();
   @include responsive--header();
   @include responsive--footer();
+  @include responsive--content();
 
   @include responsive--home();
   @include responsive--list();

assets/sass/abstracts/_variables.scss

@@ -1,6 +1,10 @@
 @charset "UTF-8";
 
-// System fonts and web fonts
+// Web fonts
+$webfont-sans: "Inter", sans-serif;
+$webfont-mono: "Hack", monospace;
+
+// System fonts
 // https://markdotto.com/2018/02/07/github-system-fonts/
 // stylelint-disable indentation
 $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
@@ -10,8 +14,6 @@ $system-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 $system-fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
                "Menlo", "Courier", monospace;
-$webfont-inter: "Inter", sans-serif;
-$webfont-hack: "Hack", monospace;
 
 // Misc Settings
 $responsive-width: 890px;

assets/sass/components/_content.scss

@@ -0,0 +1,102 @@
+@charset "UTF-8";
+
+div#content {
+  font-size: 0.95em;
+  letter-spacing: -0.008em;
+  line-height: 1.7;
+
+  h1,
+  h2,
+  h3 {
+    margin-top: 1.25em;
+    margin-bottom: 0.5em;
+    letter-spacing: 0.001em;
+    line-height: 1.5;
+  }
+
+  img,
+  figure {
+    height: auto;
+    max-width: 100%;
+    margin: 1em auto;
+    display: block;
+  }
+
+  figure {
+    // reduce margin between image and caption
+    img {
+      margin-bottom: 0.4em;
+    }
+
+    // image captions
+    figcaption {
+      font-size: 0.9em;
+      color: $color-medium;
+      text-align: center;
+    }
+  }
+
+  ul {
+    margin-left: 1em;
+    padding-left: 0;
+
+    li {
+      padding-left: 0.25em;
+    }
+  }
+
+  div.embed {
+    &.video {
+      video {
+        display: block;
+        margin: 1em auto;
+        max-width: 100%;
+        height: auto;
+      }
+    }
+
+    &.tweet {
+      // stylelint-disable-next-line selector-type-no-unknown
+      twitter-widget,
+      iframe.twitter-tweet {
+        margin: 0 auto;
+        display: block;
+        border: 0;
+      }
+    }
+
+    &.youtube {
+      position: relative;
+      padding-bottom: 56.25%;
+      margin: 1em auto;
+      height: 0;
+      overflow: hidden;
+
+      iframe.youtube-player {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        border: 0;
+      }
+    }
+
+    &.gh-buttons {
+      text-align: center;
+    }
+
+    &.codepen {
+      iframe {
+        width: 100%;
+        border: 0;
+      }
+    }
+  }
+}
+
+
+// Responsive
+@mixin responsive--content() {
+}

assets/sass/components/_fonts.scss

@@ -1,9 +1,21 @@
 @charset "UTF-8";
 
-/*! Inter Typeface | SIL Open Font License 1.1 | https://rsms.me/inter/ */
+/*!
+ *  Inter typeface v3.11 - https://rsms.me/inter/
+ *
+ *  Copyright (c) 2016-2019 The Inter Project Authors.
+ *  Licensed under the SIL Open Font License, Version 1.1:
+ *  https://github.com/rsms/inter/blob/v3.11/LICENSE.txt
+ */
 @include font-face("Inter", "./fonts/inter-regular-subset", 400, true);
 @include font-face("Inter", "./fonts/inter-medium-subset", 500, true);
 @include font-face("Inter", "./fonts/inter-bold-subset", 700, true);
 
-/*! Hack Typeface | MIT License | https://sourcefoundry.org/hack/ */
+/*!
+ *  Hack typeface v3.003 - https://sourcefoundry.org/hack/
+ *
+ *  Copyright (c) 2018 Source Foundry Authors.
+ *  Licensed under the MIT License:
+ *  https://github.com/source-foundry/Hack/blob/v3.003/LICENSE.md
+ */
 @include font-face("Hack", "./fonts/hack-regular-subset", 400);

assets/sass/components/_global.scss

@@ -7,10 +7,9 @@ body {
   margin: 0 auto;
   background-color: $color-gray-background;   // really just the color of header & footer
   color: $color-text;
-  font-family: $webfont-inter;
-  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
+  font-family: $webfont-sans;
   font-kerning: normal;
-  font-variant-ligatures: normal;
+  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
   line-height: 1.5;
   box-sizing: border-box;
 }
@@ -26,7 +25,6 @@ a {
   transition: background-size 0.25s ease-in-out;
 
   &:hover {
-    text-decoration: none;
     background-size: 100% $link-underline-size;
   }
 
@@ -39,63 +37,12 @@ strong {
   letter-spacing: 0.001em;
 }
 
-// white background for entire width content area
-div#wrap {
-  width: 100%;
-  background-color: $color-background;
-}
-
-div#content {
-  font-size: 0.95em;
-  letter-spacing: -0.008em;
-  line-height: 1.7;
-
-  h1,
-  h2,
-  h3 {
-    margin: 0.5em 0;
-    letter-spacing: 0.001em;
-    line-height: 1.5;
-  }
-
-  img,
-  figure {
-    height: auto;
-    max-width: 100%;
-    margin: 1em auto;
-    display: block;
-  }
-
-  figure {
-    // reduce margin between image and caption
-    img {
-      margin-bottom: 0.4em;
-    }
-
-    // image captions
-    figcaption {
-      font-size: 0.9em;
-      color: $color-medium;
-      text-align: center;
-    }
-  }
-
 blockquote {
   border-left: 5px solid $color-links;
   margin-left: 0.5em;
   padding-left: 1em;
 }
 
-  ul {
-    list-style-position: outside;
-    margin-left: 1em;
-    padding-left: 0;
-
-    li {
-      padding-left: 0.25em;
-    }
-  }
-
 // https://css-tricks.com/examples/hrs/
 hr {
   width: 90%;
@@ -105,80 +52,28 @@ div#content {
   background-image: linear-gradient(to right, #ffffff, #cccccc, #ffffff);
 }
 
-  video.embed {
-    display: block;
-    margin: 1em auto;
-    max-width: 100%;
-    height: auto;
-    border: 0;
-  }
-
-  div.embed {
-    p {
-      text-align: center;
-    }
-
-    &.youtube {
-      position: relative;
-      padding-bottom: 56.25%;
-      margin: 1em auto;
-      height: 0;
-      overflow: hidden;
-
-      iframe.youtube-player {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: 0;
-        display: inline-block;
-      }
-    }
-
-    &.codepen {
-      iframe {
-        width: 100%;
-      }
-    }
-  }
-
-  // stylelint-disable-next-line selector-type-no-unknown
-  twitter-widget,
-  iframe.twitter-tweet {
-    margin: 0 auto;
-    display: block;
-  }
-
-  iframe {
-    border: 0;
-  }
-
 // all code
-  code,
-  div.highlight {
-    font-family: $webfont-hack;
+code {
+  font-family: $webfont-mono;
   background: $color-super-light;
   font-size: 0.95em;
   letter-spacing: 0;
   page-break-inside: avoid;
-  }
 
   // inline code in paragraphs (single tildes)
-  code {
   border: 1px solid $color-light;
   padding: 0.2em;
 }
 
 // code fences
 div.highlight {
+  background: $color-super-light;
   border: 1px solid $color-light;
   border-left: 3px solid $color-links;
   line-height: 1.6;
   max-width: 100%;
   overflow-x: scroll;
   object-fit: scale-down;
-    font-size: 1em;
   margin: 1em 0;
 
   pre {
@@ -192,6 +87,11 @@ div#content {
     padding: 0;
   }
 }
+
+// white background for entire width content area
+div#wrap {
+  width: 100%;
+  background-color: $color-background;
 }
 
 

assets/sass/main.scss

@@ -1,7 +1,5 @@
 @charset "UTF-8";
 
-/*! Compiled CSS from SASS: https://go.jarv.is/ssKHe */
-
 // Variables & Functions
 @import 'abstracts/variables';
 @import 'abstracts/functions';
@@ -11,6 +9,7 @@
 @import 'components/global';
 @import 'components/header';
 @import 'components/footer';
+@import 'components/content';
 
 // Pages
 @import 'pages/home';

assets/sass/pages/_etc.scss

@@ -27,6 +27,5 @@ main#etc {
       font-size: 1.6em;
       padding: 0 0.6em;
     }
-
   }
 }

assets/sass/pages/_home.scss

@@ -38,17 +38,6 @@ main#home {
     vertical-align: middle;
   }
 
-  // non-link colors
-  span {
-    &#serverless {
-      color: $color-serverless;
-    }
-
-    &#shh {
-      color: $color-medium-light;
-    }
-  }
-
   img#me {
     float: right;
     margin: 0 0 0.5em 1em;
@@ -60,7 +49,7 @@ main#home {
   }
 
   a {
-    // Loop through $colors-home -- the main reason I switched to SASS :)
+    // Loop through $colors-home (see abstracts/_variables)
     @each $id, $color in $colors-home {
       &##{$id} {
         color: $color;
@@ -85,6 +74,17 @@ main#home {
       }
     }
   }
+
+  // non-link colors
+  span {
+    &#serverless {
+      color: $color-serverless;
+    }
+
+    &#shh {
+      color: $color-medium-light;
+    }
+  }
 }
 
 

layouts/shortcodes/gist.html

@@ -1 +1,3 @@
+<div class="embed gist">
 <script src="https://gist.github.com/{{ .Get "id" }}.js{{ with .Get "file" }}?file={{ . }}{{ end }}"></script>
+</div>

layouts/shortcodes/video.html

@@ -1,5 +1,5 @@
-<video class="embed"
-       {{- with .Get "width" }} width="{{ . }}"{{ end }}
+<div class="embed video">
+  <video {{- with .Get "width" }} width="{{ . }}"{{ end }}
         {{- with .Get "height" }} height="{{ . }}"{{ end }}
         {{- with .Page.Resources.GetMatch (.Get "poster") }} poster="{{ .Permalink }}"{{ end }}
         {{- if .Get "autoplay" }} autoplay{{ end }}
@@ -13,3 +13,4 @@
 
     <p>Your browser does not support HTML5 video. {{ with .Page.Resources.GetMatch (.Get "mp4")  }}<a href="{{ .Permalink }}">Load the .mp4 video directly.</a>{{ end }}</p>
   </video>
+</div>