diff --git a/app/assets/javascripts/initializers/initializeDrawerSliders.js b/app/assets/javascripts/initializers/initializeDrawerSliders.js
index 1100bb692..7a625ebdd 100644
--- a/app/assets/javascripts/initializers/initializeDrawerSliders.js
+++ b/app/assets/javascripts/initializers/initializeDrawerSliders.js
@@ -1,24 +1,5 @@
 /* global swipeState: true, InstantClick, initializeSwipeGestures, slideSidebar */
 
-function listenForNarrowMenuClick(event) {
-  let navLinks = document.getElementsByClassName('narrow-nav-menu');
-  let narrowFeedButt = document.getElementById('narrow-feed-butt');
-
-  for (let i = 0; i < navLinks.length; i++) {
-    document.getElementById('narrow-nav-menu').classList.remove('showing');
-  }
-  if (narrowFeedButt) {
-    narrowFeedButt.onclick = (_event) => {
-      document.getElementById('narrow-nav-menu').classList.add('showing');
-    };
-  }
-  for (let i = 0; i < navLinks.length; i++) {
-    navLinks[i].onclick = (_event) => {
-      document.getElementById('narrow-nav-menu').classList.remove('showing');
-    };
-  }
-}
-
 function initializeDrawerSliders() {
   if (!initializeSwipeGestures.called) {
     swipeState = 'middle';
@@ -55,8 +36,6 @@ function initializeDrawerSliders() {
       slideSidebar('right', 'outOfView');
       slideSidebar('left', 'outOfView');
     });
-
-    listenForNarrowMenuClick();
   }
 
   const feedFilterSelect = document.getElementById('feed-filter-select');
diff --git a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js
index 2266861c0..a502ebb1c 100644
--- a/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js
+++ b/app/assets/javascripts/initializers/initializeSpecialNavigationFunctionality.js
@@ -7,8 +7,11 @@ function initializeSpecialNavigationFunctionality() {
     if (document.getElementById('notifications-container')) {
       notificationsLink.blur();
       notificationsLink.classList.add('top-bar__link--current');
+      document.querySelector('body').dataset.currentPage =
+        'notifications-index';
     } else {
       notificationsLink.classList.remove('top-bar__link--current');
+      delete document.querySelector('body').dataset.currentPage;
     }
     if (document.getElementById('chat')) {
       connectLink.blur();
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index c4063d8a3..5676afa92 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -2,7 +2,6 @@
 @import 'crayons';
 @import 'variables';
 @import 'scaffolds';
-@import 'top-bar';
 
 .pagination {
   justify-content: right;
diff --git a/app/assets/stylesheets/article-form-needed-legacy.scss b/app/assets/stylesheets/article-form-needed-legacy.scss
index ab8e2365d..9d8701cf2 100644
--- a/app/assets/stylesheets/article-form-needed-legacy.scss
+++ b/app/assets/stylesheets/article-form-needed-legacy.scss
@@ -1,450 +1,6 @@
 @import 'variables';
 @import 'mixins';
 
-.job-listing-header {
-  color: #007777;
-  background: #bafff1;
-  text-align: center;
-  padding: 80px 5px 60px;
-  margin-bottom: -20px;
-  font-family: var(--ff-sans-serif);
-  font-size: 1.5em;
-  font-weight: 800;
-}
-
-.markdown-editor {
-  margin: 80px auto;
-  padding-bottom: 4px !important;
-  position: relative;
-  z-index: 11;
-  font-family: var(--ff-sans-serif);
-
-  .top-buttons {
-    padding: 20px 0px 5px;
-    text-align: center;
-    max-width: 320px;
-    margin: auto;
-
-    @media screen and (min-width: 650px) {
-      max-width: 100%;
-    }
-
-    button {
-      padding: 4px 0px;
-      margin: 0px 4px 5px;
-      background: $green;
-      color: $black;
-      border-radius: 3px;
-      width: 135px;
-      display: inline-block;
-      font-size: 17px;
-      opacity: 0.9;
-      position: relative;
-      font-family: $helvetica-condensed;
-      border: 0px;
-
-      &.preview-loading {
-        background: #56a886;
-      }
-
-      &.help-butt {
-        background: $yellow;
-        color: $black;
-      }
-
-      &.markdown-butt {
-        background: $purple;
-      }
-
-      &.loading {
-        opacity: 0.66;
-      }
-
-      &.active {
-        background: $black;
-        color: $yellow;
-        cursor: default;
-        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
-
-        &::before {
-          content: '<';
-        }
-
-        &::after {
-          content: '>';
-        }
-      }
-
-      &.disabled {
-        background: $medium-gray;
-        color: white;
-        opacity: 0.7;
-        cursor: default;
-        box-shadow: none;
-      }
-
-      &:hover:not(.disabled, .preview-loading, .submit-loading) {
-        opacity: 1;
-      }
-
-      &.submit {
-        background: $bold-blue;
-        color: white;
-      }
-
-      &.submit-loading {
-        background: #73949c;
-      }
-    }
-  }
-
-  .editor-image-upload {
-    font-family: var(--ff-sans-serif);
-    padding: 4px 5px;
-    font-size: 0.8em;
-    width: inherit;
-    position: relative;
-    margin: auto;
-
-    @media screen and (min-width: 900px) {
-      width: inherit;
-      padding: 0px 10px;
-    }
-
-    #image-upload-button,
-    #image-upload-submit {
-      background: $black;
-      color: white;
-      border: 0;
-      padding: 4px 7px;
-      border-radius: 3px;
-      font-size: 0.8em;
-
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-
-    #image-upload-submit {
-      background: $blue;
-    }
-
-    #image-upload-file-label {
-      margin: 1vw 0;
-      display: inline-block;
-      margin-right: 5px;
-      margin-left: 4px;
-      color: #888;
-      font-size: 0.9em;
-    }
-
-    #uploaded-image {
-      font-size: 1em;
-      display: inline-block;
-      padding: 0.5vw 0.8vw;
-      border: 1px dashed $dark-gray;
-      border-radius: 3px;
-      width: 97%;
-
-      @media screen and (min-width: 500px) {
-        width: calc(97% - 270px);
-      }
-    }
-  }
-
-  p {
-    margin-top: 0px;
-    line-height: 30px;
-    padding: 8px 10px;
-    background: $light-gray;
-    font-size: 0.8em;
-
-    code {
-      background: darken($light-gray, 5%);
-    }
-
-    @media screen and (min-width: 500px) {
-      font-size: 1.1em;
-    }
-  }
-
-  .article-new-billing-notice {
-    background: #bafff1;
-    color: #007777;
-    font-size: calc(1.2em + 0.7vw);
-    padding: 120px 0px 200px;
-    text-align: center;
-    font-weight: 800;
-    width: 100%;
-    margin-top: -50px;
-    margin-bottom: -200px;
-    position: relative;
-    z-index: 0;
-
-    @media screen and (min-width: 1200px) {
-      width: 150%;
-      margin-left: -25%;
-    }
-
-    .article-new-billing-notice-inner {
-      width: 90%;
-      margin: auto;
-      position: relative;
-      z-index: 15;
-
-      .article-new-billing-notice-inner-small {
-        font-size: calc(0.55em + 0.2vw);
-        margin-top: 30px;
-      }
-    }
-
-    a {
-      font-weight: 800;
-      color: $red;
-      text-decoration: underline;
-    }
-  }
-
-  .editor-main {
-    margin-top: 15px;
-    position: relative;
-    z-index: 5;
-  }
-
-  .textarea-header {
-    background: #e0e0e0;
-    border: 1px solid #dddddd;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-    transform: translateY(2px);
-  }
-
-  input[type='text'] {
-    width: calc(100% - 30px);
-    padding: 10px 15px;
-    font-size: 22px;
-    height: 40px;
-    line-height: 40px;
-
-    &.article-form-input {
-      margin-top: 15px;
-    }
-  }
-
-  .hiring-form {
-    h2 {
-      margin-top: 85px;
-      margin-bottom: 16px;
-      font-size: 34px;
-      text-align: center;
-    }
-
-    h3 {
-      text-align: center;
-      font-weight: 400;
-      font-size: 17px;
-    }
-
-    .filter-buttons {
-      margin-top: 9px;
-      text-align: center;
-
-      label {
-        cursor: pointer;
-        margin: 9px 5px 9px 0px;
-        display: inline-block;
-        padding: 4px 12px;
-        border-radius: 100px;
-        font-size: 17px;
-
-        &:hover {
-          background: lighten($blue, 53%);
-          color: darken($blue, 23%);
-        }
-      }
-
-      input {
-        display: none;
-        width: auto;
-
-        &:checked + label {
-          background: $blue;
-          color: white;
-
-          &:hover {
-            background: $blue;
-          }
-        }
-      }
-    }
-
-    .tags-to-choose {
-      margin-top: 12px;
-
-      button {
-        border: 0px;
-        border-radius: 100px;
-        opacity: 0.8;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .ap-input-icon {
-    margin-top: 13px;
-    right: 14px;
-  }
-
-  .comment-template {
-    display: block;
-    width: 98%;
-    margin: 0 auto;
-  }
-
-  .article-field {
-    width: calc(100% - 32px);
-    min-height: 550px;
-    margin: auto;
-    display: block;
-    border-radius: 3px;
-    border: 0px;
-    resize: none;
-    padding: 12px 15px 18px;
-    font-family: 'Lucida Console', Monaco, monospace, sans-serif;
-    font-size: 17px;
-    background: var(--card-bg);
-    color: var(--body-color);
-
-    &::placeholder {
-      color: #8f949c;
-    }
-
-    &::after {
-      position: absolute;
-      left: 5px;
-      top: 3px;
-      content: attr(
-        'dsds ds ds dsdhjsdhjsbdhs eieuirwhewh iurhwiu wehu iewhu ierwhu irwehiu erwhui r huir'
-      );
-      pointer-events: none;
-      opacity: 0.6;
-    }
-  }
-
-  #submitbutt {
-    width: 300px;
-    margin: 10px 0px;
-    display: block;
-    background: rgb(19, 149, 184);
-    color: white;
-    border: 1px solid rgb(14, 121, 150);
-    padding: 10px;
-    border-radius: 3px;
-    font-size: 30px;
-    box-shadow: inset 0 1px 3px 1px #66bfff;
-
-    &:hover {
-      background: rgb(19, 143, 176);
-    }
-  }
-
-  .hiring-form-toggle {
-    margin: -40px auto 50px;
-    font-weight: 600;
-    text-align: center;
-  }
-
-  .form-submit-buttons {
-    text-align: center;
-
-    input {
-      width: 35%;
-      margin: 5px 10px 100px;
-      font-size: 30px;
-      color: white;
-      background: $blue;
-      border: 0px;
-      font-weight: 600;
-      border-radius: 8px;
-      padding: 20px 0px;
-
-      &.draft-version {
-        color: $black;
-        background: $yellow;
-      }
-
-      &:hover {
-        opacity: 0.88;
-      }
-    }
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-    vertical-align: -10px;
-    margin-right: 12px;
-  }
-
-  .switch input {
-    display: none;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 100px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 100px;
-  }
-
-  input:checked + .slider {
-    background-color: #2196f3;
-  }
-
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196f3;
-  }
-
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-  }
-
-  /* Rounded sliders */
-  .slider.round {
-    border-radius: 34px;
-  }
-
-  .slider.round:before {
-    border-radius: 50%;
-  }
-}
-
 #error_explanation {
   background: $red;
   max-width: 750px;
