CSS cleanups (#15198)

* cleanups

* whoops

* ...

* add pseudo snackbar

app/assets/stylesheets/article-show.scss

@@ -39,12 +39,6 @@ article {
   }
 }
 
-.home .container {
-  @media screen and (min-width: $max-width) {
-    margin-left: 16px;
-  }
-}
-
 .container {
   width: 880px;
   max-width: 100%;

app/assets/stylesheets/articles.scss

@@ -8,7 +8,7 @@
 .home {
   position: relative;
   margin: 0 auto;
-  max-width: $max-width;
+  max-width: var(--site-width);
   text-align: left;
 
   @media screen and (max-width: 949px) {
@@ -82,27 +82,9 @@
     @media screen and (min-width: 950px) {
       display: block;
     }
-
-    .search-partner-mention {
-      display: none;
-      text-align: center;
-      margin-top: 15px;
-      width: 98%;
-      img {
-        margin-top: 12px;
-        width: 180px;
-      }
-      &.showing {
-        display: block;
-      }
-    }
   }
 }
 
-.sidebar-tags-browser {
-  max-height: 420px;
-}
-
 .sidebar-navigation-links .crayons-icon svg {
   height: 24px;
   width: 24px;
@@ -317,29 +299,6 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    // Organization Badge
-    .org-headline-filler {
-      @include themeable(
-        background,
-        theme-container-accent-background,
-        darken($light-gray, 6%)
-      );
-      color: var(--card-color);
-      padding: 8px;
-      border-radius: 3px 0 3px 0;
-      font-weight: 600;
-      display: inline-flex;
-      align-items: center;
-      font-size: 0.9em;
-      line-height: 1;
-      img {
-        width: 24px;
-        height: 24px;
-        margin-right: 4px;
-        border-radius: 50%;
-        vertical-align: middle;
-      }
-    }
 
     .small-pic {
       float: left;
@@ -357,18 +316,6 @@
         border-radius: 50%;
       }
     }
-    .tiny-pic {
-      display: inline-block;
-      height: 30px;
-      width: 30px;
-      img {
-        height: 100%;
-        width: 100%;
-        &.round {
-          border-radius: 50%;
-        }
-      }
-    }
     .content {
       float: left;
       width: calc(100% - 72px);
@@ -496,7 +443,6 @@
     background: transparent;
     border: 0;
     -webkit-appearance: none;
-    font-family: $helvetica-condensed;
     color: var(--card-color-tertiary);
     a {
       &:hover {
@@ -548,23 +494,6 @@
           display: inline-block;
         }
       }
-      &.following-butt {
-        background: transparent;
-        color: darken($purple, 33%);
-      }
-    }
-    &.featured-engagement-count {
-      margin-top: -38px;
-      bottom: auto;
-      z-index: 10;
-      &.engage-button {
-        margin-top: -39px;
-      }
-    }
-    .engagement-count-number {
-      min-width: 28px;
-      text-align: left;
-      display: inline-block;
     }
   }
 }

app/assets/stylesheets/components/profile-preview-card.scss

