From 957d1887b760102daa74b87363b39b4482420cb6 Mon Sep 17 00:00:00 2001
From: Nick Taylor <nick@iamdeveloper.com>
Date: Wed, 1 May 2019 20:33:25 -0400
Subject: [PATCH] More themeable mixin in action (#2646)

* More themeable mixin in action.

* Missed a CSS var to themeable mixin.
---
 app/assets/stylesheets/comments.scss       |  99 +++++++++---------
 app/assets/stylesheets/dashboard.scss      | 100 ++++++++++--------
 app/assets/stylesheets/footer.scss         |  44 ++++----
 app/assets/stylesheets/index-comments.scss | 116 ++++++++++-----------
 app/assets/stylesheets/ltags/UserTag.scss  |  20 ++--
 app/assets/stylesheets/scaffolds.scss      |  96 +++++++++--------
 6 files changed, 244 insertions(+), 231 deletions(-)

diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
index e97aa4c451a0..7aedeace0534 100644
--- a/app/assets/stylesheets/comments.scss
+++ b/app/assets/stylesheets/comments.scss
@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'mixins';
 @import 'shared';
 
 $indent-distance: calc(1.1vw + 13px);
@@ -13,18 +14,15 @@ $indent-distance: calc(1.1vw + 13px);
 }
 
 a.header-link {
-  color: $black;
-  color: var(--theme-color, $black);
+  @include themeable(color, theme-color, $black);
   display: block;
   &:hover {
-    color: $black;
-    color: var(--theme-color, $black);
+    @include themeable(color, theme-color, $black);
   }
 }
 
 .comments {
-  background: $light-gray;
-  background: var(--theme-background, $light-gray);
+  @include themeable(background, theme-background, $light-gray);
   .picture {
     height: 180px;
     max-width: 900px;
@@ -54,15 +52,17 @@ a.header-link {
     max-width: 100%;
     margin: 50px auto 10px;
     padding: 0px 0px 90px;
-    background: white;
-    background: var(--theme-container-background, white);
+    @include themeable(background, theme-container-background, #fff);
     z-index: 3;
     position: relative;
     @media screen and (min-width: 820px) {
       margin: 72px auto 10px;
       border-radius: 5px;
-      border: 1px solid darken($lightest-gray, 4%);
-      border: var(--theme-container-border, 1px solid darken($lightest-gray, 4%));
+      @include themeable(
+        border,
+        theme-container-border,
+        1px solid darken($lightest-gray, 4%)
+      );
     }
     h3 {
       width: 94%;
@@ -89,8 +89,7 @@ a.header-link {
       margin: auto;
       margin-bottom: -35px;
       .read-more {
-        color: $sky-blue;
-        color: var(--theme-anchor-color, $sky-blue);
+        @include themeable(color, theme-anchor-color, $sky-blue);
         display: inline-block;
         &:hover {
           opacity: 0.96;
@@ -223,20 +222,29 @@ a.header-link {
   }
   form {
     width: 104%;
-    background: $light-gray;
-    background: var(--theme-container-accent-background, $light-gray);
+    @include themeable(
+      background,
+      theme-container-accent-background,
+      $light-gray
+    );
     overflow: auto;
     position: relative;
     margin-bottom: 4px;
     z-index: 4;
     margin-left: -2%;
-    border-top: 1px solid $light-medium-gray;
-    border-top: var(--theme-container-border, 1px solid $light-medium-gray);
+    @include themeable(
+      border-top,
+      theme-container-border,
+      1px solid $light-medium-gray
+    );
     @media screen and (min-width: 820px) {
       width: calc(100% - 2px);
       margin-left: 0%;
-      border: 1px solid $light-medium-gray;
-      border: var(--theme-container-border, 1px solid $light-medium-gray);
+      @include themeable(
+        border,
+        theme-container-border,
+        1px solid $light-medium-gray
+      );
     }
 
     .field {
@@ -254,19 +262,20 @@ a.header-link {
       display: block;
       resize: vertical;
       border-radius: 3px;
-      border: 1px solid rgb(232, 229, 229);
-      border: var(--theme-container-background, 1px solid rgb(232, 229, 229));
+      @include themeable(
+        border,
+        theme-container-background,
+        1px solid rgb(232, 229, 229)
+      );
       height: 125px;
       font-size: 16px;
       padding: 6px;
       cursor: text;
-      background: white;
-      background: var(--theme-container-background, white);
-      color: $black;
-      color: var(--theme-color, $black);
-      &::placeholder{
-        color:#8f949c;
-      }  
+      @include themeable(background, theme-container-background, #fff);
+      @include themeable(color, theme-color, $black);
+      &::placeholder {
+        color: #8f949c;
+      }
       &.embiggened {
         height: calc(2vw + 115px);
       }
@@ -279,8 +288,9 @@ a.header-link {
       &.preview-loading {
         background: white url(image_path('loading-ellipsis.svg')) no-repeat
           center center;
-        background-color: var(--theme-container-background, white);
-        color: var(--theme-container-background, white);
+        @include themeable(background-color, theme-container-background, white);
+        @include themeable(color, theme-container-background, white);
+
         background-size: 50px;
       }
     }
@@ -293,8 +303,11 @@ a.header-link {
       text-align: left;
       font-size: 19px;
       font-family: $helvetica;
-      background: lighten($yellow, 19%);
-      background: var(--theme-container-accent-background, lighten($yellow, 19%));
+      @include themeable(
+        background,
+        theme-container-accent-background,
+        lighten($yellow, 19%)
+      );
       box-shadow: $shadow;
       width: calc(100% - 80px);
       margin: 19px auto 8px;
@@ -347,8 +360,7 @@ a.header-link {
       text-align: right;
       font-size: 0.9em;
       font-weight: 500;
-      color: $dark-gray;
-      color: var(--theme-secondary-color, $dark-gray);
+      @include themeable(color, theme-secondary-color, $dark-gray);
       &.sub-comment-code-of-conduct {
         font-size: 1em;
       }
@@ -358,8 +370,7 @@ a.header-link {
         margin: 5px 0px;
       }
       a {
-        color: $sky-blue;
-        color: var(--theme-anchor-color, $sky-blue);
+        @include themeable(color, theme-anchor-color, $sky-blue);
       }
     }
     input[type='submit'] {
@@ -617,8 +628,7 @@ a.header-link {
     code {
       margin: auto;
       white-space: nowrap;
-      background: $lightest-gray;
-      background: var(--theme-background, $lightest-gray);
+      @include themeable(background, theme-background, $lightest-gray);
       padding: 1px 5px 0px;
       border-radius: 2px;
       color: #333842;
@@ -674,8 +684,7 @@ a.header-link {
     padding: 0px;
     border-top-left-radius: 3px;
     border-top-left-radius: 3px;
-    color: $dark-gray;
-    color: var(--theme-secondary-color, $dark-gray);
+    @include themeable(color, theme-secondary-color, $dark-gray);
     position: relative;
     // background:$light-gray;
     .comment-date {
@@ -686,8 +695,7 @@ a.header-link {
       font-size: 12px;
       text-align: right;
       a {
-        color: $medium-gray;
-        color: var(--theme-secondary-color, $dark-gray);
+        @include themeable(color, theme-secondary-color, $medium-gray);
       }
     }
     .dropbtn {
@@ -780,8 +788,7 @@ a.header-link {
       }
     }
     a {
-      color: lighten($dark-gray, 3%);
-      color: var(--theme-secondary-color, $dark-gray);
+      @include themeable(color, theme-secondary-color, lighten($dark-gray, 3%));
     }
   }
   .reaction-button,
@@ -953,8 +960,7 @@ a.header-link {
   .inner-comment {
     padding: 0px;
     border: 1px solid $light-medium-gray;
-    background: white;
-    background: var(--theme-container-background, #fff);
+    @include themeable(background, theme-container-background, #fff);
     &.comment-created-via-fetch {
       animation: comment-create 1.2s;
       .body {
@@ -996,7 +1002,6 @@ a.header-link {
     background-color: $light-green;
   }
   to {
-    background-color: white;
-    background-color: var(--theme-container-background, #fff);
+    @include themeable(background-color, theme-container-background, #fff);
   }
 }
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 1343cbcf85f7..ab6615e73ec9 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -1,5 +1,5 @@
 @import 'variables';
-
+@import 'mixins';
 .dashboard-container {
   padding-top: 80px;
   padding-bottom: 80px;
@@ -70,8 +70,7 @@
       flex-grow: 1;
       flex-shrink: 0;
       width: 100%;
-      color: $black;
-      color: var(--theme-color, $black);
+      @include themeable(color, theme-color, $black);
       padding: 10px 0px;
       border-radius: 3px;
       min-width: 115px;
@@ -82,18 +81,22 @@
       text-align: center;
 
       &.active {
-        background: $purple;
-        background: var(--theme-container-accent-background, $purple);
-        color: $black;
-        color: var(--theme-container-color, $black);
+        @include themeable(
+          background,
+          theme-container-accent-background,
+          $purple
+        );
+        @include themeable(color, theme-container-color, $black);
       }
 
       &:not(.active):hover {
         background: $light-medium-purple;
-        background: var(--theme-container-background-hover,
-          $light-medium-purple);
-        color: $black;
-        color: var(--theme-container-color, $black);
+        @include themeable(
+          background,
+          theme-container-background-hover,
+          $light-medium-purple
+        );
+        @include themeable(color, theme-container-color, $black);
       }
 
       &:not(:last-child) {
@@ -147,7 +150,11 @@
       outline: none;
       font-weight: bold;
       color: #333333;
-      font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnBold", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
+      font-family: 'HelveticaNeue-CondensedBold', 'HelveticaNeueBoldCondensed',
+        'HelveticaNeue-Bold-Condensed', 'Helvetica Neue Bold Condensed',
+        'HelveticaNeueBold', 'HelveticaNeue-Bold', 'Helvetica Neue Bold',
+        'HelveticaNeue', 'Helvetica Neue', 'TeXGyreHerosCnBold', 'Helvetica',
+        'Tahoma', 'Geneva', 'Arial Narrow', 'Arial', sans-serif;
 
       @media screen and (max-width: 426px) {
         text-align-last: center;
@@ -163,8 +170,7 @@
     text-align: center;
     margin-bottom: 15px;
     background: $dark-gray;
-    box-shadow: $bold-shadow;
-    box-shadow: var(--theme-container-box-shadow, $bold-shadow);
+    @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
     padding: 15px 0px;
   }
 
@@ -226,21 +232,24 @@
   }
 
   .single-article {
-    border: 1px solid $light-medium-gray;
-    border: var(--theme-container-border, 1px solid $light-medium-gray);
-    box-shadow: $bold-shadow;
-    box-shadow: var(--theme-container-box-shadow, $bold-shadow);
+    @include themeable(
+      border,
+      theme-container-border,
+      1px solid $light-medium-gray
+    );
+    @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
     padding: 5px 15px;
     margin-bottom: 13px;
     border-radius: 3px;
     position: relative;
-    background: white;
-    background: var(--theme-container-background, white);
-
+    @include themeable(background, theme-container-background, #fff);
     &.single-article-unpublished {
       background: lighten($yellow, 20%);
-      background: var(--theme-container-accent-background,
-        lighten($yellow, 20%));
+      @include themeable(
+        background,
+        theme-container-accent-background,
+        lighten($yellow, 20%)
+      );
     }
     &.thanks-for-suggesting-a-tweet {
       background: lighten($green, 20%);
@@ -261,7 +270,7 @@
           height: 100px;
           border-radius: 3px;
         }
-        input[type="submit"] {
+        input[type='submit'] {
           background: #1da1f2; // twitter blue
           color: white;
           font-size: 19px;
@@ -311,10 +320,12 @@
 
     .dashboard-collection-org-details {
       .dashboard-top-pill {
-        background: darken($light-gray, 6%);
-        background: var(--theme-secondary-color, darken($light-gray, 6%));
-        color: white;
-        color: var(--theme-container-background, white);
+        @include themeable(
+          background,
+          theme-secondary-color,
+          darken($light-gray, 6%)
+        );
+        @include themeable(color, theme-container-background, #fff);
         margin-right: 5px;
         padding: 3px 10px;
         border-radius: 100px;
@@ -327,14 +338,11 @@
     .dashboard-meta-details {
       font-size: 0.85em;
       padding: 3px 0px 6px;
-      color: $medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+      @include themeable(color, theme-secondary-color, $medium-gray);
     }
 
     a {
-      color: $black;
-      color: var(--theme-container-color, $black);
-
+      @include themeable(color, theme-container-color, $black);
       &.block-link {
         display: block;
       }
@@ -366,8 +374,11 @@
       }
 
       form {
-        background: $light-gray;
-        background: var(--theme-container-accent-background, $light-gray);
+        @include themeable(
+          background,
+          theme-container-accent-background,
+          $light-gray
+        );
         padding: 8px 15px;
         margin-bottom: 10px;
         border-radius: 3px;
@@ -502,8 +513,7 @@
 
   .no-articles {
     text-align: center;
-    background: white;
-    background: var(--theme-container-accent-background, white);
+    @include themeable(background, theme-container-accent-background, #fff);
     padding: 2vw 3vw 6vw;
     box-shadow: $shadow;
     border-radius: 3px;
@@ -605,16 +615,16 @@
 }
 
 .card {
-  border: 1px solid #d6d6d6;
-  border: var(--theme-container-border, 1px solid #d6d6d6);
-  box-shadow: 3px 3px 0px #bababa;
-  box-shadow: var(--theme-container-box-shadow, 3px 3px 0px #bababa);
+  @include themeable(border, theme-container-border, 1px solid #d6d6d6);
+  @include themeable(
+    box-shadow,
+    theme-container-box-shadow,
+    3px 3px 0px #bababa
+  );
   border-radius: 3px;
   padding: 20px;
   margin: 5px;
-  background-color: #fff;
-  background-color: var(--theme-container-background, #fff);
-
+  @include themeable(background-color, theme-container-background, #fff);
   h4 {
     font-size: 0.8em;
     margin: 0px;
@@ -658,4 +668,4 @@
     font-size: 0.9em;
     font-weight: bold;
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/footer.scss
index d48e150e2a83..74d0ee4169bd 100644
--- a/app/assets/stylesheets/footer.scss
+++ b/app/assets/stylesheets/footer.scss
@@ -1,18 +1,19 @@
 @import 'variables';
+@import 'mixins';
 
-footer{
+footer {
   // background: darken($tan,1%);
   z-index: 10;
   position: relative;
-  .container{
-    width:100%;
-    margin:auto;
-    max-width:1200px;
+  .container {
+    width: 100%;
+    margin: auto;
+    max-width: 1200px;
     box-shadow: none;
     border: none;
     font-weight: 500;
     background: transparent;
-    &.centered-footer{
+    &.centered-footer {
       width: 97%;
       max-width: 722px;
       @media screen and (min-width: 950px) and (max-width: 1119px) {
@@ -26,30 +27,29 @@ footer{
         max-width: 606px;
       }
     }
-    a{
-      color: $black;
-      color: var(--theme-color, $black);
-      display:inline-block;
+    a {
+      @include themeable(color, theme-color, $black);
+      display: inline-block;
       margin-right: 12px;
-      &:hover{
+      &:hover {
         text-decoration: underline;
       }
     }
-    .inner-footer-container{
+    .inner-footer-container {
       max-width: 820px;
-      background: $tan;
-      background: var(--theme-container-background, $tan);
-      border: 1px solid darken($light-medium-gray, 2%);
-      border: var(--theme-container-border, 1px solid darken($light-medium-gray, 2%));
-      box-shadow: $bold-shadow;
-      box-shadow: var(--theme-container-box-shadow, $bold-shadow);
-      padding:50px 30px;
+      @include themeable(background, theme-container-background, $tan);
+      @include themeable(
+        border,
+        theme-container-border,
+        1px solid darken($light-medium-gray, 2%)
+      );
+      @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
+      padding: 50px 30px;
       line-height: 3em;
-      margin:auto;
-      @media screen and ( min-width: 1250px ){
+      margin: auto;
+      @media screen and (min-width: 1250px) {
         margin-left: 0px;
       }
     }
   }
 }
-
diff --git a/app/assets/stylesheets/index-comments.scss b/app/assets/stylesheets/index-comments.scss
index ec6a3c28bf79..8acd88edc866 100644
--- a/app/assets/stylesheets/index-comments.scss
+++ b/app/assets/stylesheets/index-comments.scss
@@ -1,80 +1,74 @@
 @import 'variables';
-
-.index-comments{
-  text-align:left;
-  padding-bottom:calc(0.6vw + 5px);
-  background:white;
-  background: var(--theme-container-background, white);
-  border-radius:3px;
-  border:1px solid $outline-color;
-  border: var(--theme-container-border, 1px solid $outline-color);
-  box-shadow: $bold-shadow;
-  box-shadow: var(--theme-container-box-shadow, $bold-shadow);
-  margin:auto;
-  margin-top:8px;
-  width:94%;
-  @media screen and ( min-width: 950px ){
-    margin-top:12px;
+@import 'mixins';
+.index-comments {
+  text-align: left;
+  padding-bottom: calc(0.6vw + 5px);
+  @include themeable(background, theme-container-background, #fff);
+  border-radius: 3px;
+  @include themeable(border, theme-container-border, 1px solid $outline-color);
+  @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
+  margin: auto;
+  margin-top: 8px;
+  width: 94%;
+  @media screen and (min-width: 950px) {
+    margin-top: 12px;
   }
-  @media screen and ( min-width: 950px ){
-    width:100%;
+  @media screen and (min-width: 950px) {
+    width: 100%;
   }
-  .breadcrumb{
-    margin-top:10px;
-    margin-left:5px;
+  .breadcrumb {
+    margin-top: 10px;
+    margin-left: 5px;
     text-decoration: underline;
-    a{
-      padding:5px 10px;
-      color:$dark-gray;
-      color: var(--theme-color, $dark-gray);
-      font-weight:500;
-      font-size:0.85em;
+    a {
+      padding: 5px 10px;
+      @include themeable(color, theme-color, $dark-gray);
+      font-weight: 500;
+      font-size: 0.85em;
     }
   }
-  header{
-    padding:calc(1vw + 3px) 13px 0.5vw;
-    margin:0;
-    font-size:17px;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    @media screen and ( min-width: 430px ){
-      font-size:19px;
+  header {
+    padding: calc(1vw + 3px) 13px 0.5vw;
+    margin: 0;
+    font-size: 17px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
+      monospace;
+    @media screen and (min-width: 430px) {
+      font-size: 19px;
     }
-    h4{
+    h4 {
       margin: 0;
       font-weight: 500;
     }
   }
-  a{
-    color:$black;
-    color: var(--theme-color, $black);
-    display:block;
-    padding-left:13px;
-    padding-right:13px;
+  a {
+    @include themeable(color, theme-color, $black);
+    display: block;
+    padding-left: 13px;
+    padding-right: 13px;
   }
-  .single-comment{
-    padding:3px 0px;
-    font-size:16px;
-    &.strong-comment{
-      .comment-title{
-        font-weight:600;
+  .single-comment {
+    padding: 3px 0px;
+    font-size: 16px;
+    &.strong-comment {
+      .comment-title {
+        font-weight: 600;
       }
     }
-    .comment-date{
-      font-size:0.7em;
-      color:$medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
-      margin-left:5px;
-      vertical-align:2px;
-      display:inline-block;
+    .comment-date {
+      font-size: 0.7em;
+      @include themeable(color, theme-secondary-color, $medium-gray);
+      margin-left: 5px;
+      vertical-align: 2px;
+      display: inline-block;
     }
-    .comment-preview{
-      font-size:0.9em;
-      color:$medium-gray;
-      color: var(--theme-secondary-color, $medium-gray);
+    .comment-preview {
+      font-size: 0.9em;
+      @include themeable(color, theme-secondary-color, $medium-gray);
     }
-    @media screen and ( min-width: 430px ){
-      padding:5px 0px;
-      font-size:18.5px;
+    @media screen and (min-width: 430px) {
+      padding: 5px 0px;
+      font-size: 18.5px;
     }
   }
 }
diff --git a/app/assets/stylesheets/ltags/UserTag.scss b/app/assets/stylesheets/ltags/UserTag.scss
index e7f4141a398c..b1d8d4b532ab 100644
--- a/app/assets/stylesheets/ltags/UserTag.scss
+++ b/app/assets/stylesheets/ltags/UserTag.scss
@@ -1,31 +1,31 @@
 @import 'variables';
+@import 'mixins';
 .ltag__user__link {
   color: #111111 !important;
   &:active {
     opacity: 0.7;
   }
-  &.profile-image-link{
+  &.profile-image-link {
     &:hover {
-      opacity: 1.0;
+      opacity: 1;
     }
     &:active {
-      opacity: 1.0;
+      opacity: 1;
     }
   }
 }
 .ltag__user {
   font-family: $helvetica;
-  border:1px solid $light-medium-gray;
-  box-shadow: $bold-shadow;
-  box-shadow: var(--theme-container-box-shadow, $bold-shadow);
-  border-radius:3px;
+  border: 1px solid $light-medium-gray;
+  @include themeable(box-shadow, theme-container-box-shadow, $bold-shadow);
+  border-radius: 3px;
   display: block;
   margin: 0.95em 0 1.2em;
-  position:relative;
-  overflow:hidden;
+  position: relative;
+  overflow: hidden;
   @media screen and (min-width: 760px) {
     margin: 0.95em auto;
-    width:620px;
+    width: 620px;
   }
   .ltag__user__pic {
     display: inline-block;
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index f746b6cebc2f..62b397ae7c6e 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -1,17 +1,15 @@
 @import 'variables';
+@import 'mixins';
 
 body {
-  background: $lightest-gray;
-  background: var(--theme-background, $lightest-gray);
-  color: $black;
-  color: var(--theme-color, $black);
+  @include themeable(background, theme-background, $lightest-gray);
+  @include themeable(color, theme-color, $black);
   font-family: $helvetica;
   font-size: 18px;
-  padding:0 !important;
-  margin:0 !important;
-  margin-top:-20px !important;
-  overflow-y:scroll;
-
+  padding: 0 !important;
+  margin: 0 !important;
+  margin-top: -20px !important;
+  overflow-y: scroll;
 }
 
 *:focus {
@@ -20,26 +18,30 @@ body {
   }
 }
 
-
-.ptr--ptr{
-  margin-top:70px;
+.ptr--ptr {
+  margin-top: 70px;
   margin-bottom: -70px;
 }
 
-.modal-open{
+.modal-open {
   margin: 0;
   overflow: hidden;
   overflow-y: hidden;
   height: 90vh;
 }
 
-
-.universal-page-content-wrapper{
-  overflow:hidden;
-  min-height:88vh;
+.universal-page-content-wrapper {
+  overflow: hidden;
+  min-height: 88vh;
   visibility: visible;
-  &.stories-index,&.notifications-index,&.stories-search,&.podcast_episodes-index,&.reading_list_items-index,.tags-index,&.twitch_live_streams-show{
-    margin-top:68px;
+  &.stories-index,
+  &.notifications-index,
+  &.stories-search,
+  &.podcast_episodes-index,
+  &.reading_list_items-index,
+  .tags-index,
+  &.twitch_live_streams-show {
+    margin-top: 68px;
   }
 }
 
@@ -50,16 +52,16 @@ pre {
 }
 
 a {
-  color: $sky-blue;
-  color: var(--theme-anchor-color, $sky-blue);
-  text-decoration:none;
-  &:hover{
-    opacity:0.9;
+  @include themeable(color, theme-anchor-color, $sky-blue);
+  text-decoration: none;
+  &:hover {
+    opacity: 0.9;
   }
 }
 
 div {
-  &.field, &.actions {
+  &.field,
+  &.actions {
     margin-bottom: 5px;
   }
 }
@@ -68,24 +70,23 @@ div {
   display: none;
 }
 
-pre{
-  background:#29292e;
-  border-radius:2px;
-  overflow-x:scroll;
-  font-size:11px;
-  color:#eff0f9;
-  line-height:1.42em;
-  font-size:13px;
-  width:calc(100% - 25px);
-  @media screen and ( min-width: 380px ){
-    font-size:15px;
+pre {
+  background: #29292e;
+  border-radius: 2px;
+  overflow-x: scroll;
+  font-size: 11px;
+  color: #eff0f9;
+  line-height: 1.42em;
+  font-size: 13px;
+  width: calc(100% - 25px);
+  @media screen and (min-width: 380px) {
+    font-size: 15px;
   }
-  code{
-    background:#29292e;
-    color:#eff0f9;
+  code {
+    background: #29292e;
+    color: #eff0f9;
     white-space: pre;
   }
-
 }
 
 .cta {
@@ -97,14 +98,17 @@ pre{
   font-weight: bold;
 }
 
-button{
-  cursor:pointer;
+button {
+  cursor: pointer;
 }
 
-input[type="submit"]{
-  cursor:pointer;
-};
+input[type='submit'] {
+  cursor: pointer;
+}
 
-input[type="text"],textarea, input[type="url"], input[type="email"]{
+input[type='text'],
+textarea,
+input[type='url'],
+input[type='email'] {
   outline: 0;
 }