@@ -469,17 +25,3 @@
     }
   }
 }
-
-.editor-article-view {
-  margin-top: -50px;
-  margin-bottom: 70px;
-}
-
-.sign-in-message {
-  background: rgb(219, 29, 57);
-  color: white;
-  padding: 20px;
-  margin-top: 58px;
-  text-align: center;
-  margin-bottom: -60px;
-}
diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index c5069efce..66e990328 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -6,25 +6,6 @@
   height: 10px;
 }
 
-.video-player-header {
-  background: $black;
-  margin-top: 0;
-  max-width: 1050px;
-  margin: auto;
-  margin-bottom: 15px;
-  height: 56.25vw;
-  overflow: hidden;
-
-  @media screen and (min-width: 880px) {
-    height: 492px;
-  }
-
-  @media screen and (min-width: 950px) {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-  }
-}
-
 body.default-navbar-config {
   .crayons-article .crayons-article__body [id] {
     scroll-margin-top: var(--header-height);
@@ -52,11 +33,6 @@ article {
       border-top-right-radius: 2px;
     }
   }
-
-  .category-banner {
-    height: 250px;
-    background: #45525c;
-  }
 }
 
 .home .container {
@@ -579,67 +555,3 @@ article {
     }
   }
 }
-
-.show-comments-footer {
-  // width: 800px;
-  // max-width: 98%;
-  margin: auto;
-  text-align: center;
-
-  .full-discussion-button {
-    padding: calc(0.6vw + 6px) 0;
-    border-radius: 3px;
-    display: block;
-    width: 100%;
-    margin: 7.5vw auto calc(1vw + 5px);
-    max-width: 450px;
-    background: $green;
-    color: $black;
-    font-family: $helvetica-condensed;
-    font-stretch: condensed;
-
-    @media screen and (min-width: 500px) {
-      font-size: 1.1em;
-    }
-
-    &:hover {
-      opacity: 0.96;
-    }
-  }
-}
-
-.comments-container-container {
-  padding-bottom: 20px;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes SHW {
-  from {
-    bottom: -80px;
-  }
-
-  to {
-    bottom: 0;
-  }
-}
-
-@keyframes image-reaction-animation {
-  0% {
-  }
-  30% {
-    transform: rotate(-15deg);
-  }
-  100% {
-  }
-}
diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss
index 15d030936..277186a2b 100644
--- a/app/assets/stylesheets/articles.scss
+++ b/app/assets/stylesheets/articles.scss
@@ -140,37 +140,6 @@
   }
 }
 
-// MOBILE ONLY navigation to switch between tabs (these on top of the feed).
-// Although it uses different markup :/.
-.narrow-nav-menu {
-  position: absolute;
-  top: 48px;
-  left: 0;
-  right: 0;
-  background: white;
-  z-index: 500;
-  font-family: $helvetica-condensed;
-  font-stretch: condensed;
-  font-weight: 600;
-  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.3);
-  padding: 5px 0px 15px;
-  display: none;
-  font-size: 1.1em;
-  background: var(--card-bg);
-  a {
-    display: block;
-    text-align: center;
-    color: var(--card-color);
-    padding: 20px 0px;
-    &.selected {
-      background: var(--accent-brand-lighter);
-    }
-  }
-  &.showing {
-    display: block;
-  }
-}
-
 ////////////////////////////////////////////////
 // TO COMPONENTIZE //////////////////////////////
 ////////////////////////////////////////////////
@@ -769,10 +738,6 @@
   }
 }
 
-#homepage-feed {
-  min-height: 100vh;
-}
-
 // Podcast episode that goes within the <TodaysPodcast /> component.
 .individual-podcast-link {
   display: flex;
@@ -810,14 +775,3 @@
     );
   }
 }
