From 57b72840e577f429269c8d9bda6a8b631d414893 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 27 Sep 2020 22:48:21 -0500
Subject: [PATCH] Remove unused CSS, #439

---
 app/styles/about.scss          | 144 ---------
 app/styles/accounts.scss       | 123 --------
 app/styles/application.scss    |   5 +-
 app/styles/basics.scss         |   7 -
 app/styles/compact_header.scss |  34 ---
 app/styles/containers.scss     |  88 ------
 app/styles/forms.scss          | 346 +--------------------
 app/styles/lists.scss          |  19 --
 app/styles/tables.scss         |  16 -
 app/styles/ui.scss             |  52 ----
 app/styles/widgets.scss        | 534 ---------------------------------
 11 files changed, 2 insertions(+), 1366 deletions(-)
 delete mode 100644 app/styles/compact_header.scss
 delete mode 100644 app/styles/lists.scss
 delete mode 100644 app/styles/widgets.scss

diff --git a/app/styles/about.scss b/app/styles/about.scss
index 77d93917e..915cfd1f8 100644
--- a/app/styles/about.scss
+++ b/app/styles/about.scss
@@ -532,10 +532,6 @@ $small-breakpoint: 960px;
         background: transparent;
         margin: 0 -5px;
 
-        .account__header__fields {
-          border-top: 1px solid var(--brand-color--med);
-        }
-
         .roles {
           display: none;
         }
@@ -592,23 +588,6 @@ $small-breakpoint: 960px;
       border-radius: 0;
     }
 
-    .account__header__fields {
-      margin: 0;
-      border-top: 0;
-
-      a {
-        color: var(--brand-color);
-      }
-
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
-
-      .verified a {
-        color: $valid-value-color;
-      }
-    }
-
     .account__header__content {
       padding: 20px;
       padding-bottom: 0;
@@ -856,11 +835,6 @@ $small-breakpoint: 960px;
   background: var(--brand-color--med);
   padding: 20px 0;
 
-  .container-alt {
-    position: relative;
-    padding-right: 280px + 15px;
-  }
-
   &__sections {
     display: flex;
     justify-content: space-between;
@@ -1300,10 +1274,6 @@ $small-breakpoint: 960px;
 
   @media screen and (max-width: 840px) {
     .information-board {
-      .container-alt {
-        padding-right: 20px;
-      }
-
       .panel {
         position: static;
         margin-top: 20px;
@@ -1329,11 +1299,6 @@ $small-breakpoint: 960px;
         text-align: initial;
       }
     }
-
-    .header .container-alt,
-    .features .container-alt {
-      display: block;
-    }
   }
 
   .cta {
@@ -1491,67 +1456,6 @@ $small-breakpoint: 960px;
     border-radius: 0;
   }
 
-  .hero-widget {
-    margin-top: 30px;
-    margin-bottom: 0;
-
-    h4 {
-      padding: 10px;
-      text-transform: uppercase;
-      font-weight: 700;
-      font-size: 13px;
-      color: var(--primary-text-color--faint);
-    }
-
-    &__text {
-      border-radius: 0;
-      padding-bottom: 0;
-    }
-
-    &__footer {
-      background: var(--brand-color--med);
-      padding: 10px;
-      border-radius: 0 0 4px 4px;
-      display: flex;
-
-      &__column {
-        flex: 1 1 50%;
-      }
-    }
-
-    .account {
-      padding: 10px 0;
-      border-bottom: 0;
-
-      .account__display-name {
-        display: flex;
-        align-items: center;
-      }
-
-      .account__avatar {
-        width: 44px;
-        height: 44px;
-        background-size: 44px 44px;
-      }
-    }
-
-    &__counter {
-      padding: 10px;
-
-      strong {
-        font-family: var(--font-display), sans-serif;
-        font-size: 15px;
-        font-weight: 700;
-        display: block;
-      }
-
-      span {
-        font-size: 14px;
-        color: var(--primary-text-color--faint);
-      }
-    }
-  }
-
   .simple_form .user_agreement .label_input > label {
     font-weight: 400;
     color: var(--primary-text-color--faint);
@@ -1580,18 +1484,6 @@ $small-breakpoint: 960px;
         grid-row: 1;
         display: flex;
         flex-direction: column;
-
-        .box-widget {
-          order: 2;
-          flex: 0 0 auto;
-        }
-
-        .hero-widget {
-          margin-top: 0;
-          margin-bottom: 10px;
-          order: 1;
-          flex: 0 0 auto;
-        }
       }
 
       &__column-registration {
@@ -1605,42 +1497,6 @@ $small-breakpoint: 960px;
 
     @media screen and (max-width: $no-gap-breakpoint) {
       grid-gap: 0;
-
-      .hero-widget {
-        display: block;
-        margin-bottom: 0;
-        box-shadow: none;
-
-        &__img,
-        &__img img,
-        &__footer {
-          border-radius: 0;
-        }
-      }
-
-      .hero-widget,
-      .box-widget,
-      .directory__tag {
-        border-bottom: 1px solid var(--brand-color--med);
-      }
-
-      .directory {
-        margin-top: 0;
-
-        &__tag {
-          margin-bottom: 0;
-
-          & > a,
-          & > div {
-            border-radius: 0;
-            box-shadow: none;
-          }
-
-          &:last-child {
-            border-bottom: 0;
-          }
-        }
-      }
     }
   }
 }
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index d9bbe2283..5c70a64d3 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -177,31 +177,6 @@
   }
 }
 
