Improve code readability

assets/_scss/_base.scss

@@ -9,6 +9,7 @@ body {
   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;
@@ -23,18 +24,23 @@ h1, h2, h3, h4, h5, h6 {
 h1 {
   font-size: 32px;
 }
+
 h2 {
   font-size: 28px;
 }
+
 h3 {
   font-size: 24px;
 }
+
 h4 {
   font-size: 18px;
 }
+
 h5 {
   font-size: 16px;
 }
+
 h6 {
   font-size: 14px;
 }
@@ -60,6 +66,7 @@ del a {
 
 p {
   margin: 0 0 $indent-var;
+
   // sibling indentation
   @if $paragraph-indent == true {
     & + p {
@@ -93,13 +100,16 @@ blockquote {
   padding-right: 1em;
   font-style: italic;
   border-left: 0.25em solid $accent-color;
+
   a {
     color: inherit;
   }
+
   cite {
     font-family: $sans-serif;
     font-size: 14px;
     font-style: normal;
+
     &:before {
       content: "\2014";
       padding-right: 5px;
@@ -113,10 +123,12 @@ a {
   &:focus {
     @extend %tab-focus;
   }
+
   &:hover,
   &:active {
     outline: 0;
   }
+
   &:hover {
     img {
       box-shadow: 0 0 10px rgba(#000, 0.25);
@@ -129,6 +141,7 @@ a {
 ol, ul {
   @include breakpoint($small) {
     padding-left: 0;
+
     ol, ul {
       padding: 0.5em 1em;
     }
@@ -141,9 +154,11 @@ tt, code, kbd, samp, pre {
   font-family: $monospace;
   font-size: 14px;
 }
+
 pre {
   overflow-x: auto; // add scrollbars to wide code blocks
 }
+
 p code,
 li code,
 figcaption code {
@@ -152,6 +167,7 @@ figcaption code {
   background: mix(#fff, $light-gray, 40%);
   border: 1px solid $light-gray;
   border-radius: $border-radius;
+
   &:before, &:after {
     letter-spacing: -0.2em;
     content: "\00a0"; // non-breaking space
@@ -179,19 +195,23 @@ figure {
   align-items: flex-start;
   flex-wrap: wrap;
   margin: 2em 0;
+
   img,
   iframe,
   .fluid-width-video-wrapper {
     margin-bottom: 1em;
   }
+
   img {
     width: 100%;
     border-radius: $border-radius;
     transition: box-shadow 0.3s;
   }
+
   > a {
     display: block;
   }
+
   &.half {
     > a,
     > img {
@@ -199,10 +219,12 @@ figure {
         width: calc(50% - 0.5em);
       }
     }
+
     figcaption {
       width: 100%;
     }
   }
+
   &.third {
     > a,
     > img {
@@ -210,6 +232,7 @@ figure {
         width: calc(33.3333% - 0.5em);
       }
     }
+
     figcaption {
       width: 100%;
     }
@@ -223,16 +246,19 @@ figcaption {
   color: mix(#fff, $text-color, 25%);
   font-family: $sans-serif;
   font-size: 0.8rem;
+
   a {
     color: inherit;
     text-decoration: none;
     border-bottom: 1px solid $light-gray;
     transition: border 0.4s ease-in-out;
+
     &:hover {
       color: #000;
       border-bottom-color: #000;
     }
   }
+
   code {
     font-size: 0.64rem;
   }
@@ -268,9 +294,11 @@ nav {
     margin: 0;
     padding: 0;
   }
+
   li {
     list-style: none;
   }
+
   a {
     text-decoration: none;
   }