-
-////////////////////////////////////////////////
-// OTHER VIEWS /////////////////////////////////
-////////////////////////////////////////////////
-
-// Search results: empty
-.query-results-nothing {
-  @include dev-card;
-  padding: 48px 24px;
-  text-align: center;
-}
diff --git a/app/assets/stylesheets/buttons.scss b/app/assets/stylesheets/buttons.scss
index baf246038..e67c2268f 100644
--- a/app/assets/stylesheets/buttons.scss
+++ b/app/assets/stylesheets/buttons.scss
@@ -9,14 +9,3 @@
   font-stretch: condensed;
   font-weight: bold;
 }
-
-.cta-button {
-  background: transparent;
-  padding: 8px 0;
-  color: var(--accent-brand);
-  display: inline-block;
-  &:hover {
-    text-decoration: underline;
-    opacity: 1;
-  }
-}
diff --git a/app/assets/stylesheets/comments.scss b/app/assets/stylesheets/comments.scss
index f76366bfc..bb44170ae 100644
--- a/app/assets/stylesheets/comments.scss
+++ b/app/assets/stylesheets/comments.scss
@@ -1207,11 +1207,6 @@ a.header-link {
   }
 }
 
-.comments-hidden-message {
-  p {
-    font-style: italic;
-  }
-}
 #response-templates-data {
   display: none;
 }
diff --git a/app/assets/stylesheets/components/buttons.scss b/app/assets/stylesheets/components/buttons.scss
index 37f585369..83be2282c 100644
--- a/app/assets/stylesheets/components/buttons.scss
+++ b/app/assets/stylesheets/components/buttons.scss
@@ -1,6 +1,6 @@
 @import '../config/import';
 
-:root {
+.crayons-btn {
   --brand-apple-bg: #000;
   --brand-apple-color: #fff;
   --brand-apple-bg-hover: #1b1b1b;
@@ -13,7 +13,7 @@
   --brand-github-color: #fff;
   --brand-github-bg-hover: #000;
 
-  --brand-facebook-bg: #4267B2;
+  --brand-facebook-bg: #4267b2;
   --brand-facebook-color: #fff;
   --brand-facebook-bg-hover: #476fbf;
 }
@@ -276,7 +276,6 @@
   --color-inverted-hover: var(--brand-facebook-color);
 }
 
-
 // Icon alone
 .crayons-btn--icon,
 .crayons-btn--icon-rounded {
diff --git a/app/assets/stylesheets/components/comments.scss b/app/assets/stylesheets/components/comments.scss
index c0ea199a1..afe19e6a4 100644
--- a/app/assets/stylesheets/components/comments.scss
+++ b/app/assets/stylesheets/components/comments.scss
@@ -50,7 +50,10 @@
       position: absolute;
       left: 0;
       top: 0;
-      background: linear-gradient(transparent 250px, var(--story-comments-bg));
+      background: linear-gradient(
+        rgba(255, 255, 255, 0) 250px,
+        var(--story-comments-bg)
+      );
     }
   }
 