-.nothing-here {
-  background: var(--brand-color--med);
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  color: var(--primary-text-color--faint);
-  font-size: 14px;
-  font-weight: 500;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: default;
-  border-radius: 4px;
-  padding: 20px;
-  min-height: 30vh;
-
-  &--under-tabs {
-    border-radius: 0 0 4px 4px;
-  }
-
-  &--flexible {
-    box-sizing: border-box;
-    min-height: 100%;
-  }
-}
-
 .account-role {
   display: inline-block;
   padding: 4px 6px;
@@ -227,104 +202,6 @@
   }
 }
 
-.account__header__fields {
-  padding: 0;
-  margin: 15px -15px -15px;
-  border: 0 none;
-  border-top: 1px solid var(--brand-color--med);
-  border-bottom: 1px solid var(--brand-color--med);
-  font-size: 14px;
-  line-height: 20px;
-
-  dl {
-    display: flex;
-    border-bottom: 1px solid var(--brand-color--med);
-  }
-
-  dt,
-  dd {
-    box-sizing: border-box;
-    padding: 14px;
-    text-align: center;
-    max-height: 48px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  dt {
-    font-weight: 500;
-    width: 120px;
-    flex: 0 0 auto;
-    color: var(--primary-text-color--faint);
-    background: hsla(var(--background-color_hsl), 0.5);
-  }
-
-  dd {
-    flex: 1 1 auto;
-    color: var(--primary-text-color--faint);
-  }
-
-  a {
-    color: var(--highlight-text-color);
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-
-  .verified {
-    border: 1px solid rgba($valid-value-color, 0.5);
-    background: rgba($valid-value-color, 0.25);
-
-    a {
-      color: $valid-value-color;
-      font-weight: 500;
-    }
-
-    &__mark {
-      color: $valid-value-color;
-    }
-  }
-
-  dl:last-child {
-    border-bottom: 0;
-  }
-}
-
-.directory__tag .trends__item__current {
-  width: auto;
-}
-
-.pending-account {
-  &__header {
-    color: var(--primary-text-color--faint);
-
-    a {
-      color: var(--background-color);
-      text-decoration: none;
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-
-    strong {
-      color: var(--primary-text-color);
-      font-weight: 700;
-    }
-  }
-
-  &__body {
-    margin-top: 10px;
-  }
-}
-
 .account {
   padding: 10px;
   position: relative;
diff --git a/app/styles/application.scss b/app/styles/application.scss
index cb171dffd..dfa13b9ae 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -5,10 +5,7 @@
 @import 'reset';
 @import 'basics';
 @import 'containers';
-@import 'lists';
 @import 'footer';
-@import 'compact_header';
-@import 'widgets';
 @import 'forms';
 @import 'accounts';
 @import 'stream_entries';
@@ -16,7 +13,7 @@
 @import 'loading';
 @import 'ui';
 @import 'polls';
-@import 'introduction';
+// @import 'introduction';
 @import 'emoji_picker';
 @import 'about';
 @import 'tables';
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 092f06202..4a5c8916b 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -176,13 +176,6 @@ body {
     margin-top: 1em;
   }
 
-  &__dismiss {
-    display: inline-block;
-    text-transform: uppercase;
-    margin-left: 5px;
-    font-size: 13px;
-  }
-
   a {
     color: var(--brand-color--hicontrast);
     text-decoration: underline;
diff --git a/app/styles/compact_header.scss b/app/styles/compact_header.scss
deleted file mode 100644
index 3f6fc003e..000000000
--- a/app/styles/compact_header.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.compact-header {
-  h1 {
-    font-size: 24px;
-    line-height: 28px;
-    color: var(--primary-text-color--faint);
-    font-weight: 500;
-    margin-bottom: 20px;
-    padding: 0 10px;
-    word-wrap: break-word;
-
-    @media screen and (max-width: 740px) {
-      text-align: center;
-      padding: 20px 10px 0;
-    }
-
-    a {
-      color: inherit;
-      text-decoration: none;
-    }
-
-    small {
-      font-weight: 400;
-      color: var(--primary-text-color--faint);
-    }
-
-    img {
-      display: inline-block;
-      margin-bottom: -5px;
-      margin-right: 15px;
-      width: 36px;
-      height: 36px;
-    }
-  }
-}
diff --git a/app/styles/containers.scss b/app/styles/containers.scss
index 53bd272c2..74eebe61e 100644
--- a/app/styles/containers.scss
+++ b/app/styles/containers.scss
@@ -1,14 +1,3 @@
-.container-alt {
-  width: 700px;
-  margin: 0 auto;
-  margin-top: 40px;
-
-  @media screen and (max-width: 740px) {
-    width: 100%;
-    margin: 0;
-  }
-}
-
 .logo-container {
   margin: 100px auto 50px;
 
@@ -111,80 +100,3 @@
     margin-left: 8px;
   }
 }
-
-.grid-3 {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: 3fr 1fr;
-  grid-auto-columns: 25%;
-  grid-auto-rows: max-content;
-
-  .column-0 {
-    grid-column: 1 / 3;
-    grid-row: 1;
-  }
-
-  .column-1 {
-    grid-column: 1;
-    grid-row: 2;
-  }
-
-  .column-2 {
-    grid-column: 2;
-    grid-row: 2;
-  }
-
-  .column-3 {
-    grid-column: 1 / 3;
-    grid-row: 3;
-  }
-
-  .landing-page__call-to-action {
-    min-height: 100%;
-  }
-
-  @media screen and (max-width: 738px) {
-    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-
-    .landing-page__call-to-action {
-      padding: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .row__information-board {
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .row__mascot {
-      display: none;
-    }
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    grid-gap: 0;
-    grid-template-columns: minmax(0, 100%);
-
-    .column-0 {
-      grid-column: 1;
-    }
-
-    .column-1 {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .column-2 {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .column-3 {
-      grid-column: 1;
-      grid-row: 4;
-    }
-  }
-}
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 5471f9778..147199870 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -542,155 +542,6 @@ code {
   font-size: 24px;
 }
 
-.flash-message {
-  background: var(--brand-color--med);
-  color: var(--primary-text-color--faint);
-  border-radius: 4px;
-  padding: 15px 10px;
-  margin-bottom: 30px;
-  text-align: center;
-
-  &.notice {
-    border: 1px solid rgba($valid-value-color, 0.5);
-    background: rgba($valid-value-color, 0.25);
-    color: $valid-value-color;
-  }
-
-  &.alert {
-    border: 1px solid rgba($error-value-color, 0.5);
-    background: rgba($error-value-color, 0.25);
-    color: $error-value-color;
-  }
-
-  a {
-    display: inline-block;
-    color: var(--primary-text-color--faint);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--primary-text-color);
-      text-decoration: underline;
-    }
-  }
-
-  p {
-    margin-bottom: 15px;
-  }
-
-  .oauth-code {
-    outline: 0;
-    box-sizing: border-box;
-    display: block;
-    width: 100%;
-    border: 0;
-    padding: 10px;
-    font-family: var(--font-monospace), monospace;
-    background: var(--brand-color--med);
-    color: var(--primary-text-color);
-    font-size: 14px;
-    margin: 0;
-
-    &::-moz-focus-inner {
-      border: 0;
-    }
-
-    &::-moz-focus-inner,
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-
-    &:focus {
-      background: var(--brand-color--faint);
-    }
-  }
-
-  strong {
-    font-weight: 500;
-
-    @each $lang in $cjk-langs {
-      &:lang(#{$lang}) {
-        font-weight: 700;
-      }
-    }
-  }
-
-  @media screen and (max-width: 740px) and (min-width: 441px) {
-    margin-top: 40px;
-  }
-}
-
-.form-footer {
-  margin-top: 30px;
-  text-align: center;
-
-  a {
-    color: var(--primary-text-color--faint);
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-.quick-nav {
-  list-style: none;
-  margin-bottom: 25px;
-  font-size: 14px;
-
-  li {
-    display: inline-block;
-    margin-right: 10px;
-  }
-
-  a {
-    color: var(--highlight-text-color);
-    text-transform: uppercase;
-    text-decoration: none;
-    font-weight: 700;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--highlight-text-color);
-    }
-  }
-}
-
-.oauth-prompt,
-.follow-prompt {
-  margin-bottom: 30px;
-  color: var(--primary-text-color--faint);
-
-  h2 {
-    font-size: 16px;
-    margin-bottom: 30px;
-    text-align: center;
-  }
-
-  strong {
-    color: var(--primary-text-color--faint);
-    font-weight: 500;
-
-    @each $lang in $cjk-langs {
-      &:lang(#{$lang}) {
-        font-weight: 700;
-      }
-    }
-  }
-
-  @media screen and (max-width: 740px) and (min-width: 441px) {
-    margin-top: 40px;
-  }
-}
-
-.qr-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
 .qr-code {
   flex: 0 0 auto;
   background: var(--foreground-color);
@@ -705,35 +556,7 @@ code {
   }
 }
 
-.qr-alternative {
-  margin-bottom: 20px;
-  color: var(--primary-text-color--faint);
-  flex: 150px;
-
-  samp {
-    display: block;
-    font-size: 14px;
-  }
-}
-
-.table-form {
-  p {
-    margin-bottom: 15px;
-
-    strong {
-      font-weight: 500;
-
-      @each $lang in $cjk-langs {
-        &:lang(#{$lang}) {
-          font-weight: 700;
-        }
-      }
-    }
-  }
-}
-
-.simple_form,
-.table-form {
+.simple_form {
   .warning {
     box-sizing: border-box;
     background: rgba($error-value-color, 0.5);
@@ -773,173 +596,6 @@ code {
   }
 }
 
-.action-pagination {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  .actions,
-  .pagination {
-    flex: 1 1 auto;
-  }
-
-  .actions {
-    padding: 30px 0;
-    padding-right: 20px;
-    flex: 0 0 auto;
-  }
-}
-
-.post-follow-actions {
-  text-align: center;
-  color: var(--primary-text-color--faint);
-
-  div {
-    margin-bottom: 4px;
-  }
-}
-
-.alternative-login {
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  h4 {
-    font-size: 16px;
-    color: var(--primary-text-color);
-    text-align: center;
-    margin-bottom: 20px;
-    border: 0;
-    padding: 0;
-  }
-
-  .button {
-    display: block;
-  }
-}
-
-.scope-danger {
-  color: $warning-red;
-}
-
-.form_admin_settings_site_short_description,
-.form_admin_settings_site_description,
-.form_admin_settings_site_extended_description,
-.form_admin_settings_site_terms,
-.form_admin_settings_custom_css,
-.form_admin_settings_closed_registrations_message {
-  textarea {
-    font-family: var(--font-monospace), monospace;
-  }
-}
-
-.input-copy {
-  background: var(--background-color);
-  border: 1px solid var(--background-color);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  padding-right: 4px;
-  position: relative;
-  top: 1px;
-  transition: border-color 300ms linear;
-
-  &__wrapper {
-    flex: 1 1 auto;
-  }
-
-  input[type=text] {
-    background: transparent;
-    border: 0;
-    padding: 10px;
-    font-size: 14px;
-    font-family: var(--font-monospace), monospace;
-  }
-
-  button {
-    flex: 0 0 auto;
-    margin: 4px;
-    text-transform: none;
-    font-weight: 400;
-    font-size: 14px;
-    padding: 7px 18px;
-    padding-bottom: 6px;
-    width: auto;
-    transition: background 300ms linear;
-  }
-
-  &.copied {
-    border-color: $valid-value-color;
-    transition: none;
-
-    button {
-      background: $valid-value-color;
-      transition: none;
-    }
-  }
-}
-
-.connection-prompt {
-  margin-bottom: 25px;
-
-  .fa-link {
-    background-color: var(--brand-color--med);
-    border-radius: 100%;
-    font-size: 24px;
-    padding: 10px;
-  }
-
-  &__column {
-    align-items: center;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    flex-shrink: 1;
-    max-width: 50%;
-
-    &-sep {
-      align-self: center;
-      flex-grow: 0;
-      overflow: visible;
-      position: relative;
-      z-index: 1;
-    }
-
-    p {
-      word-break: break-word;
-    }
-  }
-
-  .account__avatar {
-    margin-bottom: 20px;
-  }
-
-  &__connection {
-    background-color: var(--brand-color--med);
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-    border-radius: 4px;
-    padding: 25px 10px;
-    position: relative;
-    text-align: center;
-
-    &::after {
-      background-color: var(--brand-color--med);
-      content: '';
-      display: block;
-      height: 100%;
-      left: 50%;
-      position: absolute;
-      top: 0;
-      width: 1px;
-    }
-  }
-
-  &__row {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: row;
-  }
-}
-
 .columns-area {
   form.simple_form {
     padding: 15px;
diff --git a/app/styles/lists.scss b/app/styles/lists.scss
deleted file mode 100644
index 6019cd800..000000000
--- a/app/styles/lists.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.no-list {
-  list-style: none;
-
-  li {
-    display: inline-block;
-    margin: 0 5px;
-  }
-}
-
-.recovery-codes {
-  list-style: none;
-  margin: 0 auto;
-
-  li {
-    font-size: 125%;
-    line-height: 1.5;
-    letter-spacing: 1px;
-  }
-}
diff --git a/app/styles/tables.scss b/app/styles/tables.scss
index 8fbe8cca6..bb7c07a3a 100644
--- a/app/styles/tables.scss
+++ b/app/styles/tables.scss
@@ -224,20 +224,4 @@ a.table-action-link {
       font-weight: 700;
     }
   }
-
-  .nothing-here {
-    border: 1px solid var(--background-color);
-    border-top: 0;
-    box-shadow: none;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid var(--background-color);
-    }
-  }
-
-  @media screen and (max-width: 870px) {
-    .accounts-table tbody td.optional {
-      display: none;
-    }
-  }
 }
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index a8f09663a..2d4d54f71 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -219,12 +219,6 @@
   display: flex;
 }
 
-.domain_buttons {
-  height: 18px;
-  padding: 10px;
-  white-space: nowrap;
-}
-
 .muted {
   .status__content p,
   .status__content a {
@@ -670,52 +664,6 @@
   100% { opacity: 1; }
 }
 
-.layout-toggle {
-  display: flex;
-  padding: 5px;
-
-  button {
-    box-sizing: border-box;
-    flex: 0 0 50%;
-    background: transparent;
-    padding: 5px;
-    border: 0;
-    position: relative;
-
-    &:hover,
-    &:focus,
-    &:active {
-      svg path:first-child {
-        fill: var(--background-color);
-      }
-    }
-  }
-
-  svg {
-    width: 100%;
-    height: auto;
-
-    path:first-child {
-      fill: var(--brand-color--med);
-    }
-
-    path:last-child {
-      fill: var(--background-color);
-    }
-  }
-
-  &__active {
-    color: var(--brand-color);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--brand-color--med);
-    border-radius: 50%;
-    padding: 0.35rem;
-  }
-}
-
 .verified-icon {
   display: inline-block;
   margin: 0 4px 0 1px;
diff --git a/app/styles/widgets.scss b/app/styles/widgets.scss
deleted file mode 100644
index 92e8c7121..000000000
--- a/app/styles/widgets.scss
+++ /dev/null
@@ -1,534 +0,0 @@
-.hero-widget {
-  margin-bottom: 10px;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
-  &__img {
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    border-radius: 4px 4px 0 0;
-    background: $base-shadow-color;
-
-    img {
-      object-fit: cover;
-      display: block;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      border-radius: 4px 4px 0 0;
-    }
-  }
-
-  &__text {
-    background: var(--brand-color--med);
-    padding: 20px;
-    border-radius: 0 0 4px 4px;
-    font-size: 15px;
-    color: var(--primary-text-color--faint);
-    line-height: 20px;
-    word-wrap: break-word;
-    font-weight: 400;
-
-    .emojione {
-      width: 20px;
-      height: 20px;
-      margin: -3px 0 0;
-    }
-
-    p {
-      margin-bottom: 20px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    em {
-      display: inline;
-      margin: 0;
-      padding: 0;
-      font-weight: 700;
-      background: transparent;
-      font-family: inherit;
-      font-size: inherit;
-      line-height: inherit;
-      color: var(--primary-text-color);
-    }
-
-    a {
-      color: var(--primary-text-color--faint);
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    display: none;
-  }
-}
-
-.endorsements-widget {
-  margin-bottom: 10px;
-  padding-bottom: 10px;
-
-  h4 {
-    padding: 10px;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 13px;
-    color: var(--primary-text-color--faint);
-  }
-
-  .account {
-    padding: 10px 0;
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    .account__display-name {
-      display: flex;
-      align-items: center;
-    }
-
-    .account__avatar {
-      width: 44px;
-      height: 44px;
-      background-size: 44px 44px;
-    }
-  }
-}
-
-.box-widget {
-  padding: 20px;
-  border-radius: 4px;
-  background: var(--background-color);
-  box-shadow: 0 0 1px 1px rgba($base-shadow-color, 0.2);
-}
-
-.contact-widget,
-.landing-page__information.contact-widget {
-  box-sizing: border-box;
-  padding: 20px;
-  min-height: 100%;
-  border-radius: 4px;
-  background: var(--brand-color--med);
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-}
-
-.contact-widget {
-  font-size: 15px;
-  color: var(--primary-text-color--faint);
-  line-height: 20px;
-  word-wrap: break-word;
-  font-weight: 400;
-
-  strong {
-    font-weight: 500;
-  }
-
-  p {
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &__mail {
-    margin-top: 10px;
-
-    a {
-      color: var(--primary-text-color);
-      text-decoration: none;
-    }
-  }
-}
-
-.moved-account-widget {
-  padding: 15px;
-  padding-bottom: 20px;
-  border-radius: 4px;
-  background: var(--brand-color--med);
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  color: var(--primary-text-color--faint);
-  font-weight: 400;
-  margin-bottom: 10px;
-
-  strong,
-  a {
-    font-weight: 500;
-
-    @each $lang in $cjk-langs {
-      &:lang(#{$lang}) {
-        font-weight: 700;
-      }
-    }
-  }
-
-  a {
-    color: inherit;
-    text-decoration: underline;
-
-    &.mention {
-      text-decoration: none;
-
-      span {
-        text-decoration: none;
-      }
-
-      &:focus,
-      &:hover,
-      &:active {
-        text-decoration: none;
-
-        span {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-
-  &__message {
-    margin-bottom: 15px;
-
-    .fa {
-      margin-right: 5px;
-      color: var(--primary-text-color--faint);
-    }
-  }
-
-  &__card {
-    .detailed-status__display-avatar {
-      position: relative;
-      cursor: pointer;
-    }
-
-    .detailed-status__display-name {
-      margin-bottom: 0;
-      text-decoration: none;
-
-      span {
-        font-weight: 400;
-      }
-    }
-  }
-}
-
-.memoriam-widget {
-  padding: 20px;
-  border-radius: 4px;
-  background: $base-shadow-color;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  font-size: 14px;
-  color: var(--primary-text-color--faint);
-  margin-bottom: 10px;
-}
-
-.page-header {
-  background: var(--brand-color--med);
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-  border-radius: 4px;
-  padding: 60px 15px;
-  text-align: center;
-  margin: 10px 0;
-
-  h1 {
-    color: var(--primary-text-color);
-    font-size: 36px;
-    line-height: 1.1;
-    font-weight: 700;
-    margin-bottom: 10px;
-  }
-
-  p {
-    font-size: 15px;
-    color: var(--primary-text-color--faint);
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    margin-top: 0;
-    background: var(--brand-color--faint);
-
-    h1 {
-      font-size: 24px;
-    }
-  }
-}
-
-.directory {
-  background: var(--brand-color--med);
-  border-radius: 4px;
-  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-
-  &__tag {
-    box-sizing: border-box;
-    margin-bottom: 10px;
-
-    & > a,
-    & > div {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background: var(--brand-color--med);
-      border-radius: 4px;
-      padding: 15px;
-      text-decoration: none;
-      color: inherit;
-      box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-    }
-
-    & > a {
-      &:hover,
-      &:active,
-      &:focus {
-        background: var(--brand-color--med);
-      }
-    }
-
-    &.active > a {
-      background: var(--brand-color);
-      cursor: default;
-    }
-
-    &.disabled > div {
-      opacity: 0.5;
-      cursor: default;
-    }
-
-    h4 {
-      flex: 1 1 auto;
-      font-size: 18px;
-      font-weight: 700;
-      color: var(--primary-text-color);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      .fa {
-        color: var(--primary-text-color--faint);
-      }
-
-      small {
-        display: block;
-        font-weight: 400;
-        font-size: 15px;
-        margin-top: 8px;
-        color: var(--primary-text-color--faint);
-      }
-    }
-
-    &.active h4 {
-      &,
-      .fa,
-      small {
-        color: var(--primary-text-color);
-      }
-    }
-
-    .avatar-stack {
-      flex: 0 0 auto;
-      width: (36px + 4px) * 3;
-    }
-
-    &.active .avatar-stack .account__avatar {
-      border-color: var(--brand-color);
-    }
-  }
-}
-
-.avatar-stack {
-  display: flex;
-  justify-content: flex-end;
-
-  .account__avatar {
-    flex: 0 0 auto;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    position: relative;
-    margin-left: -10px;
-    background: var(--background-color);
-    border: 2px solid var(--brand-color--med);
-
-    &:nth-child(1) {
-      z-index: 1;
-    }
-
-    &:nth-child(2) {
-      z-index: 2;
-    }
-
-    &:nth-child(3) {
-      z-index: 3;
-    }
-  }
-}
-
-.accounts-table {
-  width: 100%;
-
-  .account {
-    padding: 0;
-    border: 0;
-  }
-
-  strong {
-    font-weight: 700;
-  }
-
-  thead th {
-    text-align: center;
-    text-transform: uppercase;
-    color: var(--primary-text-color--faint);
-    font-weight: 700;
-    padding: 10px;
-
-    &:first-child {
-      text-align: left;
-    }
-  }
-
-  tbody td {
-    padding: 15px 0;
-    vertical-align: middle;
-    border-bottom: 1px solid var(--brand-color--med);
-  }
-
-  tbody tr:last-child td {
-    border-bottom: 0;
-  }
-
-  &__count {
-    width: 120px;
-    text-align: center;
-    font-size: 15px;
-    font-weight: 500;
-    color: var(--primary-text-color);
-
-    small {
-      display: block;
-      color: var(--primary-text-color--faint);
-      font-weight: 400;
-      font-size: 14px;
-    }
-  }
-
-  &__comment {
-    width: 50%;
-    vertical-align: initial !important;
-  }
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    tbody td.optional {
-      display: none;
-    }
-  }
-}
-
-.moved-account-widget,
-.memoriam-widget,
-.box-widget,
-.contact-widget,
-.landing-page__information.contact-widget,
-.directory,
-.page-header {
-  @media screen and (max-width: $no-gap-breakpoint) {
-    margin-bottom: 0;
-    box-shadow: none;
-    border-radius: 0;
-  }
-}
-
-$maximum-width: 1235px;
-$fluid-breakpoint: $maximum-width + 20px;
-
-.statuses-grid {
-  min-height: 600px;
-
-  @media screen and (max-width: 640px) {
-    width: 100% !important; // Masonry layout is unnecessary at this width
-  }
-
-  &__item {
-    width: (960px - 20px) / 3;
-
-    @media screen and (max-width: $fluid-breakpoint) {
-      width: (940px - 20px) / 3;
-    }
-
-    @media screen and (max-width: 640px) {
-      width: 100%;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      width: 100vw;
-    }
-  }
-
-  .detailed-status {
-    border-radius: 4px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid var(--background-color);
-    }
-
-    &.compact {
-      .detailed-status__meta {
-        margin-top: 15px;
-      }
-
-      .status__content {
-        font-size: 15px;
-        line-height: 20px;
-
-        .emojione {
-          width: 20px;
-          height: 20px;
-          margin: -3px 0 0;
-        }
-
-        .status__content__spoiler-link {
-          line-height: 20px;
-          margin: 0;
-        }
-      }
-
-      .media-gallery,
-      .status-card,
-      .video-player {
-        margin-top: 15px;
-      }
-    }
-  }
-}
-
-.notice-widget {
-  margin-bottom: 10px;
-  color: var(--primary-text-color--faint);
-
-  p {
-    margin-bottom: 10px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  a {
-    font-size: 14px;
-    line-height: 20px;
-    text-decoration: none;
-    font-weight: 500;
-    color: var(--brand-color);
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
-    }
-  }
-}