LOTS of Sass refactoring

.prettierignore

@@ -0,0 +1 @@
+/app/sass/

.sasslintrc

@@ -5,90 +5,93 @@ options:
   formatter: stylish
 
 rules:
-  attribute-quotes: 1
+  attribute-quotes: 2
   bem-depth:
-    - 1
+    - 2
-    - max_depth: 2
+    - max-depth: 3
   border-zero:
-    - 1
+    - 2
     - convention: none
   brace-style:
-    - 1
+    - 2
     - allow-single-line: false
-    - style: 1tbs
+    - style: 2tbs
-  class-name-format:
+  class-name-format: 0
-    - 1
+  clean-import-paths: 2
-    - allow-leading-underscore: false
+  declarations-before-nesting: 2
-    - convention: hyphenatedlowercase
+  empty-args: 2
-  clean-import-paths: 1
-  declarations-before-nesting: 1
-  empty-args: 1
   empty-line-between-blocks:
-    - 1
+    - 2
     - allow-single-line-rulesets: true
-  extends-before-declarations: 1
+  extends-before-declarations: 2
-  extends-before-mixins: 1
+  extends-before-mixins: 2
-  final-newline: 1
+  final-newline: 2
-  force-attribute-nesting: 1
+  force-attribute-nesting: 2
   force-element-nesting: 0
   force-pseudo-nesting: 0
   function-name-format:
-    - 1
+    - 2
     - allow-leading-underscore: false
     - convention: hyphenatedbem
-  hex-length: 1
+  hex-length: 2
-  hex-notation: 1
+  hex-notation: 2
   id-name-format: 0
-  indentation: 1
+  indentation: 2
   leading-zero:
-    - 1
+    - 2
     - include: true
   max-file-line-count: 0
   max-line-length: 0
-  mixins-before-declarations: 1
+  mixins-before-declarations: 2
   mixin-name-format:
     allow-leading-underscore: false
     convention: hypenatedbem
-  nesting-depth: 1
+  nesting-depth:
+    - 2
+    - max-depth: 3
   no-attribute-selectors: 0
   no-color-hex: 0
-  no-color-keywords: 1
+  no-color-keywords: 2
-  no-color-literals: 1
+  no-color-literals:
+    - 0
+    - allow-map-identifiers: true
+    - allow-rgba: true
+    - allow-variable-identifiers: true
   no-combinators: 0
-  no-css-comments: 1
+  no-css-comments: 2
-  no-debug: 1
+  no-debug: 2
   no-disallowed-properties: 0
-  no-duplicate-properties: 1
+  no-duplicate-properties: 2
-  no-empty-rulesets: 1
+  no-empty-rulesets: 2
-  no-extends: 1
+  no-extends: 0
-  no-ids: 1
+  no-ids: 2
-  no-important: 1
+  no-important: 2
-  no-invalid-hex: 1
+  no-invalid-hex: 2
-  no-mergeable-selectors: 1
+  no-mergeable-selectors: 2
-  no-misspelled-properties: 1
+  no-misspelled-properties: 2
   no-qualifying-elements:
-    - 1
+    - 2
     - allow-element-with-attribute: true
     - allow-element-with-class: false
     - allow-element-with-id: false
-  no-trailing-whitespace: 1
+  no-trailing-whitespace: 2
-  no-trailing-zero: 1
+  no-trailing-zero: 2
   no-transition-all: 0
   no-universal-selectors: 0
-  no-url-domains: 1
+  no-url-domains: 2
-  no-url-protocols: 1
+  no-url-protocols: 2
   no-vendor-prefixes:
-    - 1
+    - 0
     - ignore-non-standard: true
-  no-warn: 1
+  no-warn: 2
-  one-declaration-per-line: 1
+  one-declaration-per-line: 0
-  placeholder-in-extend: 1
+  placeholder-in-extend: 0
   placeholder-name-format:
-    - 1
+    - 2
     - allow-leading-underscore: false
     - convention: hyphenatedbem
   property-sort-order:
-    - 1
+    - 2
     - order:
       - width
       - max-width
@@ -103,6 +106,8 @@ rules:
       - bottom
       - left
       -
+      - align-content
+      - align-items
       - animation
       - animation-delay
       - animation-direction
@@ -164,6 +169,7 @@ rules:
       - border-width
       -
       - box-align
+      - box-decoration-break
       - box-flex
       - box-orient
       - box-pack
@@ -181,8 +187,11 @@ rules:
       - display
       - empty-cells
       - filter
+      - flex
       - flex-align
       - flex-direction
+      - flex-flow
+      - flex-grow
       - flex-order
       - flex-pack
       - float
@@ -193,8 +202,14 @@ rules:
       - font-style
       - font-variant
       - font-weight
+      - grid
+      - grid-area
+      - grid-gap
+      - grid-template
+      - grid-template-columns
       - hyphens
       - interpolation-mode
+      - justify-content
       - letter-spacing
       - line-height
       - list-style
@@ -214,6 +229,8 @@ rules:
       - margin-left-collapse
       -
       - marks
+      - object-fit
+      - object-position
       - opacity
       - osx-font-smoothing
       - outline
@@ -222,6 +239,7 @@ rules:
       - outline-style
       - outline-width
       - overflow
+      - overflow-scrolling
       - overflow-x
       - overflow-y
       - padding-top
@@ -241,6 +259,7 @@ rules:
       - text-align
       - text-decoration
       - text-indent
+      - text-orientation
       - text-overflow
       - text-rendering
       - text-shadow
@@ -261,28 +280,29 @@ rules:
       - word-break
       - word-spacing
       - word-wrap
+      - writing-mode
       - z-index
       - zoom
   property-units: 0
-  pseudo-element: 1
+  pseudo-element: 2
   quotes:
-    - 1
+    - 2
     - style: double
-  shorthand-values: 1
+  shorthand-values: 2
-  single-line-per-selector: 1
+  single-line-per-selector: 2
   space-after-bang: 0
-  space-after-colon: 1
+  space-after-colon: 2
-  space-after-comma: 1
+  space-after-comma: 2
-  space-around-operator: 1
+  space-around-operator: 2
-  space-before-bang: 1
+  space-before-bang: 2
-  space-before-brace: 1
+  space-before-brace: 2
   space-before-colon: 0
   space-between-parens: 0
-  trailing-semicolon: 1
+  trailing-semicolon: 2
-  url-quotes: 1
+  url-quotes: 2
   variable-for-property: 0
   variable-name-format:
-    - 1
+    - 2
     - allow-leading-underscore: false
     - convention: hyphenatedbem
   zero-unit: 0

app/sass/_layout.scss

@@ -9,25 +9,33 @@ html {
 
 body {
   @include font-sans;
+  min-width: 320px;
+
   color: $black;
   font-size: 12px;
-  min-width: 320px;
   overflow-x: hidden;
   position: relative;
   z-index: 0;
 }
 
+@supports (font-variation-settings: normal) {
+  body {
+    font-family: "Inter UI Variable", sans-serif;
+  }
+}
+
 main {
+  min-height: 100vh;
+
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
   padding-top: 4rem;
 }
 
 .inner-wrap {
+  max-width: 1200px;
   margin-right: auto;
   margin-left: auto;
-  max-width: 1200px;
 
   @media (min-width: 901px) {
     padding-right: 1rem;
@@ -44,7 +52,11 @@ main {
   }
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   .header-anchor {
     display: none;
   }
@@ -63,6 +75,7 @@ code {
 }
 
 .alert {
+  width: 100%;
   bottom: 0; left: 0;
 
   background-color: $yellow;
@@ -73,7 +86,6 @@ code {
   padding-left: env(safe-area-inset-left);
   position: fixed;
   text-align: left;
-  width: 100%;
   z-index: 3;
 
   > div:first-of-type {
@@ -88,13 +100,14 @@ code {
     font-size: 0.8rem;
   }
 
-  p, button {
+  p,
+  button {
     display: inline-block;
   }
 
   p {
-    padding-right: 1rem;
     width: calc(100% - 2.25rem);
+    padding-right: 1rem;
   }
 
   a {

app/sass/bundle.scss

@@ -1,37 +1,36 @@
 @charset "utf-8";
 
 @import
-  "init/colors",
+"init/colors",
-  "init/base",
+"init/base",
-  "init/mixins",
+"init/mixins",
-  "init/markdown",
+"init/markdown",
-  "init/extends",
+"init/extends",
 
-  "type/karla",
+"type/inter",
-  "type/inter",
 
-  "partials/animation",
+"partials/animation",
-  "partials/ecosystem",
+"partials/ecosystem",
-  "partials/email-subscribe",
+"partials/email-subscribe",
-  "partials/feature-links",
+"partials/feature-links",
-  "partials/flash",
+"partials/flash",
-  "partials/footer",
+"partials/footer",
-  "partials/github-feed",
+"partials/github-feed",
-  "partials/glossary",
+"partials/glossary",
-  "partials/link-grid",
+"partials/link-grid",
-  "partials/navigation",
+"partials/navigation",
-  "partials/mission-statement",
+"partials/mission-statement",
-  "partials/modal",
+"partials/modal",
-  "partials/pre",
+"partials/pre",
 
-  "layout",
+"layout",
 
-  "pages/api",
+"pages/api",
-  "pages/contributing",
+"pages/contributing",
-  "pages/documentation",
+"pages/documentation",
-  "pages/home",
+"pages/home",
-  "pages/page",
+"pages/page",
-  "pages/playground",
+"pages/playground",
 
-  "plugins/prism"
+"plugins/prism"
 ;

app/sass/init/_base.scss

@@ -1,3 +1,5 @@
+// sass-lint:disable no-important
+
 html {
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
@@ -17,7 +19,8 @@ html {
 
 a,
 area,
-button, [role="button"],
+button,
+[role="button"],
 input,
 label,
 select,
@@ -36,12 +39,12 @@ a {
 }
 
 textarea {
-  &[disabled] {
+  &:not([disabled]) {
-    resize: none;
+    resize: vertical;
   }
 
-  &:not[disabled] {
+  &[disabled] {
-    resize: vertical;
+    resize: none;
   }
 }
 
@@ -74,18 +77,18 @@ textarea {
   background-color: transparent;
 }
 
-[type=button],
+[type="button"],
-[type=submit] {
+[type="submit"] {
   cursor: pointer;
 }
 
 iframe {
-  border: 0;
+  border: none;
 }
 
 img {
-  font-size: 0;
   max-width: 100%;
+  font-size: 0;
 
   &::after {
     width: 100%; height: 100%;
@@ -101,30 +104,79 @@ img {
   }
 }
 
-
-
 @media print {
   // Intelligent print styles
-  pre, blockquote { border: 1px solid #999 !important; page-break-inside: avoid !important; }
+  pre,
-  tr, img { page-break-inside: avoid !important; }
+  blockquote {
-  img { max-width: 100% !important; }
+    border: 1px solid #999 !important;
-  @page { margin: 0.5cm !important; }
+    page-break-inside: avoid !important;
-  p, h2, h3 { orphans: 3 !important; widows: 3 !important; }
+  }
-  h2, h3 { page-break-after: avoid !important; }
+
-  thead { display: table-header-group !important; }
+  tr,
+  img {
+    page-break-inside: avoid !important;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  @page {
+    margin: 0.5cm !important;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3 !important;
+    widows: 3 !important;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid !important;
+  }
+
+  thead {
+    display: table-header-group !important;
+  }
 
   // Faster, more stable printing
-  * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; }
+  * {
+    background: transparent !important;
+    color: #000 !important;
+    filter: none !important;
+    text-shadow: none !important;
+  }
 
-  // Show hypertext data for links and abbreviations
+  p {
-  p a[href]::after { content: " (" attr(href) ")" !important; }
+    a {
-  p abbr[title]::after { content: " (" attr(title) ")" !important; }
+      &[href]::after { // Show hypertext data for links and abbreviations
-  p a[href^="javascript:"]::after, p a[href^="#"]::after { content: "" !important; }
+        content: " (" attr(href) ")" !important;
-  p a, p abbr { word-wrap: break-word !important; text-decoration: underline !important; }
+      }
+
+      &[href^="javascript:"],
+      &[href^="#"] {
+        &::after {
+          content: "" !important;
+        }
+      }
+    }
+
+    abbr {
+      &[title]::after {
+        content: " (" attr(title) ")" !important;
+      }
+    }
+
+    a,
+    abbr {
+      text-decoration: underline !important;
+      word-wrap: break-word !important;
+    }
+  }
 }
 
-
-
 input::-moz-focus-inner,
 button::-moz-focus-inner {
   display: none;

app/sass/init/_extends.scss

@@ -1,4 +1,4 @@
-/**
+/*!
  * Button
  *
  * @class     .__button-base
@@ -19,7 +19,7 @@
  *
  * @class     .__button-padding-horizontal
  * @class     .__button-padding-vertical
- */
+**/
 
 .__button-base {
   border: 1px solid;
@@ -127,13 +127,13 @@
 
 
 
-/**
+/*!
  * Loader
  *
  * @class     .__loading
  * @selector  {::before}
  * @selector  {::after}
- */
+**/
 
 .__loading {
   width: 100%; height: 10rem;
@@ -146,9 +146,9 @@
     top: 2rem; left: calc(50% - 2rem);
 
     animation: spin 2s linear infinite;
+    border-top-color: $teal;
     border-radius: 50%;
     border-style: solid;
-    border-top-color: $teal;
     border-width: 6px;
     content: "";
     cursor: wait;
@@ -156,12 +156,12 @@
   }
 
   &::after {
+    width: 100%;
     top: 7rem; left: 0;
 
     cursor: wait;
     font-size: 1rem;
     position: absolute;
     text-align: center;
-    width: 100%;
   }
 }

app/sass/init/_markdown.scss

@@ -67,20 +67,21 @@
     position: relative;
 
     @media (min-width: 601px) {
-      margin-left: 15%; padding: 0.5rem 0 0.05rem 2rem;
+      width: 70%;
+      padding: 0.5rem 0 0.05rem 2rem;
 
       font-size: 1.5rem;
-      width: 70%;
+      margin-left: 15%;
     }
 
     @media (max-width: 600px) {
+      padding: 0.5rem 0 0.05rem;
       font-size: 1.25rem;
-      padding: 0.5rem 0 0.05rem 0;
     }
 
     @media (min-width: 376px) and (max-width: 600px) {
-      margin-left: 5%;
       width: 90%;
+      margin-left: 5%;
     }
 
     p {
@@ -106,23 +107,28 @@
   ul,
   table {
     code {
+      padding: 0.3rem 0.5rem;
+
       background-color: $black;
       border-radius: 3px;
       color: $white;
       font-size: 60%;
       letter-spacing: 0.05rem;
-      padding: 0.3rem 0.5rem;
       vertical-align: middle;
 
       @media (max-width: 900px) {
-        position: relative;
         top: -1px;
+        position: relative;
       }
     }
+
     + h2 {
       margin-top: 2rem;
     }
-    + h3, + h4, + h5 {
+
+    + h3,
+    + h4,
+    + h5 {
       margin-top: 1.5rem;
     }
   }
@@ -148,12 +154,10 @@
   ul {
     padding-top: 0.5rem;
 
-    li {
+    li:not(:last-of-type) {
-      &:not(:last-of-type) {
       margin-bottom: 0.25rem;
     }
   }
-  }
 
   ol {
     list-style-type: lower-roman;
@@ -166,14 +170,15 @@
 
   img {
     display: block;
-    margin-left: auto;
     margin-right: auto;
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 
   p {
-    margin-left: 2px;
     margin-right: 2px;
+    margin-left: 2px;
+
     img {
       float: right;
     }
@@ -193,19 +198,23 @@
     font-size: 1rem;
   }
 
-  h2, h3, h4, h5 {
+  h2,
+  h3,
+  h4,
+  h5 {
     + table {
       margin-top: 0.5em;
     }
   }
 
   table {
+    width: 100%;
+
     background-color: $white;
     border: 1px solid rgba($gray, 0.3);
     border-spacing: 0;
     margin-bottom: 2rem;
     position: relative;
-    width: 100%;
 
     @media (max-width: 1030px) {
       display: inline-grid;
@@ -214,7 +223,9 @@
         display: none;
       }
 
-      tbody, tr, td {
+      tbody,
+      tr,
+      td {
         display: block;
       }
 
@@ -234,11 +245,9 @@
         z-index: 1;
       }
 
-      &:not(*:root) {
+      &:not(*:root)::after {
-        &::after {
         z-index: -1;
       }
-      }
 
       &::after {
         width: calc(100% + 2px); height: calc(100% + 2px);
@@ -259,7 +268,8 @@
       background-color: rgba($black, 0.025);
     }
 
-    th, td {
+    th,
+    td {
       padding: 0.5rem 1rem;
     }
 

app/sass/init/_mixins.scss

@@ -4,73 +4,36 @@
   justify-content: center;
 }
 
-
-
-@mixin font-sans {
-  font-family: "Inter UI", Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-@mixin font-serif {
-  font-family: Georgia, serif;
-}
-
-@mixin font-mono {
-  font-family: "Input Mono", "Fira Mono", "Fira Code", "Courier New", monospace;
-}
-
-
-
 @mixin clearfix {
   clear: both;
   content: "";
   display: block;
 }
 
-@mixin hide-text {
-  border: 0;
-  color: transparent;
-  font: 0/0 a;
-  text-shadow: none;
-}
-
 @mixin ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-@mixin selection($backgroundColor, $textColor) {
+@mixin font-mono {
-  &::selection {
+  font-family: "Input Mono", "Fira Mono", "Fira Code", "Courier New", monospace;
-    background-color: $backgroundColor;
-    color: $textColor;
-    text-shadow: none;
-  }
-
-  &::-moz-selection {
-    background-color: $backgroundColor;
-    color: $textColor;
-    text-shadow: none;
-  }
 }
 
-@mixin underline($textColor: #000, $whitespaceColor: #fff) {
+@mixin font-sans {
-  @include selection($textColor, $whitespaceColor);
+  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-  background-image: linear-gradient($whitespaceColor, $whitespaceColor), linear-gradient($whitespaceColor, $whitespaceColor), linear-gradient($textColor, $textColor);
-  background-position: 0 88%, 100% 88%, 0 88%;
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
-  box-decoration-break: clone;
-  display: inline;
-  text-decoration: none;
-  text-shadow: 0.03rem 0 $whitespaceColor, -0.03rem 0 $whitespaceColor, 0 0.03rem $whitespaceColor, 0 -0.03rem $whitespaceColor, 0.06rem 0 $whitespaceColor, -0.06rem 0 $whitespaceColor, 0.09rem 0 $whitespaceColor, -0.09rem 0 $whitespaceColor, 0.12rem 0 $whitespaceColor, -0.12rem 0 $whitespaceColor, 0.15rem 0 $whitespaceColor, -0.15rem 0 $whitespaceColor;
-
-  @-moz-document url-prefix() {
-    background-position: 0 90%, 100% 90%, 0 90%;
-  }
 }
 
+@mixin font-serif {
+  font-family: Georgia, serif;
+}
 
+@mixin hide-text {
+  border: none;
+  color: transparent;
+  font: 0 / 0 a;
+  text-shadow: none;
+}
 
 @mixin no-user-select {
   user-select: none;
@@ -80,12 +43,33 @@
   -webkit-user-select: none;
 }
 
+@mixin selection($background-color, $text-color) {
+  &::selection {
+    background-color: $background-color;
+    color: $text-color;
+    text-shadow: none;
+  }
 
-
+  &::-moz-selection {
-.clear {
+    background-color: $background-color;
-  @include clearfix;
+    color: $text-color;
+    text-shadow: none;
+  }
 }
 
-.hide-text {
+@mixin underline($text-color: #000, $whitespace-color: #fff) {
-  @include hide-text;
+  @include selection($text-color, $whitespace-color);
+
+  background-image: linear-gradient($whitespace-color, $whitespace-color), linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color);
+  background-position: 0 88%, 100% 88%, 0 88%;
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
+  box-decoration-break: clone;
+  display: inline;
+  text-decoration: none;
+  text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color, 0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color, -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color, -0.15rem 0 $whitespace-color;
+
+  @-moz-document url-prefix() { // sass-lint:disable-line empty-args
+    background-position: 0 90%, 100% 90%, 0 90%;
+  }
 }

app/sass/pages/_api.scss

@@ -1,9 +1,9 @@
-/**
+/*!
  * API Wrapper
  *
  * @class     .__slate
  * @selector  {::after}
- */
+**/
 
 .__slate {
   width: 100%;
@@ -30,7 +30,7 @@
 }
 
 
-/**
+/*!
  * API | Table of Contents
  *
  * @class     .api__toc
@@ -44,11 +44,11 @@
  *
  * @class     .api__toc__item
  * @state     {:hover}
- */
+**/
 
 .api__toc {
   width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
-  left: 0; bottom: 0;
+  bottom: 0; left: 0;
 
   background-color: $white;
   border-right: 1px solid rgba($gray, 0.3);
@@ -64,11 +64,12 @@
 }
 
 .api__toc__search__field {
+  width: 100%;
+  padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
+
   border-bottom: 1px solid rgba($gray, 0.3);
   font-size: 0.8rem;
   line-height: 2rem;
-  padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
-  width: 100%;
 }
 
 .api__toc__search__clear {
@@ -110,14 +111,14 @@
   }
 
   a {
-    display: block;
     padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+    display: block;
   }
 }
 
 .api__content {
-  float: right;
   width: calc(100% - 200px);
+  float: right;
 }
 
 .api__documentation {
@@ -141,7 +142,9 @@
     text-transform: uppercase;
   }
 
-  p, ol, ul {
+  p,
+  ol,
+  ul {
     font-size: 1rem;
     line-height: 1.5;
     margin-bottom: 1rem;
@@ -152,19 +155,21 @@
   }
 
   table {
+    width: 100%;
+
     border: 1px solid rgba($white, 0.1);
     border-radius: 0.3rem;
     border-spacing: 0;
     font-size: 0.8rem;
     line-height: 1.33;
-    width: 100%;
   }
 
   thead {
     display: none;
   }
 
-  th, td {
+  th,
+  td {
     padding: 0.5rem 1rem 0.5rem 0.5rem;
   }
 
@@ -178,8 +183,8 @@
 }
 
 .api__content__body {
-  border-bottom: 1px solid rgba($gray, 0.3);
   padding: 2rem;
+  border-bottom: 1px solid rgba($gray, 0.3);
 
   pre {
     border: 1px solid rgba($gray, 0.3);
@@ -207,9 +212,10 @@
   }
 
   .left {
+    width: 30%;
+
     border-right: 1px solid rgba($gray, 0.3);
     float: left;
-    width: 30%;
     word-wrap: break-word;
 
     span {
@@ -223,8 +229,8 @@
   }
 
   .right {
-    float: right;
     width: 70%;
+    float: right;
   }
 
   &::after {
@@ -233,10 +239,11 @@
 }
 
 .api__content__example {
+  padding: 2rem;
+
   background-color: mix($gray, $black, 10%);
   border-bottom: 1px solid rgba($white, 0.1);
   color: $white;
-  padding: 2rem;
 
   pre {
     background-color: $black;

app/sass/pages/_home.scss

@@ -1,4 +1,4 @@
-body.home {
+body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
   @media (min-width: 1001px) {
     main > div:first-of-type {
       display: grid;
@@ -42,6 +42,8 @@ body.home {
   }
 
   .hero {
+    height: calc(50vh - 4rem); min-height: 300px;
+
     align-items: center;
     background-color: $black;
     // background-image: url("/assets/media/svg/text-logo--white.svg");
@@ -50,7 +52,6 @@ body.home {
     background-repeat: no-repeat;
     display: flex;
     grid-area: header;
-    height: calc(50vh - 4rem); min-height: 300px;
     justify-content: center;
     margin-bottom: 2rem;
 
@@ -59,13 +60,14 @@ body.home {
     }
 
     h1 {
+      padding: 0.4rem 1rem;
+
       background-color: $white;
       border: 1px solid rgba($black, 0.1);
       box-decoration-break: clone;
       display: inline;
       font-weight: normal;
       line-height: 2;
-      padding: 0.4rem 1rem;
 
       -webkit-box-decoration-break: clone; // Safari
 
@@ -80,8 +82,8 @@ body.home {
   }
 
   .features {
-    grid-area: features;
     border-bottom: 1px solid rgba($black, 0.05);
+    grid-area: features;
   }
 
   .intro,
@@ -123,13 +125,14 @@ body.home {
       }
     }
 
-    ol, ul {
+    ol,
+    ul {
       margin-bottom: 1.5rem;
     }
 
     p {
-      margin-bottom: 1.5rem;
       max-width: 1000px;
+      margin-bottom: 1.5rem;
 
       @media (min-width: 901px) {
         font-size: 1.5rem;
@@ -210,23 +213,23 @@ body.home {
         text-align: center;
 
         @media (max-width: 750px) {
-          margin-bottom: 2rem;
           min-width: 8rem;
+          margin-bottom: 2rem;
         }
 
         a {
           display: block;
-          position: relative;
           padding-top: 4rem;
+          position: relative;
           transition: color 0.2s;
 
           &::before {
             width: 100%; height: 100%;
+            left: 0;
 
             background-position: center 0;
             background-repeat: no-repeat;
             content: "";
-            left: 0;
             position: absolute;
           }
 
@@ -257,13 +260,13 @@ body.home {
 
         a::before {
           @media (min-width: 901px) {
-            background-size: 4rem;
             top: -1rem;
+            background-size: 4rem;
           }
 
           @media (max-width: 900px) {
-            background-size: 3rem;
             top: 0;
+            background-size: 3rem;
           }
         }
 
@@ -305,13 +308,13 @@ body.home {
 
         a::before {
           @media (min-width: 901px) {
-            background-size: 6rem;
             top: -2rem;
+            background-size: 6rem;
           }
 
           @media (max-width: 900px) {
-            background-size: 4rem;
             top: -0.5rem;
+            background-size: 4rem;
           }
         }
 

app/sass/pages/_page.scss

@@ -1,8 +1,9 @@
 .page {
+  height: 100%;
+
   display: flex;
   flex: 1;
   flex-direction: column;
-  height: 100%;
 }
 
 .page__header-wrap {
@@ -11,6 +12,9 @@
 
 .page__header {
   @include center;
+  width: 100%;
+
+  background-color: $black;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -18,7 +22,6 @@
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
   position: relative;
-  width: 100%;
 }
 
 .page__header__title {
@@ -44,16 +47,11 @@
   background-size: 32px;
   flex: 1;
   padding-top: 2rem;
-  padding-bottom: 2rem;
   padding-right: env(safe-area-inset-right);
+  padding-bottom: 2rem;
   padding-left: env(safe-area-inset-left);
 }
 
 .page__markup {
   @extend %markdown;
 }
-
-.page__header {
-  // background-image: url("/assets/media/images/background-a.jpg");
-  background-color: $black;
-}

app/sass/pages/_playground.scss

@@ -1,16 +1,17 @@
-/**
+/*!
  * Playground | Wrapper
  *
  * @class     .playground
  * @selector  {::before}
  * @selector  {::after}
  * @state     {.waiting}
- */
+**/
 
 .playground {
+  top: 1rem;
+
   border-top: 1px solid rgba($black, 0.05);
   position: relative;
-  top: 1rem;
 
   &.waiting::before {
     top: 0; right: 0;
@@ -28,9 +29,7 @@
   }
 }
 
-
+/*!
-
-/**
  * Playground | Navigation
  *
  * @class     .playground__navigation
@@ -40,14 +39,14 @@
  * @selector  {:last-of-type}
  * @state     {.active}
  * @state     {:hover}
- */
+**/
 
 .playground__navigation {
   width: 100%;
 
   list-style-type: none;
-  padding-bottom: 1rem;
   padding-top: 1.5rem;
+  padding-bottom: 1rem;
 
   &::after {
     @include clearfix;
@@ -55,11 +54,12 @@
 }
 
 .playground__navigation__example {
+  width: 33.333333%;
+
   cursor: pointer;
   float: left;
   position: relative;
   text-align: center;
-  width: 33.333333%;
 
   &::before {
     width: 100%; height: 2.5rem;
@@ -126,9 +126,7 @@
   }
 }
 
-
+/*!
-
-/**
  * Playground | Content
  *
  * @class     .playground__content
@@ -150,13 +148,13 @@
  *
  * @class     .playground__content__trend
  * @class     .playground__content__urlbar
- */
+**/
 
 .playground__content {
   border-top: 1px solid rgba($black, 0.05);
   overflow-y: visible;
-  padding-bottom: 1rem;
   padding-top: 1rem;
+  padding-bottom: 1rem;
 
   .loader {
     @extend .__loading;
@@ -186,10 +184,11 @@
 }
 
 .playground__content__meme__canvas {
+  width: 48%;
+
   float: left;
   margin-right: 2%;
   position: relative;
-  width: 48%;
 
   canvas {
     width: 100%; height: 100%;
@@ -199,15 +198,15 @@
   }
 }
 
-.playground__content__meme__canvas__thumbnail {
+.playground__content__meme__canvas__thumbnail { // sass-lint:disable-line bem-depth // TODO: FIX THIS
   width: 5rem; height: 5rem;
 
   border-style: solid;
   border-width: 2px;
+  cursor: pointer;
   margin-bottom: 1rem;
   object-fit: contain;
   object-position: center;
-  cursor: pointer;
 
   &:not(:last-of-type) {
     margin-right: 1rem;
@@ -223,10 +222,10 @@
 }
 
 .playground__content__meme__editor {
-  float: right;
   width: 50%;
+  float: right;
 
-  h2.__metadata {
+  .__metadata { // h2
     margin-top: 3rem;
   }
 
@@ -239,6 +238,8 @@
   }
 
   label {
+    width: 100%;
+
     color: rgba($black, 0.3);
     display: block;
     font-size: 0.8rem;
@@ -246,7 +247,6 @@
     letter-spacing: 0.05rem;
     margin-bottom: 0.025rem;
     text-transform: uppercase;
-    width: 100%;
   }
 
   input:not([type="checkbox"]):not([type="submit"]),
@@ -263,10 +263,11 @@
 
   input {
     &:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
+      width: 100%;
+
       border-bottom: 2px solid;
       padding-bottom: 0.15rem;
       transition: all 0.2s;
-      width: 100%;
     }
 
     &:not([type="file"]):not([type="submit"]) {
@@ -282,11 +283,11 @@
 
     &[type="checkbox"] {
       width: 1.25rem; height: 1.25rem;
+      top: 0.35rem;
 
       border: 2px solid;
       margin-right: 0.5rem;
       position: relative;
-      top: 0.35rem;
 
       &::after {
         width: 100%; height: 100%;
@@ -309,8 +310,8 @@
 
   select,
   textarea {
-    border-bottom: 2px solid;
     width: 100%;
+    border-bottom: 2px solid;
 
     &:not(:hover):not(:active) {
       border-color: $black;
@@ -398,12 +399,13 @@
   }
 
   button {
+    width: 6rem;
+
     color: $white;
     font-size: 1rem;
     position: relative;
     text-transform: lowercase;
     transition: background-color 0.2s;
-    width: 6rem;
 
     &::after {
       width: calc(100% + 2px); height: calc(100% + 2px);
@@ -433,8 +435,8 @@
   }
 
   input {
-    font-size: 1rem;
     width: calc(100% - 9.5rem);
+    font-size: 1rem;
 
     &::placeholder {
       color: rgba($black, 0.5);
@@ -444,27 +446,27 @@
 
   span {
     @include no-user-select;
+    width: 3.5rem;
+
     color: rgba($black, 0.5);
     cursor: default;
     font-size: 1rem;
     text-align: right;
-    width: 3.5rem;
   }
 }
 
-
+/*!
-
-/**
  * Playground | Description
  *
  * @class .playground__description
- */
+**/
 
 .playground__description {
+  padding: 1rem;
+
   cursor: default;
   font-size: 1rem;
   line-height: 1.33;
-  padding: 1rem;
 
   &:not(.success) {
     background-color: rgba($black, 0.05);

app/sass/partials/_animation.scss

@@ -1,11 +1,27 @@
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  to { transform: rotate(1turn); }
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
 }
 
 @keyframes slide-down {
-  0%    { transform: translateY(-4rem); }
+  0% {
-  10%   { transform: translateY(2rem); }
+    transform: translateY(-4rem);
-  90%   { transform: translateY(2rem); }
+  }
-  100%  { transform: translateY(-4rem); }
+
+  10% {
+    transform: translateY(2rem);
+  }
+
+  90% {
+    transform: translateY(2rem);
+  }
+
+  100% {
+    transform: translateY(-4rem);
+  }
 }

app/sass/partials/_ecosystem.scss

@@ -1,9 +1,9 @@
 .ecosystem {
-  margin-bottom: 2rem; padding-top: 1rem;
-
   display: grid;
   font-size: 1rem;
   grid-gap: 1rem;
+  margin-bottom: 2rem;
+  padding-top: 1rem;
 
   &:not(.expand-left):not(.expand-right) {
     grid-template-columns: 144px auto 144px;
@@ -52,19 +52,17 @@
   }
 }
 
-
-
 .ecosystem__module {
-  position: relative;
   width: 100%;
+  position: relative;
 
   > * {
     z-index: 1;
   }
 
   h2 {
-    position: relative;
     width: 100%;
+    position: relative;
 
     > div {
       float: right;
@@ -76,6 +74,7 @@
 
       &::before {
         @include font-serif;
+        width: 100%;
         top: 0.9rem; right: 3rem;
 
         content: "explore";
@@ -84,7 +83,6 @@
         opacity: 0.3;
         position: absolute;
         text-align: right;
-        width: 100%;
       }
 
       span {
@@ -129,9 +127,10 @@
       text-align: center;
 
       > span {
+        padding: 1.9rem 2rem;
+
         cursor: pointer;
         display: block;
-        padding: 1.9rem 2rem;
 
         em {
           display: block;
@@ -182,8 +181,6 @@
     }
   }
 
-
-
   &.lbrycrd,
   &.lbry {
     margin-bottom: 1rem;
@@ -196,20 +193,18 @@
         margin-bottom: 0.5rem;
 
         &::after {
+          width: 100%;
           bottom: 1rem; left: 0;
 
           font-size: 0.5rem;
           letter-spacing: 0.1rem;
           position: absolute;
-          width: 100%;
           z-index: -1;
         }
       }
     }
   }
 
-
-
   &.lbrycrd {
     &:not(.active)::before {
       background-color: $red;
@@ -253,24 +248,23 @@
   }
 }
 
-.ecosystem__module__details, .ecosystem__submodule__markdown {
+.ecosystem__module__details,
+.ecosystem__submodule__markdown {
   @extend %markdown;
 }
 
 .ecosystem__module__piece {
+  width: 80%; left: 10%;
+
   background-color: $white;
-  left: 10%;
   line-height: 2;
   position: relative;
-  width: 80%;
 
   &:not(:last-of-type) {
     margin-bottom: 0.5rem;
   }
 }
 
-
-
 .ecosystem__submodule {
   border-width: 2px;
   cursor: default;
@@ -307,10 +301,10 @@
 
   &.active {
     width: 100%; height: 100%;
+    padding: 2rem;
 
     border-style: solid;
     overflow-y: auto;
-    padding: 2rem;
 
     .ecosystem__submodule__title {
       line-height: 1.33;
@@ -364,8 +358,6 @@
   text-transform: uppercase;
 }
 
-
-
 .__parents {
   top: 2rem; right: 4rem;
 
@@ -414,9 +406,10 @@
 }
 
 .__close {
+  right: 2rem;
+
   cursor: pointer;
   font-size: 2rem;
   position: absolute;
-  right: 2rem;
   transition: all 0.2s;
 }

app/sass/partials/_email-subscribe.scss

@@ -41,14 +41,15 @@
 }
 
 .newsletter-cta__input {
+  height: 38px;
+
   background-color: $white;
   font-size: 1rem;
-  height: 38px;
   transition: border 0.2s;
 
   @media (min-width: 551px) {
-    float: left;
     width: calc(100% - 112px);
+    float: left;
   }
 
   @media (max-width: 550px) {
@@ -60,13 +61,13 @@
     border-left-color: $black;
 
     @media (min-width: 551px) {
-      border-bottom-color: $black;
       border-right-color: transparent;
+      border-bottom-color: $black;
     }
 
     @media (max-width: 550px) {
-      border-bottom-color: transparent;
       border-right-color: $black;
+      border-bottom-color: transparent;
     }
   }
 
@@ -75,13 +76,13 @@
     border-left-color: mix($black, $teal, 20%);
 
     @media (min-width: 551px) {
-      border-bottom-color: mix($black, $teal, 20%);
       border-right-color: transparent;
+      border-bottom-color: mix($black, $teal, 20%);
     }
 
     @media (max-width: 550px) {
-      border-bottom-color: transparent;
       border-right-color: mix($black, $teal, 20%);
+      border-bottom-color: transparent;
     }
   }
 }
@@ -93,14 +94,14 @@
 
   @media (min-width: 551px) {
     width: 112px; height: 38px;
+    left: -1px;
 
     float: right;
-    left: -1px;
   }
 
   @media (max-width: 550px) {
-    display: block;
     top: -1px;
+    display: block;
   }
 
   &:not(:hover) {

app/sass/partials/_feature-links.scss

@@ -3,10 +3,10 @@ $width-feature-link: 320px;
 .feature-links {
   display: grid;
   grid-gap: 2rem;
-  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   list-style-type: none;
-  padding-top: 0.5rem;
   margin-bottom: 2rem;
+  padding-top: 0.5rem;
 }
 
 .feature-link {
@@ -38,23 +38,25 @@ $width-feature-link: 320px;
 }
 
 .feature-link__title {
-  position: relative;
   top: 85px;
-  font-weight: normal;
+
-  text-align: center;
-  z-index: 1;
   font-size: 1rem;
+  font-weight: normal;
+  position: relative;
+  text-align: center;
   transition: color 0.2s;
+  z-index: 1;
 }
 
 .feature-link__title-inner {
-  display: inline-block;
+  padding: 0.25rem 0.5rem;
-  padding: .25rem .5rem;
+
   background-color: $white;
-  border: 1px solid rgba(gray, 0.1);
+  border: 1px solid rgba($gray, 0.1);
-  box-shadow: 0 2px 5px rgba($black, 0.025);
   border-radius: 3px;
   box-decoration-break: clone;
+  box-shadow: 0 2px 5px rgba($black, 0.025);
+  display: inline-block;
 }
 
 .feature-link__background {
@@ -64,9 +66,9 @@ $width-feature-link: 320px;
   background-color: $teal;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
-  transition: filter 0.2s;
   overflow: hidden;
   position: absolute;
+  transition: filter 0.2s;
   z-index: 0;
 
   img {

app/sass/partials/_flash.scss

@@ -1,19 +1,20 @@
 .flashes {
+  width: 100%;
   top: 4rem; right: 0;
 
   position: absolute;
-  width: 100%;
   z-index: 9;
 }
 
 .flash {
+  padding: 0.5rem 1rem;
+  right: 2rem;
+
   border: 2px solid;
   border-radius: 3px;
   font-size: 1rem;
   line-height: 1.33;
-  padding: 0.5rem 1rem;
   position: absolute;
-  right: 2rem;
 
   &:not(.error):not(.info):not(.warning) {
     background-color: mix($white, $teal, 90%);

app/sass/partials/_footer.scss

@@ -9,7 +9,7 @@
   @media (max-width: 980px) {
     &::before {
       width: 3rem; height: 100%;
-      bottom: 0; right: 0;
+      right: 0; bottom: 0;
 
       background-image: linear-gradient(90deg, rgba($black, 0), $black 50%, $black); // iOS Safari cannot handle `transparent`
       content: "";
@@ -20,10 +20,11 @@
 
   > div:first-of-type {
     @media (max-width: 980px) {
-      overflow: auto;
-      overflow-scrolling: touch;
-      white-space: nowrap;
       width: 100%;
+
+      overflow: auto;
+      overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
+      white-space: nowrap;
     }
   }
 

app/sass/partials/_github-feed.scss

@@ -14,8 +14,8 @@
   }
 
   @media (min-width: 1001px) {
-    padding-bottom: 2rem;
     padding-right: 10%;
+    padding-bottom: 2rem;
     padding-left: 2rem;
   }
 
@@ -40,7 +40,8 @@
     white-space: nowrap;
   }
 
-  h3, h5 {
+  h3,
+  h5 {
     @media (min-width: 1001px) {
       text-align: center;
     }
@@ -52,12 +53,12 @@
     text-transform: uppercase;
 
     @media (min-width: 1301px) {
+      width: calc(100% - (1rem + 5%));
       top: 2.15rem; left: 0;
 
       color: rgba($black, 0.045);
       font-size: 4rem;
       position: absolute;
-      width: calc(100% - (1rem + 5%));
     }
 
     @media (max-width: 1300px) {
@@ -87,9 +88,10 @@
     }
 
     @media (max-width: 900px) {
+      top: -1rem;
+
       margin-bottom: 0.5rem;
       position: relative;
-      top: -1rem;
     }
   }
 }
@@ -99,10 +101,11 @@
   line-height: 1.55;
 
   @media (max-width: 700px) {
+    width: 200px;
+
     display: inline-block;
     margin-right: 1.25rem;
     vertical-align: top;
-    width: 200px;
   }
 
   &:not(:last-of-type) {
@@ -112,9 +115,10 @@
   }
 
   > a:first-of-type {
+    width: 100%;
+
     font-weight: 700;
     margin-bottom: 0.5rem;
-    width: 100%;
   }
 
   > p:first-of-type {
@@ -123,14 +127,15 @@
     }
 
     code {
+      padding: 0.2rem 0.5rem;
+      top: -1px;
+
       background-color: $black;
       border-radius: 3px;
       color: $white;
       font-size: 80%;
       letter-spacing: 0.05rem;
-      padding: 0.2rem 0.5rem;
       position: relative;
-      top: -1px;
     }
 
     em:not(.github-feed__event__time) {
@@ -138,22 +143,22 @@
     }
 
     @media (min-width: 701px) {
+      width: calc(100% - 4.5rem);
+
       display: inline-block;
       margin-left: 0.5rem;
       vertical-align: top;
-      width: calc(100% - 4.5rem);
     }
 
     @media (max-width: 700px) {
+      width: 90%; padding: 1rem;
       top: -3.5rem; left: 5%;
 
       background-color: $white;
       border: 1px solid rgba($gray, 0.1);
       border-radius: 3px;
-      padding: 1rem;
       position: relative;
       white-space: normal;
-      width: 90%;
     }
   }
 }
@@ -161,8 +166,8 @@
 .github-feed__event__avatar {
   border: 1px solid rgba($gray, 0.1);
   border-radius: 3px;
-  object-position: center;
   object-fit: cover;
+  object-position: center;
 
   @media (min-width: 701px) {
     width: 2.5rem; height: 2.5rem;

app/sass/partials/_glossary.scss

@@ -1,15 +1,15 @@
 .glossary {
   &:not(.sidebar-closed) {
     main {
-      margin-left: 250px;
       width: calc(100vw - 250px);
+      margin-left: 250px;
     }
 
     .page__header-wrap,
     .page__content {
       .inner-wrap {
-        margin-left: 1rem;
         max-width: initial;
+        margin-left: 1rem;
       }
     }
 
@@ -59,19 +59,17 @@
   }
 }
 
-
-
 .component--glossary-toc {
   width: 250px; height: calc(100vh - 4rem);
   top: 4rem; left: 0;
 
   background-color: $white;
   border-right: 1px solid rgba($gray, 0.3);
-  font-size: 0.8rem !important;
+  font-size: 0.8rem; // TODO: Why was !important here?
   overflow-x: hidden;
   overflow-y: auto;
-  padding-top: 1rem !important;
+  padding-top: 1rem; // TODO: Why was !important here?
-  position: fixed !important;
+  position: fixed; // TODO: Why was !important here?
   z-index: 1;
 
   li:last-of-type {
@@ -98,16 +96,16 @@
 
     @media (min-width: 901px) {
       width: 105px; height: 25px;
+      top: 103px;
 
       letter-spacing: 2px;
-      top: 103px;
     }
 
     @media (max-width: 900px) {
       width: 65px; height: 25px;
+      top: 83px;
 
       letter-spacing: 1px;
-      top: 83px;
     }
   }
 }

app/sass/partials/_link-grid.scss

@@ -6,11 +6,11 @@
 }
 
 .link-grid__link {
+  flex-grow: 1;
+  margin-bottom: 2rem;
   position: relative;
   text-align: center;
   vertical-align: top;
-  margin-bottom: 2rem;
-  flex-grow: 1;
 
   @media (min-width: 651px) {
     width: 50%;
@@ -29,19 +29,18 @@
   }
 }
 
-
-
 .link-grid__title {
   font-size: 2rem;
   margin-bottom: 0.5rem;
 }
 
 .link-grid__description {
-  font-size: 1rem;
+  width: 80%;
   left: 10%;
+
+  font-size: 1rem;
   margin-bottom: 1rem;
   position: relative;
-  width: 80%;
 }
 
 .link-grid__cta {

app/sass/partials/_mission-statement.scss

@@ -1,9 +1,10 @@
 .component--mission-statement {
-  margin-bottom: 1.5rem; padding: 1rem 1rem 1rem 1.25rem;
+  padding: 1rem 1rem 1rem 1.25rem;
 
   background-color: rgba($teal, 0.1);
   border-left: 0.5rem solid $teal;
   line-height: 1.55;
+  margin-bottom: 1.5rem;
   position: relative;
 
   @media (min-width: 901px) {

app/sass/partials/_modal.scss

@@ -1,7 +1,7 @@
 .modal {
   @include center;
-  top: 0; left: 0;
+  top: 0; right: 0;
-  bottom: 0; right: 0;
+  bottom: 0; left: 0;
 
   background-color: rgba($black, 0.5);
   position: fixed;
@@ -38,8 +38,8 @@
 }
 
 .modal-wrap {
-  background-color: $white;
   padding: 2rem 1.5rem;
+  background-color: $white;
 
   @media (min-width: 501px) {
     width: 500px;

app/sass/partials/_navigation.scss

@@ -1,4 +1,5 @@
 .navigation {
+  width: 100%;
   top: 0; left: 0;
 
   background-color: $white;
@@ -6,7 +7,6 @@
   padding-right: env(safe-area-inset-right);
   padding-left: env(safe-area-inset-left);
   position: fixed;
-  width: 100%;
   z-index: 10;
 
   > div:first-of-type {
@@ -19,11 +19,12 @@
     }
 
     @media (max-width: 700px) {
-      overflow: auto;
-      overflow-scrolling: touch;
-      white-space: nowrap;
       width: 100%;
 
+      overflow: auto;
+      overflow-scrolling: touch; // sass-lint:disable-line no-misspelled-properties
+      white-space: nowrap;
+
       &::before {
         width: 2rem; height: 4rem;
         top: 0; right: 0;
@@ -55,22 +56,22 @@
   &:first-of-type {
     @include hide-text;
     width: 10rem; height: 3rem;
+    top: 0.5rem;
 
     // background-image: url("/assets/media/svg/logo.svg");
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 250' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23222' d='M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z'/%3E %3Cpath d='M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z'/%3E %3C/svg%3E");
     background-repeat: no-repeat;
     background-size: contain;
     flex: 1;
-    top: 0.5rem;
   }
 
   &:not(:first-of-type):not([href="http://localhost:8000"]):not([href="https://lbry.io"]) {
     &::after {
       width: 100%; height: 3px;
+      left: 0;
 
       background-color: $teal;
       content: "";
-      left: 0;
       position: absolute;
       transition: bottom 0.2s;
     }

app/sass/partials/_pre.scss

@@ -1,7 +1,8 @@
 pre {
-  margin-bottom: 2rem; padding: 2rem;
+  padding: 2rem;
 
   line-height: 1.33;
+  margin-bottom: 2rem;
   overflow-x: auto;
   overflow-y: hidden;
 

app/sass/type/_inter.scss

@@ -1,3 +1,4 @@
+// sass-lint:disable indentation
 //  400
 
 @font-face {
@@ -18,8 +19,6 @@
        url("../assets/type/inter/400i.woff") format("woff");
 }
 
-
-
 //  700
 
 @font-face {
@@ -40,23 +39,6 @@
        url("../assets/type/inter/700i.woff") format("woff");
 }
 
-
-
-/*
-Note that you may want to do something like this to make sure you are serving
-constant fonts to older browsers:
-
-html {
-  font-family: "Inter UI", sans-serif;
-}
-
-@supports (font-variation-settings: normal) {
-  html {
-    font-family: "Inter UI Variable", sans-serif;
-  }
-}
-*/
-
 // Single variable font
 
 @font-face {

app/sass/type/_karla.scss

@@ -1,22 +0,0 @@
-// via //brick.freetls.fastly.net/Karla:400,700,400i (brick.im)
-
-@font-face {
-  font-family: "Karla";
-  font-style: normal;
-  font-weight: 400;
-  src: local("Karla Regular"), url(https://brick.freetls.fastly.net/fonts/karla/400.woff) format("woff");
-}
-
-@font-face {
-  font-family: "Karla";
-  font-style: italic;
-  font-weight: 400;
-  src: local("Karla Italic"), url(https://brick.freetls.fastly.net/fonts/karla/400i.woff) format("woff");
-}
-
-@font-face {
-  font-family: "Karla";
-  font-style: normal;
-  font-weight: 700;
-  src: local("Karla Bold"), url(https://brick.freetls.fastly.net/fonts/karla/700.woff) format("woff");
-}

package.json

@@ -67,14 +67,14 @@
     "sass-lint": "^1.12.1",
     "snazzy": "^8.0.0",
     "standardx": "^3.0.1",
-    "updates": "^4.5.0"
+    "updates": "^4.5.2"
   },
   "engines": {
     "node": "10.2.x"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged"
+      "pre-commit": "pretty-quick --staged && npm run test:sass"
     }
   },
   "main": "server.js",
@@ -87,6 +87,7 @@
     "test": "run-s test:*",
     "test:dependencies": "updates --update ./",
     "test:lint": "standardx --verbose | snazzy",
+    "test:sass": "sass-lint --config .sasslintrc 'app/sass/*.scss, app/sass/**/*.scss' --verbose --no-exit",
     "watch": "run-p watch:*",
     "watch:sass": "sass --watch app/sass:app/dist --style compressed",
     "watch:server": "NODE_ENV=development nodemon server --ignore 'public/'"