Improve code readability

_includes/footer.html

@@ -20,12 +20,12 @@
       <li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
     {% endif %}
     {% if site.twitter.username %}
-      <li><a href="https://twitter.com/{{ site.twitter.username }}"><i class="fa fa-fw fa-twitter"></i> Twitter</a></li>
+      <li><a href="https://twitter.com/{{ site.twitter.username }}"><i class="fa fa-fw fa-twitter-square"></i> Twitter</a></li>
     {% endif %}
     {% if site.facebook.username %}
-      <li><a href="https://facebook.com/{{ site.facebook.username }}"><i class="fa fa-fw fa-facebook"></i> Facebook</a></li>
+      <li><a href="https://facebook.com/{{ site.facebook.username }}"><i class="fa fa-fw fa-facebook-square"></i> Facebook</a></li>
     {% endif %}
-    <li><a href="{{ base_path }}/feed.xml"><i class="fa fa-fw fa-rss"></i> {{ site.data.ui-text[site.locale].feed_label }}</a></li>
+    <li><a href="{{ base_path }}/feed.xml"><i class="fa fa-fw fa-rss-square"></i> {{ site.data.ui-text[site.locale].feed_label }}</a></li>
   </ul>
 </div>
 

assets/_scss/_archive.scss

@@ -4,15 +4,19 @@
 
 .archive {
   margin-bottom: 2em;
+
   @include breakpoint($medium) {
     @include span(12 of 12);
   }
+
   @include breakpoint($large) {
     @include span(10 of 12 last);
   }
+
   @include breakpoint($x-large) {
     @include prefix(0.5 of 12);
   }
+
   a {
     text-decoration: none;
   }
@@ -34,6 +38,7 @@
 
 .archive__item-excerpt {
   font-size: 14px;
+
   & + p {
     text-indent: 0;
   }
@@ -43,6 +48,7 @@ a:hover {
   .archive__item-teaser {
     box-shadow: 0 0 10px rgba(#000, 0.25);
   }
+
   .archive__item-title {
     text-decoration: underline;
   }
@@ -57,9 +63,11 @@ a:hover {
   @include breakpoint($medium) {
     padding-right: $right-sidebar-width-narrow;
   }
+
   @include breakpoint($large) {
     padding-right: $right-sidebar-width;
   }
+
   @include breakpoint($x-large) {
     padding-right: $right-sidebar-width-wide;
   }
@@ -72,15 +80,18 @@ a:hover {
 
 .grid__item {
   margin-bottom: 2em;
+
   .archive__item-excerpt {
     display: none;
   }
+
   .archive__item-teaser {
     border-radius: $border-radius;
     img {
       width: 100%;
     }
   }
+
   @include breakpoint($small) {
     @include gallery(5 of 10);
     .archive__item-teaser {
@@ -88,13 +99,16 @@ a:hover {
       overflow: hidden;
     }
   }
+
   @include breakpoint($medium) {
     margin-left: 0; // reset before mixin does its thing
     margin-right: 0; // reset before mixin does its thing
     @include gallery(2.5 of 10);
+
     .archive__item-teaser {
       max-height: 120px;
     }
+
     .archive__item-excerpt {
       display: block;
     }

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;
   }

assets/_scss/_buttons.scss

@@ -22,12 +22,15 @@
   border: 0 !important;
   border-radius: $border-radius;
   cursor: pointer;
+
   &:hover {
     background-color: mix(white, #000, 20%);
   }
+
   .icon {
     margin-right: 0.5em;
   }
+
   .icon + .hidden {
     margin-left: -0.5em; // override for hidden text
   }
@@ -37,6 +40,7 @@
   &--block {
     display: block;
     width: 100%;
+
     + .btn--block {
       margin-top: 0.25em;
     }
@@ -48,6 +52,7 @@
     color: currentColor !important;
     border: 1px solid currentColor !important; // override
     background-color: #fff;
+
     &:hover {
       background-color: mix(#000, #fff, 20%);
     }
@@ -64,6 +69,7 @@
 
   &--info {
     background-color: $info-color;
+
     &:hover {
       background-color: mix(#000, $info-color, 20%);
     }
@@ -73,6 +79,7 @@
 
   &--warning {
     background-color: $warning-color;
+
     &:hover {
       background-color: mix(#000, $warning-color, 20%);
     }
@@ -82,6 +89,7 @@
 
   &--success {
     background-color: $success-color;
+
     &:hover {
       background-color: mix(#000, $success-color, 20%);
     }
@@ -91,6 +99,7 @@
 
   &--danger {
     background-color: $danger-color;
+
     &:hover {
       background-color: mix(#000, $danger-color, 20%);
     }
@@ -117,9 +126,10 @@
   @each $socialnetwork, $color in $social {
     &--#{$socialnetwork} {
       background-color: $color;
+
       &:hover {
         background-color: mix(#000, $color, 20%);
       }
     }
   }
-}
+}

assets/_scss/_footer.scss

@@ -7,15 +7,19 @@
   @include clearfix;
   margin-top: 3em;
   padding: 0 2em 3em;
+
   @include breakpoint($large) {
     padding-left: 1em;
     padding-right: 1em;
   }
+
   @include breakpoint($x-large) {
     max-width: $x-large;
   }
+
   a {
     text-decoration: none;
+
     &:hover {
       text-decoration: underline;
     }
@@ -26,9 +30,11 @@
   @include breakpoint($large) {
     @include prefix(2 of 12);
   }
+
   @include breakpoint($x-large) {
     @include prefix(2.5 of 12);
   }
+
   font-size: 14px;
 }
 
@@ -36,9 +42,11 @@
   @include breakpoint($large) {
     @include prefix(2 of 12);
   }
+
   @include breakpoint($x-large) {
     @include prefix(2.5 of 12);
   }
+
   ul {
     margin: 0;
     padding: 0;
@@ -56,4 +64,8 @@
     content: "";
     padding-right: 5px;
   }
+
+  a {
+    font-weight: bold;
+  }
 }

assets/_scss/_forms.scss

@@ -4,11 +4,13 @@
 
 btnform {
   margin: 0 0 5px 0;
+
   fieldset {
     margin-bottom: 5px;
     padding: 0;
     border-width: 0;
   }
+
   legend {
     display: block;
     width: 100%;
@@ -20,14 +22,17 @@ btnform {
     border-bottom: 1px solid mix(#fff, #000, 80%);
     white-space: normal;
   }
+
   p {
     margin-bottom: 5px / 2;
   }
+
   ul {
     list-style-type: none;
     margin: 0 0 5px 0;
     padding: 0;
   }
+
   br {
     display: none;
   }
@@ -56,6 +61,7 @@ label {
   font-weight: bold;
   color: $text-color;
   cursor: pointer;
+
   input,
   textarea,
   select {
@@ -73,6 +79,7 @@ select {
   background-color: #fff;
   border: 1px solid mix(#fff, #000, 80%);
   color: $text-color;
+
   &:hover {
     border-color: mix(#fff, $accent-color, 50%);
   }
@@ -224,7 +231,7 @@ select:focus {
 
 .help-block,
 .help-inline {
-  color: mix(#fff, #000, 50%);
+  color: $info-color;
 }
 
 .help-block {

assets/_scss/_masthead.scss

@@ -9,16 +9,20 @@
   font-family: $sans-serif-narrow;
   font-weight: 700;
   text-transform: uppercase;
+
   @include breakpoint($large) {
     padding-left: 1em;
     padding-right: 1em;
   }
+
   @include breakpoint($x-large) {
     max-width: $x-large;
   }
+
   nav {
-    z-index: 1;
+    z-index: 10;
   }
+
   a {
     text-decoration: none;
   }
@@ -29,9 +33,11 @@
   @include breakpoint($large) {
     @include prefix(2 of 12);
   }
+
   @include breakpoint($x-large) {
     @include prefix(2.5 of 12);
   }
+
   font-size: 24px;
 }
 
@@ -39,9 +45,11 @@
   @include breakpoint($large) {
     @include prefix(2 of 12);
   }
+
   @include breakpoint($x-large) {
     @include prefix(2.5 of 12);
   }
+
   margin-bottom: 1em;
   ul {
     margin: 0;
@@ -56,4 +64,10 @@
   list-style-type: none;
   font-size: 16px;
   white-space: nowrap;
+
+  a {
+    &:hover {
+      color: $gray;
+    }
+  }
 }

assets/_scss/_mixins.scss

@@ -41,6 +41,7 @@
 
 @mixin clearfix {
   clear: both;
+
   &::after {
     clear: both;
     content: "";

assets/_scss/_navigation.scss

@@ -13,18 +13,22 @@
   padding-left: 2em;
   padding-right: 2em;
   font-family: $sans-serif;
+
   ol {
     padding: 0;
     list-style: none;
     font-size: 14px;
+
     @include breakpoint($medium) {
       @include span(10 of 12);
       @include pre(2);
     }
   }
+
   li {
     display: inline;
   }
+
   .current {
     font-weight: bold;
   }
@@ -38,18 +42,22 @@
 .pagination {
   padding-top: 0.5em;
   border-top: 1px solid $border-color;
+
   ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
   }
+
   li {
     display: inline-block;
   }
+
   li + li:before {
     content: "";
     padding-right: 10px;
   }
+
   .current {
     font-weight: bold;
   }
@@ -93,7 +101,6 @@
         font-weight: bold;
         a {
           padding-left: 0;
-          color: $text-color !important;
         }
       }
 

assets/_scss/_notices.scss

@@ -15,34 +15,42 @@
   padding: 1em;
   background-color: mix(#fff, $notice-color, 90%);
   border-radius: $border-radius;
+
   h4 {
     margin-top: 0 !important; // override
     margin-bottom: 0.75em;
     line-height: 1 !important; // override
   }
+
   @at-root .page__content #{&} h4 {
     // using at-root to override .page-content h4 font size
     margin-bottom: 0;
     font-size: 1rem;
   }
+
   @at-root .page__content #{&} a {
     border-bottom-width: 2px;
     box-shadow: none !important; // override
+
     &:hover {
       background-color: transparent !important; // override
     }
   }
+
   p {
     margin-bottom: 0;
+
     a {
       border-bottom: 1px solid mix(#fff, $notice-color, 50%) !important; // override
     }
   }
+
   h4 + p {
     // remove space above paragraphs that appear directly after notice headline
     margin-top: 0;
     padding-top: 0;
   }
+
   code {
     background-color: mix(#fff, $notice-color, 70%)
   }

assets/_scss/_page.scss

@@ -10,10 +10,12 @@
   padding-left: 2em;
   padding-right: 2em;
   z-index: 0;
+
   @include breakpoint($large) {
     padding-left: 1em;
     padding-right: 1em;
   }
+
   @include breakpoint($x-large) {
     max-width: $x-large;
   }
@@ -23,10 +25,12 @@
   @include breakpoint($medium) {
     padding-right: $right-sidebar-width-narrow;
   }
+
   @include breakpoint($large) {
     @include span(10 of 12 last);
     padding-right: $right-sidebar-width;
   }
+
   @include breakpoint($x-large) {
     @include prefix(0.5 of 12);
     padding-right: $right-sidebar-width-wide;
@@ -70,9 +74,11 @@
   z-index: 5;
   opacity: 0.5;
   border-radius: $border-radius 0 $border-radius 0;
+
   @include breakpoint($large) {
     padding: 5px 10px;
   }
+
   a {
     color: #fff;
     text-decoration: none;
@@ -105,6 +111,7 @@
   color: mix(#fff, $gray, 25%);
   font-family: $sans-serif;
   font-size: 14px;
+
   p {
     margin-bottom: 0.5em;
   }
@@ -135,6 +142,7 @@
   text-decoration: none;
   border: 1px solid $light-gray;
   border-radius: $border-radius;
+
   &:hover {
     text-decoration: none;
     border-color: $gray;
@@ -142,7 +150,6 @@
 }
 
 
-
 /*
    Comments
    ========================================================================== */
@@ -167,12 +174,15 @@
   border-top: 1px solid $border-color;
   @include clearfix();
   float: left;
+
   @include breakpoint($large) {
     @include pre(2 of 12);
   }
+
   @include breakpoint($x-large) {
     @include pre(2.5 of 12);
   }
+
   a {
     text-decoration: none;
   }

assets/_scss/_print.scss

@@ -2,15 +2,17 @@
    PRINT STYLES
    ========================================================================== */
 
-/* 
+/*
    Hide the following elements on print
    ========================================================================== */
 
 @media print {
-  .top-navigation, 
+  .masthead,
-  .social-share, 
+  .toc,
-  .related-articles,
+  .page__share,
-  .google-ads {
+  .page__related,
+  .ads,
+  .page__footer {
     display: none;
   }
 }

assets/_scss/_reset.scss

@@ -9,12 +9,15 @@ html {
   box-sizing: border-box;
   background-color: $background-color;
   font-size: 15px;
+
   @include breakpoint($medium) {
     font-size: 16px;
   }
+
   @include breakpoint($large) {
     font-size: 18px;
   }
+
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
 }
@@ -89,9 +92,11 @@ sup {
   line-height: 0;
   vertical-align: baseline;
 }
+
 sup {
   top: -0.5em;
 }
+
 sub {
   bottom: -0.25em;
 }
@@ -126,16 +131,19 @@ textarea {
   font-size: 100%;
   vertical-align: middle;
 }
+
 button,
 input {
   *overflow: visible; // inner spacing ie IE6/7
   line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
 }
+
 button::-moz-focus-inner,
 input::-moz-focus-inner { // inner padding and border oddities in FF3/4
   padding: 0;
   border: 0;
 }
+
 button,
 html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
 input[type="reset"],
@@ -143,6 +151,7 @@ input[type="submit"] {
     -webkit-appearance: button; // corrects inability to style clickable `input` types in iOS
     cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
 }
+
 label,
 select,
 button,
@@ -153,15 +162,18 @@ input[type="radio"],
 input[type="checkbox"] {
     cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
 }
+
 input[type="search"] { // Appearance in Safari/Chrome
   box-sizing: content-box;
   -webkit-appearance: textfield;
 }
+
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none; // inner-padding issues in Chrome OSX, Safari 5
 }
+
 textarea {
   overflow: auto; // remove vertical scrollbar in IE6-9
   vertical-align: top; // readability and alignment cross-browser
-}
+}

assets/_scss/_sidebar.scss

@@ -9,20 +9,35 @@
 .sidebar {
   @include clearfix();
   margin-bottom: 1em;
+
   @include breakpoint($large) {
     @include span(2 of 12);
     @include suffix(0.25 of 12);
   }
+
   @include breakpoint($x-large) {
     padding-right: 0;
   }
+
   h2, h3, h4, h5, h6 {
     margin-bottom: 0;
     font-family: $sans-serif-narrow;
   }
-  p, li {
+
-    font-size: 14px;
+  h3 {
+    font-size: 20px;
   }
+
+  h4 {
+    font-size: 18px;
+  }
+
+  p, li {
+    font-family: $sans-serif;
+    font-size: 14px;
+    line-height: 1.2;
+  }
+
   img {
     width: 100%;
   }
@@ -35,17 +50,21 @@
     right: 1em;
     width: $right-sidebar-width-narrow;
     padding-left: 2em;
+
     @include breakpoint($large) {
       width: $right-sidebar-width;
     }
+
     @include breakpoint($x-large) {
       width: $right-sidebar-width-wide;
       padding-left: span(1 of 12);
     }
   }
+
   @include breakpoint($large) {
     right: calc(50% - (0.5 * #{$large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
   }
+
   @include breakpoint($x-large) {
     right: calc(50% - (0.5 * #{$x-large}) + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
   }
@@ -60,11 +79,13 @@
   vertical-align: top;
   width: 36px;
   height: 36px;
+
   @include breakpoint($large) {
     display: block;
     width: 100%;
     height: 100%;
   }
+
   img {
     max-width: 110px;
     border-radius: 50%;
@@ -78,6 +99,7 @@
   padding-left: 15px;
   padding-right: 15px;
   line-height: 1;
+
   @include breakpoint($large) {
     display: block;
     width: 100%;
@@ -89,6 +111,7 @@
 .author__name {
   margin: 0;
   font-size: 18px;
+
   @include breakpoint($large) {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -101,8 +124,7 @@
 
 .author__bio {
   margin-bottom: 10px;
-  font-size: 14px;
+
-  font-style: italic;
   @include breakpoint($large) {
     margin-bottom: 20px;
   }
@@ -116,6 +138,7 @@
   z-index: 9999;
   position: relative;
   cursor: pointer;
+
   @include breakpoint($large) {
     display: block;
   }
@@ -123,6 +146,7 @@
     margin: 0;
     padding: 5px 10px;
     color: mix(#fff, $gray, 25%);
+
     @include breakpoint($large) {
       display: none;
     }
@@ -141,6 +165,7 @@
   background: #fff;
   z-index: -1;
   box-shadow: 0 0 10px rgba(#000, 0.25);
+
   @include breakpoint($large) {
     display: block;
     position: relative;
@@ -150,6 +175,7 @@
     background: transparent;
     box-shadow: none;
   }
+
   &:before {
     display: block;
     content: "";
@@ -161,10 +187,12 @@
     border-width: 0 10px 10px;
     border-color: $border-color transparent;
     z-index: 0;
+
     @include breakpoint($large) {
       display: none;
     }
   }
+
   &:after {
     display: block;
     content: "";
@@ -176,10 +204,12 @@
     border-width: 0 10px 10px;
     border-color: #fff transparent;
     z-index: 1;
+
     @include breakpoint($large) {
       display: none;
     }
   }
+
   a {
     display: block;
     margin-bottom: 5px;
@@ -187,6 +217,7 @@
     font-size: 14px;
     text-decoration: none;
     white-space: nowrap;
+
     &:hover {
       text-decoration: underline;
     }

assets/_scss/_syntax.scss

@@ -2,12 +2,12 @@
    Syntax highlighting
    ========================================================================== */
 
-div.highlighter-rouge,
+div.highlighter-rouge, figure.highlight {
-figure.highlight {
   margin-bottom: 1em;
   padding: 1em;
   border: 1px solid $border-color;
   border-radius: $border-radius;
+
   .highlight {
     margin: 0;
     font-family: $monospace;
@@ -21,75 +21,98 @@ figure.highlight {
 .highlight, .highlight .w {
   color: #303030;
 }
+
 .highlight .err {
   color: #151515;
   background-color: #ac4142;
 }
+
 .highlight .c, .highlight .cd, .highlight .cm, .highlight .c1, .highlight .cs {
   color: #505050;
 }
+
 .highlight .cp {
   color: #f4bf75;
 }
+
 .highlight .nt {
   color: #f4bf75;
 }
+
 .highlight .o, .highlight .ow {
   color: #d0d0d0;
 }
+
 .highlight .p, .highlight .pi {
   color: #d0d0d0;
 }
+
 .highlight .gi {
   color: #90a959;
 }
+
 .highlight .gd {
   color: #ac4142;
 }
+
 .highlight .gh {
   color: #6a9fb5;
   background-color: #151515;
   font-weight: bold;
 }
+
 .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
   color: #aa759f;
 }
+
 .highlight .kc {
   color: #d28445;
 }
+
 .highlight .kt {
   color: #d28445;
 }
+
 .highlight .kd {
   color: #d28445;
 }
+
 .highlight .s, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
   color: #90a959;
 }
+
 .highlight .sr {
   color: #75b5aa;
 }
+
 .highlight .si {
   color: #8f5536;
 }
+
 .highlight .se {
   color: #8f5536;
 }
+
 .highlight .nn {
   color: #f4bf75;
 }
+
 .highlight .nc {
   color: #f4bf75;
 }
+
 .highlight .no {
   color: #f4bf75;
 }
+
 .highlight .na {
   color: #6a9fb5;
 }
+
 .highlight .m, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mb, .highlight .mx {
   color: #90a959;
 }
+
 .highlight .ss {
   color: #90a959;
-}
+}

assets/_scss/_tables.scss

@@ -8,6 +8,7 @@ table {
   font-size: 0.8rem;
   border-collapse: collapse;
   border-bottom: 2px solid $border-color;
+
   & + table {
     margin-top: 1em;
   }
@@ -30,4 +31,4 @@ td {
 
 tr, td, th {
   vertical-align: middle;
-}
+}

assets/_scss/_toc.scss

@@ -24,6 +24,7 @@
   padding: 0;
   width: 100%;
   list-style: none;
+
   a {
     display: block;
     padding: 10px 20px;
@@ -32,17 +33,21 @@
     font-weight: bold;
     line-height: 1.5;
     border-bottom: 1px solid $border-color;
+
     &:hover {
       color: #000;
       background: $border-color;
     }
   }
+
   li ul > li a {
     font-weight: normal;
   }
+
   // hide sub sub links on small screens
   li > ul li {
     display: none;
+
     @include breakpoint($medium) {
       display: block;
     }

assets/_scss/_utilities.scss

@@ -110,6 +110,7 @@ body:hover .visually-hidden button {
   display: block;
   margin-left: auto;
   margin-right: auto;
+
   @include breakpoint($small) {
     float: left;
     margin-right: 1em;
@@ -122,6 +123,7 @@ body:hover .visually-hidden button {
   display: block;
   margin-left: auto;
   margin-right: auto;
+
   @include breakpoint($small) {
     float: right;
     margin-left: 1em;
@@ -218,6 +220,7 @@ $navicon-height : 4px;
     position: -webkit-sticky;
     position: sticky;
     top: 3em;
+
     > * {
       display: block;
     }
@@ -249,4 +252,4 @@ $navicon-height : 4px;
     margin-bottom: 0;
     font-size: 14px;
   }
-}
+}