🐕🔫

_assets/stylesheets/components/_blog-post.scss

@@ -1,3 +1,5 @@
+$_media-item-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+
 .blog-post {
   border-bottom: 1px dashed $border-color;
   padding-bottom: 2.5rem;
@@ -26,16 +28,18 @@
     figcaption {
       font-size: 0.7em;
       font-style: italic;
-      text-align: right;
       opacity: 0.6;
+      text-align: right;
     }
   }
 
-  img, video, .flash-video {
+  img,
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  video,
-    padding: 0.5em;
+  .flash-video {
+    box-shadow: $_media-item-box-shadow;
     margin: -0.5em;
     max-width: 100%;
+    padding: 0.5em;
 
     &.no-border {
       box-shadow: none;
@@ -45,12 +49,12 @@
 
 .blog-post__header {
   .meta {
-    text-transform: uppercase;
     color: $meta-text-color;
     font-size: 0.8em;
     letter-spacing: 0.1em;
-    width: 100%;
     text-rendering: optimizelegibility;
+    text-transform: uppercase;
+    width: 100%;
   }
 
   h1 + .meta {
@@ -65,7 +69,8 @@
     color: $heading-color;
     text-decoration: none;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: $link-color-hover;
     }
 
@@ -84,18 +89,18 @@
 .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);
+  display: inline-block;
+  margin-bottom: 1.5em;
+  margin-right: 0.5em;
+  padding: 0.4em 0.8em;
+  text-decoration: none;
   transition: background-color 0.5s;
 
   &:hover {
     background: $link-color-hover;
-    text-shadow: none;
     color: $background-color;
+    text-shadow: none;
   }
 
   @media (prefers-color-scheme: dark) {

_assets/stylesheets/components/_site-header.scss

@@ -1,6 +1,8 @@
+$_header-link-focus-text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
+
 .site-header {
   background-color: $header-color;
-  padding: 1rem 0 1rem;
+  padding: 1rem 0;
 }
 
 .site-header__container {
@@ -23,24 +25,29 @@
   position: relative;
 
   ul {
-    list-style: none;
+    border: 0;
     display: block;
+    list-style: none;
     margin: 0;
     padding: 0;
-    border: 0;
-    li {
-      padding-left: 1.25em;
-      float: left;
-    }
     padding-top: 0.15em;
+
+    li {
+      float: left;
+      padding-left: 1.25em;
+    }
+
   }
+
   a {
     color: white;
     text-decoration: none;
     transition: text-shadow 0.25s 0s ease;
-    &:hover, &:focus {
+
-      color: white;
+    &:hover,
-      text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
+    &:focus {
+      color: $white;
+      text-shadow: $_header-link-focus-text-shadow;
     }
   }
 }

_assets/stylesheets/elements/_blockquote.scss

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

_assets/stylesheets/elements/_dl.scss

@@ -1,19 +0,0 @@
-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

@@ -1,5 +1,9 @@
-h1, h2, h3,
+h1,
-h4, h5, h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-weight: 600;
   text-rendering: optimizelegibility;
 }

_assets/stylesheets/styles.scss

@@ -21,7 +21,6 @@
 @import "elements/blockquote";
 @import "elements/body";
 @import "elements/code";
-@import "elements/dl";
 @import "elements/headings";
 @import "elements/html";
 @import "elements/links";