@@ -1,10 +1,10 @@
-$dropdownhoverdelay: 590ms;
-$dropdowntransition: 300ms;
-
 .profile-preview-card {
+  --dropdown-hover-delay: 590ms;
+  --dropdown-transition: 300ms;
+
   &__content.crayons-dropdown {
     transition: border, border-top;
-    transition-duration: $dropdowntransition;
+    transition-duration: var(--dropdown-transition);
     color: var(--base-100);
     padding-top: 0;
     top: 100%;
@@ -15,7 +15,7 @@ $dropdowntransition: 300ms;
 
   &__content.crayons-dropdown:hover {
     display: block;
-    animation: hoverAppear $dropdownhoverdelay;
+    animation: hoverAppear var(--dropdown-hover-delay);
 
     &.showing {
       animation: none;
@@ -24,7 +24,7 @@ $dropdowntransition: 300ms;
 
   &__trigger:hover + .profile-preview-card__content.crayons-dropdown {
     display: block;
-    animation: hoverAppear $dropdownhoverdelay;
+    animation: hoverAppear vaR(--dropdown-hover-delay);
 
     &.showing {
       animation: none;

app/assets/stylesheets/crayons.scss

@@ -26,6 +26,7 @@
 @import 'components/modals';
 @import 'components/navigation';
 @import 'components/notices';
+@import 'components/profile-preview-card';
 @import 'components/series-switcher';
 @import 'components/snackbars';
 @import 'components/spinner';

app/assets/stylesheets/live.scss

@@ -1,64 +0,0 @@
-.live-container {
-  display: flex;
-  flex-direction: column;
-  margin: auto;
-  max-width: 1636px;
-  min-height: 96vh;
-  margin-top: 68px;
-  @media screen and (min-width: 760px) {
-    margin-top: 78px;
-    width: 98%;
-  }
-  .live-component {
-    .live-video {
-      width: 100%;
-      height: 62.5vw;
-      text-align: center;
-      max-height: 920px;
-      float: left;
-      @media screen and (min-width: 760px) {
-        width: calc(100% - 300px);
-        height: calc(100vh - 132px);
-      }
-      @media screen and (min-width: 1200px) {
-        width: calc(100% - 400px);
-      }
-    }
-    .live-chat-wrapper {
-      text-align: center;
-      float: left;
-      width: 100%;
-      .chat {
-        height: calc(100vh - 62.5vw - 42px);
-      }
-      @media screen and (min-width: 760px) {
-        width: 300px;
-        .chat {
-          height: 770px;
-          max-height: 920px;
-        }
-      }
-      @media screen and (min-width: 1200px) {
-        width: 400px;
-        .chat {
-          height: calc(100vh - 128px);
-        }
-      }
-    }
-  }
-}
-.live-under-message {
-  text-align: center;
-  margin: 10px auto 80px;
-  width: 96%;
-  max-width: 650px;
-  font-size: 1.1em;
-  font-weight: bold;
-}
-
-.live-upcoming-info {
-  margin: 30vh auto;
-  max-width: 96%;
-  width: 700px;
-  font-size: 1.2em;
-}

app/assets/stylesheets/minimal.scss

@@ -7,7 +7,6 @@
 @import 'dashboard';
 @import 'settings';
 @import 'podcast-episodes-show';
-@import 'live';
 @import 'preact/sidebar-widget';
 @import 'preact/article-form';
 @import 'sidebar-data';
@@ -15,10 +14,8 @@
 @import 'listings';
 @import 'credits';
 @import 'theme-selector';
-@import 'snackbars';
 @import 'widgets';
 @import 'onboarding';
-@import 'profile-preview-card';
 
 @import 'ltags/LiquidTags';
 

app/assets/stylesheets/scaffolds.scss

@@ -94,12 +94,3 @@ body.ten-x-hacker-theme {
 body.trusted-status-true .trusted-visible-block {
   display: flex !important;
 }
-
-@keyframes loading-fadein {
-  from {
-    opacity: var(--opacity-0);
-  }
-  to {
-    opacity: 0.6;
-  }
-}

app/assets/stylesheets/snackbars.scss

@@ -1,36 +0,0 @@
-@import 'variables';
-@import '_mixins';
-
-// Notifications: Toast
-.snackbar {
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  right: 20px;
-  @include themeable(
-    background,
-    theme-container-accent-background,
-    $light-purple
-  );
-  @include themeable(border, container-border, 2px solid $purple);
-  padding: 12px 30px;
-  z-index: var(--z-popover);
-  border-radius: var(--radius);
-  font-weight: var(--fw-bold);
-  @media screen and (min-width: 430px) {
-    right: auto;
-    display: inline-block;
-    -webkit-animation: ease-out;
-    -webkit-animation-name: slide-in-from-left;
-    -webkit-animation-duration: 0.25s;
-  }
-}
-
-@-webkit-keyframes slide-in-from-left {
-  0% {
-    left: -300px;
-  }
-  100% {
-    left: 20px;
-  }
-}

app/assets/stylesheets/variables.scss

@@ -4,7 +4,6 @@ $green: #66e2d5;
 $light-green: lighten($green, 30%);
 $dark-purple: #4e57ef;
 $purple: #cfd7ff;
-$light-medium-purple: lighten($purple, 4%);
 $light-purple: lighten($purple, 7%);
 $blue: #1395b8;
 $sky-blue: #557de8;
@@ -17,11 +16,8 @@ $dark-medium-gray: #444444;
 $dark-gray: #333333;
 $red: #ff0000;
 $yellow: #fefa87;
-$tan: #fdf9f3;
 $bold-blue: #0045ff;
 
-$max-width: 1250px;
-
 $helvetica-condensed: 'HelveticaNeue-CondensedBold',
   'HelveticaNeueBoldCondensed', 'HelveticaNeue-Bold-Condensed',
   'Helvetica Neue Bold Condensed', 'HelveticaNeueBold', 'HelveticaNeue-Bold',

app/javascript/readingList/readingList.jsx

@@ -188,8 +188,10 @@ export class ReadingList extends Component {
     const archiveButtonLabel = isStatusViewValid ? 'Archive' : 'Unarchive';
 
     const snackBar = archiving ? (
-      <div className="snackbar">
-        {isStatusViewValid ? 'Archiving...' : 'Unarchiving...'}
+      <div className="crayons-snackbar">
+        <div className="crayons-snackbar__item block">
+          {isStatusViewValid ? 'Archiving...' : 'Unarchiving...'}
+        </div>
       </div>
     ) : (
       ''