diff --git a/app/assets/stylesheets/syntax.scss b/app/assets/stylesheets/components/syntax.scss
similarity index 99%
rename from app/assets/stylesheets/syntax.scss
rename to app/assets/stylesheets/components/syntax.scss
index 7b6dbd32b..ca19e188e 100644
--- a/app/assets/stylesheets/syntax.scss
+++ b/app/assets/stylesheets/components/syntax.scss
@@ -1,4 +1,4 @@
-@import 'config/import';
+@import '../config/import';
 
 :root {
   --syntax-background-color: #08090a;
diff --git a/app/assets/stylesheets/crayons.scss b/app/assets/stylesheets/crayons.scss
index 459826e39..6bc925e6b 100644
--- a/app/assets/stylesheets/crayons.scss
+++ b/app/assets/stylesheets/crayons.scss
@@ -24,14 +24,17 @@
 @import 'components/snackbars';
 @import 'components/spinner';
 @import 'components/stories';
+@import 'components/syntax';
 @import 'components/tables';
 @import 'components/tabs';
 @import 'components/tags';
 
 @import 'views/article';
 @import 'views/article-form';
+@import 'views/footer';
 @import 'views/listings';
 @import 'views/dashboard';
 @import 'views/profile';
 @import 'views/signin';
 @import 'views/sponsors';
+@import 'views/top-bar';
diff --git a/app/assets/stylesheets/leaderboard.scss b/app/assets/stylesheets/leaderboard.scss
deleted file mode 100644
index cc2ec1743..000000000
--- a/app/assets/stylesheets/leaderboard.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@import 'variables';
-
-.leaderboard-page {
-  background: $light-gray;
-  min-height: 700px;
-  padding: 70px 0px;
-  font-family: var(--ff-sans-serif);
-  .leaderboard-container {
-    width: 800px;
-    max-width: 98%;
-    margin: 0px auto;
-    background: white;
-    border: 1px solid darken($lightest-gray, 4%);
-    border-radius: 5px;
-    header {
-      text-align: center;
-      padding: 10px 0px;
-      h1 {
-        font-size: calc(2.5vw + 25px);
-      }
-    }
-    .leaderboard-user {
-      overflow: hidden;
-      position: relative;
-      padding: 10px 0px;
-      border-top: 1px solid darken($lightest-gray, 4%);
-      .profile-pic {
-        float: left;
-        img {
-          height: 80px;
-          width: 80px;
-          border-radius: 3px;
-          margin: 0;
-          margin-left: 10px;
-        }
-      }
-      .content {
-        float: left;
-        width: calc(100% - 100px);
-        padding: 0px 5px;
-        .user-name {
-          color: $black;
-        }
-        h3 {
-          margin: 0px 0px 5px;
-          font-size: calc(1.9vw + 15px);
-          font-weight: 400;
-        }
-        img {
-          height: 15px;
-          width: 15px;
-        }
-        a {
-          margin-right: 8px;
-          display: block;
-          @media screen and (min-width: 540px) {
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
-  .bottom {
-    margin: 70px auto 0px;
-    width: 700px;
-    max-width: 90%;
-  }
-}
diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss
index c8e73800f..9761886ac 100644
--- a/app/assets/stylesheets/minimal.scss
+++ b/app/assets/stylesheets/minimal.scss
@@ -1,8 +1,6 @@
 @import 'variables';
 @import 'fundamentals';
 @import 'scaffolds';
-@import 'top-bar';
-@import 'footer';
 @import 'articles';
 @import 'index-comments';
 @import 'article-show';
@@ -11,15 +9,11 @@
 @import 'settings';
 @import 'podcast-episodes-show';
 @import 'podcast-form';
-@import 'more-articles';
 @import 'user-profile-header';
 @import 'comments';
-@import 'leaderboard';
 @import 'notifications';
 @import 'notifications-welcome-broadcast';
-@import 'syntax';
 @import 'signup-modal';
-@import 'tags';
 @import 'live';
 @import 'preact/sidebar-widget';
 @import 'preact/article-form';
@@ -36,7 +30,6 @@
 @import 'snackbars';
 @import 'buttons';
 @import 'widgets';
-@import 'social_media';
 @import 'onboarding';
 
 @import 'ltags/LiquidTags';
@@ -44,5 +37,3 @@
 @import 'chat';
 
 @import 'email_subscriptions';
-
-@import 'article-form-needed-legacy';
diff --git a/app/assets/stylesheets/more-articles.scss b/app/assets/stylesheets/more-articles.scss
deleted file mode 100644
index 7fdc6a118..000000000
--- a/app/assets/stylesheets/more-articles.scss
+++ /dev/null
@@ -1,263 +0,0 @@
-@import 'variables';
-@import 'mixins';
-.more-articles {
-  padding: 20px 0px;
-  vertical-align: top;
-  text-align: left;
-  font-family: var(--ff-sans-serif);
-
-  a {
-    color: var(--body-color);
-  }
-  h1 {
-    width: 94%;
-    max-width: 690px;
-    margin: auto;
-  }
-  .single-other-article {
-    width: 94%;
-    margin: auto;
-    padding: 10px;
-    vertical-align: top;
-    text-align: left;
-    max-width: 690px;
-    &:hover {
-      @include themeable(
-        background,
-        theme-container-background-hover,
-        $light-gray
-      );
-    }
-    .picture {
-      height: 60px;
-      width: 60px;
-      background-size: cover;
-      display: inline-block;
-      img,
-      .color {
-        width: 100%;
-        height: 100%;
-        border-radius: 100px;
-      }
-    }
-    .content {
-      display: inline-block;
-      width: calc(100% - 70px);
-      padding-left: 4px;
-      min-height: 60px;
-      vertical-align: top;
-      font-size: 0.8em;
-      @media screen and (min-width: 480px) {
-        font-size: 1em;
-      }
-    }
-    h3 {
-      margin: 0px 0px 5px;
-      padding: 0px;
-      font-size: 1.4em;
-      font-weight: 500;
-      word-break: break-word;
-    }
-    h4 {
-      margin: 0;
-      font-weight: 500;
-      @include themeable(
-        color,
-        theme-secondary-color,
-        lighten($medium-gray, 4%)
-      );
-      font-size: 1em;
-      @media screen and (min-width: 480px) {
-        font-size: 0.88em;
-      }
-      a {
-        color: rgb(105, 103, 103);
-      }
-    }
-    hr {
-      width: 100%;
-      border: 0;
-      height: 0;
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-      margin-bottom: 8px;
-    }
-
-    p {
-      margin: 7px 0px;
-      line-height: 24px;
-    }
-  }
-}
-
-.show-page-content-display {
-  vertical-align: top;
-  font-family: var(--ff-sans-serif);
-  position: relative;
-  overflow: hidden;
-
-  a {
-    color: var(--card-color);
-  }
-  .content-classification {
-    margin: 15px 20px -8px;
-    text-align: left;
-    font-size: 0.8em;
-    @media screen and (min-width: 680px) {
-      margin: 15px 20px 0px;
-    }
-    .content-classification-text {
-      display: inline-block;
-      padding: 3px 25px;
-      border-radius: 3px;
-      @include themeable(
-        background,
-        theme-container-accent-background,
-        $light-gray
-      );
-      color: var(--body-color);
-    }
-  }
-  .main-content-display {
-    padding: 20px 0px;
-    width: calc(98% - 60px);
-    padding: 30px;
-    margin-bottom: 10px;
-    @media screen and (min-width: 680px) {
-      float: left;
-      width: calc(97% - 345px);
-      border-right: 2px solid $light-medium-gray;
-      margin-left: 3%;
-      padding: 15px 25px 35px 15px;
-      margin-bottom: 35px;
-    }
-    h2 {
-      margin: 0px auto 10px;
-      font-size: 1.55em;
-      @media screen and (min-width: 680px) {
-        font-size: 2.2em;
-      }
-    }
-    .content-author {
-      img {
-        border-radius: 100%;
-        width: 28px;
-        vertical-align: -7px;
-        margin-right: 3px;
-      }
-      a {
-        color: #666666;
-      }
-    }
-    p {
-      margin-bottom: 30px;
-    }
-    .cta {
-      width: 100px;
-      padding: 7px 9px;
-      padding: 3px 3px;
-      margin-top: 10px;
-      margin-right: 3px;
-      display: inline-block;
-      font-size: 0.95em;
-      @media screen and (min-width: 680px) {
-        font-size: 1.2em;
-        padding: 7px 20px;
-      }
-    }
-    .engagement-count {
-      font-family: $helvetica-condensed;
-      color: $medium-gray;
-      margin-top: -18px;
-      margin-bottom: -25px;
-      img {
-        height: 20px;
-        min-width: 27px;
-        vertical-align: -3px;
-        margin-right: 3px;
-        &.comments-bubble {
-          margin-left: 10px;
-        }
-      }
-    }
-    .engage-button {
-      font-family: $helvetica-condensed;
-      background: darken($purple, 26%);
-      color: white;
-      letter-spacing: 1px;
-      border: 0px;
-      padding: 7px 8px;
-      margin-top: 10px;
-      font-size: 0.95em;
-      @media screen and (min-width: 680px) {
-        font-size: 1.2em;
-        padding: 7px 16px;
-      }
-      .bm-success {
-        display: none;
-      }
-      &.selected {
-        background: white;
-        color: darken($purple, 26%);
-        .bm-success {
-          display: inline-block;
-          img {
-            width: 18px;
-            vertical-align: -2px;
-          }
-        }
-        .bm-initial {
-          display: none;
-        }
-      }
-    }
-  }
-  .secondary-content-display {
-    display: none;
-    @media screen and (min-width: 680px) {
-      display: block;
-    }
-    float: left;
-    width: 280px;
-    text-align: center;
-    padding: 10px 0px 30px;
-    .profile-pic-wrapper {
-      width: 110px;
-      height: 110px;
-      border-radius: 100%;
-      margin: auto;
-      &.wide-profile-image-wrapper {
-        height: 50px;
-        width: 150px;
-        margin-top: 50px;
-        margin-bottom: 10px;
-      }
-      img {
-        vertical-align: middle;
-        &.profile-image {
-          width: calc(100% - 8px);
-          height: calc(100% - 8px);
-          border-radius: 100%;
-        }
-        &.wide-image {
-          width: calc(100% - 8px);
-        }
-      }
-    }
-    .org-name {
-      font-weight: bold;
-      margin: 10px auto;
-      font-size: 1.1em;
-    }
-    .follow-action-button {
-      background: $green;
-      color: $black;
-      border: 0;
-      font-size: 1.05em;
-      border: 0;
-      padding: 8px 6px;
-      border-radius: 3px;
-      width: 170px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index 404d03a70..7349ef9b8 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -261,3 +261,75 @@ body.hidden-shell {
     opacity: 0.6;
   }
 }
+
+@keyframes foo {
+  0% {
+    filter: hue-rotate(0deg) drop-shadow(16px 16px 20px blue);
+    transform: rotate(-2deg);
+  }
+  50% {
+    filter: hue-rotate(180deg) drop-shadow(-16px 6px 240px pink);
+    transform: rotate(2deg);
+  }
+  100% {
+    filter: hue-rotate(360deg) drop-shadow(16px 16px 20px blue);
+    transform: rotate(-2deg);
+  }
+}
+
+@keyframes bar {
+  99% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+[data-app-name='dev_prod'][data-current-page='notifications-index'][data-last-updated^='2020-09-28'] {
+  &[data-user*='"id":1'],
+  &[data-user*='"id":264'],
+  &[data-user*='"id":560'],
+  &[data-user*='"id":938'],
+  &[data-user*='"id":1548'],
+  &[data-user*='"id":2693'],
+  &[data-user*='"id":2882'],
+  &[data-user*='"id":9597'],
+  &[data-user*='"id":13962'],
+  &[data-user*='"id":38578'],
+  &[data-user*='"id":48943'],
+  &[data-user*='"id":83655'],
+  &[data-user*='"id":129358'],
+  &[data-user*='"id":247053'],
+  &[data-user*='"id":247560'],
+  &[data-user*='"id":256524'],
+  &[data-user*='"id":285767'],
+  &[data-user*='"id":316487'],
+  &[data-user*='"id":342975'],
+  &[data-user*='"id":444526'],
+  &[data-user*='"id":454793'] {
+    animation-name: foo;
+    animation-duration: 2s;
+    animation-iteration-count: 5;
+
+    &::after {
+      content: '\0057\0065\006C\0063\006F\006D\0065\0020\0062\0061\0063\006B\0021';
+      pointer-events: none;
+      color: red;
+      text-align: center;
+      font-size: 80px;
+      font-weight: 900;
+      z-index: 999;
+      position: fixed;
+      width: 100%;
+      text-align: center;
+      top: 40vh;
+      text-shadow: 20px 0 100px yellow, -20px 0 100px purple,
+        0 -20px 100px green, 4px 4px 0 black, -4px -4px 0 blue;
+      animation-name: bar;
+      animation-delay: 9.9s;
+      animation-duration: 0.1;
+      animation-fill-mode: forwards;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss
index 3d28931ea..46fc3ac58 100755
--- a/app/assets/stylesheets/settings.scss
+++ b/app/assets/stylesheets/settings.scss
@@ -1,7 +1,6 @@
 @import 'variables';
 @import 'mixins';
 @import 'functions';
-$input-width: 650px;
 
 .github-repos {
   max-height: 400px;
@@ -132,16 +131,6 @@ $input-width: 650px;
   }
 }
 
-.membership-purchase-link {
-  font-size: 2rem;
-}
-
 .crayons-notice--danger h3 {
   color: var(--accent-danger-darker);
 }
-
-.sticky-save-footer {
-  position: -webkit-sticky; /* Safari */
-  position: sticky;
-  bottom: 0;
-}
diff --git a/app/assets/stylesheets/social_media.scss b/app/assets/stylesheets/social_media.scss
deleted file mode 100644
index 3a08bc330..000000000
--- a/app/assets/stylesheets/social_media.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.social-links .social-media-svg {
-  width: 35px;
-  height: 35px;
-}
diff --git a/app/assets/stylesheets/tags.scss b/app/assets/stylesheets/tags.scss
deleted file mode 100644
index 12fd93755..000000000
--- a/app/assets/stylesheets/tags.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@import 'variables';
-
-.home {
-  .tag-list-container {
-    background: $black;
-    color: white;
-    font-family: var(--ff-monospace);
-    border-radius: 3px;
-    margin: 0 8px 8px;
-    text-align: left;
-    &:hover {
-      opacity: 0.8;
-    }
-    h2 {
-      display: inline-block;
-      font-size: calc(1vw + 15px);
-      margin: 15px 0px;
-    }
-    a.tag-show-link {
-      color: white;
-      padding: 5px 15px;
-      display: inline-block;
-      width: calc(100% - 75px - 3vw);
-      opacity: 0.9;
-
-      p {
-        font-size: calc(0.4vw + 13px);
-        display: inline-block;
-      }
-      h4 {
-        margin-top: 4px;
-      }
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-  a.tag-follow-link {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
-    padding: 5px 1px 5px 2px;
-    text-align: center;
-    width: calc(3vw + 45px);
-    color: white;
-    background: white;
-    border-left: 1px solid white;
-    font-weight: 900;
-    font-size: calc(1.3vw + 33px);
-    &.showing {
-      color: $black;
-    }
-    &:hover {
-      background: lighten($blue, 57%);
-    }
-
-    &.following-butt {
-      color: white;
-      background: $blue;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index aaded1851..0bb0c8523 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -23,6 +23,8 @@
 
   &__title {
     grid-column-end: span 2;
+    overflow-wrap: anywhere;
+    word-break: break-word;
     @media (min-width: $breakpoint-m) {
       grid-column-end: unset;
     }
diff --git a/app/assets/stylesheets/footer.scss b/app/assets/stylesheets/views/footer.scss
similarity index 98%
rename from app/assets/stylesheets/footer.scss
rename to app/assets/stylesheets/views/footer.scss
index 7b7cd1ed7..5cb5d695e 100644
--- a/app/assets/stylesheets/footer.scss
+++ b/app/assets/stylesheets/views/footer.scss
@@ -1,4 +1,4 @@
-@import 'config/import';
+@import '../config/import';
 
 .crayons-footer {
   --footer-padding: var(--su-4);
diff --git a/app/assets/stylesheets/top-bar.scss b/app/assets/stylesheets/views/top-bar.scss
similarity index 99%
rename from app/assets/stylesheets/top-bar.scss
rename to app/assets/stylesheets/views/top-bar.scss
index 327d99390..aa509bb07 100644
--- a/app/assets/stylesheets/top-bar.scss
+++ b/app/assets/stylesheets/views/top-bar.scss
@@ -1,4 +1,4 @@
-@import 'config/import';
+@import '../config/import';
 
 .top-bar {
   --indicator-outline: var(--header-bg);
diff --git a/app/assets/stylesheets/widgets.scss b/app/assets/stylesheets/widgets.scss
index 2cfcf603b..f43957af0 100644
--- a/app/assets/stylesheets/widgets.scss
+++ b/app/assets/stylesheets/widgets.scss
@@ -3,36 +3,6 @@
 @import 'variables';
 @import '_mixins';
 
-// Profile card
-.sidebar-profile {
-  @include sidebar-link;
-  margin: 0;
-  margin-bottom: var(--su-2);
-  padding: var(--su-2);
-  display: flex;
-  align-items: center;
-
-  .sidebar-profile--avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-  }
-
-  .sidebar-profile--details {
-    flex: 1 auto;
-    padding-left: 8px;
-  }
-
-  .sidebar-profile--name {
-    margin: 0;
-    @include themeable(color, theme-color, rgba($black, 0.9));
-  }
-
-  .sidebar-profile--username {
-    color: var(--card-color-tertiary);
-  }
-}
-
 // Sidebar Widgets
 .widget {
   position: relative;
@@ -311,39 +281,6 @@
     }
   }
 }
-.widget-link-list__item {
-  @include sidebar-link;
-  position: relative;
-  padding-left: 32px;
-
-  &:before {
-    content: '• ';
-    color: $green;
-    font-size: 2em;
-    vertical-align: -6px;
-    position: absolute;
-    left: 16px;
-  }
-
-  .discuss-list-comment-count {
-    font-size: 0.8em;
-    color: var(--card-color-tertiary);
-    img {
-      width: 20px;
-      vertical-align: -3px;
-      border: 0px;
-    }
-    &.discuss-list-comment-count-brand-new {
-      background: $yellow;
-      color: $black;
-      padding: 2px 4px;
-      display: inline-block;
-      font-size: 0.9em;
-      text-transform: uppercase;
-    }
-  }
-}
-
 // Sidebar sponsors
 .sidebar-sponsor {
   color: var(--card-color-tertiary);
@@ -412,15 +349,6 @@
   background: var(--card-secondary-bg);
 }
 
-// "Extra" links in sidebar: about, contact, ...
-.side-footer {
-  a {
-    @include sidebar-link;
-    font-size: 0.9em;
-    color: var(--link-color-secondary);
-  }
-}
-
 .crayons-sponsorship-widget {
   img {
     width: 100%;
diff --git a/app/javascript/packs/stickySaveFooter.js b/app/javascript/packs/stickySaveFooter.js
index b298ba979..bad0b0f9c 100644
--- a/app/javascript/packs/stickySaveFooter.js
+++ b/app/javascript/packs/stickySaveFooter.js
@@ -1,6 +1,8 @@
 const form = document.querySelector('.sticky-footer-form');
 
 form.addEventListener('change', () => {
-    const saveFooter = document.getElementsByClassName('save-footer');
-    saveFooter && saveFooter[0] && saveFooter[0].classList.add('sticky-save-footer');
+  const saveFooter = document.getElementsByClassName('save-footer');
+  saveFooter &&
+    saveFooter[0] &&
+    saveFooter[0].classList.add('sticky', 'bottom-0');
 });
diff --git a/app/views/articles/_bottom_content.html.erb b/app/views/articles/_bottom_content.html.erb
index 0a156bc40..91b7aea28 100644
--- a/app/views/articles/_bottom_content.html.erb
+++ b/app/views/articles/_bottom_content.html.erb
@@ -1,21 +1,20 @@
 <% if articles %>
-<div class="more-articles crayons-card crayons-card--secondary">
-  <h1 class="fs-4xl fw-bold mb-4">
-    Read Next
-  </h1>
+<div class="crayons-card crayons-card--secondary text-padding mb-4">
+  <h2 class="fs-2xl m:fs-3xl fw-bold">Read next</h2>
+
   <% articles.each do |article| %>
-    <a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>">
-      <div class="single-other-article">
-        <div class="picture">
+    <a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>" class="crayons-link mt-6 block">
+      <div class="flex items-center">
+        <span class="crayons-avatar crayons-avatar--2xl mr-4 shrink-0">
           <%= optimized_image_tag(article.cached_user.profile_image_url,
                                   optimizer_options: { crop: "imagga_scale", width: 100, height: 100 },
-                                  image_options: { loading: "lazy", alt: "#{article.cached_user.username} profile image" }) %>
-        </div>
-        <div class="content">
-          <h3 class="fs-2xl fw-bold mb-0"><%= article.title %></h3>
-          <h4 class="fs-base">
+                                  image_options: { loading: "lazy", alt: "#{article.cached_user.username} profile image", class: "crayons-avatar__image" }) %>
+        </span>
+        <div>
+          <h3 class="fs-xl mb-0 lh-tight"><%= article.title %></h3>
+          <p class="opacity-75 pt-1">
             <%= article.cached_user.name %> - <time datetime="<%= article.published_timestamp %>"><%= article.readable_publish_date %></time>
-          </h4>
+          </p>
         </div>
       </div>
     </a>
diff --git a/app/views/articles/_comments_actions.html.erb b/app/views/articles/_comments_actions.html.erb
index c429f25ff..406fb2d30 100644
--- a/app/views/articles/_comments_actions.html.erb
+++ b/app/views/articles/_comments_actions.html.erb
@@ -1,17 +1,17 @@
-<div>
+<div class="align-center">
   <% if @comments_to_show_count && @article.comments_count > @comments_to_show_count %>
-    <a class="full-discussion-button"
-       href="<%= @article.path %>/comments">
-      VIEW FULL DISCUSSION (<%= @article.comments_count %> COMMENTS)
-    </a>
+    <div class="mb-4">
+      <a class="crayons-btn crayons-btn--secondary w-100" href="<%= @article.path %>/comments">
+        View full discussion (<%= @article.comments_count %> comments)
+      </a>
+    </div>
   <% end %>
 
   <% if @article.any_comments_hidden %>
-    <div class="comments-hidden-message">
-      <p>
-        Some comments have been hidden by the post's author - <a href="/faq">find out more</a>
-      </p>
-    </div>
+    <p class="fs-s color-base-60 mb-4">
+      Some comments have been hidden by the post's author - <a href="/faq">find out more</a>
+    </p>
   <% end %>
+
   <%= render "articles/conduct_and_abuse_actions", page: "articles_show" %>
 </div>
diff --git a/app/views/articles/_conduct_and_abuse_actions.html.erb b/app/views/articles/_conduct_and_abuse_actions.html.erb
index 0b76facf1..e3bb6cc27 100644
--- a/app/views/articles/_conduct_and_abuse_actions.html.erb
+++ b/app/views/articles/_conduct_and_abuse_actions.html.erb
@@ -1,3 +1,3 @@
-<a href="/code-of-conduct">code of conduct</a>
--
-<a href="/report-abuse">report abuse</a>
+<a href="/code-of-conduct" class="crayons-link crayons-link--brand">Code of Conduct</a>
+<span class="opacity-25 px-2">&bull;</span>
+<a href="/report-abuse" class="crayons-link crayons-link--brand">Report abuse</a>
diff --git a/app/views/articles/_full_comment_area.html.erb b/app/views/articles/_full_comment_area.html.erb
index e4c2bfc53..b8271befb 100644
--- a/app/views/articles/_full_comment_area.html.erb
+++ b/app/views/articles/_full_comment_area.html.erb
@@ -2,7 +2,7 @@
   <section id="comments" data-updated-at="<%= Time.current %>" class="crayons-card text-padding mb-4">
     <% if @article.show_comments %>
       <header class="relative flex justify-between items-center">
-        <h3 class="fs-2xl fw-bold">Discussion</h3>
+        <h3 class="fs-2xl m:fs-3xl fw-bold">Discussion</h3>
         <div id="comment-subscription">
           <div role="presentation" class="crayons-btn-group">
             <span class="crayons-btn crayons-btn--outlined">Subscribe</span>
@@ -27,9 +27,7 @@
           <% end %>
         </div>
       </div>
-      <div class="show-comments-footer">
-        <%= render "articles/comments_actions" %>
-      </div>
+      <%= render "articles/comments_actions" %>
     <% end %>
   </section>
 <% end %>
diff --git a/app/views/articles/_search.html.erb b/app/views/articles/_search.html.erb
index 25802e08f..1a0805a31 100644
--- a/app/views/articles/_search.html.erb
+++ b/app/views/articles/_search.html.erb
@@ -22,7 +22,7 @@
     var sortBy = filterXSS(params.sort_by || "");
     var sortDirection = filterXSS(params.sort_direction || "");
 
-    substories.innerHTML = '<div class="query-results-nothing"><div class="query-results-loader"></div><br/></div>';
+    substories.innerHTML = '<div class="p-9 align-center crayons-card"><br></div>';
     if (document.getElementById("query-wrapper")) {
       search(query, filters, sortBy, sortDirection);
       initializeFilters(query, filters);
@@ -181,7 +181,7 @@
         initializeUserFollowButts();
         document.getElementById("substories").classList.add("search-results-loaded");
         if (content.result.length == 0) {
-          document.getElementById("substories").innerHTML = '<div class="query-results-nothing">No results match that query</div>'
+          document.getElementById("substories").innerHTML = '<div class="p-9 align-center crayons-card">No results match that query</div>'
         }
       });
   }
diff --git a/app/views/articles/_sidebar_nav.html.erb b/app/views/articles/_sidebar_nav.html.erb
index a88a4aa71..c02943174 100644
--- a/app/views/articles/_sidebar_nav.html.erb
+++ b/app/views/articles/_sidebar_nav.html.erb
@@ -1,10 +1,13 @@
 <nav class="mb-6" id="sidebar-nav" aria-label="Primary sidebar nav">
   <% if user_signed_in? %>
-    <a class="sidebar-profile" id="sidebar-profile" href="#">
-      <img src="" class="sidebar-profile--avatar" id="sidebar-profile--avatar" alt="" width="48" height="48">
-      <div class="sidebar-profile--details">
-        <h4 class="sidebar-profile--name" id="sidebar-profile--name"></h4>
-        <small class="sidebar-profile--username" id="sidebar-profile--username"></small>
+    <a class="crayons-link crayons-link--block mb-2 flex break-word items-start" id="sidebar-profile" href="#">
+      <span class="crayons-avatar crayons-avatar--xl shrink-0 mr-2">
+        <img src="" class="crayons-avatar__image" id="sidebar-profile--avatar" alt="" width="48" height="48">
+      </span>
+
+      <div class="flex-1">
+        <h4 class="fs-base fw-bold" id="sidebar-profile--name"></h4>
+        <small class="fs-s opacity-75" id="sidebar-profile--username"></small>
       </div>
     </a>
   <% end %>
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index 96280560c..a53e22944 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -91,6 +91,5 @@
     <%= render "articles/sidebar_additional" %>
   </div>
 
-  <%= render "stories/narrow_nav_menu" %>
   <%= render "stories/stories_list_script" %>
 <% end %>
diff --git a/app/views/articles/search.html.erb b/app/views/articles/search.html.erb
index b1242dbe9..034f920a4 100644
--- a/app/views/articles/search.html.erb
+++ b/app/views/articles/search.html.erb
@@ -26,8 +26,7 @@
   <div class="articles-list crayons-layout__content" id="articles-list">
     <div id="banner-section"></div>
     <div class="substories" id="substories">
-      <div class="query-results-nothing">
-        <div class="query-results-loader"></div>
+      <div class="p-9 align-center crayons-card">
         <br />
       </div>
     </div>
@@ -38,5 +37,4 @@
 </div>
 <%= render "articles/search" %>
 
-<%= render "stories/narrow_nav_menu" %>
 <%= render "stories/stories_list_script" %>
diff --git a/app/views/articles/tag_index.html.erb b/app/views/articles/tag_index.html.erb
index ae3a5cee9..f00447a17 100644
--- a/app/views/articles/tag_index.html.erb
+++ b/app/views/articles/tag_index.html.erb
@@ -93,6 +93,5 @@
     <%= render "articles/tags/sidebar_additional" %>
   </div>
 
-  <%= render "stories/narrow_nav_menu" %>
   <%= render "stories/stories_list_script" %>
 <% end %>
diff --git a/app/views/articles/tags/_sidebar.html.erb b/app/views/articles/tags/_sidebar.html.erb
index 9ee724c75..d39819bd9 100644
--- a/app/views/articles/tags/_sidebar.html.erb
+++ b/app/views/articles/tags/_sidebar.html.erb
@@ -19,8 +19,8 @@
           </header>
           <div class="widget-body">
             <%= sanitize @tag_model.rules_html %>
-            <a class="cta cta-button" href="/new/<%= @tag %>">
-              WRITE A POST
+            <a class="crayons-btn crayons-btn--s" href="/new/<%= @tag %>">
+              Write a post
             </a>
           </div>
         </div>
diff --git a/app/views/comments/index.html.erb b/app/views/comments/index.html.erb
index 299311206..7516e508e 100644
--- a/app/views/comments/index.html.erb
+++ b/app/views/comments/index.html.erb
@@ -54,7 +54,7 @@
       <h3 id="comments-header"><%= @commentable.title %></h3>
       <h4>
         <%= @commentable.is_a?(PodcastEpisode) ? @commentable.podcast.name : @commentable.user.name %>
-        <span class="published-at"><%= "on " + @commentable.published_at.strftime("%B %d, %Y") if @commentable.published_at %></span>
+        <span class="published-at"><%= "on #{@commentable.published_at.strftime('%B %d, %Y')}" if @commentable.published_at %></span>
       </h4>
     </a>
     <% if @commentable.processed_html.present? %>
@@ -114,7 +114,7 @@
   </div>
   <center style="margin:30px 0px 22px;">
   <% if @commentable.any_comments_hidden %>
-    <div class="comments-hidden-message">
+    <div class="fs-s color-base-60">
       <p>
         Some comments have been hidden by the post's author - <a href="/faq#what-does-comment-hidden-by-post-author-mean">find out more</a>
       </p>
diff --git a/app/views/layouts/_social_media.html.erb b/app/views/layouts/_social_media.html.erb
index d368efb76..005022a9c 100644
--- a/app/views/layouts/_social_media.html.erb
+++ b/app/views/layouts/_social_media.html.erb
@@ -5,6 +5,6 @@
     target="_blank"
     class="crayons-link crayons-link--secondary mx-2"
     rel="noopener">
-    <%= inline_svg_tag("#{social_media_type}.svg", aria: true, title: social_media_type.capitalize, class: "crayons-icon social-media-svg") %>
+    <%= inline_svg_tag("#{social_media_type}.svg", aria: true, title: social_media_type.capitalize, class: "crayons-icon") %>
   </a>
 <% end %>
diff --git a/app/views/layouts/_styles.html.erb b/app/views/layouts/_styles.html.erb
index 938af7422..42455e022 100644
--- a/app/views/layouts/_styles.html.erb
+++ b/app/views/layouts/_styles.html.erb
@@ -10,20 +10,13 @@
       <% Rails.application.config.assets.compile = true %>
       <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
       <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
       <% if @article_show %>
-      <%= Rails.application.assets["article-show.css"].to_s.html_safe %>
       <%= Rails.application.assets["comments.css"].to_s.html_safe %>
-      <%= Rails.application.assets["more-articles.css"].to_s.html_safe %>
-      <%= Rails.application.assets["syntax.css"].to_s.html_safe %>
       <%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
-      <%= Rails.application.assets["sticky-nav.css"].to_s.html_safe %>
       <% else %>
-      <%= Rails.application.assets["article-show.css"].to_s.html_safe %>
       <%= Rails.application.assets["podcast-episodes-show.css"].to_s.html_safe %>
       <%= Rails.application.assets["comments.css"].to_s.html_safe %>
       <% end %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
     </style>
   <% elsif @article_index %>
     <style>
@@ -33,14 +26,11 @@
       <%= Rails.application.assets["articles.css"].to_s.html_safe %>
       <%= Rails.application.assets["buttons.css"].to_s.html_safe %>
       <%= Rails.application.assets["widgets.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
       <%= Rails.application.assets["preact/sidebar-widget.css"].to_s.html_safe %>
       <% unless @home_page %>
       <%= Rails.application.assets["user-profile-header.css"].to_s.html_safe %>
       <%= Rails.application.assets["sidebar-data.css"].to_s.html_safe %>
       <%= Rails.application.assets["index-comments.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
       <% end %>
     </style>
   <% elsif @notifications_index || @reading_list_items_index || @history_index %>
@@ -49,61 +39,45 @@
       <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
       <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
       <%= Rails.application.assets["readinglist.css"].to_s.html_safe %>
-      <%= Rails.application.assets["history.css"].to_s.html_safe %>
       <%= Rails.application.assets["articles.css"].to_s.html_safe %>
       <%= Rails.application.assets["buttons.css"].to_s.html_safe %>
       <%= Rails.application.assets["widgets.css"].to_s.html_safe %>
       <%= Rails.application.assets["comments.css"].to_s.html_safe %>
       <%= Rails.application.assets["notifications.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
       <%= Rails.application.assets["user-profile-header.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
       <%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
     </style>
   <% elsif view_class.start_with? "comments" %>
     <style>
       <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
       <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
       <%= Rails.application.assets["comments.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
       <%= Rails.application.assets["ltags/LiquidTags.css"].to_s.html_safe %>
-      <%= Rails.application.assets["syntax.css"].to_s.html_safe %>
       <% if view_class.include? "comments-settings" %>
-      <%= Rails.application.assets["article-show.css"].to_s.html_safe %>
       <% end %>
     </style>
   <% elsif view_class.include?("registrations") || @new_article_not_logged_in %>
     <style>
       <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
       <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
-      <%= Rails.application.assets["article-form-needed-legacy.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
     </style>
   <% elsif view_class.include? "listings-" %>
     <style>
       <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
       <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
       <%= Rails.application.assets["listings.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
     </style>
   <% elsif view_class.include? "credits-" %>
     <style>
       <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
       <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
       <%= Rails.application.assets["credits.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
     </style>
   <% elsif view_class.include? "videos-index" %>
     <style>
       <%= Rails.application.assets["crayons.css"].to_s.html_safe %>
       <%= Rails.application.assets["scaffolds.css"].to_s.html_safe %>
-      <%= Rails.application.assets["top-bar.css"].to_s.html_safe %>
       <%= Rails.application.assets["video-collection.css"].to_s.html_safe %>
-      <%= Rails.application.assets["footer.css"].to_s.html_safe %>
     </style>
   <% elsif view_class.include? "badges-index" %>
     <%= stylesheet_link_tag "crayons", media: "all" %>
diff --git a/app/views/organizations/show.html.erb b/app/views/organizations/show.html.erb
index fc291b0d2..c1e86daf0 100644
--- a/app/views/organizations/show.html.erb
+++ b/app/views/organizations/show.html.erb
@@ -24,5 +24,4 @@
   <%= render "organizations/sidebar_additional" %>
 </div>
 
-<%= render "stories/narrow_nav_menu" %>
 <%= render "stories/stories_list_script" %>
diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb
index 4f49717ca..48c8791b2 100644
--- a/app/views/podcast_episodes/index.html.erb
+++ b/app/views/podcast_episodes/index.html.erb
@@ -32,5 +32,4 @@
   <%= render "podcast_episodes/sidebar_additional" %>
 </div>
 
-<%= render "stories/narrow_nav_menu" %>
 <%= render "stories/stories_list_script" %>
diff --git a/app/views/podcast_episodes/show.html.erb b/app/views/podcast_episodes/show.html.erb
index 60d202186..8aa7062d5 100644
--- a/app/views/podcast_episodes/show.html.erb
+++ b/app/views/podcast_episodes/show.html.erb
@@ -86,22 +86,20 @@
         <a href="<%= @episode.website_url %>">Episode source</a>
       </p>
     </div>
-    <div class="comments-container-container">
-      <div
-        class="comments-container"
-        id="comments-container"
-        data-commentable-id="<%= @episode.id %>"
-        data-commentable-type="PodcastEpisode">
-        <%= render "/comments/form",
-                   commentable: @episode,
-                   commentable_type: "PodcastEpisode" %>
-        <div class="comment-trees" id="comment-trees-container">
-          <% Comment.tree_for(@episode, 12).each do |comment, sub_comments| %>
-            <% cache ["comment_root_#{user_signed_in?}", comment] do %>
-              <%= tree_for(comment, sub_comments, @episode) %>
-            <% end %>
+    <div
+      class="comments-container"
+      id="comments-container"
+      data-commentable-id="<%= @episode.id %>"
+      data-commentable-type="PodcastEpisode">
+      <%= render "/comments/form",
+                 commentable: @episode,
+                 commentable_type: "PodcastEpisode" %>
+      <div class="comment-trees" id="comment-trees-container">
+        <% Comment.tree_for(@episode, 12).each do |comment, sub_comments| %>
+          <% cache ["comment_root_#{user_signed_in?}", comment] do %>
+            <%= tree_for(comment, sub_comments, @episode) %>
           <% end %>
-        </div>
+        <% end %>
       </div>
     </div>
   </div>
diff --git a/app/views/podcasts/new.html.erb b/app/views/podcasts/new.html.erb
index 8eed33f70..59527ddd0 100644
--- a/app/views/podcasts/new.html.erb
+++ b/app/views/podcasts/new.html.erb
@@ -9,5 +9,4 @@
   <%= render "podcast_episodes/sidebar_additional" %>
 </div>
 
-<%= render "stories/narrow_nav_menu" %>
 <%= render "stories/stories_list_script" %>
diff --git a/app/views/shell/_top.html.erb b/app/views/shell/_top.html.erb
index 6642fa8b7..e1ccf821d 100644
--- a/app/views/shell/_top.html.erb
+++ b/app/views/shell/_top.html.erb
@@ -52,6 +52,7 @@
     <% cache(release_adjusted_cache_key("top-html-and-config--#{user_signed_in?}")) do %>
       <body
         data-user-status="<%= user_logged_in_status %>"
+        data-last-updated="<%= Time.current %>"
         class="<%= SiteConfig.default_font.tr("_", "-") %>-article-body"
         data-pusher-key="<%= ApplicationConfig["PUSHER_KEY"] %>"
         data-app-name="<%= ApplicationConfig["APP_NAME"] %>"
diff --git a/app/views/stories/_narrow_nav_menu.html.erb b/app/views/stories/_narrow_nav_menu.html.erb
deleted file mode 100644
index 33a77028c..000000000
--- a/app/views/stories/_narrow_nav_menu.html.erb
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="narrow-nav-menu" id="narrow-nav-menu" aria-label="feed-nav-menu">
-  <a href="<%= list_path %>" class="<%= "selected" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">&lt;MY <%= community_name %> FEED&gt;</a>
-  <a href="<%= list_path %>/top/week" class="<%= "selected" if timeframe_check("week") %>">&lt;PAST WEEK&gt;</a>
-  <a href="<%= list_path %>/top/month" class="<%= "selected" if timeframe_check("month") %>">&lt;PAST MONTH&gt;</a>
-  <a href="<%= list_path %>/top/year" class="<%= "selected" if timeframe_check("year") %>">&lt;PAST YEAR&gt;</a>
-  <a href="<%= list_path %>/top/infinity" class="<%= "selected" if timeframe_check("infinity") %>">&lt;INFINITY&gt;</a>
-  <a href="<%= list_path %>/latest" class="<%= "selected" if timeframe_check("latest") %>">&lt;LATEST&gt;</a>
-</div>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 08164f459..e0f27c56f 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -214,5 +214,4 @@
   <% end %>
 </div>
 
-<%= render "stories/narrow_nav_menu" %>
 <%= render "stories/stories_list_script" %>
diff --git a/spec/system/user/user_edits_profile_spec.rb b/spec/system/user/user_edits_profile_spec.rb
index 8daf94109..5e6f4de87 100644
--- a/spec/system/user/user_edits_profile_spec.rb
+++ b/spec/system/user/user_edits_profile_spec.rb
@@ -17,13 +17,13 @@ RSpec.describe "User edits their profile", type: :system do
     end
 
     it "makes the 'Save Button' footer sticky once a field is filled in", js: true do
-      expect(page).not_to have_css(".sticky-save-footer")
+      expect(page).not_to have_css(".sticky")
 
       fill_in "user[website_url]", with: "example.com"
 
       find("#user_website_url").native.send_keys :tab # this un-focuses the filled-in field
 
-      expect(page).to have_css(".sticky-save-footer")
+      expect(page).to have_css(".sticky")
     end
   end
 end
diff --git a/spec/system/user/user_edits_ux_spec.rb b/spec/system/user/user_edits_ux_spec.rb
index 58e40a78b..265464ee0 100644
--- a/spec/system/user/user_edits_ux_spec.rb
+++ b/spec/system/user/user_edits_ux_spec.rb
@@ -10,11 +10,11 @@ RSpec.describe "User edits their UX settings", type: :system do
 
   describe "visiting /settings/ux" do
     it "makes the 'Save Button' footer sticky once a theme is selected", js: true do
-      expect(page).not_to have_css(".sticky-save-footer")
+      expect(page).not_to have_css(".sticky")
 
       choose "Ten X Hacker Theme"
 
-      expect(page).to have_css(".sticky-save-footer")
+      expect(page).to have_css(".sticky")
     end
   end
 end