From deb9ed29bd3ef837fe05c088ce1945ed031b8951 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 16 Sep 2019 19:31:30 -0400
Subject: [PATCH] commit

---
 .../gabsocial/containers/gabsocial.js         |    5 -
 app/javascript/styles/contrast/diff.scss      |   10 -
 .../styles/gabsocial-light/diff.scss          |    7 +-
 app/javascript/styles/gabsocial/_mixins.scss  |   93 -
 app/javascript/styles/gabsocial/about.scss    |  249 +-
 app/javascript/styles/gabsocial/accounts.scss |   72 +-
 app/javascript/styles/gabsocial/admin.scss    |  136 +-
 app/javascript/styles/gabsocial/basics.scss   |   64 +-
 app/javascript/styles/gabsocial/boost.scss    |   27 +
 .../styles/gabsocial/compact_header.scss      |   34 -
 .../styles/gabsocial/components.scss          | 5311 +----------------
 .../gabsocial/components/account-header.scss  |  334 +-
 .../styles/gabsocial/components/buttons.scss  |    5 +-
 .../gabsocial/components/compose-form.scss    |  285 -
 .../gabsocial/components/dropdown-menu.scss   |  150 -
 .../gabsocial/components/group-card.scss      |   18 +-
 .../gabsocial/components/group-detail.scss    |   15 +-
 .../gabsocial/components/group-form.scss      |   15 +-
 .../styles/gabsocial/components/inputs.scss   |   52 +-
 .../styles/gabsocial/components/modal.scss    |  804 +--
 .../styles/gabsocial/components/tabs-bar.scss |  209 -
 .../gabsocial/components/user-panel.scss      |  117 -
 .../styles/gabsocial/containers.scss          |  215 +-
 .../styles/gabsocial/dashboard.scss           |   12 +-
 .../styles/gabsocial/emoji_picker.scss        |   38 +-
 app/javascript/styles/gabsocial/footer.scss   |   26 +-
 app/javascript/styles/gabsocial/forms.scss    |  105 +-
 .../styles/gabsocial/introduction.scss        |  151 -
 app/javascript/styles/gabsocial/modal.scss    |    4 +-
 app/javascript/styles/gabsocial/polls.scss    |  152 +-
 app/javascript/styles/gabsocial/rtl.scss      |  145 +-
 .../styles/gabsocial/scrollbars.scss          |    3 +-
 .../styles/gabsocial/stream_entries.scss      |    8 +-
 app/javascript/styles/gabsocial/tables.scss   |    6 +-
 .../styles/gabsocial/variables.scss           |    4 -
 app/javascript/styles/gabsocial/widgets.scss  |   98 +-
 app/javascript/styles/mailer.scss             |   79 +-
 app/views/accounts/show.html.haml             |    2 +-
 app/views/home/index.html.haml                |    1 -
 app/views/layouts/application.html.haml       |    4 +-
 app/views/stream_entries/_poll.html.haml      |    2 +-
 config/webpack/shared.js                      |    1 +
 package.json                                  |    3 +-
 43 files changed, 1285 insertions(+), 7786 deletions(-)

diff --git a/app/javascript/gabsocial/containers/gabsocial.js b/app/javascript/gabsocial/containers/gabsocial.js
index 06252956..574b3cd3 100644
--- a/app/javascript/gabsocial/containers/gabsocial.js
+++ b/app/javascript/gabsocial/containers/gabsocial.js
@@ -15,7 +15,6 @@ import { getLocale } from '../locales';
 import initialState from '../initial_state';
 import { me } from '../initial_state';
 import ErrorBoundary from '../components/error_boundary';
-// import { whyDidYouUpdate } from 'why-did-you-update';
 
 import '../../styles/gabsocial/components.scss';
 import '../../styles/gabsocial/components/buttons.scss';
@@ -84,10 +83,6 @@ class GabSocialMount extends PureComponent {
 
 }
 
-// whyDidYouUpdate(React);
-// whyDidYouUpdate(React, { groupByComponent: true, collapseComponentGroups: false });
-// whyDidYouUpdate(React, { exclude: [/^Connect|Link|NavLink|Route/] });
-
 export default class GabSocial extends PureComponent {
 
   static propTypes = {
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index f78e6059..babdd485 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -58,16 +58,6 @@
   }
 }
 
-.getting-started__footer a {
-  text-decoration: underline;
-
-  &:hover,
-  &:focus,
-  &:active {
-    text-decoration: none;
-  }
-}
-
 .nothing-here {
   color: $darker-text-color;
 }
diff --git a/app/javascript/styles/gabsocial-light/diff.scss b/app/javascript/styles/gabsocial-light/diff.scss
index cd0c8ba8..6c178fb8 100644
--- a/app/javascript/styles/gabsocial-light/diff.scss
+++ b/app/javascript/styles/gabsocial-light/diff.scss
@@ -5,7 +5,7 @@
 .button {
   color: $white;
 
-  &.button-alternative-2 {
+  &.button--alternative-2 {
     color: $white;
   }
 }
@@ -79,7 +79,7 @@
 }
 
 .detailed-status,
-.detailed-status__action-bar {
+.detailed-status-action-bar {
   background: darken($ui-base-color, 6%);
 }
 
@@ -214,7 +214,6 @@
 }
 
 // Change the default color used for the text in an empty column or on the error column
-.empty-column-indicator,
 .error-column {
   color: $primary-text-color;
   background: $white;
@@ -317,7 +316,7 @@
   }
 }
 
-.account__section-headline a.active::after {
+.account-section-headline a.active::after {
   border-color: transparent transparent $white;
 }
 
diff --git a/app/javascript/styles/gabsocial/_mixins.scss b/app/javascript/styles/gabsocial/_mixins.scss
index 57319a29..e69de29b 100644
--- a/app/javascript/styles/gabsocial/_mixins.scss
+++ b/app/javascript/styles/gabsocial/_mixins.scss
@@ -1,93 +0,0 @@
-// NEW GAB SPECIFIC MIXINS
-
-// THEME MIXINS
-
-// standard container drop shadow
-@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
-
-// common properties for all standard containers
-@mixin gab-container-standards() {
-	border-radius: 10px;
-	background: $gab-background-container;
-	body.theme-gabsocial-light & {
-		@include light-theme-shadow();
-		background: $gab-background-container-light;
-	}
-}
-
-// SHORTCUTS
-@mixin input-placeholder($color) {
-	&::-webkit-input-placeholder {color: $color;}
-	&::-moz-placeholder {color: $color;}
-	&:-ms-input-placeholder {color: $color;}
-	&:-moz-placeholder {color: $color;}
-}
-
-// OLDER MIXINS
-@mixin avatar-radius() {
-  border-radius: 50%;
-  background: transparent no-repeat;
-  background-position: 50%;
-  background-clip: padding-box;
-}
-
-@mixin avatar-size($size:48px) {
-	width: $size;
-	height: $size;
-	background-size: $size $size;
-}
-
-@mixin search-input() {
-	outline: 0;
-	box-sizing: border-box;
-	width: 100%;
-	border: 1px $gab-placeholder-accent solid;
-	box-shadow: none;
-	font-family: inherit;
-	background: $gab-background-container;
-	color: $gab-text-highlight;
-	@include font-size(16);
-	@include line-height(19);
-	margin: 0;
-	border-radius: 4px;
-
-	// Chrome does not like these concatinated together
-	&::placeholder {color: $gab-placeholder-accent;}
-	&:-ms-input-placeholder {color: $gab-placeholder-accent;}
-	&::-ms-input-placeholder{color: $gab-placeholder-accent;}
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-	&::-moz-focus-inner,
-	&:focus,
-	&:active {
-		outline: 0 !important;
-	}
-}
-
-@mixin search-popout() {
-	background: $gab-background-container;
-	border-radius: 4px;
-	border: 1px solid $gab-placeholder-accent;
-	padding: 8px 10px 17px 10px;
-	margin: 4px 0 0 0;
-	@include font-size(12);
-	@include line-height(14);
-	@include font-weight(normal);
-	color: $gab-secondary-text;
-	box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
-	h4 {
-		color: #fff;
-		@include font-size(14);
-		@include line-height(16);
-		@include font-weight(bold);
-	}
-	ul {
-		margin: 6px 0 6px;
-		li {
-			margin: 0 0 2px 0;
-			em {color: $gab-text-highlight;}
-		}
-	}
-}
diff --git a/app/javascript/styles/gabsocial/about.scss b/app/javascript/styles/gabsocial/about.scss
index 3452503f..4f264eb4 100644
--- a/app/javascript/styles/gabsocial/about.scss
+++ b/app/javascript/styles/gabsocial/about.scss
@@ -17,13 +17,11 @@ $small-breakpoint: 960px;
 
 .rich-formatting {
   font-family: $font-sans-serif, sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 30px;
   color: $darker-text-color;
   padding-right: 10px;
 
+  @include text-sizing(16px, 400, 30px);
+
   a {
     color: $highlight-text-color;
     text-decoration: underline;
@@ -32,13 +30,11 @@ $small-breakpoint: 960px;
   p,
   li {
     font-family: $font-sans-serif, sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 30px;
     margin-bottom: 12px;
     color: $darker-text-color;
 
+    @include text-sizing(16px, 400, 30px);
+
     a {
       color: $highlight-text-color;
       text-decoration: underline;
@@ -57,64 +53,58 @@ $small-breakpoint: 960px;
 
   h1 {
     font-family: $font-display, sans-serif;
-    font-size: 26px;
-    line-height: 30px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
 
+    @include text-sizing(26px, 500, 30px);
+
     small {
       font-family: $font-sans-serif, sans-serif;
       display: block;
-      font-size: 18px;
-      font-weight: 400;
       color: lighten($darker-text-color, 10%);
+
+      @include text-sizing(18px, 400);
     }
   }
 
   h2 {
     font-family: $font-display, sans-serif;
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(22px, 500, 26px);
   }
 
   h3 {
     font-family: $font-display, sans-serif;
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(18px, 500, 24px);
   }
 
   h4 {
     font-family: $font-display, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(16px, 500, 24px);
   }
 
   h5 {
     font-family: $font-display, sans-serif;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(14px, 500, 24px);
   }
 
   h6 {
     font-family: $font-display, sans-serif;
-    font-size: 12px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(12px, 500, 24px);
   }
 
   ul,
@@ -144,12 +134,12 @@ $small-breakpoint: 960px;
   }
 
   hr {
-    width: 100%;
-    height: 0;
     border: 0;
     border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
     margin: 20px 0;
 
+    @include size(100%, 0);
+
     &.spacer {
       height: 1px;
       border: 0;
@@ -163,24 +153,23 @@ $small-breakpoint: 960px;
 
   .container-alt {
     position: relative;
-    padding-right: 280px + 15px;
+    padding-right: 295px;
   }
 
   &__sections {
-    display: flex;
-    justify-content: space-between;
     flex-wrap: wrap;
+
+    @include flex(space-between);
   }
 
   &__section {
     flex: 1 0 0;
     font-family: $font-sans-serif, sans-serif;
-    font-size: 16px;
-    line-height: 28px;
     color: $primary-text-color;
-    text-align: right;
     padding: 10px 15px;
 
+    @include text-sizing(16px, 400, 28px, right);
+
     span,
     strong {
       display: block;
@@ -194,9 +183,8 @@ $small-breakpoint: 960px;
 
     strong {
       font-family: $font-display, sans-serif;
-      font-weight: 500;
-      font-size: 32px;
-      line-height: 48px;
+ 
+      @include text-sizing(32px, 500, 48px);
     }
 
     @media screen and (max-width: $column-breakpoint) {
@@ -204,56 +192,19 @@ $small-breakpoint: 960px;
     }
   }
 
-  .panel {
-    position: absolute;
-    width: 280px;
-    box-sizing: border-box;
-    background: darken($ui-base-color, 8%);
-    padding: 20px;
-    padding-top: 10px;
-    border-radius: 4px 4px 0 0;
-    right: 0;
-    bottom: -40px;
-
-    .panel-header {
-      font-family: $font-display, sans-serif;
-      font-size: 14px;
-      line-height: 24px;
-      font-weight: 500;
-      color: $darker-text-color;
-      padding-bottom: 5px;
-      margin-bottom: 15px;
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-
-      a,
-      span {
-        font-weight: 400;
-        color: darken($darker-text-color, 10%);
-      }
-
-      a {
-        text-decoration: none;
-      }
-    }
-  }
-
   .owner {
     text-align: center;
 
     .avatar {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto;
       margin-bottom: 15px;
 
+      @include size(80px);
+      @include margin-center;
+
       img {
         display: block;
-        width: 80px;
-        height: 80px;
-        border-radius: 48px;
+
+        @include circle(80px);
       }
     }
 
@@ -284,13 +235,11 @@ $small-breakpoint: 960px;
   p,
   li {
     font-family: $font-sans-serif, sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 30px;
     margin-bottom: 12px;
     color: $darker-text-color;
 
+    @include text-sizing(16px, 400, 30px);
+
     a {
       color: $highlight-text-color;
       text-decoration: underline;
@@ -301,74 +250,67 @@ $small-breakpoint: 960px;
     display: inline;
     margin: 0;
     padding: 0;
-    font-weight: 700;
     background: transparent;
     font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
     color: lighten($darker-text-color, 10%);
+
+    @include text-sizing(inherit, 700, inherit);
   }
 
   h1 {
     font-family: $font-display, sans-serif;
-    font-size: 26px;
-    line-height: 30px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
 
+    @include text-sizing(26px, 500, 30px);
+
     small {
       font-family: $font-sans-serif, sans-serif;
       display: block;
-      font-size: 18px;
-      font-weight: 400;
       color: lighten($darker-text-color, 10%);
+
+      @include text-sizing(18px, 400);
     }
   }
 
   h2 {
     font-family: $font-display, sans-serif;
-    font-size: 22px;
-    line-height: 26px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(22px, 500, 26px);
   }
 
   h3 {
     font-family: $font-display, sans-serif;
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(18px, 500, 24px);
   }
 
   h4 {
     font-family: $font-display, sans-serif;
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(16px, 500, 24px);
   }
 
   h5 {
     font-family: $font-display, sans-serif;
-    font-size: 14px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(14px, 500, 24px);
   }
 
   h6 {
     font-family: $font-display, sans-serif;
-    font-size: 12px;
-    line-height: 24px;
-    font-weight: 500;
     margin-bottom: 20px;
     color: $secondary-text-color;
+
+    @include text-sizing(12px, 24px, 500);
   }
 
   ul,
@@ -398,12 +340,12 @@ $small-breakpoint: 960px;
   }
 
   hr {
-    width: 100%;
-    height: 0;
     border: 0;
     border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
     margin: 20px 0;
 
+    @include size(100%, 0);
+
     &.spacer {
       height: 1px;
       border: 0;
@@ -424,17 +366,12 @@ $small-breakpoint: 960px;
 
     .row {
       width: 100%;
-      display: flex;
-      flex-direction: row-reverse;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      align-items: center;
+
+      @include flex(space-between, center, row-reverse, nowrap);
     }
 
     .row__information-board {
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
+      @include flex(flex-end, flex-end);
 
       .information-board__section {
         flex: 1 0 auto;
@@ -446,24 +383,15 @@ $small-breakpoint: 960px;
         justify-content: space-between;
       }
     }
-
-    .row__mascot {
-      flex: 1;
-      margin: 10px -50px 0 0;
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        display: none;
-      }
-    }
   }
 
   &__logo {
     margin-right: 20px;
 
     img {
-      height: 50px;
-      width: auto;
       mix-blend-mode: lighten;
+
+      @include size(auto, 50px);
     }
   }
 
@@ -508,9 +436,9 @@ $small-breakpoint: 960px;
       }
 
       &__avatar {
-        width: 44px;
-        height: 44px;
         background-size: 44px 44px;
+
+        @include size(44px);
       }
 
       .display-name {
@@ -542,18 +470,6 @@ $small-breakpoint: 960px;
     box-shadow: 0 0 6px rgba($black, 0.1);
   }
 
-  &__mascot {
-    height: 104px;
-    position: relative;
-    left: -40px;
-    bottom: 25px;
-
-    img {
-      height: 190px;
-      width: auto;
-    }
-  }
-
   &__short-description {
     .row {
       display: flex;
@@ -608,17 +524,6 @@ $small-breakpoint: 960px;
       .container-alt {
         padding-right: 20px;
       }
-
-      .panel {
-        position: static;
-        margin-top: 20px;
-        width: 100%;
-        border-radius: 4px;
-
-        .panel-header {
-          text-align: center;
-        }
-      }
     }
   }
 
@@ -674,7 +579,7 @@ $small-breakpoint: 960px;
       padding: 40px 20px 20px 20px;
 
       &--left {
-        margin-right: 40px;
+        margin-: 40px;
       }
 
       &--right {
@@ -701,10 +606,7 @@ $small-breakpoint: 960px;
   }
 
   &__brand {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    flex-direction: column;
+    @include flex(start, center, column);
 
     .brand {
       margin-right: auto !important;
@@ -731,15 +633,14 @@ $small-breakpoint: 960px;
   }
 
   .hero-widget {
-    margin-top: 30px;
-    margin-bottom: 0;
+    @include vertical-margin(30px, 0);
 
     h4 {
       padding: 10px;
       text-transform: uppercase;
-      font-weight: 700;
-      font-size: 13px;
       color: $darker-text-color;
+
+      @include text-sizing(13px, 700);
     }
 
     &__text {
@@ -768,9 +669,9 @@ $small-breakpoint: 960px;
       }
 
       .account__avatar {
-        width: 44px;
-        height: 44px;
         background-size: 44px 44px;
+
+        @include size(44px);
       }
     }
 
@@ -779,9 +680,9 @@ $small-breakpoint: 960px;
 
       strong {
         font-family: $font-display, sans-serif;
-        font-size: 15px;
-        font-weight: 700;
         display: block;
+
+        @include text-sizing(15px, 700);
       }
 
       span {
@@ -798,10 +699,9 @@ $small-breakpoint: 960px;
 
   .simple_form p.lead {
     color: $darker-text-color;
-    font-size: 15px;
-    line-height: 20px;
-    font-weight: 400;
     margin-bottom: 25px;
+
+    @include text-sizing(15px, 400, 20px);
   }
 
   &__grid {
@@ -826,10 +726,10 @@ $small-breakpoint: 960px;
         }
 
         .hero-widget {
-          margin-top: 0;
-          margin-bottom: 10px;
           order: 1;
           flex: 0 0 auto;
+
+          @include vertical-margin(0, 10px);
         }
       }
 
@@ -894,10 +794,9 @@ $small-breakpoint: 960px;
   display: block;
   width: 470px;
   color: $primary-text-color;
-  font-size: 30px;
-  line-height: 1.4;
   margin-top: 25px;
-  font-weight: 400;
+
+  @include text-sizing(30px, 400, 1.4);
 
   @media (min-width:767px) and (max-width:1024px) {
     width: 320px;
diff --git a/app/javascript/styles/gabsocial/accounts.scss b/app/javascript/styles/gabsocial/accounts.scss
index dba94b7c..71e70938 100644
--- a/app/javascript/styles/gabsocial/accounts.scss
+++ b/app/javascript/styles/gabsocial/accounts.scss
@@ -1,5 +1,5 @@
 .card {
-  & > a {
+  &>a {
     display: block;
     text-decoration: none;
     color: inherit;
@@ -26,14 +26,14 @@
 
     img {
       display: block;
-      width: 100%;
-      height: 100%;
       margin: 0;
       object-fit: cover;
       border-radius: 4px 4px 0 0;
+
+      @include size(100%);
     }
 
-    @media screen and (max-width: 600px) {
+    @include breakpoint(sm) {
       height: 200px;
     }
 
@@ -45,30 +45,29 @@
   &__bar {
     position: relative;
     padding: 15px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
     background: lighten($ui-base-color, 4%);
     border-radius: 0 0 4px 4px;
 
+    @include flex(flex-start, center);
+
     @media screen and (max-width: $no-gap-breakpoint) {
       border-radius: 0;
     }
 
     .avatar {
       flex: 0 0 auto;
-      width: 48px;
-      height: 48px;
       padding-top: 2px;
 
+      @include size(48px);
+
       img {
-        width: 100%;
-        height: 100%;
         display: block;
         margin: 0;
         border-radius: 4px;
         background: darken($ui-base-color, 8%);
         object-fit: cover;
+
+        @include size(100%);
       }
     }
 
@@ -77,20 +76,18 @@
       text-align: left;
 
       strong {
-        font-size: 15px;
         color: $primary-text-color;
-        font-weight: 500;
-        overflow: hidden;
-        text-overflow: ellipsis;
+
+        @include text-overflow;
+        @include text-sizing(15px, 500);
       }
 
       span {
         display: block;
-        font-size: 14px;
         color: $gab-secondary-text;
-        font-weight: 400;
-        overflow: hidden;
-        text-overflow: ellipsis;
+
+        @include text-overflow;
+        @include text-sizing(14px, 400);
       }
     }
   }
@@ -107,12 +104,12 @@
   .older,
   .page,
   .gap {
-    font-size: 14px;
     color: $primary-text-color;
-    font-weight: 500;
     display: inline-block;
     padding: 6px 10px;
     text-decoration: none;
+
+    @include text-sizing(14px, 500);
   }
 
   .current {
@@ -176,17 +173,14 @@
   background: $ui-base-color;
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   color: $gab-secondary-text;
-  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;
 
+  @include flex(center, center);
+  @include text-sizing(14px, 500, 1, center);
+
   &--under-tabs {
     border-radius: 0 0 4px 4px;
   }
@@ -201,13 +195,11 @@
   display: inline-block;
   padding: 4px 6px;
   cursor: default;
-  border-radius: 3px;
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 500;
   color: $ui-secondary-color;
   background-color: rgba($ui-secondary-color, 0.1);
-  border: 1px solid rgba($ui-secondary-color, 0.5);
+
+  @include text-sizing(12px, 500, 12px);
+  @include border-design(rgba($ui-secondary-color, 0.5), 1px, 3px);
 
   &.moderator {
     color: $success-green;
@@ -228,8 +220,8 @@
   border: 0 none;
   border-top: 1px solid lighten($ui-base-color, 12%);
   border-bottom: 1px solid lighten($ui-base-color, 12%);
-  font-size: 14px;
-  line-height: 20px;
+
+  @include text-sizing(14px, 400, 20px);
 
   dl {
     display: flex;
@@ -239,12 +231,10 @@
   dt,
   dd {
     box-sizing: border-box;
-    padding: 14px;
-    text-align: center;
     max-height: 48px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+
+    @include text-overflow(nowrap);
+    @include text-sizing(14px, 400, 1, center);
   }
 
   dt {
@@ -290,7 +280,7 @@
   }
 }
 
-.directory__tag .trends__item__current {
+.directory__tag .trending-item__uses {
   width: auto;
 }
 
@@ -318,4 +308,4 @@
   &__body {
     margin-top: 10px;
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/admin.scss b/app/javascript/styles/gabsocial/admin.scss
index c7f6e23d..1a9474ec 100644
--- a/app/javascript/styles/gabsocial/admin.scss
+++ b/app/javascript/styles/gabsocial/admin.scss
@@ -3,16 +3,16 @@ $sidebar-width: 240px;
 $content-width: 840px;
 
 .admin-wrapper {
-  display: flex;
-  justify-content: center;
   height: 100%;
 
+  @include flex(center);
+
   .sidebar-wrapper {
     flex: 1 1 $sidebar-width;
     height: 100%;
     background: $ui-base-color;
-    display: flex;
-    justify-content: flex-end;
+
+    @include flex(flex-end);
   }
 
   .sidebar {
@@ -24,12 +24,12 @@ $content-width: 840px;
     .logo {
       display: block;
       margin: 40px auto;
-      width: 100px;
-      height: 100px;
+
+      @include size(100px);
     }
 
     @media screen and (max-width: $no-columns-breakpoint) {
-      & > a:first-child {
+      &>a:first-child {
         display: none;
       }
     }
@@ -93,7 +93,7 @@ $content-width: 840px;
       }
     }
 
-    & > ul > .simple-navigation-active-leaf a {
+    &>ul>.simple-navigation-active-leaf a {
       border-radius: 4px 0 0 4px;
     }
   }
@@ -105,49 +105,41 @@ $content-width: 840px;
 
   .content {
     max-width: $content-width;
-    padding: 20px 15px;
-    padding-top: 60px;
-    padding-left: 25px;
+    padding: 60px 15px 20px 25px;
 
     @media screen and (max-width: $no-columns-breakpoint) {
       max-width: none;
-      padding: 15px;
-      padding-top: 30px;
+      padding: 30px 15px 15px 15px;
     }
 
     h2 {
       color: $secondary-text-color;
-      font-size: 24px;
-      line-height: 28px;
-      font-weight: 400;
-      padding-bottom: 40px;
       border-bottom: 1px solid lighten($ui-base-color, 8%);
-      margin-bottom: 40px;
+
+      @include text-sizing(24px, 400, 28px);
+      @include bottom-spacing(40px);
     }
 
     h3 {
       color: $secondary-text-color;
-      font-size: 20px;
-      line-height: 28px;
-      font-weight: 400;
       margin-bottom: 30px;
+
+      @include text-sizing(20px, 400, 28px);
     }
 
     h4 {
       text-transform: uppercase;
-      font-size: 13px;
-      font-weight: 700;
       color: $gab-secondary-text;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
       border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+      @include text-sizing(13px, 700);
+      @include bottom-spacing(8px);
     }
 
     h6 {
-      font-size: 16px;
       color: $secondary-text-color;
-      line-height: 28px;
-      font-weight: 400;
+
+      @include text-sizing(16px, 400, 28px);
     }
 
     .fields-group h6 {
@@ -155,8 +147,8 @@ $content-width: 840px;
       font-weight: 500;
     }
 
-    .directory__tag > a,
-    .directory__tag > div {
+    .directory__tag>a,
+    .directory__tag>div {
       box-shadow: none;
     }
 
@@ -165,21 +157,20 @@ $content-width: 840px;
     }
 
     .directory__tag h4 {
-      font-size: 18px;
-      font-weight: 700;
       color: $gab-secondary-text;
       text-transform: none;
-      padding-bottom: 0;
-      margin-bottom: 0;
       border-bottom: none;
+
+      @include text-sizing(18px, 700);
+      @include bottom-spacing(0);
     }
 
-    & > p {
-      font-size: 14px;
-      line-height: 18px;
+    &>p {
       color: $gab-secondary-text;
       margin-bottom: 20px;
 
+      @include text-sizing(14px, 400, 18px);
+
       strong {
         color: $gab-secondary-text;
         font-weight: 500;
@@ -193,12 +184,12 @@ $content-width: 840px;
     }
 
     hr {
-      width: 100%;
-      height: 0;
       border: 0;
       border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
       margin: 20px 0;
 
+      @include size(100%, 0);
+
       &.spacer {
         height: 1px;
         border: 0;
@@ -272,9 +263,9 @@ $content-width: 840px;
     }
 
     strong {
-      font-weight: 500;
       text-transform: uppercase;
-      font-size: 12px;
+
+      @include text-sizing(12px, 500);
 
       @each $lang in $cjk-langs {
         &:lang(#{$lang}) {
@@ -288,10 +279,10 @@ $content-width: 840px;
       color: $gab-secondary-text;
       text-decoration: none;
       text-transform: uppercase;
-      font-size: 12px;
-      font-weight: 500;
       border-bottom: 2px solid $gab-secondary-text;
 
+      @include text-sizing(12px, 500);
+
       &:hover {
         color: $primary-text-color;
         border-bottom: 2px solid lighten($gab-secondary-text, 5%);
@@ -317,14 +308,13 @@ $content-width: 840px;
   flex-direction: column;
   margin: 0 5px;
 
-  & > strong {
+  &>strong {
     display: block;
     margin: 0 0 10px -5px;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 18px;
     color: $secondary-text-color;
 
+    @include text-sizing(14px, 500, 18px);
+
     @each $lang in $cjk-langs {
       &:lang(#{$lang}) {
         font-weight: 700;
@@ -420,15 +410,14 @@ $content-width: 840px;
   line-height: 20px;
 
   &__header {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
     padding: 10px;
     background: $ui-base-color;
     color: $darker-text-color;
     border-radius: 4px 4px 0 0;
     font-size: 14px;
     position: relative;
+
+    @include flex(flex-start, center);
   }
 
   &__avatar {
@@ -437,9 +426,8 @@ $content-width: 840px;
     .avatar {
       display: block;
       margin: 0;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
+
+      @include circle(40px);
     }
   }
 
@@ -473,12 +461,8 @@ $content-width: 840px;
   }
 
   &__icon__overlay {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
+    @include circle(10px);
+    @include abs-position(10px, 10px);
 
     &.positive {
       background: $success-green;
@@ -575,13 +559,11 @@ a.name-tag,
   }
 
   &__bubble {
-    padding: 16px;
-    padding-left: 14px;
-    font-size: 15px;
-    line-height: 20px;
+    padding: 16px 16px 16px 14px;
     border-radius: 4px 4px 4px 0;
     position: relative;
-    font-weight: 500;
+
+    @include text-sizing(15px, 500, 20px);
 
     a {
       color: $darker-text-color;
@@ -589,8 +571,7 @@ a.name-tag,
   }
 
   &__owner {
-    padding: 8px;
-    padding-left: 12px;
+    padding: 8px 8px 8px 12px;
   }
 
   time {
@@ -604,11 +585,10 @@ a.name-tag,
   margin-bottom: 20px;
 
   &__profile {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     padding: 15px;
 
+    @include flex(space-between, center);
+
     .account {
       padding: 0;
       border: 0;
@@ -644,10 +624,10 @@ a.name-tag,
 
   &__summary {
     &__item {
-      display: flex;
-      justify-content: flex-start;
       border-top: 1px solid darken($ui-base-color, 4%);
 
+      @include flex(flex-start);
+
       &:hover {
         background: lighten($ui-base-color, 2%);
       }
@@ -662,9 +642,7 @@ a.name-tag,
 
         &,
         .username {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          @include text-overflow(nowrap);
         }
       }
 
@@ -692,15 +670,13 @@ a.name-tag,
 }
 
 .one-line {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  @include text-overflow(nowrap);
 }
 
 .ellipsized-ip {
   display: inline-block;
   max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
   vertical-align: middle;
-}
+
+  @include text-overflow;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/basics.scss b/app/javascript/styles/gabsocial/basics.scss
index 1996b64f..59c76f45 100644
--- a/app/javascript/styles/gabsocial/basics.scss
+++ b/app/javascript/styles/gabsocial/basics.scss
@@ -1,8 +1,9 @@
 @function hex-color($color) {
-  @if type-of($color) == 'color' {
+  @if type-of($color)=='color' {
     $color: str-slice(ie-hex-str($color), 4);
   }
-  @return '%23' + unquote($color)
+
+  @return '%23'+unquote($color)
 }
 
 html {
@@ -15,16 +16,17 @@ html {
 }
 
 body {
-  @include font-size(16);
-  @include line-height(19);
+  font-size: 16px;
+  line-height: 19px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizelegibility;
   font-feature-settings: "kern";
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
   color: white;
   background: $gab-background-base;
+
   &.theme-gabsocial-light {
     color: $gab-default-text-light;
     background: $gab-background-base-light;
@@ -82,18 +84,18 @@ body {
 
     .container {
       position: absolute;
-      width: 100%;
-      height: 100%;
       overflow: hidden;
+
+      @include size(100%);
     }
   }
 
   &.admin {
     background: darken($ui-base-color, 4%);
     position: fixed;
-    width: 100%;
-    height: 100%;
     padding: 0;
+
+    @include size(100%);
   }
 
   &.error {
@@ -101,12 +103,10 @@ body {
     text-align: center;
     color: $darker-text-color;
     background: $ui-base-color;
-    width: 100%;
-    height: 100%;
     padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
+    @include flex(center, center);
+    @include size(100%);
 
     .dialog {
       vertical-align: middle;
@@ -116,16 +116,14 @@ body {
         img {
           display: block;
           max-width: 470px;
-          width: 100%;
-          height: auto;
           margin-top: -120px;
+
+          @include size(100%, auto);
         }
       }
 
       h1 {
-        font-size: 20px;
-        line-height: 28px;
-        font-weight: 400;
+        @include text-sizing(20px, 400, 28px);
       }
     }
   }
@@ -141,24 +139,12 @@ button {
 }
 
 .app-holder {
-  &,
-  & > div {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: start;
-    justify-content: center;
-    outline: 0 !important;
-  }
-}
 
-.visuallyhidden {
-  border: 0 !important;
-  clip: rect(1px,1px,1px,1px) !important;
-  font-size: 1px !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-}
+  &,
+  &>div {
+    outline: 0 !important;
+
+    @include flex(center, start);
+    @include size(100%);
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/boost.scss b/app/javascript/styles/gabsocial/boost.scss
index 5a6d6ae4..3e126947 100644
--- a/app/javascript/styles/gabsocial/boost.scss
+++ b/app/javascript/styles/gabsocial/boost.scss
@@ -9,3 +9,30 @@ button.icon-button i.fa-retweet {
 button.icon-button.disabled i.fa-retweet {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(darken($action-button-color, 13%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($highlight-text-color)}' stroke-width='0'/></svg>");
 }
+
+.no-reduce-motion button.icon-button i.fa-retweet {
+  background-position: 0 0;
+  height: 19px;
+  transition: background-position 0.9s steps(10);
+  transition-duration: 0s;
+  vertical-align: middle;
+  width: 22px;
+
+  &::before {
+    display: none !important;
+  }
+}
+
+.no-reduce-motion button.icon-button.active i.fa-retweet {
+  transition-duration: 0.9s;
+  background-position: 0 100%;
+}
+
+.reduce-motion button.icon-button i.fa-retweet {
+  color: $action-button-color;
+  transition: color 100ms ease-in;
+}
+
+.reduce-motion button.icon-button.active i.fa-retweet {
+  color: $highlight-text-color;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/compact_header.scss b/app/javascript/styles/gabsocial/compact_header.scss
index 4980ab5f..e69de29b 100644
--- a/app/javascript/styles/gabsocial/compact_header.scss
+++ b/app/javascript/styles/gabsocial/compact_header.scss
@@ -1,34 +0,0 @@
-.compact-header {
-  h1 {
-    font-size: 24px;
-    line-height: 28px;
-    color: $darker-text-color;
-    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: $secondary-text-color;
-    }
-
-    img {
-      display: inline-block;
-      margin-bottom: -5px;
-      margin-right: 15px;
-      width: 36px;
-      height: 36px;
-    }
-  }
-}
diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss
index cd208103..f5e2ac59 100644
--- a/app/javascript/styles/gabsocial/components.scss
+++ b/app/javascript/styles/gabsocial/components.scss
@@ -1,5212 +1,265 @@
 .app-body {
-	-webkit-overflow-scrolling: touch;
-	-ms-overflow-style: -ms-autohiding-scrollbar;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 
 .button {
-	background-color: $ui-highlight-color;
-	border: 10px none;
-	border-radius: 4px;
-	box-sizing: border-box;
-	color: $primary-text-color;
-	cursor: pointer;
-	display: inline-block;
-	font-family: inherit;
-	font-size: 14px;
-	font-weight: 500;
-	height: 36px;
-	letter-spacing: 0;
-	line-height: 36px;
-	overflow: hidden;
-	padding: 0 16px;
-	position: relative;
-	text-align: center;
-	text-decoration: none;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: auto;
+  background-color: $ui-highlight-color;
+  border: 10px none;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: $primary-text-color;
+  cursor: pointer;
+  display: inline-block;
+  font-family: inherit;
+  padding: 0 16px;
+  position: relative;
+  text-decoration: none;
 
-	&:active,
-	&:focus,
-	&:hover {background-color: lighten($ui-highlight-color, 10%);}
+  @include size(auto, 36px);
+  @include text-overflow(nowrap);
+  @include text-sizing(14px, 500, 36px, center, 0);
 
-	&--destructive {
-		transition: none;
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: lighten($ui-highlight-color, 10%);
+  }
 
-		&:active,
-		&:focus,
-		&:hover {
-			background-color: $error-red;
-			transition: none;
-		}
-	}
+  &--destructive {
+    transition: none;
 
-	&:disabled,
-	&.disabled {
-		background-color: $ui-primary-color;
-		cursor: default;
-	}
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: $error-red;
+      transition: none;
+    }
+  }
 
-	&::-moz-focus-inner {
-		border: 0;
-	}
+  &:disabled,
+  &.disabled {
+    background-color: $ui-primary-color;
+    cursor: default;
+  }
 
-	&::-moz-focus-inner,
-	&:focus,
-	&:active {
-		outline: 0 !important;
-	}
+  &::-moz-focus-inner {
+    border: 0;
+  }
 
-	&.button-alternative {
-		color: $inverted-text-color;
-		background: $ui-primary-color;
+  &::-moz-focus-inner,
+  &:focus,
+  &:active {
+    outline: 0 !important;
+  }
 
-		&:active,
-		&:focus,
-		&:hover {
-			background-color: lighten($ui-primary-color, 4%);
-		}
-	}
+  &.button-alternative {
+    color: $inverted-text-color;
+    background: $ui-primary-color;
 
-	&.button-alternative-2 {
-		background: $ui-base-lighter-color;
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: lighten($ui-primary-color, 4%);
+    }
+  }
 
-		&:active,
-		&:focus,
-		&:hover {
-			background-color: lighten($ui-base-lighter-color, 4%);
-		}
-	}
+  &.button-alternative-2 {
+    background: $ui-base-lighter-color;
 
-	&.button-secondary {
-		color: $darker-text-color;
-		background: transparent;
-		padding: 3px 15px;
-		border: 1px solid $ui-primary-color;
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: lighten($ui-base-lighter-color, 4%);
+    }
+  }
 
-		&:active,
-		&:focus,
-		&:hover {
-			border-color: lighten($ui-primary-color, 4%);
-			color: lighten($darker-text-color, 4%);
-		}
+  &.button-secondary {
+    color: $darker-text-color;
+    background: transparent;
+    padding: 3px 15px;
+    border: 1px solid $ui-primary-color;
 
-		&:disabled {
-			opacity: 0.5;
-		}
-	}
+    &:active,
+    &:focus,
+    &:hover {
+      border-color: lighten($ui-primary-color, 4%);
+      color: lighten($darker-text-color, 4%);
+    }
 
-	&.button--block {
-		display: block;
-		width: 100%;
-	}
-}
+    &:disabled {
+      opacity: 0.5;
+    }
+  }
 
-.column__wrapper {
-	display: flex;
-	flex: 1 1 auto;
-	position: relative;
-}
-
-.icon-button {
-	display: inline-block;
-	padding: 0;
-	color: $gab-secondary-text;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-	transition: color 100ms ease-in;
-
-	&:hover,
-	&:active,
-	&:focus {
-		color: lighten($action-button-color, 7%);
-		transition: color 200ms ease-out;
-	}
-
-	&.disabled {
-		color: darken($action-button-color, 13%);
-		cursor: default;
-	}
-
-	&.active {
-		color: $highlight-text-color;
-	}
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	&::-moz-focus-inner,
-	&:focus,
-	&:active {
-		outline: 0 !important;
-	}
-
-	&.inverted {
-		color: $gab-secondary-text;
-
-		&:hover,
-		&:active,
-		&:focus {
-			color: darken($lighter-text-color, 7%);
-		}
-
-		&.disabled {
-			color: lighten($lighter-text-color, 7%);
-		}
-
-		&.active {
-			color: $highlight-text-color;
-
-			&.disabled {
-				color: lighten($highlight-text-color, 13%);
-			}
-		}
-	}
-
-	&.overlayed {
-		box-sizing: content-box;
-		background: rgba($base-overlay-background, 0.6);
-		color: rgba($primary-text-color, 0.7);
-		border-radius: 4px;
-		padding: 2px;
-
-		&:hover {
-			background: rgba($base-overlay-background, 0.9);
-		}
-	}
-}
-
-.text-icon-button {
-	color: $gab-secondary-text;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-	font-weight: 600;
-	font-size: 11px;
-	padding: 0 3px;
-	line-height: 27px;
-	outline: 0;
-	transition: color 100ms ease-in;
-
-	&:hover,
-	&:active,
-	&:focus {
-		color: darken($lighter-text-color, 7%);
-		transition: color 200ms ease-out;
-	}
-
-	&.disabled {
-		color: lighten($lighter-text-color, 20%);
-		cursor: default;
-	}
-
-	&.active {
-		color: $highlight-text-color;
-	}
-
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	&::-moz-focus-inner,
-	&:focus,
-	&:active {
-		outline: 0 !important;
-	}
+  &.button--block {
+    display: block;
+    width: 100%;
+  }
 }
 
 .invisible {
-	font-size: 0 !important;
-	line-height: 0 !important;
-	display: inline-block;
-	width: 0;
-	height: 0;
-	position: absolute;
+  font-size: 0 !important;
+  line-height: 0 !important;
+  display: inline-block;
+  position: absolute;
 
-	img,
-	svg {
-		margin: 0 !important;
-		border: 0 !important;
-		padding: 0 !important;
-		width: 0 !important;
-		height: 0 !important;
-	}
+  @include size(0);
+
+  img,
+  svg {
+    margin: 0 !important;
+    border: 0 !important;
+    padding: 0 !important;
+
+    @include size(0 !important);
+  }
 }
 
-.ellipsis::after {content: "…";}
-
-.timeline-compose-block {
-	display: flex;
-	align-items: flex-start;
-	padding: 20px;
-	margin-bottom: 20px;
-	@include gab-container-standards();
-	.emoji-picker-wrapper {
-		.emoji-picker-dropdown {top: 10px;}
-	}
-	.compose-form {
-		flex: 1 1;
-		padding: 0 0 0 20px !important;
-		position: relative;
-		.compose-form__autosuggest-wrapper {
-			&:before {
-				content: "";
-				display: block;
-				position: absolute;
-				height: 0px;
-				width: 0px;
-				border-top: 11px solid transparent;
-				border-right: 12px solid #fff;
-				border-bottom: 11px solid transparent;
-				border-left: 11px solid transparent;
-				left: -22px;
-				top: 13px;
-			}
-		.autosuggest-textarea__textarea {
-			padding: 14px 32px 13px 10px !important;
-			body.theme-gabsocial-light & {background: $gab-background-base-light;}
-			}
-		}
-	}
-}
-
-.no-reduce-motion .spoiler-input {
-	transition: height 0.4s ease, opacity 0.4s ease;
-}
-
-.emojione {
-	font-size: inherit;
-	vertical-align: middle;
-	object-fit: contain;
-	margin: -.2ex .15em .2ex;
-	width: 16px;
-	height: 16px;
-
-	img {
-		width: auto;
-	}
-}
-
-.reply-indicator {
-	border-radius: 4px;
-	margin-bottom: 10px;
-	background: $gab-background-base-light;
-	padding: 10px;
-	min-height: 23px;
-	overflow-y: auto;
-	flex: 0 2 auto;
-	max-height: 500px;
-	@media screen and (min-width: 320px) and (max-width: 375px) {max-height: 220px;}
-	@media screen and (max-width: 320px) {max-height :130px;}
-}
-
-.reply-indicator__header {
-	margin-bottom: 5px;
-	overflow: hidden;
-}
-
-.reply-indicator__cancel {
-	float: right;
-	line-height: 24px;
-}
-
-.reply-indicator__display-name {
-	color: $inverted-text-color;
-	display: block;
-	max-width: 100%;
-	line-height: 24px;
-	overflow: hidden;
-	padding-right: 25px;
-	text-decoration: none;
-}
-
-.reply-indicator__display-avatar {
-	float: left;
-	margin-right: 5px;
-}
-
-.status__content--with-action {
-	cursor: pointer;
-}
-
-.status__content,
-.reply-indicator__content {
-	position: relative;
-	font-size: 15px;
-	line-height: 20px;
-	word-wrap: break-word;
-	font-weight: 400;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	padding-top: 2px;
-	color: $primary-text-color;
-
-	&:focus {
-		outline: 0;
-	}
-
-	&.status__content--with-spoiler {
-		white-space: normal;
-
-		.status__content__text {
-			white-space: pre-wrap;
-		}
-	}
-
-	.emojione {
-		width: 20px;
-		height: 20px;
-		margin: -3px 0 0;
-	}
-
-	p {
-		margin-bottom: 20px;
-		white-space: pre-wrap;
-
-		&:last-child {
-			margin-bottom: 2px;
-		}
-	}
-
-	a {
-		color: $gab-brand-default;
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-
-			.fa {
-				color: lighten($dark-text-color, 7%);
-			}
-		}
-
-		&.mention {
-			&:hover {
-				text-decoration: none;
-
-				span {
-					text-decoration: underline;
-				}
-			}
-		}
-
-		.fa {
-			color: $dark-text-color;
-		}
-	}
-
-	.status__content__spoiler-link {
-		background: $action-button-color;
-
-		&:hover {
-			background: lighten($action-button-color, 7%);
-			text-decoration: none;
-		}
-
-		&::-moz-focus-inner {
-			border: 0;
-		}
-
-		&::-moz-focus-inner,
-		&:focus,
-		&:active {
-			outline: 0 !important;
-		}
-	}
-
-	.status__content__text {
-		display: none;
-
-		&.status__content__text--visible {
-			display: block;
-		}
-	}
-}
-
-.status__content.status__content--collapsed {
-	max-height: 20px * 15; // 15 lines is roughly above 500 characters
-}
-
-.status__content__read-more-button {
-	display: block;
-	font-size: 15px;
-	line-height: 20px;
-	color: $gab-brand-default;
-	border: 0;
-	background: transparent;
-	padding: 0;
-	padding-top: 8px;
-	&:hover,
-	&:active {
-		text-decoration: underline;
-	}
-}
-
-.status__content__spoiler-link {
-	display: inline-block;
-	border-radius: 2px;
-	background: transparent;
-	border: 0;
-	color: $inverted-text-color;
-	font-weight: 700;
-	font-size: 11px;
-	padding: 0 6px;
-	text-transform: uppercase;
-	line-height: 20px;
-	cursor: pointer;
-	vertical-align: middle;
-}
-
-.status__wrapper--filtered {
-	color: $dark-text-color;
-	border: 0;
-	font-size: inherit;
-	text-align: center;
-	line-height: inherit;
-	margin: 0;
-	padding: 15px;
-	box-sizing: border-box;
-	width: 100%;
-	clear: both;
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
-
-.status__prepend-icon-wrapper {
-	left: -26px;
-	position: absolute;
+.ellipsis::after {
+  content: "…";
 }
 
 .focusable {
-	&:focus {
-		outline: 0;
-		background: lighten($ui-base-color, 4%);
+  &:focus {
+    outline: 0;
+    background: lighten($ui-base-color, 4%);
 
-		.status.status-direct {
-			background: lighten($ui-base-color, 12%);
+    .status.status-direct {
+      background: lighten($ui-base-color, 12%);
 
-			&.muted {
-				background: transparent;
-			}
-		}
+      &.muted {
+        background: transparent;
+      }
+    }
 
-		.detailed-status,
-		.detailed-status__action-bar {
-			background: lighten($ui-base-color, 8%);
-		}
-	}
+    .detailed-status,
+    .detailed-status-action-bar {
+      background: lighten($ui-base-color, 8%);
+    }
+  }
 }
 
-.status {
-	padding: 8px 10px;
-	padding-left: 68px;
-	position: relative;
-	min-height: 54px;
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-	cursor: default;
-
-	@supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
-		// Add margin to avoid Edge auto-hiding scrollbar appearing over content.
-		// On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-		padding-right: 26px; // 10px + 16px
-	}
-
-	@keyframes fade {
-		0% { opacity: 0; }
-		100% { opacity: 1; }
-	}
-
-	opacity: 1;
-	animation: fade 150ms linear;
-
-	.video-player {
-		margin-top: 8px;
-	}
-
-	&.status-direct:not(.read) {
-		background: lighten($ui-base-color, 8%);
-		border-bottom-color: lighten($ui-base-color, 12%);
-	}
-
-	&.light {
-		.status__relative-time {
-			color: $light-text-color;
-		}
-
-		.status__display-name {
-			color: $inverted-text-color;
-		}
-
-		.display-name {
-			strong {
-				color: $inverted-text-color;
-			}
-
-			span {
-				color: $light-text-color;
-			}
-		}
-
-		.status__content {
-			color: $inverted-text-color;
-
-			a {
-				color: $highlight-text-color;
-			}
-
-			a.status__content__spoiler-link {
-				color: $primary-text-color;
-				background: $ui-primary-color;
-
-				&:hover {
-					background: lighten($ui-primary-color, 8%);
-				}
-			}
-		}
-	}
-
-	&__meta {
-		font-size: 14px;
-		color: $gab-secondary-text;
-
-		a {
-			color: $gab-brand-default;
-			font-weight: bold;
-			text-decoration: none;
-
-			&:hover {
-				text-decoration: underline;
-			}
-		}
-	}
+.status__display-name,
+.status__relative-time {
+  text-decoration: none;
 }
 
-.notification-favourite {
-	.status.status-direct {
-		background: transparent;
-
-		.icon-button.disabled {
-			color: lighten($action-button-color, 13%);
-		}
-	}
-}
-
-.status__relative-time,
-.notification__relative_time {
-	color: $dark-text-color;
-	float: right;
-	font-size: 14px;
+.muted {
+  .emojione {
+    opacity: 0.5;
+  }
 }
 
 .status__display-name {
-	color: $dark-text-color;
-}
-
-.status__info .status__display-name {
-	display: block;
-	max-width: 100%;
-	padding-right: 25px;
-}
-
-.status__info {
-	font-size: 15px;
-	z-index: 4;
-}
-
-.status-check-box {
-	border-bottom: 1px solid $ui-secondary-color;
-	display: flex;
-
-	.status-check-box__status {
-		margin: 10px 0 10px 10px;
-		flex: 1;
-
-		.media-gallery {
-			max-width: 250px;
-		}
-
-		.status__content {
-			padding: 0;
-			white-space: normal;
-		}
-
-		.video-player {
-			margin-top: 8px;
-			max-width: 250px;
-		}
-
-		.media-gallery__item-thumbnail {
-			cursor: default;
-		}
-	}
-}
-
-.status-check-box-toggle {
-	align-items: center;
-	display: flex;
-	flex: 0 0 auto;
-	justify-content: center;
-	padding: 10px;
-}
-
-.status__prepend {
-	margin-left: 68px;
-	color: $dark-text-color;
-	padding: 8px 0;
-	padding-bottom: 2px;
-	font-size: 14px;
-	position: relative;
-
-	.status__display-name strong {
-		color: $dark-text-color;
-	}
-
-	> span {
-		display: block;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-.status__action-bar {
-	align-items: center;
-	display: flex;
-	margin-top: 25px;
-	z-index: 4;
-
-	&__counter {
-		display: inline-flex;
-		margin-right: 22px;
-		align-items: center;
-
-		.status__action-bar-button {
-			margin-right: 4px;
-		}
-
-		&__label {
-			display: inline-block;
-			width: 14px;
-			font-size: 12px;
-			font-weight: 500;
-			color: $action-button-color;
-		}
-	}
-}
-
-.status__action-bar-button {
-	margin-right: 18px;
-}
-
-.status__action-bar-dropdown {
-	height: 23.15px;
-	width: 23.15px;
-}
-
-.detailed-status__action-bar-dropdown {
-	flex: 1 1 auto;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-}
-
-.detailed-status {
-	background: lighten($ui-base-color, 4%);
-	padding: 14px 10px;
-
-	&--flex {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		align-items: flex-start;
-
-		.status__content,
-		.detailed-status__meta {
-			flex: 100%;
-		}
-	}
-
-	.status__content {
-		font-size: 19px;
-		line-height: 24px;
-
-		.emojione {
-			width: 24px;
-			height: 24px;
-			margin: -1px 0 0;
-		}
-
-		.status__content__spoiler-link {
-			line-height: 24px;
-			margin: -1px 0 0;
-		}
-	}
-
-	.video-player {
-		margin-top: 8px;
-	}
-}
-
-.detailed-status__meta {
-	margin-top: 15px;
-	color: $dark-text-color;
-	font-size: 14px;
-	line-height: 18px;
-}
-
-.detailed-status__action-bar {
-	background: lighten($ui-base-color, 4%);
-	border-top: 1px solid lighten($ui-base-color, 8%);
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-	display: flex;
-	flex-direction: row;
-	padding: 10px 0;
-}
-
-.detailed-status__link {
-	color: $action-button-color;
-	cursor: pointer;
-	text-decoration: none;
-	font-size: 13px;
-}
-
-.detailed-status__favorites,
-.detailed-status__reblogs {
-	display: inline-block;
-	font-weight: 500;
-	font-size: 12px;
-	margin-left: 6px;
-}
-
-.reply-indicator__content {
-	color: $gab-default-text-light;
-	font-size: 14px;
-
-	a {
-		color: $lighter-text-color;
-	}
-}
-
-.domain {
-	padding: 10px;
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-	.domain__domain-name {
-		flex: 1 1 auto;
-		display: block;
-		color: $primary-text-color;
-		text-decoration: none;
-		font-size: 14px;
-		font-weight: 500;
-	}
-}
-
-.domain__wrapper {
-	display: flex;
-}
-
-.domain_buttons {
-	height: 18px;
-	padding: 10px;
-	white-space: nowrap;
-}
-
-.account {
-	padding: 10px;
-
-  &:not(:last-of-type) {
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
+  &:hover strong {
+    text-decoration: underline;
   }
-
-	&.compact {
-		padding: 0;
-		border-bottom: 0;
-
-		.account__avatar-wrapper {
-			margin-left: 0;
-		}
-	}
-
-	.account__display-name {
-		flex: 1 1 auto;
-		display: block;
-		color: $darker-text-color;
-		overflow: hidden;
-		text-decoration: none;
-		font-size: 14px;
-	}
-}
-
-.account__wrapper {
-	display: flex;
-}
-
-.account__avatar-wrapper {
-	float: left;
-	margin-right: 12px;
-}
-
-.account__avatar {
-	@include avatar-radius();
-	position: relative;
-	background-color: $ui-base-color;
-
-	&-inline {
-		display: inline-block;
-		vertical-align: middle;
-		margin-right: 5px;
-	}
-
-	&-composite {
-		@include avatar-radius();
-		overflow: hidden;
-
-		& > div {
-			@include avatar-radius();
-			float: left;
-			position: relative;
-			box-sizing: border-box;
-		}
-	}
-}
-
-a .account__avatar {
-	cursor: pointer;
-}
-
-.account__avatar-overlay {
-	@include avatar-size(48px);
-
-	&-base {
-		@include avatar-radius();
-		@include avatar-size(36px);
-	}
-
-	&-overlay {
-		@include avatar-radius();
-		@include avatar-size(24px);
-
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		z-index: 1;
-	}
-}
-
-.account__relationship {
-	height: auto;
-	padding: 0 0 0 5px;
-	position: relative;
-
-	.dismiss-account-btn {
-		display: block;
-		margin-bottom: 5px;
-	}
-}
-
-.account__disclaimer {
-	padding: 10px;
-	border-top: 1px solid lighten($ui-base-color, 8%);
-	color: $dark-text-color;
-
-	strong {
-		font-weight: 500;
-
-		@each $lang in $cjk-langs {
-			&:lang(#{$lang}) {
-				font-weight: 700;
-			}
-		}
-	}
-
-	a {
-		font-weight: 500;
-		color: inherit;
-		text-decoration: underline;
-
-		&:hover,
-		&:focus,
-		&:active {
-			text-decoration: none;
-		}
-	}
-}
-
-.account__action-bar {
-	border-top: 1px solid lighten($ui-base-color, 8%);
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-	line-height: 36px;
-	overflow: hidden;
-	flex: 0 0 auto;
-	display: flex;
-}
-
-.account__action-bar-dropdown {
-	padding: 10px;
-
-	.icon-button {
-		vertical-align: middle;
-	}
-
-	.dropdown--active {
-		.dropdown__content.dropdown__right {
-			left: 6px;
-			right: initial;
-		}
-
-		&::after {
-			bottom: initial;
-			margin-left: 11px;
-			margin-top: -7px;
-			right: initial;
-		}
-	}
-}
-
-.account__action-bar-links {
-	display: flex;
-	flex: 1 1 auto;
-	line-height: 18px;
-	text-align: center;
-}
-
-.account__action-bar__tab {
-	text-decoration: none;
-	overflow: hidden;
-	flex: 0 1 100%;
-	border-right: 1px solid lighten($ui-base-color, 8%);
-	padding: 10px 0;
-	border-bottom: 4px solid transparent;
-
-	&.active {
-		border-bottom: 4px solid $ui-highlight-color;
-	}
-
-	& > span {
-		display: block;
-		text-transform: uppercase;
-		font-size: 11px;
-		color: $darker-text-color;
-	}
-
-	strong {
-		display: block;
-		font-size: 15px;
-		font-weight: 500;
-		color: $primary-text-color;
-
-		@each $lang in $cjk-langs {
-			&:lang(#{$lang}) {
-				font-weight: 700;
-			}
-		}
-	}
-}
-
-.account-authorize {
-	padding: 14px 10px;
-
-	.detailed-status__display-name {
-		display: block;
-		margin-bottom: 15px;
-		overflow: hidden;
-	}
-}
-
-.account-authorize__avatar {
-	float: left;
-	margin-right: 10px;
-}
-
-.status__display-name,
-.status__relative-time,
-.detailed-status__display-name,
-.detailed-status__datetime,
-.detailed-status__application,
-.account__display-name {
-	text-decoration: none;
-}
-
-.status__display-name,
-.account__display-name {
-	strong {
-		color: $primary-text-color;
-	}
 }
 
 .muted {
-	.emojione {
-		opacity: 0.5;
-	}
-}
+  .status__content p,
+  .status__content a {
+    color: $dark-text-color;
+  }
 
-.status__display-name,
-.reply-indicator__display-name,
-.detailed-status__display-name,
-a.account__display-name {
-	&:hover strong {
-		text-decoration: underline;
-	}
-}
+  .status__display-name strong {
+    color: $dark-text-color;
+  }
 
-.account__display-name strong {
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
+  .status__avatar {
+    opacity: 0.5;
+  }
 
-.detailed-status__application,
-.detailed-status__datetime {
-	color: inherit;
-}
+  a.status__content__spoiler-link {
+    background: $ui-base-lighter-color;
+    color: $inverted-text-color;
 
-.detailed-status__display-name {
-	color: $secondary-text-color;
-	display: block;
-	line-height: 24px;
-	margin-bottom: 15px;
-	overflow: hidden;
-
-	strong,
-	span {
-		display: block;
-		text-overflow: ellipsis;
-		overflow: hidden;
-	}
-
-	strong {
-		font-size: 16px;
-		color: $primary-text-color;
-	}
-}
-
-.detailed-status__display-avatar {
-	float: left;
-	margin-right: 10px;
-}
-
-.status__avatar {
-	height: 48px;
-	left: 10px;
-	position: absolute;
-	top: 10px;
-	width: 48px;
-}
-
-.status__expand {
-	width: 68px;
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 100%;
-	cursor: pointer;
-}
-
-.muted {
-	.status__content p,
-	.status__content a {
-		color: $dark-text-color;
-	}
-
-	.status__display-name strong {
-		color: $dark-text-color;
-	}
-
-	.status__avatar {
-		opacity: 0.5;
-	}
-
-	a.status__content__spoiler-link {
-		background: $ui-base-lighter-color;
-		color: $inverted-text-color;
-
-		&:hover {
-			background: lighten($ui-base-lighter-color, 7%);
-			text-decoration: none;
-		}
-	}
-}
-
-.notification__message {
-	margin: 0 10px 0 68px;
-	padding: 8px 0 0;
-	cursor: default;
-	color: $gab-secondary-text;
-	font-size: 15px;
-	line-height: 22px;
-	position: relative;
-
-	.fa {
-		color: $highlight-text-color;
-	}
-
-	> span {
-		display: inline;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
-
-.notification__favourite-icon-wrapper {
-	left: -26px;
-	position: absolute;
-
-	.star-icon {
-		color: $gold-star;
-	}
-}
-
-.star-icon.active {
-	color: $gold-star;
-}
-
-.notification__display-name {
-	color: inherit;
-	font-weight: 500;
-	text-decoration: none;
-
-	&:hover {
-		color: $primary-text-color;
-		text-decoration: underline;
-	}
-}
-
-.notification__relative_time {
-	float: right;
-}
-
-.display-name {
-	display: block;
-	max-width: 100%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	word-break: break-word;
-}
-
-.display-name__html {
-	font-weight: 600;
-	padding-right: 4px;
-}
-
-.display-name__account {
-	font-size: 14px;
-}
-
-.status__relative-time,
-.detailed-status__datetime {
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
-.image-loader {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-direction: column;
-
-	.image-loader__preview-canvas {
-		max-width: $media-modal-media-max-width;
-		max-height: $media-modal-media-max-height;
-		background: url('../images/void.png') repeat;
-		object-fit: contain;
-	}
-
-	.loading-bar {
-		position: relative;
-	}
-
-	&.image-loader--amorphous .image-loader__preview-canvas {
-		display: none;
-	}
-}
-
-.zoomable-image {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	img {
-		max-width: $media-modal-media-max-width;
-		max-height: $media-modal-media-max-height;
-		width: auto;
-		height: auto;
-		object-fit: contain;
-	}
-}
-
-.navigation-bar {
-	padding: 10px;
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-	cursor: default;
-	color: $darker-text-color;
-
-	strong {
-		color: $secondary-text-color;
-	}
-
-	a {
-		color: inherit;
-	}
-
-	.permalink {
-		text-decoration: none;
-	}
-
-	.navigation-bar__actions {
-		position: relative;
-
-		.icon-button.close {
-			position: absolute;
-			pointer-events: none;
-			transform: scale(0.0, 1.0) translate(-100%, 0);
-			opacity: 0;
-		}
-
-		.compose__action-bar .icon-button {
-			pointer-events: auto;
-			transform: scale(1.0, 1.0) translate(0, 0);
-			opacity: 1;
-		}
-	}
-}
-
-.navigation-bar__profile {
-	flex: 1 1 auto;
-	margin-left: 8px;
-	line-height: 20px;
-	margin-top: -1px;
-	overflow: hidden;
-}
-
-.navigation-bar__profile-account {
-	display: block;
-	font-weight: 500;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.navigation-bar__profile-edit {
-	color: inherit;
-	text-decoration: none;
-}
-
-.columns-area {
-	display: flex;
-	flex: 1 1 auto;
-	flex-direction: row;
-	justify-content: flex-start;
-	position: relative;
-
-	&__panels {
-		display: flex;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-
-		&__pane {
-			height: 100%;
-			pointer-events: none;
-			display: flex;
-			justify-content: flex-end;
-			padding-top: 15px;
-
-			&--start {
-				justify-content: flex-start;
-			}
-
-			&__inner {
-				width: 265px;
-				pointer-events: auto;
-				height: 100%;
-			}
-		}
-
-		&__main {
-			display: flex;
-			flex-direction: column;
-			box-sizing: border-box;
-			width: 100%;
-			max-width: 600px;
-			padding: 0 20px;
-			@media screen and (max-width: 375px) {
-				padding: 0 10px;
-			}
-			@media screen and (min-width: 895px) {
-				margin: 0 20px;
-				padding: 0;
-			}
-		}
-	}
-}
-
-.react-swipeable-view-container {
-	&,
-	.columns-area,
-	.drawer,
-	.column {
-		height: 100%;
-	}
-}
-
-.react-swipeable-view-container > * {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-}
-
-.column {
-	width: 350px;
-	position: relative;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-
-	article {
-		// TEMPORARY - content of columns may be significantly altered
-		background: $gab-background-container;
-	}
-}
-
-.ui {
-	display: block;
-	width: 100%;
-	padding: 0 0 100px 0;
-
-	.page {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-
-	&__top {
-	  display: flex;
-	  width: 100%;
-	  height: auto;
-			z-index: 105;
-
-			@media (min-width:895px) {
-				top: -290px;
-				position: sticky;
-			}
-	}
-
-	&__columns {
-	  display: flex;
-	  flex-direction: column;
-	  width: 100%;
-	  height: 100%;
-	}
+    &:hover {
+      background: lighten($ui-base-lighter-color, 7%);
+      text-decoration: none;
+    }
   }
 }
 
-.drawer {
-	width: 300px;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	overflow-y: hidden;
-}
-
-.drawer__tab {
-	display: block;
-	flex: 1 1 auto;
-	padding: 15px 5px 13px;
-	color: $darker-text-color;
-	text-decoration: none;
-	text-align: center;
-	font-size: 16px;
-	border-bottom: 2px solid transparent;
-}
-
-.column,
-.drawer {
-	flex: 1 1 100%;
-	overflow: hidden;
-}
-
-@media screen and (min-width: 631px) {
-	.columns-area {
-		padding: 0;
-	}
-
-	.column,
-	.drawer {
-		flex: 0 0 auto;
-		padding: 10px;
-		padding-left: 5px;
-		padding-right: 5px;
-
-		&:first-child {
-			padding-left: 10px;
-		}
-
-		&:last-child {
-			padding-right: 10px;
-		}
-	}
-
-	.columns-area > div {
-		.column,
-		.drawer {
-			padding-left: 5px;
-			padding-right: 5px;
-		}
-	}
-}
-
-// TEMPORARY - need a default size for the avatars for now
-// They are sized individually all over the application and need to change with breakpoints as well
-// Might create a mixin to accept the size attribute and apply the various properties where necessary
-.account__avatar {
-	width: 56px;
-	height: 56px;
-	background-size: cover;
-}
-
-.columns-area--mobile {
-	flex-direction: column;
-	width: 100%;
-	margin: 0 auto;
-	.column,
-	.drawer {
-		width: 100%;
-		height: 100%;
-		padding: 0;
-	}
-	.autosuggest-textarea__textarea {font-size: 16px;}
-	.search__input {
-		line-height: 18px;
-		font-size: 16px;
-		padding: 15px;
-		padding-right: 30px;
-	}
-	.search__icon .fa {top: 15px;}
-	@media screen and (min-width: 360px) {padding: 15px 0;}
-	@media screen and (min-width: 630px) {
-		.detailed-status {
-			padding: 15px;
-			.media-gallery,
-			.video-player {
-				margin-top: 15px;
-			}
-		}
-		.account__header__bar {padding: 5px 10px;}
-		.navigation-bar,
-		.compose-form {padding: 15px;}
-		.compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;}
-		.status {
-			padding: 15px 15px 15px (48px + 15px * 2);
-			min-height: 48px + 2px;
-
-			&__avatar {
-				left: 15px;
-				top: 17px;
-			}
-
-			&__content {
-				padding-top: 5px;
-			}
-
-			&__prepend {
-				margin-left: 48px + 15px * 2;
-				padding-top: 15px;
-			}
-
-			&__prepend-icon-wrapper {
-				left: -32px;
-			}
-
-			.media-gallery,
-			.video-player {
-				margin-top: 10px;
-			}
-		}
-
-		.account {
-			padding: 15px 10px;
-		}
-
-		.notification {
-			&__message {
-				margin-left: 48px + 15px * 2;
-				padding-top: 15px;
-			}
-
-			&__favourite-icon-wrapper {
-				left: -32px;
-			}
-
-			.status {
-				padding-top: 8px;
-			}
-
-			.account {
-				padding-top: 8px;
-			}
-
-			.account__avatar-wrapper {
-				margin-left: 17px;
-				margin-right: 15px;
-			}
-		}
-	}
-}
-
-.floating-action-button {
-	z-index: 1000;
-	display: none;
-	@media screen and (max-width: $nav-breakpoint-3) {display: flex;}
-	position: fixed;
-	bottom: 14px;
-	right: 14px;
-	width: 61px;
-	height: 52px;
-	background-image: url('../images/sprite-main-navigation.png');
-	background-repeat: no-repeat;
-	background-size: 161px 152px;
-	background-position: -100px 0;
-	background-color: transparent;
-  border: none;
-	&:hover,
-	&:focus,
-	&:active {background-position: -100px -100px;}
-}
-
-@media screen and (min-width: 360px) {
-	.getting-started__wrapper,
-	.getting-started__trends,
-	.search {
-		margin-bottom: 10px;
-	}
-}
-
-// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer.
-// This controls where the left column breaks.
-@media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
-	.columns-area__panels__pane--left {
-		display: none;
-	}
-}
-
-// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer.
-@media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
-	.search-page .search {
-		display: none;
-	}
-}
-
-// NOTE - Remove all of these weird breakpoint calculations which just spit out an integer.
-@media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
-	.columns-area__panels__pane--right {
-		display: none;
-	}
-}
-
-.icon-with-badge {
-	position: relative;
-
-	&__badge {
-		position: absolute;
-		box-sizing: border-box;
-		left: -16px;
-		top: -14px;
-		@media screen and (max-width: $nav-breakpoint-1) {
-			left: 27px;
-			top: 0;
-		}
-		min-width: 16px;
-		height: 16px;
-		padding: 1px 3px 0;
-		border-radius: 8px;
-		text-align: center;
-		@include font-montserrat();
-		@include font-size(14);
-		@include line-height(14);
-		color: #fff;
-		background: $gab-alert-red;
-	}
-}
-
-.column-link--transparent .icon-with-badge__badge {
-	border-color: darken($ui-base-color, 8%);
-}
-
-.promo-panel {
-  margin-top: 10px;
-  padding: 10px 10px 20px 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 4%);
-
-  .promo-panel-item {
-	display: block;
-
-	&:not(:first-of-type) {
-	  margin-top: 20px;
-	}
-
-	&__icon {
-	  margin-right: 12px;
-	}
-
-	&__message {
-	  display: block;
-	  font-size: 14px;
-	  line-height: 16px;
-	  margin-top: 6px;
-	  color: $primary-text-color;
-
-	  &--dark {
-		color: $ui-secondary-color;
-	  }
-	}
+.status__relative-time {
+  &:hover {
+    text-decoration: underline;
   }
 }
 
-.drawer__pager {
-	box-sizing: border-box;
-	padding: 0;
-	flex-grow: 1;
-	position: relative;
-	overflow: hidden;
-	display: flex;
-}
-
-.drawer__inner {
-	top: 0;
-	left: 0;
-	background: lighten($ui-base-color, 13%);
-	box-sizing: border-box;
-	padding: 0;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-	overflow-y: auto;
-	width: 100%;
-	height: 100%;
-
-	&.darker {
-		background: $ui-base-color;
-	}
-}
-
-.drawer__inner__gabsocial {
-	background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
-	flex: 1;
-	min-height: 47px;
-	display: none;
-
-	> img {
-		display: block;
-		object-fit: contain;
-		object-position: bottom left;
-		width: 100%;
-		height: 100%;
-		pointer-events: none;
-		user-drag: none;
-		user-select: none;
-	}
-
-	@media screen and (min-height: 640px) {
-		display: block;
-	}
-}
-
-.pseudo-drawer {
-	background: lighten($ui-base-color, 13%);
-	font-size: 13px;
-	text-align: left;
-}
-
-.drawer__header {
-	flex: 0 0 auto;
-	font-size: 16px;
-	background: lighten($ui-base-color, 8%);
-	margin-bottom: 10px;
-	display: flex;
-	flex-direction: row;
-
-	a {
-		transition: background 100ms ease-in;
-
-		&:hover {
-			background: lighten($ui-base-color, 3%);
-			transition: background 200ms ease-out;
-		}
-	}
-}
-
-.slist {
-	&--flex {
-		display: flex;
-		flex-direction: column;
-	}
-
-	&__append {
-		flex: 1 1 auto;
-		position: relative;
-		min-height: 120px;
-	}
-}
-
-.column-back-button {
-	background: lighten($ui-base-color, 4%);
-	color: $highlight-text-color;
-	cursor: pointer;
-	flex: 0 0 auto;
-	font-size: 16px;
-	line-height: inherit;
-	border: 0;
-	text-align: unset;
-	padding: 15px;
-	margin: 0;
-	z-index: 3;
-	outline: 0;
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
-.column-header__back-button {
-	background: lighten($ui-base-color, 4%);
-	border: 0;
-	font-family: inherit;
-	color: $highlight-text-color;
-	cursor: pointer;
-	white-space: nowrap;
-	font-size: 16px;
-	padding: 0 5px 0 0;
-	z-index: 3;
-
-	&:hover {
-		text-decoration: underline;
-	}
-
-	&:last-child {
-		padding: 0 15px 0 0;
-	}
-}
-
-.column-back-button__icon {
-	display: inline-block;
-	margin-right: 5px;
-}
-
-.column-back-button--slim {
-	position: relative;
-}
-
-.column-back-button--slim-button {
-	cursor: pointer;
-	flex: 0 0 auto;
-	font-size: 16px;
-	padding: 15px;
-	position: absolute;
-	right: 0;
-	top: -48px;
-}
-
-.react-toggle {
-	display: inline-block;
-	position: relative;
-	cursor: pointer;
-	background-color: transparent;
-	border: 0;
-	padding: 0;
-	user-select: none;
-	-webkit-tap-highlight-color: rgba($base-overlay-background, 0);
-	-webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-}
-
-.react-toggle--disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-.react-toggle-track {
-	width: 50px;
-	height: 24px;
-	padding: 0;
-	border-radius: 30px;
-	background-color: $ui-base-color;
-	transition: background-color 0.2s ease;
-}
-
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-	background-color: darken($ui-base-color, 10%);
-}
-
-.react-toggle--checked .react-toggle-track {
-	background-color: $gab-brand-default;
-}
-
-.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
-	background-color: lighten($gab-brand-default, 10%);
-}
-
-.react-toggle-track-check {
-	position: absolute;
-	width: 14px;
-	height: 10px;
-	top: 0;
-	bottom: 0;
-	margin-top: auto;
-	margin-bottom: auto;
-	line-height: 0;
-	left: 8px;
-	opacity: 0;
-	transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-check {
-	opacity: 1;
-	transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-	position: absolute;
-	width: 10px;
-	height: 10px;
-	top: 0;
-	bottom: 0;
-	margin-top: auto;
-	margin-bottom: auto;
-	line-height: 0;
-	right: 10px;
-	opacity: 1;
-	transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-x {
-	opacity: 0;
-}
-
-.react-toggle-thumb {
-	position: absolute;
-	top: 1px;
-	left: 1px;
-	width: 22px;
-	height: 22px;
-	border: 1px solid $ui-base-color;
-	border-radius: 50%;
-	background-color: darken($simple-background-color, 2%);
-	box-sizing: border-box;
-	transition: all 0.25s ease;
-	transition-property: border-color, left;
-}
-
-.react-toggle--checked .react-toggle-thumb {
-	left: 27px;
-	border-color: $gab-brand-default;
-}
-
-.column-link {
-	background: lighten($ui-base-color, 8%);
-	color: $primary-text-color;
-	display: block;
-	font-size: 16px;
-	padding: 15px;
-	text-decoration: none;
-
-	&:hover,
-	&:focus,
-	&:active {
-		background: lighten($ui-base-color, 11%);
-	}
-
-	&:focus {
-		outline: 0;
-	}
-
-	&--transparent {
-		background: transparent;
-		color: $ui-secondary-color;
-
-		&:hover,
-		&:focus,
-		&:active {
-			background: transparent;
-			color: $primary-text-color;
-		}
-
-		&.active {
-			color: $ui-highlight-color;
-		}
-	}
-}
-
-.column-link__icon {
-	display: inline-block;
-	margin-right: 5px;
-}
-
-.column-link__badge {
-	display: inline-block;
-	border-radius: 4px;
-	font-size: 12px;
-	line-height: 19px;
-	font-weight: 500;
-	background: $ui-base-color;
-	padding: 4px 8px;
-	margin: -6px 10px;
-}
-
-.column-subheading {
-	background: $ui-base-color;
-	color: $dark-text-color;
-	padding: 8px 20px;
-	font-size: 12px;
-	font-weight: 500;
-	text-transform: uppercase;
-	cursor: default;
-}
-
-.getting-started__wrapper,
-.getting-started,
-.flex-spacer {
-	background: $ui-base-color;
-}
-
-.getting-started__wrapper {
-	flex: 0 0 auto;
-}
-
-.flex-spacer {
-	flex: 1 1 auto;
-}
-
-.getting-started {
-	color: $dark-text-color;
-	overflow: auto;
-
-	&__footer {
-		flex: 0 0 auto;
-		padding: 10px;
-		padding-top: 20px;
-
-		ul {
-			margin-bottom: 10px;
-		}
-
-		ul li {
-			display: inline;
-		}
-
-		p {
-			color: $dark-text-color;
-			font-size: 13px;
-			margin-bottom: 20px;
-
-			a {
-				color: $gab-secondary-text;
-				text-decoration: underline;
-			}
-		}
-
-		a {
-			text-decoration: none;
-			color: $gab-secondary-text;
-
-			&:hover,
-			&:focus,
-			&:active {
-				text-decoration: underline;
-			}
-		}
-	}
-
-	&__trends {
-		background: $ui-base-color;
-		flex: 0 1 auto;
-
-		@media screen and (max-height: 810px) {
-			.trends__item:nth-child(3) {
-				display: none;
-			}
-		}
-
-		@media screen and (max-height: 720px) {
-			.trends__item:nth-child(2) {
-				display: none;
-			}
-		}
-
-		@media screen and (max-height: 670px) {
-			display: none;
-		}
-	}
-}
-
-.keyboard-shortcuts {
-	padding: 8px 0 0;
-	overflow: hidden;
-	background-color: $classic-base-color;
-	border-radius: 6px;
-
-	@media screen and (max-width: 960px) {
-		height: 90vh;
-	}
-
-	&__header {
-		display: block;
-		position: relative;
-		border-bottom: 1px solid lighten($classic-base-color, 8%);
-		border-radius: 6px 6px 0 0;
-		padding-top: 12px;
-		padding-bottom: 12px;
-
-		&__title {
-			display: block;
-			width: 80%;
-			margin: 0 auto;
-			font-size: 18px;
-			font-weight: bold;
-			line-height: 24px;
-			color: $primary-text-color;
-			text-align: center;
-		}
-	}
-
-	&__close {
-	position: absolute;
-	right: 10px;
-	top: 10px;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: row;
-		padding: 15px;
-
-		@media screen and (max-width: 960px) {
-			flex-direction: column;
-			overflow: hidden;
-		overflow-y: scroll;
-		height: calc(100% - 80px);
-			-webkit-overflow-scrolling: touch;
-		}
-	}
-
-	table {
-		thead {
-			display: block;
-			padding-left: 10px;
-			margin-bottom: 10px;
-			color: $primary-text-color;
-			font-size: 16px;
-			font-weight: 600;
-		}
-
-		tr {
-			font-size: 12px;
-		}
-
-		td {
-			padding: 0 10px 8px;
-		}
-
-		kbd {
-			display: inline-block;
-			padding: 2px 8px;
-			background-color: lighten($ui-base-color, 8%);
-			border: 1px solid darken($ui-base-color, 4%);
-			border-radius: 4px;
-		}
-	}
-}
-
-.setting-text {
-	color: $darker-text-color;
-	background: transparent;
-	border: none;
-	border-bottom: 2px solid $ui-primary-color;
-	box-sizing: border-box;
-	display: block;
-	font-family: inherit;
-	margin-bottom: 10px;
-	padding: 7px 0;
-	width: 100%;
-
-	&:focus,
-	&:active {
-		color: $primary-text-color;
-		border-bottom-color: $highlight-text-color;
-	}
-
-	@media screen and (max-width: 600px) {
-		font-size: 16px;
-	}
-}
-
-.no-reduce-motion button.icon-button i.fa-retweet {
-	background-position: 0 0;
-	height: 19px;
-	transition: background-position 0.9s steps(10);
-	transition-duration: 0s;
-	vertical-align: middle;
-	width: 22px;
-
-	&::before {
-		display: none !important;
-	}
-
-}
-
-.no-reduce-motion button.icon-button.active i.fa-retweet {
-	transition-duration: 0.9s;
-	background-position: 0 100%;
-}
-
-.reduce-motion button.icon-button i.fa-retweet {
-	color: $action-button-color;
-	transition: color 100ms ease-in;
-}
-
-.reduce-motion button.icon-button.active i.fa-retweet {
-	color: $highlight-text-color;
-}
-
-.status-card {
-	display: flex;
-	font-size: 14px;
-	border: 1px solid lighten($ui-base-color, 8%);
-	border-radius: 4px;
-	color: $dark-text-color;
-	margin-top: 14px;
-	text-decoration: none;
-	overflow: hidden;
-
-	&__actions {
-		bottom: 0;
-		left: 0;
-		position: absolute;
-		right: 0;
-		top: 0;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		& > div {
-			background: rgba($base-shadow-color, 0.6);
-			border-radius: 8px;
-			padding: 12px 9px;
-			flex: 0 0 auto;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-
-		button,
-		a {
-			display: inline;
-			color: $secondary-text-color;
-			background: transparent;
-			border: 0;
-			padding: 0 8px;
-			text-decoration: none;
-			font-size: 18px;
-			line-height: 18px;
-
-			&:hover,
-			&:active,
-			&:focus {
-				color: $primary-text-color;
-			}
-		}
-
-		a {
-			font-size: 19px;
-			position: relative;
-			bottom: -1px;
-		}
-	}
-}
-
-a.status-card {
-	cursor: pointer;
-
-	&:hover {
-		background: lighten($ui-base-color, 8%);
-	}
-}
-
-.status-card-photo {
-	cursor: zoom-in;
-	display: block;
-	text-decoration: none;
-	width: 100%;
-	height: auto;
-	margin: 0;
-}
-
-.status-card-video {
-	iframe {
-		width: 100%;
-		height: 100%;
-	}
-}
-
-.status-card__title {
-	display: block;
-	font-weight: 500;
-	margin-bottom: 5px;
-	color: $darker-text-color;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	text-decoration: none;
-}
-
-.status-card__content {
-	flex: 1 1 auto;
-	overflow: hidden;
-	padding: 14px 14px 14px 8px;
-}
-
-.status-card__description {
-	color: $darker-text-color;
-}
-
-.status-card__host {
-	display: block;
-	margin-top: 5px;
-	font-size: 13px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.status-card__image {
-	flex: 0 0 100px;
-	background: lighten($ui-base-color, 8%);
-	position: relative;
-
-	& > .fa {
-		font-size: 21px;
-		position: absolute;
-		transform-origin: 50% 50%;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-}
-
-.status-card.horizontal {
-	display: block;
-
-	.status-card__image {
-		width: 100%;
-	}
-
-	.status-card__image-image {
-		border-radius: 4px 4px 0 0;
-	}
-
-	.status-card__title {
-		white-space: inherit;
-	}
-}
-
-.status-card.compact {
-	border-color: lighten($ui-base-color, 4%);
-
-	&.interactive {
-		border: 0;
-	}
-
-	.status-card__content {
-		padding: 8px;
-		padding-top: 10px;
-	}
-
-	.status-card__title {
-		white-space: nowrap;
-	}
-
-	.status-card__image {
-		flex: 0 0 60px;
-	}
-}
-
-a.status-card.compact:hover {
-	background-color: lighten($ui-base-color, 4%);
-}
-
-.status-card__image-image {
-	border-radius: 4px 0 0 4px;
-	display: block;
-	margin: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	background-size: cover;
-	background-position: center center;
-}
-
-.load-more {
-	display: block;
-	color: $dark-text-color;
-	background-color: transparent;
-	border: 0;
-	font-size: inherit;
-	text-align: center;
-	line-height: inherit;
-	margin: 0;
-	padding: 15px;
-	box-sizing: border-box;
-	width: 100%;
-	clear: both;
-	text-decoration: none;
-
-	&:hover {
-		background: lighten($ui-base-color, 2%);
-	}
-}
-
-.load-gap {
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-}
-
-.regeneration-indicator {
-	text-align: center;
-	font-size: 16px;
-	font-weight: 500;
-	color: $dark-text-color;
-	background: $ui-base-color;
-	cursor: default;
-	display: flex;
-	flex: 1 1 auto;
-	align-items: center;
-	justify-content: center;
-	padding: 20px;
-
-	& > div {
-		width: 100%;
-		background: transparent;
-		padding-top: 0;
-	}
-
-	&__label {
-		strong {
-			display: block;
-			margin-bottom: 10px;
-			color: $dark-text-color;
-		}
-
-		span {
-			font-size: 15px;
-			font-weight: 400;
-		}
-	}
-}
-
-.columns-area--mobile .column {@include gab-container-standards();}
-.column-header__wrapper {
-	position: relative;
-	flex: 0 0 auto;
-	overflow: hidden;
-
-	&.active {
-		&::before {
-			display: block;
-			content: "";
-			position: absolute;
-			top: 35px;
-			left: 0;
-			right: 0;
-			margin: 0 auto;
-			width: 60%;
-			pointer-events: none;
-			height: 28px;
-			z-index: 1;
-			background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
-		}
-	}
-}
-
-.column-header {
-	display: flex;
-	font-size: 16px;
-
-	background: $gab-background-container;
-	body.theme-gabsocial-light & {
-		background: $gab-background-container-light;
-		color: $gab-default-text-light;
-	}
-
-	flex: 0 0 auto;
-	cursor: pointer;
-	position: relative;
-	z-index: 2;
-	outline: 0;
-	overflow: hidden;
-
-	& > button,
-	& > .btn {
-		margin: 0;
-		border: none;
-		padding: 15px;
-		color: inherit;
-		background: transparent;
-		font: inherit;
-		text-align: left;
-		text-decoration: none;
-		white-space: nowrap;
-
-		&--sub {
-			font-size: 14px;
-    	padding: 6px 10px;
-		}
-
-		&.grouped {
-			margin: 6px;
-		}
-
-		&.active {
-			color: $primary-text-color;
-			border-radius: 10px;
-			background-color: rgba($highlight-text-color, .1);
-		}
-	}
-
-	& > .column-header__back-button {
-		color: $highlight-text-color;
-	}
-
-	&.active {
-		box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
-
-		.column-header__icon {
-			color: $highlight-text-color;
-			text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
-		}
-	}
-
-	&:focus,
-	&:active {
-		outline: 0;
-	}
-}
-
-.column-header__buttons {
-	height: 48px;
-	display: flex;
-	margin-left: auto;
-}
-
-.column-header__links .text-btn {
-	margin-right: 10px;
-}
-
-.column-header__button {
-	cursor: pointer;
-	border: 0;
-	padding: 0 15px;
-	font-size: 16px;
-	color: #fff;
-	background: $gab-background-container;
-	body.theme-gabsocial-light & {
-		color: $gab-default-text-light;
-		background: $gab-background-container-light;
-	}
-	&:hover {color: lighten($darker-text-color, 7%);}
-
-	&.active {
-		color: $primary-text-color;
-		background: lighten($ui-base-color, 8%);
-
-		&:hover {
-			color: $primary-text-color;
-			background: lighten($ui-base-color, 8%);
-		}
-	}
-}
-
-.column-header__collapsible {
-	max-height: 70vh;
-	overflow: hidden;
-	overflow-y: auto;
-	color: $darker-text-color;
-	transition: max-height 150ms ease-in-out, opacity 300ms linear;
-	opacity: 1;
-
-	&.collapsed {
-		max-height: 0;
-		opacity: 0.5;
-	}
-
-	&.animating {
-		overflow-y: hidden;
-	}
-
-	hr {
-		height: 0;
-		background: transparent;
-		border: 0;
-		border-top: 1px solid lighten($ui-base-color, 12%);
-		margin: 10px 0;
-	}
-}
-
-.column-header__collapsible-inner {
-	background: #3f3f3f;
-	body.theme-gabsocial-light & {background: #e6e6e6;}
-	padding: 15px;
-}
-
-.column-header__setting-btn {
-	&--link {
-		text-decoration: none;
-
-		.fa {
-			margin-left: 10px;
-		}
-	}
-	&:hover {
-		color: $darker-text-color;
-		text-decoration: underline;
-	}
-}
-
-.column-header__setting-arrows {
-	float: right;
-
-	.column-header__setting-btn {
-		padding: 0 10px;
-
-		&:last-child {
-			padding-right: 0;
-		}
-	}
-}
-
-.column-header__expansion {
-	overflow-x: scroll;
-	overflow-y: hidden;
-	white-space: nowrap;
-}
-
-.text-btn {
-	display: inline-block;
-	padding: 0;
-	font-family: inherit;
-	font-size: inherit;
-	color: inherit;
-	border: 0;
-	background: transparent;
-	cursor: pointer;
-}
-
-.column-header__icon {
-	display: inline-block;
-	margin-right: 5px;
-}
-
-.loading-indicator {
-	color: $dark-text-color;
-	font-size: 12px;
-	font-weight: 400;
-	text-transform: uppercase;
-	overflow: visible;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-
-	span {
-		display: block;
-		float: left;
-		margin-left: 50%;
-		transform: translateX(-50%);
-		margin: 82px 0 0 50%;
-		white-space: nowrap;
-	}
-}
-
-.loading-indicator__figure {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 42px;
-	height: 42px;
-	box-sizing: border-box;
-	background-color: transparent;
-	border: 0 solid lighten($ui-base-color, 26%);
-	border-width: 6px;
-	border-radius: 50%;
-}
-
-.no-reduce-motion .loading-indicator span {
-	animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
-}
-
-.no-reduce-motion .loading-indicator__figure {
-	animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
-}
-
-@keyframes loader-figure {
-	0% {
-		width: 0;
-		height: 0;
-		background-color: lighten($ui-base-color, 26%);
-	}
-
-	29% {
-		background-color: lighten($ui-base-color, 26%);
-	}
-
-	30% {
-		width: 42px;
-		height: 42px;
-		background-color: transparent;
-		border-width: 21px;
-		opacity: 1;
-	}
-
-	100% {
-		width: 42px;
-		height: 42px;
-		border-width: 0;
-		opacity: 0;
-		background-color: transparent;
-	}
-}
-
-@keyframes loader-label {
-	0% { opacity: 0.25; }
-	30% { opacity: 1; }
-	100% { opacity: 0.25; }
-}
-
-.video-error-cover {
-	align-items: center;
-	background: $base-overlay-background;
-	color: $primary-text-color;
-	cursor: pointer;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	justify-content: center;
-	margin-top: 8px;
-	position: relative;
-	text-align: center;
-	z-index: 100;
-}
-
-.media-spoiler {
-	background: $base-overlay-background;
-	color: $darker-text-color;
-	border: 0;
-	padding: 0;
-	width: 100%;
-	height: 100%;
-	border-radius: 4px;
-	appearance: none;
-
-	&:hover,
-	&:active,
-	&:focus {
-		padding: 0;
-		color: lighten($darker-text-color, 8%);
-	}
-}
-
-.media-spoiler__warning {
-	display: block;
-	font-size: 14px;
-}
-
-.media-spoiler__trigger {
-	display: block;
-	font-size: 11px;
-	font-weight: 700;
-}
-
-.spoiler-button {
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 100;
-
-	&--minified {
-		display: block;
-		left: 4px;
-		top: 4px;
-		width: auto;
-		height: auto;
-	}
-
-	&--hidden {
-		display: none;
-	}
-
-	&__overlay {
-		display: block;
-		background: transparent;
-		width: 100%;
-		height: 100%;
-		border: 0;
-
-		&__label {
-			display: inline-block;
-			background: rgba($base-overlay-background, 0.5);
-			border-radius: 8px;
-			padding: 8px 12px;
-			color: $primary-text-color;
-			font-weight: 500;
-			font-size: 14px;
-		}
-
-		&:hover,
-		&:focus,
-		&:active {
-			.spoiler-button__overlay__label {
-				background: rgba($base-overlay-background, 0.8);
-			}
-		}
-	}
-}
-
-.modal-container--preloader {
-	background: lighten($ui-base-color, 8%);
-}
-
-.account--panel {
-	background: lighten($ui-base-color, 4%);
-	border-top: 1px solid lighten($ui-base-color, 8%);
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-	display: flex;
-	flex-direction: row;
-	padding: 10px 0;
-}
-
-.account--panel__button,
-.detailed-status__button {
-	flex: 1 1 auto;
-	text-align: center;
-}
-
-.column-settings__outer {
-	background: lighten($ui-base-color, 8%);
-	padding: 15px;
-}
-
-.column-settings__section {
-	color: $darker-text-color;
-	cursor: default;
-	display: block;
-	font-weight: 500;
-	margin-bottom: 10px;
-}
-
-.column-settings__hashtags {
-	.column-settings__row {
-		margin-bottom: 15px;
-	}
-
-	.column-select {
-		&__control {
-			@include search-input();
-		}
-
-		&__placeholder {
-			color: $dark-text-color;
-			padding-left: 2px;
-			font-size: 12px;
-		}
-
-		&__value-container {
-			padding-left: 6px;
-		}
-
-		&__multi-value {
-			background: lighten($ui-base-color, 8%);
-
-			&__remove {
-				cursor: pointer;
-
-				&:hover,
-				&:active,
-				&:focus {
-					background: lighten($ui-base-color, 12%);
-					color: lighten($darker-text-color, 4%);
-				}
-			}
-		}
-
-		&__multi-value__label,
-		&__input {
-			color: $darker-text-color;
-		}
-
-		&__clear-indicator,
-		&__dropdown-indicator {
-			cursor: pointer;
-			transition: none;
-			color: $dark-text-color;
-
-			&:hover,
-			&:active,
-			&:focus {
-				color: lighten($dark-text-color, 4%);
-			}
-		}
-
-		&__indicator-separator {
-			background-color: lighten($ui-base-color, 8%);
-		}
-
-		&__menu {
-			@include search-popout();
-			padding: 0;
-			background: $ui-secondary-color;
-		}
-
-		&__menu-list {
-			padding: 6px;
-		}
-
-		&__option {
-			color: $inverted-text-color;
-			border-radius: 4px;
-			font-size: 14px;
-
-			&--is-focused,
-			&--is-selected {
-				background: darken($ui-secondary-color, 10%);
-			}
-		}
-	}
-}
-
-.column-settings__row {
-	.text-btn {
-		margin-bottom: 15px;
-	}
-}
-
-.relationship-tag {
-	color: $primary-text-color;
-	margin-bottom: 4px;
-	display: block;
-	vertical-align: top;
-	background-color: $base-overlay-background;
-	text-transform: uppercase;
-	font-size: 11px;
-	font-weight: 500;
-	padding: 4px;
-	border-radius: 4px;
-	opacity: 0.7;
-
-	&:hover {
-		opacity: 1;
-	}
-}
-
-.setting-toggle {
-	display: block;
-	line-height: 24px;
-}
-
-.setting-toggle__label {
-	color: $darker-text-color;
-	display: inline-block;
-	margin-bottom: 14px;
-	margin-left: 8px;
-	vertical-align: middle;
-}
-
-.empty-column-indicator,
-.error-column {
-	color: $dark-text-color;
-	background: $ui-base-color;
-	text-align: center;
-	padding: 40px;
-	font-size: 15px;
-	font-weight: 400;
-	cursor: default;
-	display: flex;
-	flex: 1 1 auto;
-	align-items: center;
-	justify-content: center;
-  min-height: 160px;
-
-	@supports(display: grid) { // hack to fix Chrome <57
-		contain: strict;
-	}
-
-	& > span {
-		max-width: 400px;
-	}
-
-	a {
-		color: $highlight-text-color;
-		text-decoration: none;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-}
-
-.error-column {
-	flex-direction: column;
-}
-
-@keyframes heartbeat {
-	from {
-		transform: scale(1);
-		animation-timing-function: ease-out;
-	}
-
-	10% {
-		transform: scale(0.91);
-		animation-timing-function: ease-in;
-	}
-
-	17% {
-		transform: scale(0.98);
-		animation-timing-function: ease-out;
-	}
-
-	33% {
-		transform: scale(0.87);
-		animation-timing-function: ease-in;
-	}
-
-	45% {
-		transform: scale(1);
-		animation-timing-function: ease-out;
-	}
-}
-
-.no-reduce-motion .pulse-loading {
-	transform-origin: center center;
-	animation: heartbeat 1.5s ease-in-out infinite both;
-}
-
-@keyframes shake-bottom {
-	0%,
-	100% {
-		transform: rotate(0deg);
-		transform-origin: 50% 100%;
-	}
-
-	10% {
-		transform: rotate(2deg);
-	}
-
-	20%,
-	40%,
-	60% {
-		transform: rotate(-4deg);
-	}
-
-	30%,
-	50%,
-	70% {
-		transform: rotate(4deg);
-	}
-
-	80% {
-		transform: rotate(-2deg);
-	}
-
-	90% {
-		transform: rotate(2deg);
-	}
-}
-
-.no-reduce-motion .shake-bottom {
-	transform-origin: 50% 100%;
-	animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
-}
-
-.emoji-picker-dropdown__menu {
-	background: $simple-background-color;
-	position: absolute;
-	box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-	border-radius: 4px;
-	margin-top: 5px;
-	z-index: 20000;
-
-	.emoji-mart-scroll {
-		transition: opacity 200ms ease;
-	}
-
-	&.selecting .emoji-mart-scroll {
-		opacity: 0.5;
-	}
-}
-
-.emoji-picker-dropdown__modifiers {
-	position: absolute;
-	top: 60px;
-	right: 11px;
-	cursor: pointer;
-}
-
-.emoji-picker-dropdown__modifiers__menu {
-	position: absolute;
-	z-index: 4;
-	top: -4px;
-	left: -8px;
-	background: $simple-background-color;
-	border-radius: 4px;
-	box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-	overflow: hidden;
-
-	button {
-		display: block;
-		cursor: pointer;
-		border: 0;
-		padding: 4px 8px;
-		background: transparent;
-
-		&:hover,
-		&:focus,
-		&:active {
-			background: rgba($ui-secondary-color, 0.4);
-		}
-	}
-
-	.emoji-mart-emoji {
-		height: 22px;
-	}
-}
-
 .emoji-mart-emoji {
-	span {
-		background-repeat: no-repeat;
-	}
-}
-
-.upload-area {
-	align-items: center;
-	background: rgba($base-overlay-background, 0.8);
-	display: flex;
-	height: 100%;
-	justify-content: center;
-	left: 0;
-	opacity: 0;
-	position: absolute;
-	top: 0;
-	visibility: hidden;
-	width: 100%;
-	z-index: 2000;
-
-	* {
-		pointer-events: none;
-	}
-}
-
-.upload-area__drop {
-	width: 320px;
-	height: 160px;
-	display: flex;
-	box-sizing: border-box;
-	position: relative;
-	padding: 8px;
-}
-
-.upload-area__background {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: -1;
-	border-radius: 4px;
-	background: $ui-base-color;
-	box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
-}
-
-.upload-area__content {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: $secondary-text-color;
-	font-size: 18px;
-	font-weight: 500;
-	border: 2px dashed $ui-base-lighter-color;
-	border-radius: 4px;
-}
-
-.upload-progress {
-	padding: 10px;
-	color: $lighter-text-color;
-	overflow: hidden;
-	display: flex;
-
-	.fa {
-		font-size: 34px;
-		margin-right: 10px;
-	}
-
-	span {
-		font-size: 12px;
-		text-transform: uppercase;
-		font-weight: 500;
-		display: block;
-	}
-}
-
-.upload-progess__message {
-	flex: 1 1 auto;
-}
-
-.upload-progress__backdrop {
-	width: 100%;
-	height: 6px;
-	border-radius: 6px;
-	background: $ui-base-lighter-color;
-	position: relative;
-	margin-top: 5px;
-}
-
-.upload-progress__tracker {
-	position: absolute;
-	left: 0;
-	top: 0;
-	height: 6px;
-	background: $ui-highlight-color;
-	border-radius: 6px;
-}
-
-.emoji-button {
-	display: block;
-	font-size: 24px;
-	line-height: 24px;
-	margin-left: 2px;
-	width: 24px;
-	outline: 0;
-	cursor: pointer;
-
-	&:active,
-	&:focus {
-		outline: 0 !important;
-	}
-
-	img {
-		filter: grayscale(100%);
-		opacity: 0.8;
-		display: block;
-		margin: 0;
-		width: 22px;
-		height: 22px;
-		margin-top: 2px;
-	}
-
-	&:hover,
-	&:active,
-	&:focus {
-		img {
-			opacity: 1;
-			filter: none;
-		}
-	}
+  span {
+    background-repeat: no-repeat;
+  }
 }
 
 .dropdown--active .emoji-button img {
-	opacity: 1;
-	filter: none;
+  opacity: 1;
+  filter: none;
 }
 
-.privacy-dropdown__dropdown {
-	position: absolute;
-	background: $simple-background-color;
-	box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-	border-radius: 4px;
-	margin-left: 40px;
-	overflow: hidden;
-	z-index: 10000;
-
-	&.top {
-		transform-origin: 50% 100%;
-	}
-
-	&.bottom {
-		transform-origin: 50% 0;
-	}
-}
-
-.privacy-dropdown__option {
-	color: $inverted-text-color;
-	padding: 10px;
-	cursor: pointer;
-	display: flex;
-
-	&:hover,
-	&.active {
-		background: $ui-highlight-color;
-		color: $primary-text-color;
-		outline: 0;
-
-		.privacy-dropdown__option__content {
-			color: $primary-text-color;
-
-			strong {
-				color: $primary-text-color;
-			}
-		}
-	}
-
-	&.active:hover {
-		background: lighten($ui-highlight-color, 4%);
-	}
-}
-
-.privacy-dropdown__option__icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-right: 10px;
-}
-
-.privacy-dropdown__option__content {
-	flex: 1 1 auto;
-	color: $lighter-text-color;
-
-	strong {
-		font-weight: 500;
-		display: block;
-		color: $inverted-text-color;
-
-		@each $lang in $cjk-langs {
-			&:lang(#{$lang}) {
-				font-weight: 700;
-			}
-		}
-	}
-}
-
-.privacy-dropdown.active {
-	.privacy-dropdown__value {
-		background: $simple-background-color;
-		border-radius: 4px 4px 0 0;
-		box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-
-		.icon-button {
-			transition: none;
-		}
-
-		&.active {
-			background: $ui-highlight-color;
-
-			.icon-button {
-				color: $primary-text-color;
-			}
-		}
-	}
-
-	&.top .privacy-dropdown__value {
-		border-radius: 0 0 4px 4px;
-	}
-
-	.privacy-dropdown__dropdown {
-		display: block;
-		box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
-	}
-}
-
-.search {
-	position: relative;
-}
-
-.search__input {
-	display: block;
-	padding: 7px 30px 6px 10px;
-	@include search-input();
-}
-
-.search__icon {
-	&::-moz-focus-inner {
-		border: 0;
-	}
-
-	&::-moz-focus-inner,
-	&:focus {
-		outline: 0 !important;
-	}
-
-	.fa {
-		cursor: default;
-		display: inline-block;
-		position: absolute;
-		top: 8px;
-		right: 6px;
-		z-index: 2;
-		width: 18px;
-		height: 18px;
-		@include font-size(16);
-		color: $gab-placeholder-accent;
-		opacity: 0;
-		pointer-events: none;
-
-		&.active {
-			pointer-events: auto;
-			opacity: 1;
-		}
-	}
-	.fa-search.active {pointer-events: none;}
-
-	.fa-times-circle {
-		cursor: pointer;
-		@include font-size(17);
-		color: $gab-alert-red;
-		&:hover {color: lighten($gab-alert-red, 7%);}
-	}
-}
-
-.search-results__header {
-	color: $dark-text-color;
-	background: lighten($ui-base-color, 2%);
-	padding: 15px;
-	font-weight: 500;
-	font-size: 16px;
-	cursor: default;
-
-	.fa {
-		display: inline-block;
-		margin-right: 5px;
-	}
-}
-
-.search-results__section {
-	margin-bottom: 5px;
-
-	h5 {
-		background: darken($ui-base-color, 4%);
-		border-bottom: 1px solid lighten($ui-base-color, 8%);
-		cursor: default;
-		display: flex;
-		padding: 15px;
-		font-weight: 500;
-		font-size: 16px;
-		color: $dark-text-color;
-
-		.fa {
-			display: inline-block;
-			margin-right: 5px;
-		}
-	}
-
-	.account:last-child,
-	& > div:last-child .status {
-		border-bottom: 0;
-	}
-}
-
-.search-results__hashtag {
-	display: block;
-	padding: 10px;
-	color: $secondary-text-color;
-	text-decoration: none;
-
-	&:hover,
-	&:active,
-	&:focus {
-		color: lighten($secondary-text-color, 4%);
-		text-decoration: underline;
-	}
-}
-
-////////////////////////////////////////////////////////////////////////////////////////////////
-
-
-////////////////////////////////////////////////////////////////////////////////////////////////
-
-
 .loading-bar {
-	background-color: $highlight-text-color;
-	height: 3px;
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.media-gallery__gifv__label {
-	display: block;
-	position: absolute;
-	color: $primary-text-color;
-	background: rgba($base-overlay-background, 0.5);
-	bottom: 6px;
-	left: 6px;
-	padding: 2px 6px;
-	border-radius: 2px;
-	font-size: 11px;
-	font-weight: 600;
-	z-index: 1;
-	pointer-events: none;
-	opacity: 0.9;
-	transition: opacity 0.1s ease;
-	line-height: 18px;
-}
-
-.media-gallery__gifv {
-	&.autoplay {
-		.media-gallery__gifv__label {
-			display: none;
-		}
-	}
-
-	&:hover {
-		.media-gallery__gifv__label {
-			opacity: 1;
-		}
-	}
-}
-
-.attachment-list {
-	display: flex;
-	font-size: 14px;
-	border: 1px solid lighten($ui-base-color, 8%);
-	border-radius: 4px;
-	margin-top: 14px;
-	overflow: hidden;
-
-	&__icon {
-		flex: 0 0 auto;
-		color: $dark-text-color;
-		padding: 8px 18px;
-		cursor: default;
-		border-right: 1px solid lighten($ui-base-color, 8%);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		font-size: 26px;
-
-		.fa {
-			display: block;
-		}
-	}
-
-	&__list {
-		list-style: none;
-		padding: 4px 0;
-		padding-left: 8px;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-
-		li {
-			display: block;
-			padding: 4px 0;
-		}
-
-		a {
-			text-decoration: none;
-			color: $dark-text-color;
-			font-weight: 500;
-
-			&:hover {
-				text-decoration: underline;
-			}
-		}
-	}
-
-	&.compact {
-		border: 0;
-		margin-top: 4px;
-
-		.attachment-list__list {
-			padding: 0;
-			display: block;
-		}
-
-		.fa {
-			color: $dark-text-color;
-		}
-	}
-}
-
-/* Media Gallery */
-.media-gallery {
-	box-sizing: border-box;
-	margin-top: 8px;
-	overflow: hidden;
-	border-radius: 4px;
-	position: relative;
-	width: 100%;
-}
-
-.media-gallery__item {
-	border: none;
-	box-sizing: border-box;
-	display: block;
-	float: left;
-	position: relative;
-	border-radius: 4px;
-	overflow: hidden;
-
-	&.standalone {
-		.media-gallery__item-gifv-thumbnail {
-			transform: none;
-			top: 0;
-		}
-	}
-}
-
-.media-gallery__item-thumbnail {
-	cursor: zoom-in;
-	display: block;
-	text-decoration: none;
-	color: $secondary-text-color;
-	line-height: 0;
-	position: relative;
-	z-index: 1;
-
-	&,
-	img {
-		height: 100%;
-		width: 100%;
-	}
-
-	img {
-		object-fit: cover;
-	}
-}
-
-.media-gallery__preview {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 0;
-	background: $base-overlay-background;
-
-	&--hidden {
-		display: none;
-	}
-}
-
-.media-gallery__gifv {
-	height: 100%;
-	overflow: hidden;
-	position: relative;
-	width: 100%;
-}
-
-.media-gallery__item-gifv-thumbnail {
-	cursor: zoom-in;
-	height: 100%;
-	object-fit: cover;
-	position: relative;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 100%;
-	z-index: 1;
-}
-
-.media-gallery__item-thumbnail-label {
-	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-	clip: rect(1px, 1px, 1px, 1px);
-	overflow: hidden;
-	position: absolute;
-}
-/* End Media Gallery */
-
-/* Status Video Player */
-.status__video-player {
-	background: $base-overlay-background;
-	box-sizing: border-box;
-	cursor: default; /* May not be needed */
-	margin-top: 8px;
-	overflow: hidden;
-	position: relative;
-}
-
-.status__video-player-video {
-	height: 100%;
-	object-fit: cover;
-	position: relative;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 100%;
-	z-index: 1;
-}
-
-.status__video-player-expand,
-.status__video-player-mute {
-	color: $primary-text-color;
-	opacity: 0.8;
-	position: absolute;
-	right: 4px;
-	text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
-}
-
-.status__video-player-spoiler {
-	display: none;
-	color: $primary-text-color;
-	left: 4px;
-	position: absolute;
-	text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
-	top: 4px;
-	z-index: 100;
-
-	&.status__video-player-spoiler--visible {
-		display: block;
-	}
-}
-
-.status__video-player-expand {
-	bottom: 4px;
-	z-index: 100;
-}
-
-.status__video-player-mute {
-	top: 4px;
-	z-index: 5;
+  background-color: $highlight-text-color;
+  height: 3px;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
 .detailed,
 .fullscreen {
-	.video-player__volume__current,
-	.video-player__volume::before {
-		bottom: 27px;
-	}
 
-	.video-player__volume__handle {
-		bottom: 23px;
-	}
+  .video-player__volume__current,
+  .video-player__volume::before {
+    bottom: 27px;
+  }
 
-}
-
-.video-player {
-	overflow: hidden;
-	position: relative;
-	background: $base-shadow-color;
-	max-width: 100%;
-	border-radius: 4px;
-
-	&:focus {
-		outline: 0;
-	}
-
-	video {
-		max-width: 100vw;
-		max-height: 80vh;
-		z-index: 1;
-	}
-
-	&.fullscreen {
-		width: 100% !important;
-		height: 100% !important;
-		margin: 0;
-
-		video {
-			max-width: 100% !important;
-			max-height: 100% !important;
-			width: 100% !important;
-			height: 100% !important;
-		}
-	}
-
-	&.inline {
-		video {
-			object-fit: contain;
-			position: relative;
-			top: 50%;
-			transform: translateY(-50%);
-		}
-	}
-
-	&__controls {
-		position: absolute;
-		z-index: 2;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		box-sizing: border-box;
-		background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
-		padding: 0 15px;
-		opacity: 0;
-		transition: opacity .1s ease;
-
-		&.active {
-			opacity: 1;
-		}
-	}
-
-	&.inactive {
-		video,
-		.video-player__controls {
-			visibility: hidden;
-		}
-	}
-
-	&__spoiler {
-		display: none;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 4;
-		border: 0;
-		background: $base-overlay-background;
-		color: $darker-text-color;
-		transition: none;
-		pointer-events: none;
-
-		&.active {
-			display: block;
-			pointer-events: auto;
-
-			&:hover,
-			&:active,
-			&:focus {
-				color: lighten($darker-text-color, 7%);
-			}
-		}
-
-		&__title {
-			display: block;
-			font-size: 14px;
-		}
-
-		&__subtitle {
-			display: block;
-			font-size: 11px;
-			font-weight: 500;
-		}
-	}
-
-	&__buttons-bar {
-		display: flex;
-		justify-content: space-between;
-		padding-bottom: 10px;
-	}
-
-	&__buttons {
-		font-size: 16px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		&.left {
-			button {
-				padding-left: 0;
-			}
-		}
-
-		&.right {
-			button {
-				padding-right: 0;
-			}
-		}
-
-		button {
-			background: transparent;
-			padding: 2px 10px;
-			font-size: 16px;
-			border: 0;
-			color: rgba($white, 0.75);
-
-			&:active,
-			&:hover,
-			&:focus {
-				color: $white;
-			}
-		}
-	}
-
-	&__time-sep,
-	&__time-total,
-	&__time-current {
-		font-size: 14px;
-		font-weight: 500;
-	}
-
-	&__time-current {
-		color: $white;
-		margin-left: 60px;
-	}
-
-	&__time-sep {
-		display: inline-block;
-		margin: 0 6px;
-	}
-
-	&__time-sep,
-	&__time-total {
-		color: $white;
-	}
-
-	&__volume {
-		cursor: pointer;
-		height: 24px;
-		display: inline;
-
-		&::before {
-			content: "";
-			width: 50px;
-			background: rgba($white, 0.35);
-			border-radius: 4px;
-			display: block;
-			position: absolute;
-			height: 4px;
-			left: 70px;
-			bottom: 20px;
-		}
-
-		&__current {
-			display: block;
-			position: absolute;
-			height: 4px;
-			border-radius: 4px;
-			left: 70px;
-			bottom: 20px;
-			background: lighten($ui-highlight-color, 8%);
-		}
-
-		&__handle {
-			position: absolute;
-			z-index: 3;
-			border-radius: 50%;
-			width: 12px;
-			height: 12px;
-			bottom: 16px;
-			left: 70px;
-			transition: opacity .1s ease;
-			background: lighten($ui-highlight-color, 8%);
-			box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-			pointer-events: none;
-		}
-	}
-
-	&__link {
-		padding: 2px 10px;
-
-		a {
-			text-decoration: none;
-			font-size: 14px;
-			font-weight: 500;
-			color: $white;
-
-			&:hover,
-			&:active,
-			&:focus {
-				text-decoration: underline;
-			}
-		}
-	}
-
-	&__seek {
-		cursor: pointer;
-		height: 24px;
-		position: relative;
-
-		&::before {
-			content: "";
-			width: 100%;
-			background: rgba($white, 0.35);
-			border-radius: 4px;
-			display: block;
-			position: absolute;
-			height: 4px;
-			top: 10px;
-		}
-
-		&__progress,
-		&__buffer {
-			display: block;
-			position: absolute;
-			height: 4px;
-			border-radius: 4px;
-			top: 10px;
-			background: lighten($ui-highlight-color, 8%);
-		}
-
-		&__buffer {
-			background: rgba($white, 0.2);
-		}
-
-		&__handle {
-			position: absolute;
-			z-index: 3;
-			opacity: 0;
-			border-radius: 50%;
-			width: 12px;
-			height: 12px;
-			top: 6px;
-			margin-left: -6px;
-			transition: opacity .1s ease;
-			background: lighten($ui-highlight-color, 8%);
-			box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
-			pointer-events: none;
-
-			&.active {
-				opacity: 1;
-			}
-		}
-
-		&:hover {
-			.video-player__seek__handle {
-				opacity: 1;
-			}
-		}
-	}
-
-	&.detailed,
-	&.fullscreen {
-		.video-player__buttons {
-			button {
-				padding-top: 10px;
-				padding-bottom: 10px;
-			}
-		}
-	}
-}
-
-.media-spoiler-video {
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center;
-	cursor: pointer;
-	margin-top: 8px;
-	position: relative;
-	border: 0;
-	display: block;
-}
-
-.media-spoiler-video-play-icon {
-	border-radius: 100px;
-	color: rgba($primary-text-color, 0.8);
-	font-size: 36px;
-	left: 50%;
-	padding: 5px;
-	position: absolute;
-	top: 50%;
-	transform: translate(-50%, -50%);
-}
-/* End Video Player */
-
-.account-gallery__container {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 4px 2px;
-}
-
-.account-gallery__item {
-	border: none;
-	box-sizing: border-box;
-	display: block;
-	position: relative;
-	border-radius: 4px;
-	overflow: hidden;
-	margin: 2px;
-
-	&__icons {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		font-size: 24px;
-	}
-}
-
-.notification__filter-bar,
-.account__section-headline {
-	background: darken($ui-base-color, 4%);
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-	cursor: default;
-	display: flex;
-	flex-shrink: 0;
-
-	button {
-		background: darken($ui-base-color, 4%);
-		border: 0;
-		margin: 0;
-	}
-
-	button,
-	a {
-		display: block;
-		flex: 1 1 auto;
-		color: $secondary-text-color;
-		padding: 15px 0;
-		font-size: 14px;
-		font-weight: 500;
-		text-align: center;
-		text-decoration: none;
-		position: relative;
-
-		&.active {
-			color: $primary-text-color;
-
-			&::before,
-			&::after {
-				display: block;
-				content: "";
-				position: absolute;
-				bottom: 0;
-				left: 50%;
-				width: 0;
-				height: 0;
-				transform: translateX(-50%);
-				border-style: solid;
-				border-width: 0 10px 10px;
-				border-color: transparent transparent lighten($ui-base-color, 8%);
-			}
-
-			&::after {
-				bottom: -1px;
-				border-color: transparent transparent $ui-base-color;
-			}
-		}
-	}
-}
-
-.account__section-headline {
-	button,
-	a {
-		flex: none;
-		padding: 18px 15px;
-		font-size: 16px;
-		font-weight: 600;
-	}
+  .video-player__volume__handle {
+    bottom: 23px;
+  }
 }
 
 ::-webkit-scrollbar-thumb {
-	border-radius: 0;
-}
-
-.search-popout-container{
-	width: 251px;
-	@media screen and (max-width: $nav-breakpoint-2) {width: 100%;}
-}
-
-.search-popout {
-	@include search-popout();
+  border-radius: 0;
 }
 
 noscript {
-	text-align: center;
+  text-align: center;
 
-	img {
-		width: 200px;
-		opacity: 0.5;
-		animation: flicker 4s infinite;
-	}
+  img {
+    width: 200px;
+    opacity: 0.5;
+    animation: flicker 4s infinite;
+  }
 
-	div {
-		font-size: 14px;
-		margin: 30px auto;
-		color: $secondary-text-color;
-		max-width: 400px;
+  div {
+    font-size: 14px;
+    margin: 30px auto;
+    color: $secondary-text-color;
+    max-width: 400px;
 
-		a {
-			color: $highlight-text-color;
-			text-decoration: underline;
+    a {
+      color: $highlight-text-color;
+      text-decoration: underline;
 
-			&:hover {
-				text-decoration: none;
-			}
-		}
-	}
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
 }
 
 @keyframes flicker {
-	0% { opacity: 1; }
-	30% { opacity: 0.75; }
-	100% { opacity: 1; }
-}
-
-@media screen and (max-width: 630px) and (max-height: 400px) {
-	$duration: 400ms;
-	$delay: 100ms;
-
-	.tabs-bar,
-	.search {
-		will-change: margin-top;
-		transition: margin-top $duration $delay;
-	}
-
-	.navigation-bar {
-		will-change: padding-bottom;
-		transition: padding-bottom $duration $delay;
-	}
-
-	.navigation-bar {
-		& > a:first-child {
-			will-change: margin-top, margin-left, margin-right, width;
-			transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
-		}
-
-		& > .navigation-bar__profile-edit {
-			will-change: margin-top;
-			transition: margin-top $duration $delay;
-		}
-
-		.navigation-bar__actions {
-			& > .icon-button.close {
-				will-change: opacity transform;
-				transition: opacity $duration * 0.5 $delay,
-										transform $duration $delay;
-			}
-
-			& > .compose__action-bar .icon-button {
-				will-change: opacity transform;
-				transition: opacity $duration * 0.5 $delay + $duration * 0.5,
-										transform $duration $delay;
-			}
-		}
-	}
-
-	.is-composing {
-		.tabs-bar,
-		.search {
-			margin-top: -50px;
-		}
-
-		.navigation-bar {
-			padding-bottom: 0;
-
-			& > a:first-child {
-				margin: -100px 10px 0 -50px;
-			}
-
-			.navigation-bar__profile {
-				padding-top: 2px;
-			}
-
-			.navigation-bar__profile-edit {
-				position: absolute;
-				margin-top: -60px;
-			}
-
-			.navigation-bar__actions {
-				.icon-button.close {
-					pointer-events: auto;
-					opacity: 1;
-					transform: scale(1.0, 1.0) translate(0, 0);
-					bottom: 5px;
-				}
-
-				.compose__action-bar .icon-button {
-					pointer-events: none;
-					opacity: 0;
-					transform: scale(0.0, 1.0) translate(100%, 0);
-				}
-			}
-		}
-	}
-}
-
-.embed-modal {
-	max-width: 80vw;
-	max-height: 80vh;
-
-	h4 {
-		padding: 30px;
-		font-weight: 500;
-		font-size: 16px;
-		text-align: center;
-	}
-
-	.embed-modal__container {
-		padding: 10px;
-
-		.hint {
-			margin-bottom: 15px;
-		}
-
-		.embed-modal__html {
-			outline: 0;
-			box-sizing: border-box;
-			display: block;
-			width: 100%;
-			border: none;
-			padding: 10px;
-			font-family: $font-monospace, monospace;
-			background: $ui-base-color;
-			color: $primary-text-color;
-			font-size: 14px;
-			margin: 0;
-			margin-bottom: 15px;
-
-			&::-moz-focus-inner {
-				border: 0;
-			}
-
-			&::-moz-focus-inner,
-			&:focus,
-			&:active {
-				outline: 0 !important;
-			}
-
-			&:focus {
-				background: lighten($ui-base-color, 4%);
-			}
-
-			@media screen and (max-width: 600px) {
-				font-size: 16px;
-			}
-		}
-
-		.embed-modal__iframe {
-			width: 400px;
-			max-width: 100%;
-			overflow: hidden;
-			border: 0;
-		}
-	}
-}
-
-.account__moved-note {
-	padding: 14px 10px;
-	padding-bottom: 16px;
-	background: lighten($ui-base-color, 4%);
-	border-top: 1px solid lighten($ui-base-color, 8%);
-	border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-	&__message {
-		position: relative;
-		margin-left: 58px;
-		color: $dark-text-color;
-		padding: 8px 0;
-		padding-top: 0;
-		padding-bottom: 4px;
-		font-size: 14px;
-
-		> span {
-			display: block;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-
-	&__icon-wrapper {
-		left: -26px;
-		position: absolute;
-	}
-
-	.detailed-status__display-avatar {
-		position: relative;
-	}
-
-	.detailed-status__display-name {
-		margin-bottom: 0;
-	}
-}
-
-.column-inline-form {
-	padding: 7px 15px;
-	padding-right: 5px;
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-	background: lighten($ui-base-color, 4%);
-
-	label {
-		flex: 1 1 auto;
-
-		input {
-			width: 100%;
-			margin-bottom: 6px;
-
-			&:focus {
-				outline: 0;
-			}
-		}
-	}
-
-	.icon-button {
-		flex: 0 0 auto;
-		margin: 0 5px;
-	}
-}
-
-.drawer__backdrop {
-	cursor: pointer;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: rgba($base-overlay-background, 0.5);
-}
-
-.list-editor {
-	flex-direction: column;
-	width: 100%;
-	overflow: hidden;
-	height: 100%;
-	overflow-y: scroll;
-
-	@media screen and (max-width: 420px) {
-		width: 90%;
-	}
-
-	h4 {
-		padding: 15px 0;
-		background: lighten($ui-base-color, 13%);
-		font-weight: 500;
-		font-size: 16px;
-		text-align: center;
-		border-radius: 8px 8px 0 0;
-	}
-
-	.drawer__inner {
-		border-radius: 0 0 8px 8px;
-
-		&.backdrop {
-			width: calc(100% - 60px);
-			box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-			border-radius: 0 0 0 8px;
-		}
-	}
-
-	&__accounts {
-		background: lighten($ui-base-color, 13%);
-		overflow-y: auto;
-		max-height: 200px;
-	}
-
-	.account__display-name {
-		&:hover strong {
-			text-decoration: none;
-		}
-	}
-
-	.account__avatar {
-		cursor: default;
-	}
-
-	.search {
-    display: flex;
-		flex-direction: row;
-		margin: 10px 0;
-
-		> label {
-			flex: 1 1;
-		}
-
-		> .search__icon .fa {
-			right: 102px !important;
-		}
-
-		> .button {
-			width: 80px;
-			margin-left: 10px;
-		}
-	}
-}
-
-.list-adder {
-	flex-direction: column;
-	width: 100%;
-	overflow: hidden;
-	height: 100%;
-	overflow-y: scroll;
-
-	@media screen and (max-width: 420px) {
-		width: 90%;
-	}
-
-	&__account {
-		background: lighten($ui-base-color, 13%);
-		border-radius: 4px;
-	}
-
-	&__lists {
-		background: lighten($ui-base-color, 13%);
-	}
-
-	.list {
-		padding: 4px;
-		border-bottom: 1px solid lighten($ui-base-color, 8%);
-	}
-
-	.list__wrapper {
-		display: flex;
-
-		.account__relationship {
-			padding: 8px 5px 0 5px;
-		}
-	}
-
-	.list__display-name {
-		flex: 1 1 auto;
-		overflow: hidden;
-		text-decoration: none;
-		font-size: 16px;
-		padding: 10px;
-	}
-}
-
-.new-list-form,
-.edit-list-form {
-	&__btn {
-		margin-left: 6px;
-		width: 112px;
-	}
-
-	&__input {
-		height: 36px;
-	}
-}
-
-.focal-point-modal {
-	max-width: 80vw;
-	max-height: 80vh;
-	position: relative;
-}
-
-.focal-point {
-	position: relative;
-	cursor: pointer;
-	overflow: hidden;
-
-	&.dragging {
-		cursor: move;
-	}
-
-	img {
-		max-width: 80vw;
-		max-height: 80vh;
-		width: auto;
-		height: auto;
-		margin: auto;
-	}
-
-	&__reticle {
-		position: absolute;
-		width: 100px;
-		height: 100px;
-		transform: translate(-50%, -50%);
-		background: url('../images/reticle.png') no-repeat 0 0;
-		border-radius: 50%;
-		box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
-	}
-
-	&__overlay {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		left: 0;
-	}
-}
-
-.account__header__content {
-	color: $darker-text-color;
-	font-size: 14px;
-	font-weight: 400;
-	overflow: hidden;
-	word-break: normal;
-	word-wrap: break-word;
-
-	p {
-		margin-bottom: 20px;
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	a {
-		color: inherit;
-		text-decoration: underline;
-
-		&:hover {
-			text-decoration: none;
-		}
-	}
-}
-
-.trends {
-	&__header {
-		color: $dark-text-color;
-		background: lighten($ui-base-color, 2%);
-		border-bottom: 1px solid darken($ui-base-color, 4%);
-		font-weight: 500;
-		padding: 15px;
-		font-size: 16px;
-		cursor: default;
-
-		.fa {
-			display: inline-block;
-			margin-right: 5px;
-		}
-	}
-
-	&__item {
-		display: flex;
-		align-items: center;
-		padding: 15px;
-		border-bottom: 1px solid lighten($ui-base-color, 8%);
-
-		&:last-child {
-			border-bottom: 0;
-		}
-
-		&__name {
-			flex: 1 1 auto;
-			color: $dark-text-color;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-
-			strong {
-				font-weight: 500;
-			}
-
-			a {
-				color: $darker-text-color;
-				text-decoration: none;
-				font-size: 14px;
-				font-weight: 500;
-				display: block;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-
-				&:hover,
-				&:focus,
-				&:active {
-					span {
-						text-decoration: underline;
-					}
-				}
-			}
-		}
-
-		&__current {
-			flex: 0 0 auto;
-			width: 100px;
-			font-size: 24px;
-			line-height: 36px;
-			font-weight: 500;
-			text-align: center;
-			color: $secondary-text-color;
-		}
-
-		&__sparkline {
-			flex: 0 0 auto;
-			width: 50px;
-
-			path {
-				stroke: lighten($highlight-text-color, 6%) !important;
-			}
-		}
-	}
-}
-
-.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: lighten($ui-base-color, 16%);
-			}
-		}
-	}
-
-	svg {
-		width: 100%;
-		height: auto;
-
-		path:first-child {
-			fill: lighten($ui-base-color, 12%);
-		}
-
-		path:last-child {
-			fill: darken($ui-base-color, 14%);
-		}
-	}
-
-	&__active {
-		color: $ui-highlight-color;
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		background: lighten($ui-base-color, 12%);
-		border-radius: 50%;
-		padding: 0.35rem;
-	}
-}
-
-.wtf-panel {
-  display: flex;
-  width: 100%;
-  border-radius: 10px;
-  flex-direction: column;
-  height: auto;
-  box-sizing: border-box;
-
-	background: $gab-background-container;
-	body.theme-gabsocial-light & {
-		@include light-theme-shadow();
-		background: $gab-background-container-light;
-	}
-
-	&:not(:last-of-type) {
-		margin-bottom: 10px;
-	}
-
-  .wtf-panel-header {
-	display: flex;
-	align-items: baseline;
-	margin-bottom: 10px;
-	padding: 15px 15px 0 15px;
-
-	&__icon {
-	  margin-right: 10px;
-	}
-
-	&__label {
-	  flex: 1 1;
-	  color: $primary-text-color;
-	  font-size: 16px;
-	  font-weight: bold;
-	  line-height: 19px;
-	}
+  0% {
+    opacity: 1;
   }
 
-  &__content {
-	width: 100%;
-	padding-top: 8px;
+  30% {
+    opacity: 0.75;
   }
 
-  &__list {
-	padding: 0 5px;
+  100% {
+    opacity: 1;
   }
-
-	&__subtitle {
-		display: block;
-		padding: 0 15px;
-		color: $secondary-text-color;
-	}
-
-	&__form {
-		display: block;
-		padding: 15px;
-
-		&.button {
-			width: 100%;
-		}
-	}
-
-  .wtf-panel-list-item {
-	display: block;
-	padding-bottom: 10px;
-
-	&:not(:first-of-type) {
-	  margin-top: 12px;
-	}
-
-	&:not(:last-of-type) {
-	  border-bottom: 1px solid lighten($ui-base-color, 8%);
-	}
-
-	&__content {
-	  display: flex;
-	  flex-direction: row;
-	  min-height: 46px;
-	  margin-left: 58px;
-	}
-
-	&__account-block {
-	  display: flex;
-	  position: relative;
-	  align-items: baseline;
-	  padding-right: 10px;
-
-	  &__avatar {
-		height: 46px;
-		width: 46px;
-		background-color: red;
-		left: -58px;
-		position: absolute;
-	  }
-
-	  &__name {
-		display: flex;
-		flex-wrap: wrap;
-		flex-direction: column;
-		margin-top: 6px;
-
-		&__name {
-		  color: $primary-text-color;
-		  font-size: 14px;
-		  font-weight: bold;
-		  line-height: 16px;
-		  margin-bottom: 2px;
-		  max-height: 32px; //2 lines of text
-		  overflow: hidden;
-		}
-
-		&__username {
-		  color: $lighter-text-color;
-		  font-size: 12px;
-		  line-height: 14px;
-		}
-	  }
-	}
-
-	&__follow-block {
-	  margin-left: auto;
-	  padding-top: 6px;
-
-	  &__button {
-		display: flex;
-	  }
-
-	  &__icon {
-		color: $primary-text-color;
-	  }
-	}
-  }
-}
-
-.verified-icon {
-	display: inline-block;
-	margin: 0 4px 0 1px;
-	vertical-align: top;
-	position: relative;
-	width: 15px;
-	height: 15px;
-
-	&:before {
-		display: block;
-		content: "";
-		position: absolute;
-		background-color: #00A3ED;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		border-radius: 50%;
-	}
-
-	&:after {
-		display: block;
-		position: absolute;
-		content: '\f00c';
-		font: normal normal normal 14px/1 FontAwesome;
-		font-size: inherit;
-		text-rendering: auto;
-		-webkit-font-smoothing: antialiased;
-		color: #fff;
-		font-size: 0.6em;
-		line-height: 15px;
-		width: 15px;
-		height: 15px;
-		text-align: center;
-	}
-}
-
-.compose-modal {
-	padding: 8px 0 0;
-	overflow: hidden;
-	background-color: $classic-base-color;
-	border-radius: 6px;
-	flex-direction: column;
-	width: 600px;
-	margin: 10px 0;
-
-	&__header {
-		display: block;
-		position: relative;
-		border-bottom: 1px solid lighten($classic-base-color, 8%);
-		border-radius: 6px 6px 0 0;
-		padding-top: 12px;
-		padding-bottom: 12px;
-
-		&__title {
-			display: block;
-			width: 80%;
-			margin: 0 auto;
-			font-size: 18px;
-			font-weight: bold;
-			line-height: 24px;
-			color: $gab-background-base-light;
-			text-align: center;
-		}
-	}
-
-	&__close {
-	position: absolute;
-	right: 10px;
-	top: 10px;
-	}
-
-	&__content {
-		display: flex;
-		flex-direction: row;
-		flex: 1;
-		padding: 10px;
-		overflow-y: hidden;
-
-		.timeline-compose-block {
-			background: transparent !important;
-			width: 100%;
-			padding: 10px 5px;
-			margin-bottom: 0;
-
-			.compose-form {
-				max-height: 100%;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-	}
-
-	@media screen and (max-width:895px) {
-		margin: 0;
-		height: 98vh;
-		width: 98vw;
-	}
-}
-
-.account-timeline {
-	&__header {
-		display: block;
-		width: 100%;
-	}
-}
-
-.profile-info-panel {
-	display: flex;
-	position: relative;
-
-	&__content {
-		display: flex;
-		flex-direction: column;
-		flex: 1 1;
-
-		@media (min-width:895px) {
-			padding-top: 60px;
-		}
-	}
-
-	.profile-info-panel-content {
-		display: flex;
-
-		&__badges {
-			display: flex;
-	    margin: 5px 0;
-	    flex-direction: row;
-			flex-wrap: wrap;
-
-			&__join-date {
-				display: block;
-				margin-top: 5px;
-
-				.fa {
-					margin-right: 8px;
-				}
-
-				span {
-					color: $primary-text-color;
-					body.theme-gabsocial-light & {color: $gab-default-text-light;}
-					font-size: 15px;
-					line-height: 1.25;
-				}
-			}
-		}
-
-		&__name {
-			display: block;
-
-			.account-role {
-				vertical-align: top;
-			}
-
-			.emojione {
-				width: 22px;
-				height: 22px;
-			}
-
-			h1 {
-				span:first-of-type {
-					font-size: 20px !important;
-					line-height: 1.25;
-					color: #ffffff;
-					body.theme-gabsocial-light & {color: $gab-default-text-light;}
-					font-weight: 600 !important;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-
-				small {
-					display: block;
-					font-size: 16px;
-					line-height: 1.5;
-					color: $secondary-text-color;
-					font-weight: 400;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-			}
-		}
-
-		&__bio {
-			display: block;
-			flex: 1 1;
-			color: $primary-text-color;
-			margin: 15px 0;
-			font-size: 15px;
-			line-height: 1.25;
-
-			a {
-				color: lighten($ui-highlight-color, 8%);
-			}
-		}
-
-		&__fields {
-			display: flex;
-			flex-direction: column;
-			border-top: 1px solid lighten($ui-base-color, 12%);
-			padding: 10px 0;
-			margin: 5px 0;
-
-			@media screen and (max-width:895px) {
-				border-bottom: 1px solid lighten($ui-base-color, 12%);
-			}
-
-			a {
-				color: lighten($ui-highlight-color, 8%);
-			}
-
-			dl:first-child .verified {
-				border-radius: 0 4px 0 0;
-			}
-
-			.verified a {
-				color: $valid-value-color;
-			}
-
-			&__item {
-				display: flex;
-				padding: 2px 0;
-				margin: 2px 0;
-				flex: 1 1;
-
-				* {
-					font-size: 15px;
-					line-height: 24px;
-				}
-
-				dt {
-					min-width: 26px;
-				}
-
-				dd {
-					padding-left: 4px;
-				}
-			}
-		}
-	}
-}
-
-.unauthorized-modal {
-	width: 440px !important;
-
-	&__content {
-		display: flex;
-    width: 100%;
-    height: 150px;
-    justify-content: center;
-    align-items: center;
-		flex-direction: column;
-	}
-
-	.unauthorized-modal-content {
-		&__text {
-			display: block;
-	    margin-bottom: 18px;
-	    color: #fff;
-	    font-size: 14px;
-		}
-
-		&__button {
-    	width: 200px;
-		}
-	}
-
-	&__footer {
-		display: flex;
-		border-top: 1px solid #666;
-		padding: 10px;
-		justify-content: center;
-		align-items: center;
-
-		> span {
-			font-size: 14px;
-			color: $secondary-text-color;
-
-			a {
-				color: $gab-brand-default !important;
-			}
-		}
-	}
-
-	@media screen and (max-width:895px) {
-		height: 270px !important;
-    width: 330px !important;
-	}
-}
-
-.error-boundary {
-	> div {
-		margin: auto;
-
-		span {
-			display: block;
-			text-align: center;
-			color: $secondary-text-color;
-		}
-
-		a {
-			display: block;
-			margin: 15px auto;
-			text-align: center;
-			color: $gab-brand-default;
-		}
-	}
-}
-
-.search-header {
-	display: block;
-	width: 100%;
-
-	&__text-container {
-		display: none;
-		padding: 25px 0;
-		background-color: lighten($ui-base-color, 6%);
-
-		@media (min-width:895px) {
-			display: block;
-		}
-	}
-
-	&__title-text {
-		color: $primary-text-color;
-		font-size: 27px;
-		font-weight: bold;
-		line-height: 32px;
-		overflow: hidden;
-		padding-left: 20px;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 1200px;
-		margin: 0 auto;
-	}
-
-	&__type-filters-tabs {
-		display: flex;
-		width: 100%;
-		max-width: 1200px;
-		margin: 0 auto;
-
-		@media screen and (max-width:895px) {
-			max-width: 580px;
-		}
-	}
-
-	@media (min-width:895px) and (max-width:1190px) {
-		&__title-text,
-		&__type-filters-tabs {
-			max-width: 900px;
-		}
-	}
-}
-
-.timeline-queue-header {
-	display: block;
-	width: 100%;
-	max-height: 46px;
-	position: relative;
-	background-color: darken($ui-base-color, 8%);
-	border-bottom: 1px solid;
-	border-top: 1px solid;
-	border-color: darken($ui-base-color, 4%);
-	transition: max-height 2.5s ease;
-	overflow: hidden;
-
-	&.hidden {
-		max-height: 0px;
-	}
-
-	&__btn {
-		display: block;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-		line-height: 46px;
-		font-size: 14px;
-		cursor: pointer;
-		color: $secondary-text-color;
-
-		span {
-			height: 46px;
-		}
-	}
-}
-
-.badge {
-	font-size: 12px;
-	text-transform: uppercase;
-	padding: 2px 6px;
-	border-radius: 2px;
-	margin: 0 5px 5px 0;
-
-	&--pro {
-		background-color: blueviolet;
-		color: #fff;
-	}
-
-	&--investor {
-		background-color: gold;
-		color: #000;
-	}
-
-	&--donor {
-		background-color: lightgreen;
-    color: #000;
-	}
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components/account-header.scss b/app/javascript/styles/gabsocial/components/account-header.scss
index 3d816b91..257e136c 100644
--- a/app/javascript/styles/gabsocial/components/account-header.scss
+++ b/app/javascript/styles/gabsocial/components/account-header.scss
@@ -1,146 +1,194 @@
 .account__header {
-	&.inactive {
-		opacity: 0.5;
-		.account__header__image,
-		.account__avatar {filter: grayscale(100%);}
-	}
-	&__info {
-		position: absolute;
-		top: 10px;
-		left: 10px;
-	}
-	&__image {
-		overflow: hidden;
-		height: 350px;
-		position: relative;
-		background: darken($ui-base-color, 4%);
-		@media screen and (max-width:895px) {height: 225px;}
-		&--none {height: 125px;}
-		img {
-			object-fit: cover;
-			display: block;
-			width: 100%;
-			height: 100%;
-			margin: 0;
-		}
-	}
-	&__bar {
-		display: block;
-		min-height: 74px;
-		width: 100%;
-		position: relative;
-		background: lighten($ui-base-color, 4%);
-		@media (min-width:895px) {height: 74px;}
-	}
-	&__avatar {
-		display: block;
-		position: absolute;
-		border: 5px solid lighten($ui-base-color, 4%);
-		left: 0;
-		top: -90px;
-		border-radius: 50%;
-		height: 200px;
-		width: 200px;
-		background-color: darken($ui-base-color, 8%);
 
-		// NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
-		.account__avatar {
-			width: 200px;
-			height: 200px;
-			background-size: 200px 200px;
-		}
-		@media screen and (max-width:895px) {
-			top: -45px;
-			left: 10px;
-			height: 90px;
-			width: 90px;
-			.account__avatar {
-				width: 90px;
-				height: 90px;
-				background-size: 90px 90px;
-			}
-		}
+  &.inactive {
+    opacity: 0.5;
 
-	}
-	&__extra {
-	    display: flex;
-    	flex-direction: row;
-    	height: 100%;
-		margin: 0 auto;
-    	padding-left: 310px;
-    	width: 100%;
-    	max-width: 1200px;
-		box-sizing: border-box;
-		position: relative;
-		@media (min-width:895px) and (max-width:1190px) {
-			max-width: 900px;
-			padding-left: 300px;
-		}
-		@media screen and (max-width:895px) {
-			max-width: 900px;
-			padding: 10px 10px 0 10px;
-			flex-direction: column-reverse;
-			min-height: 50px;
-		}
-		&__buttons {
-			display: flex;
-			align-items: center;
-			margin-left: auto;
-			.icon-button {
-				border: 1px solid lighten($ui-base-color, 12%);
-				border-radius: 4px;
-				box-sizing: content-box;
-				padding: 2px;
-			}
-			.button {margin-right: 10px;}
-		}
-		&__links {
-			display: flex;
-			font-size: 14px;
-			color: $darker-text-color;
-			@media screen and (max-width:895px) {
-				justify-content: center;
-				flex-wrap: wrap;
-			}
-			a {
-				display: inline-block;
-				text-decoration: none;
-				padding: 16px 22px;
-				text-align: center;
-				@media screen and (max-width:1190px) {padding: 16px;}
-				> span {
-					display: block;
-					&:first-of-type {
-						color: $primary-text-color;
-						font-size: 20px;
-						font-weight: 800;
-						line-height: 24px;
-						@media screen and (max-width:895px) {
-							font-size: 16px;
-							line-height: 20px;
-						}
-					}
-					&:last-of-type {
-						color: $ui-secondary-color;
-						font-size: 12px;
-						line-height: 14px;
-						padding-top: 2px;
-					}
-				}
-				&:hover,
-				&.active {border-bottom: 2px solid $primary-text-color;}
-				&.score {border-bottom:none !important;}
-			}
-		}
-	} // end .account__header__extra
-	@media screen and (max-width:895px) {
-		.account-mobile-container {
-			display: block;
-			background: lighten($ui-base-color, 4%);
-			margin-top: 10px;
-			position: relative;
-			padding: 10px 10px 0px;
-			&--nonuser {padding: 10px 10px 15px;}
-		}
-	}
-} // end .account__header
\ No newline at end of file
+    .account__header__image,
+    .account__avatar {
+      filter: grayscale(100%);
+    }
+  }
+
+  &__info {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+
+  &__image {
+    overflow: hidden;
+    height: 350px;
+    position: relative;
+    background: darken($ui-base-color, 4%);
+
+    &--none {
+      height: 125px;
+    }
+
+    @media screen and (max-width:895px) {
+      height: 225px;
+    }
+
+    img {
+      object-fit: cover;
+      display: block;
+      margin: 0;
+
+      @include size(100%);
+    }
+  }
+
+  &__bar {
+    display: block;
+    min-height: 74px;
+    width: 100%;
+    position: relative;
+    background: lighten($ui-base-color, 4%);
+
+    @media (min-width:895px) {
+      height: 74px;
+    }
+  }
+
+  &__avatar {
+    display: block;
+    position: absolute;
+    border: 5px solid lighten($ui-base-color, 4%);
+    left: 0;
+    top: -90px;
+    background-color: darken($ui-base-color, 8%);
+
+    @include circle(200px);
+
+    // NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
+    .account__avatar {
+      background-size: 200px 200px;
+
+      @include size(200px);
+    }
+
+    @media screen and (max-width:895px) {
+      top: -45px;
+      left: 10px;
+
+      @include size(90px);
+
+      .account__avatar {
+        background-size: 90px 90px;
+
+        @include size(90px);
+      }
+    }
+
+  }
+
+  &__extra {
+    display: flex;
+    flex-direction: row;
+    padding-left: 310px;
+    max-width: 1200px;
+    box-sizing: border-box;
+    position: relative;
+
+    @include size(100%);
+    @include margin-center;
+
+    @media (min-width:895px) and (max-width:1190px) {
+      max-width: 900px;
+      padding-left: 300px;
+    }
+
+    @media screen and (max-width:895px) {
+      max-width: 900px;
+      padding: 10px 10px 0 10px;
+      flex-direction: column-reverse;
+      min-height: 50px;
+    }
+
+    &__buttons {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      .icon-button {
+        box-sizing: content-box;
+        padding: 2px;
+
+        @include border-design(lighten($ui-base-color, 12%), 1px, 4px);
+      }
+
+      .button {
+        margin-right: 10px;
+      }
+    }
+
+    &__links {
+      display: flex;
+      font-size: 14px;
+      color: $darker-text-color;
+
+      @media screen and (max-width:895px) {
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+
+      a {
+        display: inline-block;
+        text-decoration: none;
+        padding: 16px 22px;
+        text-align: center;
+
+        @media screen and (max-width:1190px) {
+          padding: 16px;
+        }
+
+        >span {
+          display: block;
+
+          &:first-of-type {
+            color: $primary-text-color;
+
+            @include text-sizing(20px, 800, 24px);
+
+            @media screen and (max-width:895px) {
+              @include text-sizing(16px, 800, 20px);
+            }
+          }
+
+          &:last-of-type {
+            color: $ui-secondary-color;
+            padding-top: 2px;
+
+            @include text-sizing(12px, 400, 14px);
+          }
+        }
+
+        &:hover,
+        &.active {
+          border-bottom: 2px solid $primary-text-color;
+        }
+
+        &.score {
+          border-bottom: none !important;
+        }
+      }
+    }
+  }
+
+  // end .account__header__extra
+  @media screen and (max-width:895px) {
+    .account-mobile-container {
+      display: block;
+      background: lighten($ui-base-color, 4%);
+      margin-top: 10px;
+      position: relative;
+      padding: 10px 10px 0px;
+
+      &--nonuser {
+        padding: 10px 10px 15px;
+      }
+    }
+  }
+}
+
+// end .account__header
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components/buttons.scss b/app/javascript/styles/gabsocial/components/buttons.scss
index 0270c1b7..d0230439 100644
--- a/app/javascript/styles/gabsocial/components/buttons.scss
+++ b/app/javascript/styles/gabsocial/components/buttons.scss
@@ -9,12 +9,11 @@ a.button {
 			padding: 5px 15px;
 			border: none;
 			border-radius: 4px;
-			@include font-size(11);
-			@include line-height(11);
-			@include font-weight(bold);
 			text-transform: uppercase;
 			color: white;
 			background: $gab-small-cta-primary;
+
+			@include text-sizing(11px, 700, 11px);
 		}
 	}
 }
diff --git a/app/javascript/styles/gabsocial/components/compose-form.scss b/app/javascript/styles/gabsocial/components/compose-form.scss
index d295a5c9..e69de29b 100644
--- a/app/javascript/styles/gabsocial/components/compose-form.scss
+++ b/app/javascript/styles/gabsocial/components/compose-form.scss
@@ -1,285 +0,0 @@
-.compose-form {
-	padding: 10px;
-	&__sensitive-button {
-		padding: 10px;
-		padding-top: 0;
-		font-size: 14px;
-		font-weight: 500;
-		&.active {color: $highlight-text-color;}
-		input[type=checkbox] {display: none;}
-		.checkbox {
-			display: inline-block;
-			position: relative;
-			border: 1px solid $ui-primary-color;
-			box-sizing: border-box;
-			width: 18px;
-			height: 18px;
-			flex: 0 0 auto;
-			margin-right: 10px;
-			top: -1px;
-			border-radius: 4px;
-			vertical-align: middle;
-			&.active {
-				border-color: $highlight-text-color;
-				background: $highlight-text-color;
-			}
-		}
-	}
-	.compose-form__warning {
-		color: $inverted-text-color;
-		margin-bottom: 10px;
-		background: $ui-primary-color;
-		box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
-		padding: 8px 10px;
-		border-radius: 4px;
-		font-size: 13px;
-		font-weight: 400;
-		strong {
-			color: $inverted-text-color;
-			font-weight: 500;
-			@each $lang in $cjk-langs {
-				&:lang(#{$lang}) {
-					font-weight: 700;
-				}
-			}
-		}
-		a {
-			color: $lighter-text-color;
-			font-weight: 500;
-			text-decoration: underline;
-			&:hover,
-			&:active,
-			&:focus {
-				text-decoration: none;
-			}
-		}
-	}
-	.emoji-picker-dropdown {
-		position: absolute;
-		top: 5px;
-		right: 5px;
-		z-index: 1;
-	}
-	.compose-form__autosuggest-wrapper {
-		position: relative;
-	}
-	.autosuggest-textarea,
-	.autosuggest-input,
-	.spoiler-input {
-		position: relative;
-	}
-	.spoiler-input {
-		height: 0;
-		transform-origin: bottom;
-		opacity: 0.0;
-		&.spoiler-input--visible {
-			height: 36px;
-			margin-bottom: 11px;
-			opacity: 1.0;
-		}
-	}
-	.autosuggest-textarea__textarea,
-	.spoiler-input__input {
-		display: block;
-		box-sizing: border-box;
-		width: 100%;
-		margin: 0;
-		color: $inverted-text-color;
-		background: $simple-background-color;
-		padding: 10px;
-		font-family: inherit;
-		font-size: 14px;
-		resize: vertical;
-		border: 0;
-		outline: 0;
-		&:focus {outline: 0;}
-		@media screen and (max-width: 600px) {font-size: 16px;}
-	}
-	.spoiler-input__input {border-radius: 4px;}
-	.autosuggest-textarea__textarea {
-		min-height: 100px;
-		border-radius: 5px 5px 0 0;
-		padding-bottom: 0;
-		padding-right: 10px + 22px;
-		resize: none;
-		scrollbar-color: initial;
-		&::-webkit-scrollbar {all: unset;}
-		@media screen and (max-width: 600px) {
-			max-height: 100px !important; // prevent auto-resize textarea
-			resize: vertical;
-		}
-	}
-	&.condensed {
-		.autosuggest-textarea__textarea {
-			min-height: 46px;
-			border-radius: 5px;
-		}
-	}
-	.emoji-picker-wrapper,
-	.autosuggest-textarea__suggestions-wrapper {
-		position: relative;
-		height: 0;
-	}
-	.autosuggest-textarea__suggestions {
-		box-sizing: border-box;
-		display: none;
-		position: absolute;
-		top: 100%;
-		width: 100%;
-		z-index: 99;
-		box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-		background: $ui-secondary-color;
-		border-radius: 0 0 4px 4px;
-		color: $inverted-text-color;
-		font-size: 14px;
-		padding: 6px;
-		&.autosuggest-textarea__suggestions--visible {display: block;}
-	}
-	.autosuggest-textarea__suggestions__item {
-		padding: 10px;
-		cursor: pointer;
-		border-radius: 4px;
-		&:hover,
-		&:focus,
-		&:active,
-		&.selected {background: darken($ui-secondary-color, 10%);}
-	}
-	.autosuggest-account,
-	.autosuggest-emoji {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: flex-start;
-		line-height: 18px;
-		font-size: 14px;
-	}
-	.autosuggest-account-icon,
-	.autosuggest-emoji img {
-		display: block;
-		margin-right: 8px;
-		width: 16px;
-		height: 16px;
-	}
-	.autosuggest-account .display-name__account {color: $lighter-text-color;}
-	.compose-form__modifiers {
-		color: $inverted-text-color;
-		font-family: inherit;
-		font-size: 14px;
-		background: $simple-background-color;
-		.compose-form__upload-wrapper {overflow: hidden;}
-		.compose-form__uploads-wrapper {
-			display: flex;
-			flex-direction: row;
-			padding: 5px;
-			flex-wrap: wrap;
-		}
-		.compose-form__upload {
-			flex: 1 1 0;
-			min-width: 40%;
-			margin: 5px;
-			&__actions {
-				background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-				display: flex;
-				align-items: flex-start;
-				justify-content: space-between;
-				opacity: 0;
-				transition: opacity .1s ease;
-				.icon-button {
-					flex: 0 1 auto;
-					color: $gab-secondary-text;
-					font-size: 14px;
-					font-weight: 500;
-					padding: 10px;
-					font-family: inherit;
-					&:hover,
-					&:focus,
-					&:active {color: $gab-text-highlight;}
-				}
-				&.active {opacity: 1;}
-			}
-			&-description {
-				position: absolute;
-				z-index: 2;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				box-sizing: border-box;
-				background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-				padding: 10px;
-				opacity: 0;
-				transition: opacity .1s ease;
-				textarea {
-					background: rgba(0,0,0,0.3);
-					box-sizing: border-box;
-					background: transparent;
-					color: $gab-secondary-text;
-					border: 1px solid $gab-secondary-text;
-					outline: none;
-					padding: 10px;
-					margin: 0;
-					width: 100%;
-					font-family: inherit;
-					font-size: 14px;
-					font-weight: 500;
-					&:focus {color: #fff;}
-					&::placeholder {
-						color: $gab-secondary-text;
-					}
-				}
-				&.active {opacity: 1;}
-			}
-		}
-		.compose-form__upload-thumbnail {
-			border-radius: 4px;
-			background-position: center;
-			background-size: cover;
-			background-repeat: no-repeat;
-			height: 140px;
-			width: 100%;
-			overflow: hidden;
-		}
-	} // end .compose-form .compose-form__modifiers
-	.compose-form__buttons-wrapper {
-		padding: 10px;
-		background: darken($simple-background-color, 8%);
-		border-radius: 0 0 4px 4px;
-		display: flex;
-		justify-content: space-between;
-		flex: 0 0 auto;
-		.compose-form__buttons {
-			display: flex;
-			.compose-form__upload-button-icon {line-height: 27px;}
-			.compose-form__sensitive-button {
-				display: none;
-				&.compose-form__sensitive-button--visible {display: block;}
-				.compose-form__sensitive-button__icon {line-height: 27px;}
-			}
-		}
-		.icon-button {
-			box-sizing: content-box;
-			padding: 0 3px;
-		}
-		.character-counter__wrapper {
-			align-self: center;
-			margin-right: 4px;
-			.character-counter {
-				cursor: default;
-				font-family: $font-sans-serif, sans-serif;
-				font-size: 14px;
-				font-weight: 600;
-				color: $gab-secondary-text;
-				&.character-counter--over {color: $warning-red;}
-			}
-		}
-	}
-	.compose-form__publish {
-		display: flex;
-		justify-content: flex-end;
-		min-width: 0;
-		flex: 0 0 auto;
-		.compose-form__publish-button-wrapper {
-			overflow: hidden;
-			padding-top: 10px;
-		}
-	}
-} // end .compose-form
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components/dropdown-menu.scss b/app/javascript/styles/gabsocial/components/dropdown-menu.scss
index 193cb2f1..e69de29b 100644
--- a/app/javascript/styles/gabsocial/components/dropdown-menu.scss
+++ b/app/javascript/styles/gabsocial/components/dropdown-menu.scss
@@ -1,150 +0,0 @@
-.dropdown-menu {
-	z-index: 9999;
-	position: absolute;
-	background: $gab-background-container;
-	border-radius: 4px;
-	border: 1px solid $gab-placeholder-accent;
-	padding: 4px 0;
-	@include font-size(13);
-	@include line-height(26);
-	@include font-weight(normal);
-	color: $gab-secondary-text;
-	box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
-	&.left {transform-origin: 100% 50%;}
-	&.top {transform-origin: 50% 100%;}
-	&.bottom {transform-origin: 50% 0;}
-	&.right {transform-origin: 0 50%;}
-	&__arrow {
-		position: absolute;
-		width: 0;
-		height: 0;
-		border: 0 solid transparent;
-		&.left {
-			right: -5px;
-			margin-top: -5px;
-			border-width: 5px 0 5px 5px;
-			border-left-color: $gab-placeholder-accent;
-		}
-		&.top {
-			bottom: -5px;
-			margin-left: -5px;
-			border-width: 5px 5px 0;
-			border-top-color: $gab-placeholder-accent;
-		}
-		&.bottom {
-			top: -5px;
-			margin-left: -5px;
-			border-width: 0 5px 5px;
-			border-bottom-color: $gab-placeholder-accent;
-		}
-		&.right {
-			left: -5px;
-			margin-top: -5px;
-			border-width: 5px 5px 5px 0;
-			border-right-color: $gab-placeholder-accent;
-		}
-	}
-	ul {
-		overflow: hidden;
-		padding: 6px 0;
-	}
-	&__item a {
-		display: block;
-		box-sizing: border-box;
-		overflow: hidden;
-		padding: 3px 10px 1px;
-		text-decoration: none;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		text-transform: capitalize;
-		color: $gab-secondary-text;
-		&:focus,
-		&:hover,
-		&:active {
-			outline: 0;
-			color: $gab-text-highlight;
-			background: $gab-background-base !important;
-			box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
-		}
-	}
-	&__separator {
-		display: block;
-		margin: 10px !important;
-		height: 1px;
-		background: $gab-background-base;
-	}
-}
-// end .dropdown-menu
-
-
-
-
-// NOTE - not sure what this relates to — but it doesn't involve the navbar dropdown
-
-
-.dropdown {
-	display: inline-block;
-}
-
-.dropdown__content {
-	display: none;
-	position: absolute;
-}
-
-
-.dropdown--active .dropdown__content {
-	display: block;
-	line-height: 18px;
-	max-width: 311px;
-	right: 0;
-	text-align: left;
-	z-index: 9999;
-
-	& > ul {
-		list-style: none;
-		background: $ui-secondary-color;
-		padding: 4px 0;
-		border-radius: 4px;
-		box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
-		min-width: 140px;
-		position: relative;
-	}
-
-	&.dropdown__right {
-		right: 0;
-	}
-
-	&.dropdown__left {
-		& > ul {
-			left: -98px;
-		}
-	}
-
-	& > ul > li > a {
-		font-size: 13px;
-		line-height: 18px;
-		display: block;
-		padding: 4px 14px;
-		box-sizing: border-box;
-		text-decoration: none;
-		background: $ui-secondary-color;
-		color: $inverted-text-color;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-
-		&:focus {
-			outline: 0;
-		}
-
-		&:hover {
-			background: $ui-highlight-color;
-			color: $secondary-text-color;
-		}
-	}
-}
-
-.dropdown__icon {
-	vertical-align: middle;
-}
-
diff --git a/app/javascript/styles/gabsocial/components/group-card.scss b/app/javascript/styles/gabsocial/components/group-card.scss
index 345915e2..a4d4e33f 100644
--- a/app/javascript/styles/gabsocial/components/group-card.scss
+++ b/app/javascript/styles/gabsocial/components/group-card.scss
@@ -3,8 +3,8 @@
     @include gab-container-standards();
     .group-column-header__title {
         padding: 15px;
-        font-size: 20px;
-        font-weight: bold;
+
+        @include text-sizing(20px, 700);
     }
     .group-column-header__cta {
         float: right;
@@ -15,12 +15,10 @@
 }
 
 .group-card-list {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
     width: 100%;
     margin-top: 20px;
+
+    @include flex(space-between, stretch, row, wrap);
 }
 
 .group-card {
@@ -49,15 +47,15 @@
 
         .group-card__title {
             color: $primary-text-color;
-            font-size: 16px;
-            font-weight: bold;
+
+            @include text-sizing(16px, bold);
         }
 
         .group-card__meta {
             color: $gab-secondary-text;
             font-size: 14px;
-            margin-top: 5px;
-            margin-bottom: 10px;
+
+            @include vertical-margin(5px, 10px);
         }
 
         .group-card__description {
diff --git a/app/javascript/styles/gabsocial/components/group-detail.scss b/app/javascript/styles/gabsocial/components/group-detail.scss
index 5641add3..ffc6fbea 100644
--- a/app/javascript/styles/gabsocial/components/group-detail.scss
+++ b/app/javascript/styles/gabsocial/components/group-detail.scss
@@ -59,9 +59,9 @@
         padding: 10px 10px 20px 10px;
 
         h1 {
-            font-size: 22px;
-            font-weight: bold;
             margin-bottom: 10px;
+
+            @include text-sizing(22px, 700);
         }
 
         .group__panel__description {
@@ -72,22 +72,23 @@
             display: inline-block;
             margin-bottom: 10px;
             border-radius: 4px;
+            font-size: 13px;
+            padding: 4px 8px;
             background: $gab-background-container;
             body.theme-gabsocial-light & {
           		background: $gab-background-container-light;
           	}
-            font-size: 13px;
-            padding: 4px 8px;
         }
     }
 
     .group__feed {
       background: $gab-background-container;
-      body.theme-gabsocial-light & {
-        background: $gab-background-container-light;
-      }
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
       overflow: hidden;
+
+      body.theme-gabsocial-light & {
+        background: $gab-background-container-light;
+      }
     }
 }
diff --git a/app/javascript/styles/gabsocial/components/group-form.scss b/app/javascript/styles/gabsocial/components/group-form.scss
index 2df5b121..cd3c9893 100644
--- a/app/javascript/styles/gabsocial/components/group-form.scss
+++ b/app/javascript/styles/gabsocial/components/group-form.scss
@@ -23,14 +23,13 @@
 		display: block;
 		box-sizing: border-box;
 		float: left;
- 		height: 20px; 
+ 		height: 20px;
  		padding: 3px 0 0 33px;
-		@include font-size(12);
-		@include font-weight(light);
 		color: $gab-secondary-text;
-		background-repeat: no-repeat;
-		background-image: url('../images/sprite-post-functions.png');
-		background-size: 100px 1200px;
+
+		@include text-sizing(12px, 400);
+		@include background-image('/assets/images/sprite-post-functions.png', 100px 1200px);
+
 		&:hover {
 			color: $gab-brand-default;
 			background-position: 0 -100px;
@@ -41,12 +40,12 @@
 		}
 	}
 	.group-form__file {
-		width: 1px;
-		height: 1px;
 		overflow: hidden;
 		opacity: 0;
 		position: absolute;
 		pointer-events: none;
+
+		@include size(1px);
 	}
 	button {float: right;}
 }
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components/inputs.scss b/app/javascript/styles/gabsocial/components/inputs.scss
index 9a9d7509..a54eea4d 100644
--- a/app/javascript/styles/gabsocial/components/inputs.scss
+++ b/app/javascript/styles/gabsocial/components/inputs.scss
@@ -1,23 +1,35 @@
 input[type='text'],
 textarea {
-	&.standard {
-		box-sizing: border-box;
-		padding: 7px 10px;
-		border: 1px solid;
-		border-radius: 4px;
-		@include font-size(16);
-		@include line-height(18);
-		color: $gab-brand-default;
-		border-color: $gab-placeholder-accent;
-		background: $gab-background-container;
-		@include input-placeholder($gab-placeholder-accent);
-		body.theme-gabsocial-light & {
-			color: $gab-placeholder-accent;
-			border-color: $gab-secondary-text;
-			background: $gab-background-base-light;	
-			@include input-placeholder($gab-secondary-text);
-		}
-		&:focus {outline: none;}
-	}
+  &.standard {
+    box-sizing: border-box;
+    padding: 7px 10px;
+    border: 1px solid;
+    border-radius: 4px;
+    color: $gab-brand-default;
+    border-color: $gab-placeholder-accent;
+    background: $gab-background-container;
+
+    @include text-sizing(16px, 400, 18);
+    @include input-placeholder {
+      color: $gab-placeholder-accent;
+    }
+
+    body.theme-gabsocial-light & {
+      color: $gab-placeholder-accent;
+      border-color: $gab-secondary-text;
+      background: $gab-background-base-light;
+
+      @include input-placeholder {
+        color: $gab-secondary-text;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
 }
-textarea.standard {resize: vertical;}
\ No newline at end of file
+
+textarea.standard {
+  resize: vertical;
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components/modal.scss b/app/javascript/styles/gabsocial/components/modal.scss
index 3cfb7854..6d4933d0 100644
--- a/app/javascript/styles/gabsocial/components/modal.scss
+++ b/app/javascript/styles/gabsocial/components/modal.scss
@@ -1,303 +1,113 @@
-.modal-root {
-	position: relative;
-	transition: opacity 0.3s linear;
-	will-change: opacity;
-	z-index: 9999;
-}
-
-.modal-root__overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background: rgba($base-overlay-background, 0.7);
-}
-
-.modal-root__container {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	align-content: space-around;
-	z-index: 9999;
-	pointer-events: none;
-	user-select: none;
-}
-
-.modal-root__modal {
-	pointer-events: auto;
-	display: flex;
-	z-index: 9999;
-	max-height: 100%;
-	overflow-y: hidden;
-}
-
-.video-modal {
-	max-width: 100vw;
-	max-height: 100vh;
-	position: relative;
-}
-
-.media-modal {
-	width: 100%;
-	height: 100%;
-	position: relative;
-
-	.extended-video-player {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		video {
-			max-width: $media-modal-media-max-width;
-			max-height: $media-modal-media-max-height;
-		}
-	}
-}
-
-.media-modal__closer {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.media-modal__navigation {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	pointer-events: none;
-	transition: opacity 0.3s linear;
-	will-change: opacity;
-
-	* {
-		pointer-events: auto;
-	}
-
-	&.media-modal__navigation--hidden {
-		opacity: 0;
-
-		* {
-			pointer-events: none;
-		}
-	}
-}
-
-.media-modal__nav {
-	background: rgba($base-overlay-background, 0.5);
-	box-sizing: border-box;
-	border: 0;
-	color: $primary-text-color;
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	font-size: 24px;
-	height: 20vmax;
-	margin: auto 0;
-	padding: 30px 15px;
-	position: absolute;
-	top: 0;
-	bottom: 0;
-}
-
-.media-modal__nav--left {
-	left: 0;
-}
-
-.media-modal__nav--right {
-	right: 0;
-}
-
-.media-modal__pagination {
-	width: 100%;
-	text-align: center;
-	position: absolute;
-	left: 0;
-	bottom: 20px;
-	pointer-events: none;
-}
-
-.media-modal__meta {
-	text-align: center;
-	position: absolute;
-	left: 0;
-	bottom: 20px;
-	width: 100%;
-	pointer-events: none;
-
-	&--shifted {
-		bottom: 62px;
-	}
-
-	a {
-		text-decoration: none;
-		font-weight: 500;
-		color: $ui-secondary-color;
-
-		&:hover,
-		&:focus,
-		&:active {
-			text-decoration: underline;
-		}
-	}
-}
-
-.media-modal__page-dot {
-	display: inline-block;
-}
-
-.media-modal__button {
-	background-color: $primary-text-color;
-	height: 12px;
-	width: 12px;
-	border-radius: 6px;
-	margin: 10px;
-	padding: 0;
-	border: 0;
-	font-size: 0;
-}
-
-.media-modal__button--active {
-	background-color: $highlight-text-color;
-}
-
-.media-modal__close {
-	position: absolute;
-	right: 8px;
-	top: 8px;
-	z-index: 100;
-}
-
 .onboarding-modal,
 .error-modal,
 .embed-modal {
-	background: $ui-secondary-color;
-	color: $inverted-text-color;
-	border-radius: 8px;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
+  background: $ui-secondary-color;
+  color: $inverted-text-color;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .error-modal__body {
-	height: 80vh;
-	width: 80vw;
-	max-width: 520px;
-	max-height: 420px;
-	position: relative;
+  position: relative;
 
-	& > div {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		box-sizing: border-box;
-		padding: 25px;
-		display: none;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		display: flex;
-		opacity: 0;
-		user-select: text;
-	}
+  @include size(80vw, 80vh);
+  @include max-size(520px, 420px);
+
+  &>div {
+    box-sizing: border-box;
+    padding: 25px;
+    display: none;
+    opacity: 0;
+    user-select: text;
+
+    @include size(100%);
+    @include abs-position(0, auto, auto, 0);
+    @include flex(center, center, column);
+  }
 }
 
 .error-modal__body {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
+  text-align: center;
+
+  @include flex(center, center, column);
 }
 
 .onboarding-modal__paginator,
 .error-modal__footer {
-	flex: 0 0 auto;
-	background: darken($ui-secondary-color, 8%);
-	display: flex;
-	padding: 25px;
+  flex: 0 0 auto;
+  background: darken($ui-secondary-color, 8%);
+  display: flex;
+  padding: 25px;
 
-	& > div {
-		min-width: 33px;
-	}
+  &>div {
+    min-width: 33px;
+  }
 
-	.onboarding-modal__nav,
-	.error-modal__nav {
-		color: $lighter-text-color;
-		border: 0;
-		font-size: 14px;
-		font-weight: 500;
-		padding: 10px 25px;
-		line-height: inherit;
-		height: auto;
-		margin: -10px;
-		border-radius: 4px;
-		background-color: transparent;
+  .onboarding-modal__nav,
+  .error-modal__nav {
+    color: $lighter-text-color;
+    border: 0;
+    padding: 10px 25px;
+    height: auto;
+    margin: -10px;
+    border-radius: 4px;
+    background-color: transparent;
 
-		&:hover,
-		&:focus,
-		&:active {
-			color: darken($lighter-text-color, 4%);
-			background-color: darken($ui-secondary-color, 16%);
-		}
+    @include text-sizing(14px, 500, inherit);
 
-		&.onboarding-modal__done,
-		&.onboarding-modal__next {
-			color: $inverted-text-color;
+    &:hover,
+    &:focus,
+    &:active {
+      color: darken($lighter-text-color, 4%);
+      background-color: darken($ui-secondary-color, 16%);
+    }
 
-			&:hover,
-			&:focus,
-			&:active {
-				color: lighten($inverted-text-color, 4%);
-			}
-		}
-	}
+    &.onboarding-modal__done,
+    &.onboarding-modal__next {
+      color: $inverted-text-color;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: lighten($inverted-text-color, 4%);
+      }
+    }
+  }
 }
 
 .error-modal__footer {
-	justify-content: center;
+  justify-content: center;
 }
 
 .display-case {
-	text-align: center;
-	font-size: 15px;
-	margin-bottom: 15px;
+  text-align: center;
+  font-size: 15px;
+  margin-bottom: 15px;
 
-	&__label {
-		font-weight: 500;
-		color: $inverted-text-color;
-		margin-bottom: 5px;
-		text-transform: uppercase;
-		font-size: 12px;
-	}
+  &__label {
+    color: $inverted-text-color;
+    margin-bottom: 5px;
+    text-transform: uppercase;
 
-	&__case {
-		background: $ui-base-color;
-		color: $secondary-text-color;
-		font-weight: 500;
-		padding: 10px;
-		border-radius: 4px;
-	}
+    @include text-sizing(12px, 500);
+  }
+
+  &__case {
+    background: $ui-base-color;
+    color: $secondary-text-color;
+    font-weight: 500;
+    padding: 10px;
+    border-radius: 4px;
+  }
 }
 
 .onboard-sliders {
-	display: inline-block;
-	max-width: 30px;
-	max-height: auto;
-	margin-left: 10px;
+  display: inline-block;
+  margin-left: 10px;
+
+  @include max-size(30px, auto);
 }
 
 .boost-modal,
@@ -305,291 +115,325 @@
 .report-modal,
 .actions-modal,
 .mute-modal {
-	position: relative;
-	flex-direction: column;
-	overflow: hidden;
-	width: 480px;
-	max-width: 90vw;
-	border-radius: 4px;
-	border: 1px solid $gab-placeholder-accent;
-	color: $gab-secondary-text;
-	body.theme-gabsocial-light & {color: $gab-default-text-light;}
-	background: $gab-background-container;
-	.status__display-name {
-		display: block;
-		max-width: 100%;
-		padding-right: 25px;
-	}
-	.status__avatar {
-		height: 28px;
-		left: 10px;
-		position: absolute;
-		top: 10px;
-		width: 48px;
-	}
-	.status__content__spoiler-link {
-		color: lighten($secondary-text-color, 8%);
-	}
+  position: relative;
+  flex-direction: column;
+  overflow: hidden;
+  width: 480px;
+  max-width: 90vw;
+  color: $gab-secondary-text;
+
+  @include border-design($gab-placeholder-accent, 1px, 4px);
+
+  body.theme-gabsocial-light & {
+    color: $gab-default-text-light;
+  }
+
+  background: $gab-background-container;
+
+  .status__display-name {
+    display: block;
+    max-width: 100%;
+    padding-right: 25px;
+  }
+
+  .status__avatar {
+    height: 28px;
+    left: 10px;
+    position: absolute;
+    top: 10px;
+    width: 48px;
+  }
+
+  .status__content__spoiler-link {
+    color: lighten($secondary-text-color, 8%);
+  }
 }
 
 .actions-modal {
-	.status {
-		background: $white;
-		border-bottom-color: $ui-secondary-color;
-		padding-top: 10px;
-		padding-bottom: 10px;
-	}
+  .status {
+    background: $white;
+    border-bottom-color: $ui-secondary-color;
 
-	.dropdown-menu__separator {
-		display: block;
-		margin: 10px;
-		height: 1px;
-		background: $gab-background-base;
-	}
+    @include vertical-padding(10px);
+  }
+
+  .dropdown-menu__separator {
+    display: block;
+    margin: 10px;
+    height: 1px;
+    background: $gab-background-base;
+  }
 }
 
 .boost-modal__container {
-	overflow-x: scroll;
-	padding: 10px;
+  overflow-x: scroll;
+  padding: 10px;
 
-	.status {
-		user-select: text;
-		border-bottom: 0;
-	}
+  .status {
+    user-select: text;
+    border-bottom: 0;
+  }
 }
 
 .boost-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar {
-	display: flex;
-	justify-content: space-between;
-	background: $ui-secondary-color;
-	padding: 10px;
-	line-height: 36px;
+  background: $ui-secondary-color;
+  padding: 10px;
+  line-height: 36px;
 
-	& > div {
-		flex: 1 1 auto;
-		text-align: right;
-		color: $lighter-text-color;
-		padding-right: 10px;
-	}
+  @include flex(space-between);
 
-	.button {
-		flex: 0 0 auto;
-	}
+  &>div {
+    flex: 1 1 auto;
+    text-align: right;
+    color: $lighter-text-color;
+    padding-right: 10px;
+  }
+
+  .button {
+    flex: 0 0 auto;
+  }
 }
 
 .boost-modal__status-header {
-	font-size: 15px;
+  font-size: 15px;
 }
 
 .boost-modal__status-time {
-	float: right;
-	font-size: 14px;
+  float: right;
+  font-size: 14px;
 }
 
 .mute-modal {
-	line-height: 24px;
+  line-height: 24px;
 }
 
 .mute-modal .react-toggle {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 .report-modal {
-	width: 90vw;
-	max-width: 700px;
+  width: 90vw;
+  max-width: 700px;
 }
 
 .report-modal__container {
-	display: flex;
-	border-top: 1px solid $ui-secondary-color;
+  display: flex;
+  border-top: 1px solid $ui-secondary-color;
 
-	@media screen and (max-width: 480px) {
-		flex-wrap: wrap;
-		overflow-y: auto;
-	}
+  @media screen and (max-width: 480px) {
+    flex-wrap: wrap;
+    overflow-y: auto;
+  }
 }
 
 .report-modal__statuses,
 .report-modal__comment {
-	box-sizing: border-box;
-	width: 50%;
+  box-sizing: border-box;
+  width: 50%;
 
-	@media screen and (max-width: 480px) {
-		width: 100%;
-	}
+  @media screen and (max-width: 480px) {
+    width: 100%;
+  }
 }
 
 .report-modal__statuses {
-	flex: 1 1 auto;
-	min-height: 20vh;
-	max-height: 80vh;
-	overflow-y: auto;
-	overflow-x: hidden;
+  flex: 1 1 auto;
+  min-height: 20vh;
+  max-height: 80vh;
+  overflow-y: auto;
+  overflow-x: hidden;
 
-	.status__content a {
-		color: $highlight-text-color;
-	}
+  .status__content a {
+    color: $highlight-text-color;
+  }
 
-	.status__content,
-	.status__content p {
-		color: $gab-secondary-text;
-		body.theme-gabsocial-light & {color: $gab-default-text-light;}
-	}
+  .status__content,
+  .status__content p {
+    color: $gab-secondary-text;
 
-	@media screen and (max-width: 480px) {
-		max-height: 10vh;
-	}
+    body.theme-gabsocial-light & {
+      color: $gab-default-text-light;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    max-height: 10vh;
+  }
 }
 
 .report-modal__comment {
-	padding: 20px;
-	border-right: 1px solid $ui-secondary-color;
-	max-width: 320px;
+  padding: 20px;
+  border-right: 1px solid $ui-secondary-color;
+  max-width: 320px;
 
-	p {
-		font-size: 14px;
-		line-height: 20px;
-		margin-bottom: 20px;
-	}
+  p {
+    font-size: 14px;
+    line-height: 20px;
+    margin-bottom: 20px;
+  }
 
-	.setting-text {
-		display: block;
-		box-sizing: border-box;
-		width: 100%;
-		margin: 0;
-		color: $inverted-text-color;
-		background: $white;
-		padding: 10px;
-		font-family: inherit;
-		font-size: 14px;
-		resize: vertical;
-		border: 0;
-		outline: 0;
-		border-radius: 4px;
-		border: 1px solid $ui-secondary-color;
-		margin-bottom: 20px;
+  .setting-text {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    color: $inverted-text-color;
+    background: $white;
+    padding: 10px;
+    font-family: inherit;
+    font-size: 14px;
+    resize: vertical;
+    border: 0;
+    outline: 0;
+    margin-bottom: 20px;
 
-		&:focus {
-			border: 1px solid darken($ui-secondary-color, 8%);
-		}
-	}
+    @include border-design($ui-secondary-color, 1px, 4px);
 
-	.setting-toggle {
-		margin-top: 20px;
-		margin-bottom: 24px;
+    &:focus {
+      border: 1px solid darken($ui-secondary-color, 8%);
+    }
+  }
 
-		&__label {
-			color: $inverted-text-color;
-			font-size: 14px;
-		}
-	}
+  .setting-toggle {
+    @include vertical-margin(20px, 24px);
 
-	@media screen and (max-width: 480px) {
-		padding: 10px;
-		max-width: 100%;
-		order: 2;
+    &__label {
+      color: $inverted-text-color;
+      font-size: 14px;
+    }
+  }
 
-		.setting-toggle {
-			margin-bottom: 4px;
-		}
-	}
+  @media screen and (max-width: 480px) {
+    padding: 10px;
+    max-width: 100%;
+    order: 2;
+
+    .setting-toggle {
+      margin-bottom: 4px;
+    }
+  }
 }
 
 .actions-modal {
-	.status {
-		overflow-y: auto;
-		max-height: 300px;
-	}
-	width: calc(100% - 72px);
-	margin: 35px;
-	.actions-modal__item-label {font-weight: 500;}
-	ul {
-		overflow-y: auto;
-		flex-shrink: 0;
-		max-height: calc(100vh - 147px);
+  .status {
+    overflow-y: auto;
+    max-height: 300px;
+  }
 
-		// NOTE - not sure what this is yet, leaving alone for now until I find out.
-		&.with-status {max-height: calc(80vh - 75px);}
+  width: calc(100% - 72px);
+  margin: 35px;
 
-		li:empty {margin: 0;}
-		li:not(:empty) {
-			&:first-of-type{margin: 10px 0 0;}
-			&:last-of-type{margin: 0 0 10px;}
-			a {
-				display: flex;
-				align-items: center;
-				padding: 13px 10px 12px;
-				@inclide font-size(14);
-				color: $gab-secondary-text;
-				text-decoration: none;
-				&,
-				button {transition: none;}
-				&.active,
-				&:hover,
-				&:active,
-				&:focus {
-					&,
-					button {
-						background: $gab-background-base;
-						color: $gab-text-highlight;
-						box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
-					}
-				}
-				button:first-child {margin-right: 10px;}
-			}
-		}
-	}
+  .actions-modal__item-label {
+    font-weight: 500;
+  }
+
+  ul {
+    overflow-y: auto;
+    flex-shrink: 0;
+    max-height: calc(100vh - 147px);
+
+    // NOTE - not sure what this is yet, leaving alone for now until I find out.
+    &.with-status {
+      max-height: calc(80vh - 75px);
+    }
+
+    li:empty {
+      margin: 0;
+    }
+
+    li:not(:empty) {
+      &:first-of-type {
+        margin: 10px 0 0;
+      }
+
+      &:last-of-type {
+        margin: 0 0 10px;
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        padding: 13px 10px 12px;
+        font-size: 14px;
+        color: $gab-secondary-text;
+        text-decoration: none;
+
+        &,
+        button {
+          transition: none;
+        }
+
+        &.active,
+        &:hover,
+        &:active,
+        &:focus {
+
+          &,
+          button {
+            background: $gab-background-base;
+            color: $gab-text-highlight;
+            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
+          }
+        }
+
+        button:first-child {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
 }
 
 .confirmation-modal__action-bar,
 .mute-modal__action-bar {
-	.confirmation-modal__secondary-button,
-	.confirmation-modal__cancel-button,
-	.mute-modal__cancel-button {
-		background-color: transparent;
-		color: $lighter-text-color;
-		font-size: 14px;
-		font-weight: 500;
 
-		&:hover,
-		&:focus,
-		&:active {
-			color: darken($lighter-text-color, 4%);
-		}
-	}
+  .confirmation-modal__secondary-button,
+  .confirmation-modal__cancel-button,
+  .mute-modal__cancel-button {
+    background-color: transparent;
+    color: $lighter-text-color;
 
-	.confirmation-modal__secondary-button {
-		flex-shrink: 1;
-	}
+    @include text-sizing(14px, 500);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: darken($lighter-text-color, 4%);
+    }
+  }
+
+  .confirmation-modal__secondary-button {
+    flex-shrink: 1;
+  }
 }
 
 .confirmation-modal__container,
 .mute-modal__container,
 .report-modal__target {
-	padding: 30px;
-	font-size: 16px;
-	text-align: center;
+  padding: 30px;
+  font-size: 16px;
+  text-align: center;
 
-	strong {
-		font-weight: 500;
+  strong {
+    font-weight: 500;
 
-		@each $lang in $cjk-langs {
-			&:lang(#{$lang}) {
-				font-weight: 700;
-			}
-		}
-	}
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
 }
 
 .report-modal__target {
-	padding: 20px;
+  padding: 20px;
 
-	.media-modal__close {
-		top: 19px;
-		right: 15px;
-	}
+  .media-modal__close {
+    top: 19px;
+    right: 15px;
+  }
 }
 
 .modal-layout {
@@ -600,8 +444,8 @@
   padding: 0;
 }
 
-@media screen and (max-width: 600px) {
+@include breakpoint(sm) {
   .account-header {
     margin-top: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components/tabs-bar.scss b/app/javascript/styles/gabsocial/components/tabs-bar.scss
index 8203b2fb..e69de29b 100644
--- a/app/javascript/styles/gabsocial/components/tabs-bar.scss
+++ b/app/javascript/styles/gabsocial/components/tabs-bar.scss
@@ -1,209 +0,0 @@
-.tabs-bar {
-	display: flex;
-	box-sizing: border-box;
-	background: #000;
-	flex: 0 0 auto;
-	overflow-y: auto;
-	height: 50px;
-	position: sticky;
-	top: 0;
-	z-index: 1000;
-
-	&__container {
-		display: flex;
-		box-sizing: border-box;
-		width:100%;
-		max-width: 1200px;
-		margin: 0 auto;
-		padding: 0 15px;
-
-		// NOTE - might need to adjust this based on column sizing
-		@media screen and (max-width: $nav-breakpoint-4) {padding: 0 20px;}
-
-	}
-
-	&__split {
-		display: flex;
-		width: auto;
-
-		&--left {
-			margin-right: auto;
-		}
-
-		&--right {
-			margin-left: auto;
-			padding-top: 8px;
-			@media screen and (max-width: $nav-breakpoint-3) {padding-top: 4px;}
-		}
-	}
-
-	&__search-container {
-		display: block;
-		@media screen and (max-width: $nav-breakpoint-2) {display: none;}
-		width: 251px;
-		.search {
-			margin: 0;
-		}
-	}
-
-	&__profile {
-		position: relative;
-		overflow: hidden;
-		margin: 0 0 0 20px;
-		height: 34px;
-		width: 34px;
-
-		@media screen and (max-width: $nav-breakpoint-3) {
-			height: 42px;
-			width: 42px;
-			margin: 0;
-		}
-
-		.account__avatar {
-			width: 34px;
-			height: 34px;
-			background-size: 34px 34px;
-
-			@media screen and (max-width: $nav-breakpoint-3) {
-				width: 42px;
-				height: 42px;
-				background-size: 42px 42px;
-			}
-
-
-		}
-
-		.compose__action-bar {
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			left: -5px;
-			bottom: 0;
-
-			i {
-				display: none;
-			}
-		}
-	}
-	&__button-compose {
-		display: block;
-		@media screen and (max-width: $nav-breakpoint-3) {display: none;}
-		width: 70px;
-		height: 34px;
-		margin-left: 20px;
-		border-radius: 4px;
-		background-image: url('../images/sprite-main-navigation.png');
-		background-color: $gab-brand-default !important;
-		background-repeat: no-repeat;
-		background-size: 161px 152px;
-		background-position: 18px 2px;
-		&:hover {
-			background-color: lighten($gab-brand-default, 5%) !important;
-			background-position: 18px -98px;
-			box-shadow: inset 0px 0px 6px darken($gab-brand-default, 10%);
-		}
-		span {display: none;}
-	}
-
-	&__button {
-		margin-left: 12px;
-    height: 34px;
-	}
-
-	.flex {
-		display: flex;
-	}
-}
-
-.tabs-bar__link {
-	display: flex;
-	flex: 1 1 auto;
-	margin: 0 25px 0 0;
-	color: white;
-	text-decoration: none;
-	text-align: center;
-	background-repeat: no-repeat;
-	background-image: url('../images/sprite-main-navigation-links.png');
-	background-size: auto 84px;
-	@media screen and (max-width: $nav-breakpoint-1) {
-		background-size: auto 120px;
-		width: 46px;
-		height: 42px;
-		margin: 4px 0 0 0;
-		padding: 0 !important;
-		&.active {
-			height: 38px;
-			border-bottom: 4px solid $gab-default-text-light;
-		}
-		& > span {display: none;}
-	}
-
-	// REMINDER - to add the remaining icons (globe / word balloon) from the sprite into this css as necessary
-	&.home {
-		padding: 16px 0 0 26px;
-		background-position: 0 18px;
-		&.active {background-position: 0 -52px;}
-		@media screen and (max-width: $nav-breakpoint-1) {
-			background-position: 11px 11px;
-			&.active {background-position: 11px -89px;}
-		}
-	}
-	&.notifications {
-		padding: 16px 0 0 22px;
-		background-position: -140px 18px;
-		&.active {background-position: -140px -52px;}
-		@media screen and (max-width: $nav-breakpoint-1) {
-			background-position: -186px 11px;
-			&.active {background-position: -186px -89px;}
-		}
-	}
-	&.groups {
-		padding: 16px 0 0 29px;
-		background-position: -280px 18px;
-		&.active {background-position: -280px -52px;}
-		@media screen and (max-width: $nav-breakpoint-1) {
-			background-position: -391px 11px;
-			&.active {background-position: -391px -89px;}
-		}
-	}
-	&.optional {
-		display: none;
-		@media screen and (max-width: $nav-breakpoint-2) {
-			display: flex;
-			background-position: -987px 11px;
-			&.active {background-position: -987px -89px;}
-		}
-	}
-
-	&.active {color: $gab-text-highlight;}
-	&--logo {
-		display: block;
-
-		// NOTE - Revisit right-margin of home button / positioning between 376px and 350px
-		//		- want to keep the icons centered between logo and profile image while shrinking
-		@media screen and (max-width: $nav-breakpoint-4) {display:none;}
-
-		width: 50px;
-		height: 50px;
-		margin-right: 35px;
-		border: none;
-		background-image: url('../images/gab_logo.svg');
-		background-repeat: no-repeat;
-		background-position: 0 10px;
-		background-size: 50px 30px;
-		& span {display: none !important;}
-		&:hover {
-			background-color: #000 !important;
-			border: none !important;
-		}
-	}
-	&--no-highlight,
-	&--no-highlight:hover,
-	&--no-highlight.active,
-	&--no-highlight:active,
-	&--no-highlight:focus {
-		background: transparent !important;
-		border-bottom-color: transparent !important;
-	}
-}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/components/user-panel.scss b/app/javascript/styles/gabsocial/components/user-panel.scss
index 158eb4ea..e69de29b 100644
--- a/app/javascript/styles/gabsocial/components/user-panel.scss
+++ b/app/javascript/styles/gabsocial/components/user-panel.scss
@@ -1,117 +0,0 @@
-.user-panel {
-	display: flex;
-	width: 265px;
-	flex-direction: column;
-	overflow-y: hidden;
-	@include gab-container-standards();
-	&__header {
-		display: block;
-		height: 112px;
-		width: 100%;
-		background: lighten($gab-background-container, 4%);
-		body.theme-gabsocial-light & {
-			background: darken($gab-background-container-light, 4%);
-		}
-
-		img {
-			display: block;
-			height: 100%;
-			width: 100%;
-			margin: 0;
-			object-fit: cover;
-		}
-	}
-
-	&__profile {
-		display: flex;
-		align-items: flex-start;
-		padding: 0 10px;
-		margin-top: -53px;
-
-		.account__avatar {
-			display: block;
-			width: 82px;
-			height: 82px;
-			border: 6px solid $gab-background-base;
-			body.theme-gabsocial-light & {border: 6px solid $gab-background-base-light;}
-			background-size: cover;
-		}
-	}
-
-	&__meta {
-		display: block;
-		padding: 6px 20px 17px 20px;
-	}
-
-	&__account {
-		a {
-			text-decoration: none;
-			color: $primary-text-color;
-		}
-
-		&__name {
-			display: block;
-			font-size: 20px;
-			font-weight: bold;
-			line-height: 24px;
-			color: #fff;
-			body.theme-gabsocial-light & {color: $gab-default-text-light;}
-		}
-
-		&:hover & {
-			&__name {
-				text-decoration: underline;
-			}
-		}
-
-		&__username {
-			display: block;
-			font-size: 14px;
-			line-height: 16px;
-			color: $gab-secondary-text;
-			text-decoration: none !important;
-		}
-	}
-
-	&__stats-block {
-		display: flex;
-		justify-content: space-between;
-		padding-top: 12px;
-	}
-
-	.user-panel-stats-item {
-		display: flex;
-		align-items: start;
-		justify-content: left;
-		flex-wrap: wrap;
-		flex-direction: column;
-
-		a {
-			text-decoration: none;
-
-			color: $primary-text-color;
-
-			&:hover {
-				opacity: 0.8;
-			}
-		}
-
-		&__value {
-			display: block;
-			width: 100%;
-			color: #fff;
-			body.theme-gabsocial-light & {color: $gab-default-text-light;}
-			font-size: 20px;
-			font-weight: 800;
-			line-height: 24px;
-		}
-
-		&__label {
-			display: block;
-			width: 100%;
-			color: $gab-secondary-text;
-			font-size: 12px;
-			line-height: 14px;
-		}
-	}
-}
diff --git a/app/javascript/styles/gabsocial/containers.scss b/app/javascript/styles/gabsocial/containers.scss
index 51913a8e..bdbbc6f8 100644
--- a/app/javascript/styles/gabsocial/containers.scss
+++ b/app/javascript/styles/gabsocial/containers.scss
@@ -1,7 +1,6 @@
 .container-alt {
   width: 700px;
-  margin: 0 auto;
-  margin-top: 40px;
+  margin: 40px auto 0 auto;
 
   @media screen and (max-width: 740px) {
     width: 100%;
@@ -17,9 +16,7 @@
   }
 
   h1 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @include flex(center, center);
 
     img {
       height: 42px;
@@ -27,17 +24,14 @@
     }
 
     a {
-      display: flex;
-      justify-content: center;
-      align-items: center;
       color: $primary-text-color;
       text-decoration: none;
       outline: 0;
       padding: 12px 16px;
-      line-height: 32px;
       font-family: $font-display, sans-serif;
-      font-weight: 500;
-      font-size: 14px;
+
+      @include flex(center, center);
+      @include text-sizing(14px, 500, 32px);
     }
   }
 }
@@ -62,33 +56,29 @@
   width: 400px;
   margin: 0 auto;
   display: flex;
-  font-size: 13px;
-  line-height: 18px;
   box-sizing: border-box;
-  padding: 20px 0;
-  padding-bottom: 0;
-  margin-bottom: -30px;
-  margin-top: 40px;
+  padding: 20px 0 0 0;
+
+  @include text-sizing(13px, 400, 18px);
+  @include vertical-margin(40px, -30px);
 
   @media screen and (max-width: 440px) {
     width: 100%;
-    margin: 0;
-    margin-bottom: 10px;
-    padding: 20px;
-    padding-bottom: 0;
+    margin: 0 0 10px 0;
+    padding: 20px 20px 0 20px;
   }
 
   .avatar {
-    width: 40px;
-    height: 40px;
     margin-right: 8px;
 
+    @include size(40px);
+
     img {
-      width: 100%;
-      height: 100%;
       display: block;
       margin: 0;
       border-radius: 4px;
+
+      @include size(100%);
     }
   }
 
@@ -100,16 +90,16 @@
     .username {
       display: block;
       font-weight: 500;
-      text-overflow: ellipsis;
-      overflow: hidden;
+
+      @include text-overflow;
     }
   }
 
   .logout-link {
     display: block;
-    font-size: 32px;
-    line-height: 40px;
     margin-left: 8px;
+
+    @include text-sizing(32px, 400, 40px);
   }
 }
 
@@ -149,9 +139,8 @@
 
     .landing-page__call-to-action {
       padding: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+
+      @include flex(center, center);
     }
 
     .row__information-board {
@@ -159,10 +148,6 @@
       justify-content: center;
       align-items: center;
     }
-
-    .row__mascot {
-      display: none;
-    }
   }
 
   @media screen and (max-width: $no-gap-breakpoint) {
@@ -207,66 +192,48 @@
   .background-svg {
     display: block;
     position: absolute;
-    height: 100%;
-    width: 100%;
     min-height: 580px;
     z-index: -1;
-    background-image:url('/landing/wave.svg');
-    background-repeat: no-repeat;
-    background-position: bottom;
-    background-size: cover;
+
+    @include size(100%);
+    @include background-image('/landing/wave.svg', cover, bottom);
   }
 
   .header {
     height: 80px;
-    display: flex;
-    align-items: stretch;
-    justify-content: center;
-    flex-wrap: nowrap;
     padding: 14px 0;
     box-sizing: border-box;
 
+    @include flex(center, stretch, row, nowrap);
+
     @media screen and (max-width: 1024px) {
       padding: 14px 20px;
     }
 
     .header-container {
-      display: flex;
       width: 960px;
-      align-items: stretch;
-      justify-content: center;
-      flex-wrap: nowrap;
 
-      & > div {
+      @include flex(center, stretch, row, nowrap);
+
+      &>div {
         flex: 1 1 33.3%;
         min-height: 1px;
       }
     }
 
     .nav-left {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      flex-wrap: nowrap;
+      @include flex(flex-start, center, row, nowrap);
     }
 
     .nav-center {
-      display: flex;
-      align-items: stretch;
-      justify-content: center;
-      flex-wrap: nowrap;
+      @include flex(center, stretch, row, nowrap);
     }
 
     .nav-right {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      flex-wrap: nowrap;
+      @include flex(flex-end, center, row, nowrap);
 
       .simple_form.new_user {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
+        @include flex(flex-start, center, row);
 
         .fields-group {
           display: flex;
@@ -319,11 +286,11 @@
 
       img {
         display: block;
-        height: 30px;
-        width: auto;
         position: relative;
         bottom: -2px;
 
+        @include size(auto, 30px);
+
         @media screen and (max-width: $no-gap-breakpoint) {
           height: 20px;
         }
@@ -334,12 +301,11 @@
       display: flex;
       align-items: center;
       padding: 12px 22px;
-      font-size: 14px;
-      font-weight: 600;
       text-decoration: none;
       color: $primary-text-color;
       white-space: nowrap;
-      text-align: center;
+
+      @include text-sizing(14px, 600, 1, center);
 
       &:hover,
       &:focus,
@@ -446,26 +412,24 @@
       background: darken($ui-base-color, 12%);
 
       &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
         box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
         top: 0;
         left: 0;
+
+        @include pseudo;
+        @include size(100%);
       }
 
       img {
         object-fit: cover;
         display: block;
-        width: 100%;
-        height: 100%;
         margin: 0;
         border-radius: 4px 4px 0 0;
+
+        @include size(100%);
       }
 
-      @media screen and (max-width: 600px) {
+      @include breakpoint(sm) {
         height: 200px;
       }
     }
@@ -500,41 +464,37 @@
     &__bar {
       position: relative;
       margin-top: -80px;
-      display: flex;
-      justify-content: flex-start;
+
+      @include flex(flex-start);
 
       &::before {
-        content: "";
-        display: block;
         background: lighten($ui-base-color, 4%);
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
         height: 60px;
         border-radius: 0 0 4px 4px;
         z-index: -1;
+
+        @include pseudo;
+        @include abs-position(auto, 0, 0, 0, false);
       }
 
       .avatar {
         display: block;
-        width: 120px;
-        height: 120px;
         padding-left: 20px - 4px;
         flex: 0 0 auto;
 
+        @include size(120px);
+
         img {
           display: block;
-          width: 100%;
-          height: 100%;
           margin: 0;
-          border-radius: 50%;
           border: 4px solid lighten($ui-base-color, 4%);
           background: darken($ui-base-color, 8%);
+
+          @include circle(100%);
         }
       }
 
-      @media screen and (max-width: 600px) {
+      @include breakpoint(sm) {
         margin-top: 0;
         background: lighten($ui-base-color, 4%);
         border-radius: 0 0 4px 4px;
@@ -545,10 +505,9 @@
         }
 
         .avatar {
-          width: 48px;
-          height: 48px;
-          padding: 7px 0;
-          padding-left: 10px;
+          padding: 7px 0 7px 10px;
+
+          @include size(48px);
 
           img {
             border: 0;
@@ -575,39 +534,32 @@
       margin-left: 20px;
 
       &__name {
-        padding-top: 20px;
-        padding-bottom: 8px;
+        @include vertical-padding(20px 8px);
 
         h1 {
-          font-size: 20px;
-          line-height: 18px * 1.5;
           color: $primary-text-color;
-          font-weight: 500;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
           text-shadow: 1px 1px 1px $base-shadow-color;
 
+          @include text-overflow(nowrap);
+          @include text-sizing(20px, 500, 27px);
+
           small {
             display: block;
-            font-size: 14px;
             color: $primary-text-color;
-            font-weight: 400;
-            overflow: hidden;
-            text-overflow: ellipsis;
+
+            @include text-overflow;
+            @include text-sizing(14px, 400);
           }
         }
       }
 
-      @media screen and (max-width: 600px) {
+      @include breakpoint(sm) {
         margin-left: 15px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+
+        @include flex(space-between, center);
 
         &__name {
-          padding-top: 0;
-          padding-bottom: 0;
+          @include vertical-padding(0);
 
           h1 {
             font-size: 16px;
@@ -622,11 +574,10 @@
       }
 
       &__tabs {
-        display: flex;
-        justify-content: flex-start;
-        align-items: stretch;
         height: 58px;
 
+        @include flex(flex-start, stretch);
+
         .details-counters {
           display: flex;
           flex-direction: row;
@@ -659,15 +610,14 @@
           }
 
           &::after {
-            display: block;
-            content: "";
-            position: absolute;
             bottom: 0;
             left: 0;
             width: 100%;
             border-bottom: 4px solid $ui-primary-color;
             opacity: 0.5;
             transition: all 400ms ease;
+
+            @include pseudo;
           }
 
           &.active {
@@ -699,11 +649,11 @@
           }
 
           .counter-number {
-            font-weight: 500;
-            font-size: 18px;
             margin-bottom: 5px;
             color: $primary-text-color;
             font-family: $font-display, sans-serif;
+
+            @include text-sizing(18px, 500);
           }
         }
 
@@ -746,8 +696,8 @@
           display: inline-block;
           color: $darker-text-color;
           text-decoration: none;
-          padding: 15px;
-          font-weight: 500;
+
+          @include text-sizing(15px, 500);
 
           strong {
             font-weight: 700;
@@ -763,7 +713,7 @@
     }
   }
 
-  .account__section-headline {
+  .account-section-headline {
     border-radius: 4px 4px 0 0;
 
     @media screen and (max-width: $no-gap-breakpoint) {
@@ -827,9 +777,8 @@
     color: $action-button-color;
     font-size: 18px;
 
-    & > span {
-      font-size: 14px;
-      font-weight: 500;
+    &>span {
+      @include text-sizing(14px, 500);
     }
   }
 
@@ -839,7 +788,7 @@
     min-width: 100%;
     margin: 0 -5px;
 
-    & > div {
+    &>div {
       box-sizing: border-box;
       flex: 1 0 auto;
       width: 300px;
@@ -851,7 +800,7 @@
         max-width: 50%;
       }
 
-      @media screen and (max-width: 600px) {
+      @include breakpoint(sm) {
         max-width: 100%;
       }
     }
@@ -860,7 +809,7 @@
       margin: 0;
       border-top: 1px solid lighten($ui-base-color, 8%);
 
-      & > div {
+      &>div {
         width: 100%;
         padding: 0;
         margin-bottom: 0;
@@ -882,4 +831,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/dashboard.scss b/app/javascript/styles/gabsocial/dashboard.scss
index eced8b12..2b386d95 100644
--- a/app/javascript/styles/gabsocial/dashboard.scss
+++ b/app/javascript/styles/gabsocial/dashboard.scss
@@ -32,14 +32,11 @@
 
   &__num,
   &__text {
-    text-align: center;
-    font-weight: 500;
-    font-size: 24px;
-    line-height: 21px;
     color: $primary-text-color;
     font-family: $font-display, sans-serif;
     margin-bottom: 20px;
-    line-height: 30px;
+
+    @include text-sizing(24px, 500, 30px, center);
   }
 
   &__text {
@@ -47,10 +44,9 @@
   }
 
   &__label {
-    font-size: 14px;
     color: $gab-secondary-text;
-    text-align: center;
-    font-weight: 500;
+
+    @include text-sizing(14px, 500, 1, center);
   }
 }
 
diff --git a/app/javascript/styles/gabsocial/emoji_picker.scss b/app/javascript/styles/gabsocial/emoji_picker.scss
index e49084b5..94ea5976 100644
--- a/app/javascript/styles/gabsocial/emoji_picker.scss
+++ b/app/javascript/styles/gabsocial/emoji_picker.scss
@@ -1,4 +1,5 @@
 .emoji-mart {
+
   &,
   * {
     box-sizing: border-box;
@@ -33,11 +34,11 @@
 }
 
 .emoji-mart-anchors {
-  display: flex;
-  justify-content: space-between;
   padding: 0 6px;
   color: $lighter-text-color;
   line-height: 0;
+
+  @include flex(space-between);
 }
 
 .emoji-mart-anchor {
@@ -67,12 +68,10 @@
 }
 
 .emoji-mart-anchor-bar {
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-  width: 100%;
-  height: 4px;
   background-color: $highlight-text-color;
+
+  @include size(100%, 4px);
+  @include abs-position(auto, auto, -5px, 0);
 }
 
 .emoji-mart-anchors {
@@ -103,21 +102,19 @@
 }
 
 .emoji-mart-search {
-  padding: 10px;
-  padding-right: 45px;
+  padding: 10px 45px 10px 10px;
   background: $simple-background-color;
 
   input {
-    font-size: 14px;
-    font-weight: 400;
     padding: 7px 9px;
     font-family: inherit;
     display: block;
     width: 100%;
     background: rgba($ui-secondary-color, 0.3);
     color: $inverted-text-color;
-    border: 1px solid $ui-secondary-color;
-    border-radius: 4px;
+
+    @include text-sizing(14px, 400);
+    @include border-design($ui-secondary-color, 1px, 4px);
 
     &::-moz-focus-inner {
       border: 0;
@@ -142,14 +139,12 @@
 
   &:hover::before {
     z-index: 0;
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     background-color: rgba($ui-secondary-color, 0.7);
     border-radius: 100%;
+
+    @include pseudo;
+    @include size(100%);
+    @include abs-position(0, auto, auto, 0, false);
   }
 }
 
@@ -175,8 +170,7 @@
   font-size: 0;
 
   span {
-    width: 22px;
-    height: 22px;
+    @include size(22px);
   }
 }
 
@@ -201,4 +195,4 @@
 
 .emoji-mart-preview {
   display: none;
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/footer.scss b/app/javascript/styles/gabsocial/footer.scss
index eced0c81..c62bc429 100644
--- a/app/javascript/styles/gabsocial/footer.scss
+++ b/app/javascript/styles/gabsocial/footer.scss
@@ -1,23 +1,20 @@
 .public-layout {
   .footer {
-    display: flex;
     padding: 40px 0;
     font-size: 12px;
-    justify-content: center;
-    align-items: center;
     background-color: lighten($ui-base-color, 5%);
     border-top: darken($ui-base-color, 10%);
 
+    @include flex(center, center);
+
     @media screen and (max-width:1024px) {
       padding: 40px 20px;
     }
 
     .footer-container {
-      display: flex;
       width: 960px;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
+
+      @include flex(flex-start, center, row, wrap);
 
       @media screen and (max-width:1024px) {
         width: 100%;
@@ -31,11 +28,10 @@
 
     h4 {
       text-transform: uppercase;
-      font-weight: 700;
       margin-bottom: 8px;
       color: $darker-text-color;
-      font-size: 1.6rem;
-      line-height: 1.5;
+
+      @include text-sizing(1.6rem, 700, 1.5);
 
       a {
         color: inherit;
@@ -48,9 +44,8 @@
 
       span {
         color: $primary-text-color;
-        font-size: 1.3rem;
-        font-weight: 500;
-        line-height: 1.5;
+
+        @include text-sizing(1.3rem, 500, 1.5);
 
         &:last-of-type {
           color: darken($primary-text-color, 20%);
@@ -67,12 +62,11 @@
         a {
           text-decoration: none;
           color: lighten($ui-base-color, 34%);
-          font-size: 1.3rem;
-          font-weight: 500;
-          line-height: 1.5;
           padding: 10px 4px;
           margin-left: 10px;
 
+          @include text-sizing(1.3rem, 500, 1.5);
+
           &:hover,
           &:active,
           &:focus {
diff --git a/app/javascript/styles/gabsocial/forms.scss b/app/javascript/styles/gabsocial/forms.scss
index 323da61b..d4931cc5 100644
--- a/app/javascript/styles/gabsocial/forms.scss
+++ b/app/javascript/styles/gabsocial/forms.scss
@@ -29,14 +29,12 @@ code {
         }
       }
 
-      .radio > label {
+      .radio>label {
         position: relative;
         padding-left: 28px;
 
         input {
-          position: absolute;
-          top: -2px;
-          left: 0;
+          @include abs-position(-2px, auto, auto, 0);
         }
       }
     }
@@ -45,7 +43,7 @@ code {
       position: relative;
       margin-bottom: 0;
 
-      .label_input > label {
+      .label_input>label {
         font-family: inherit;
         font-size: 14px;
         padding-top: 5px;
@@ -119,11 +117,8 @@ code {
     color: $gab-secondary-text;
 
     &.subtle-hint {
-      text-align: center;
-      font-size: 12px;
-      line-height: 18px;
-      margin-top: 15px;
-      margin-bottom: 0;
+      @include text-sizing(12px, 400, 18px, center);
+      @include vertical-margin(15px, 0);
     }
   }
 
@@ -145,13 +140,13 @@ code {
     .label_input {
       display: flex;
 
-      & > label {
+      &>label {
         font-family: inherit;
-        font-size: 14px;
         color: $primary-text-color;
-        font-weight: 500;
         min-width: 150px;
         flex: 0 0 auto;
+
+        @include text-sizing(14px, 500);
       }
 
       input,
@@ -167,14 +162,14 @@ code {
   }
 
   .input.with_label {
-    .label_input > label {
+    .label_input>label {
       font-family: inherit;
-      font-size: 14px;
       color: $primary-text-color;
       display: block;
       margin-bottom: 8px;
       word-wrap: break-word;
-      font-weight: 500;
+
+      @include text-sizing(14px, 500);
     }
 
     .hint {
@@ -189,13 +184,13 @@ code {
   .input.with_block_label {
     max-width: none;
 
-    & > label {
+    &>label {
       font-family: inherit;
-      font-size: 16px;
       color: $primary-text-color;
       display: block;
-      font-weight: 500;
       padding-top: 5px;
+
+      @include text-sizing(16px, 500);
     }
 
     .hint {
@@ -308,10 +303,10 @@ code {
     font-family: inherit;
     resize: vertical;
     background: darken($ui-base-color, 10%);
-    border: 1px solid darken($ui-base-color, 14%);
-    border-radius: 4px;
     padding: 10px;
 
+    @include border-design(darken($ui-base-color, 14%), 1px, 4px);
+
     &:invalid {
       box-shadow: none;
     }
@@ -366,8 +361,7 @@ code {
     display: flex;
 
     &.actions--top {
-      margin-top: 0;
-      margin-bottom: 30px;
+      @include vertical-margin(0, 30px);
     }
   }
 
@@ -375,25 +369,22 @@ code {
   .button,
   .block-button {
     display: block;
-    width: 100%;
     border: 0;
     border-radius: 4px;
     background: $ui-highlight-color;
     color: $primary-text-color;
-    font-size: 18px;
-    line-height: inherit;
-    height: auto;
     padding: 10px;
     text-transform: uppercase;
     text-decoration: none;
-    text-align: center;
     box-sizing: border-box;
     cursor: pointer;
-    font-weight: 500;
     outline: 0;
     margin-bottom: 10px;
     margin-right: 10px;
 
+    @include size(100%, auto);
+    @include text-sizing(18px, 500, inherit, center);
+
     &:last-child {
       margin-right: 0;
     }
@@ -431,16 +422,14 @@ code {
     font-size: 16px;
     color: $primary-text-color;
     display: block;
-    width: 100%;
     outline: 0;
     font-family: inherit;
     resize: vertical;
     background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($ui-base-color, 14%);
-    border-radius: 4px;
-    padding-left: 10px;
-    padding-right: 30px;
-    height: 41px;
+
+    @include size(100%, 41px);
+    @include horizontal-padding(10px, 30px);
+    @include border-design(darken($ui-base-color, 14%), 1px, 4px);
   }
 
   .label_input {
@@ -449,9 +438,6 @@ code {
     }
 
     &__append {
-      position: absolute;
-      right: 3px;
-      top: 1px;
       padding: 10px;
       padding-bottom: 9px;
       font-size: 16px;
@@ -463,15 +449,16 @@ code {
       white-space: nowrap;
       overflow: hidden;
 
+      @include abs-position(1px, 3px);
+
       &::after {
-        content: '';
-        display: block;
-        position: absolute;
         top: 0;
         right: 0;
         bottom: 1px;
         width: 5px;
         background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
+
+        @include pseudo;
       }
     }
   }
@@ -480,22 +467,19 @@ code {
     position: relative;
 
     &__overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
       background: rgba($ui-base-color, 0.65);
       backdrop-filter: blur(2px);
       border-radius: 4px;
 
+      @include flex(center, center);
+      @include size(100%);
+      @include abs-position(0, auto, auto, 0);
+
       &__content {
         text-align: center;
 
         &.rich-formatting {
+
           &,
           p {
             color: $primary-text-color;
@@ -755,8 +739,7 @@ code {
   }
 
   .actions {
-    padding: 30px 0;
-    padding-right: 20px;
+    padding: 30px 20px 30px 0;
     flex: 0 0 auto;
   }
 }
@@ -771,8 +754,7 @@ code {
 }
 
 .alternative-login {
-  margin-top: 20px;
-  margin-bottom: 20px;
+  @include vertical-margin(20px);
 
   h4 {
     font-size: 16px;
@@ -805,8 +787,6 @@ code {
 
 .input-copy {
   background: darken($ui-base-color, 10%);
-  border: 1px solid darken($ui-base-color, 14%);
-  border-radius: 4px;
   display: flex;
   align-items: center;
   padding-right: 4px;
@@ -814,6 +794,8 @@ code {
   top: 1px;
   transition: border-color 300ms linear;
 
+  @include border-design(darken($ui-base-color, 14%), 1px, 4px);
+
   &__wrapper {
     flex: 1 1 auto;
   }
@@ -830,12 +812,12 @@ code {
     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;
+
+    @include text-sizing(14px, 400);
   }
 
   &.copied {
@@ -894,13 +876,12 @@ code {
 
     &::after {
       background-color: darken($ui-base-color, 4%);
-      content: '';
-      display: block;
-      height: 100%;
       left: 50%;
-      position: absolute;
       top: 0;
       width: 1px;
+
+      @include pseudo;
+      @include size(1px, 100%);
     }
   }
 
@@ -909,4 +890,4 @@ code {
     display: flex;
     flex-direction: row;
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/introduction.scss b/app/javascript/styles/gabsocial/introduction.scss
index 9847b78f..e69de29b 100644
--- a/app/javascript/styles/gabsocial/introduction.scss
+++ b/app/javascript/styles/gabsocial/introduction.scss
@@ -1,151 +0,0 @@
-.introduction {
-  display: flex !important;
-  flex-direction: column !important;
-  justify-content: center !important;
-  align-items: center !important;
-
-  @media screen and (max-width: 920px) {
-    background: darken($ui-base-color, 8%);
-    display: block !important;
-  }
-
-  &__pager {
-    background: darken($ui-base-color, 8%);
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-    overflow: hidden;
-  }
-
-  &__pager,
-  &__frame {
-    border-radius: 10px;
-    width: 50vw;
-    min-width: 920px;
-
-    @media screen and (max-width: 920px) {
-      min-width: 0;
-      width: 100%;
-      border-radius: 0;
-      box-shadow: none;
-    }
-  }
-
-  &__frame-wrapper {
-    opacity: 0;
-    transition: opacity 500ms linear;
-
-    &.active {
-      opacity: 1;
-      transition: opacity 50ms linear;
-    }
-  }
-
-  &__frame {
-    overflow: hidden;
-  }
-
-  &__illustration {
-    height: 50vh;
-
-    @media screen and (max-width: 630px) {
-      height: auto;
-    }
-
-    img {
-      object-fit: cover;
-      display: block;
-      margin: 0;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__text {
-    &--columnized {
-      display: flex;
-
-      & > div {
-        flex: 1 1 33.33%;
-        text-align: center;
-        padding: 25px;
-        padding-bottom: 30px;
-      }
-
-      @media screen and (max-width: 630px) {
-        display: block;
-        padding: 15px 0;
-        padding-bottom: 20px;
-
-        & > div {
-          padding: 10px 25px;
-        }
-      }
-    }
-
-    h3 {
-      font-size: 24px;
-      line-height: 1.5;
-      font-weight: 700;
-      margin-bottom: 10px;
-    }
-
-    p {
-      font-size: 16px;
-      line-height: 24px;
-      font-weight: 400;
-      color: $darker-text-color;
-
-      code {
-        display: inline-block;
-        background: darken($ui-base-color, 8%);
-        font-size: 15px;
-        border: 1px solid lighten($ui-base-color, 8%);
-        border-radius: 2px;
-        padding: 1px 3px;
-      }
-    }
-
-    &--centered {
-      padding: 25px;
-      padding-bottom: 30px;
-      text-align: center;
-    }
-  }
-
-  &__dots {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 25px;
-
-    @media screen and (max-width: 630px) {
-      display: none;
-    }
-  }
-
-  &__dot {
-    width: 14px;
-    height: 14px;
-    border-radius: 14px;
-    border: 1px solid $ui-highlight-color;
-    background: transparent;
-    margin: 0 3px;
-    cursor: pointer;
-
-    &:hover {
-      background: lighten($ui-base-color, 8%);
-    }
-
-    &.active {
-      cursor: default;
-      background: $ui-highlight-color;
-    }
-  }
-
-  &__action {
-    padding: 25px;
-    padding-top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
diff --git a/app/javascript/styles/gabsocial/modal.scss b/app/javascript/styles/gabsocial/modal.scss
index 98bcce1d..2f4f88a8 100644
--- a/app/javascript/styles/gabsocial/modal.scss
+++ b/app/javascript/styles/gabsocial/modal.scss
@@ -6,8 +6,8 @@
   padding: 0;
 }
 
-@media screen and (max-width: 600px) {
+@include breakpoint(sm) {
   .account-header {
     margin-top: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/polls.scss b/app/javascript/styles/gabsocial/polls.scss
index 660f4a5e..6c6a9305 100644
--- a/app/javascript/styles/gabsocial/polls.scss
+++ b/app/javascript/styles/gabsocial/polls.scss
@@ -1,139 +1,3 @@
-.poll {
-  margin-top: 16px;
-  font-size: 14px;
-
-  li {
-    margin-bottom: 10px;
-    position: relative;
-    height: 18px + 12px;
-  }
-
-  &__chart {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    display: inline-block;
-    border-radius: 4px;
-    background: rgba($gab-placeholder-accent, .3);
-    &.leading {background: rgba($gab-placeholder-accent, .6);}
-  }
-
-  &__text {
-    position: relative;
-    display: inline-block;
-    padding: 6px 0;
-    line-height: 18px;
-    cursor: default;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    color: #fff;
-    body.theme-gabsocial-light & {color: $gab-default-text-light;}
-    input[type=radio],
-    input[type=checkbox] {
-      display: none;
-    }
-
-    .autossugest-input {
-      flex: 1 1 auto;
-    }
-
-    input[type=text] {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: 14px;
-      color: $inverted-text-color;
-      display: block;
-      outline: 0;
-      font-family: inherit;
-      background: $simple-background-color;
-      border: 1px solid darken($simple-background-color, 14%);
-      border-radius: 4px;
-      padding: 6px 10px;
-
-      &:focus {
-        border-color: $highlight-text-color;
-      }
-    }
-
-    &.selectable {
-      cursor: pointer;
-    }
-
-    &.editable {
-      display: flex;
-      align-items: center;
-      overflow: visible;
-    }
-  }
-
-  &__input {
-    display: inline-block;
-    position: relative;
-    border: 1px solid $ui-primary-color;
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    flex: 0 0 auto;
-    margin-right: 10px;
-    top: -1px;
-    border-radius: 50%;
-    vertical-align: middle;
-
-    &.checkbox {
-      border-radius: 4px;
-    }
-
-    &.active {
-      border-color: $valid-value-color;
-      background: $valid-value-color;
-    }
-  }
-
-  &__number {
-    display: inline-block;
-    width: 36px;
-    font-weight: 700;
-    padding: 0 10px;
-    text-align: right;
-  }
-
-  &__footer {
-    padding-top: 6px;
-    padding-bottom: 5px;
-    color: $dark-text-color;
-  }
-
-  &__link {
-    display: inline;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    color: $dark-text-color;
-    text-decoration: underline;
-    font-size: inherit;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:active,
-    &:focus {
-      background-color: rgba($dark-text-color, .1);
-    }
-  }
-
-  .button {
-    height: 36px;
-    padding: 0 16px;
-    margin-right: 10px;
-    font-size: 14px;
-  }
-}
-
 .compose-form__poll-wrapper {
   border-top: 1px solid darken($simple-background-color, 8%);
 
@@ -153,15 +17,14 @@
     }
   }
 
-  .button.button-secondary {
-    font-size: 14px;
-    font-weight: 400;
+  .button.button--secondary {
     padding: 6px 10px;
     height: auto;
-    line-height: inherit;
     color: $action-button-color;
     border-color: $action-button-color;
     margin-right: 5px;
+
+    @include text-sizing(14px, 400, inherit);
   }
 
   li {
@@ -185,10 +48,9 @@
     outline: 0;
     font-family: inherit;
     background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($simple-background-color, 14%);
-    border-radius: 4px;
-    padding: 6px 10px;
-    padding-right: 30px;
+    padding: 6px 30px 6px 10px;
+
+    @include border-design(darken($simple-background-color, 14%), 1px, 4px);
   }
 
   .icon-button.disabled {
@@ -206,4 +68,4 @@
       background: rgba($ui-highlight-color, 0.2);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/rtl.scss b/app/javascript/styles/gabsocial/rtl.scss
index a1f9a3af..a50b7981 100644
--- a/app/javascript/styles/gabsocial/rtl.scss
+++ b/app/javascript/styles/gabsocial/rtl.scss
@@ -1,41 +1,35 @@
 body.rtl {
   direction: rtl;
 
-  .column-header > button {
+  .column-header>button {
     text-align: right;
-    padding-left: 0;
-    padding-right: 15px;
+
+    @include horizontal-padding(0, 15px);
   }
 
   .landing-page__logo {
-    margin-right: 0;
-    margin-left: 20px;
+    @include horizontal-margin(20px, 0);
   }
 
   .landing-page .features-list .features-list__row .visual {
-    margin-left: 0;
-    margin-right: 15px;
+    @include horizontal-margin(0, 15px);
   }
 
   .column-link__icon,
   .column-header__icon {
-    margin-right: 0;
-    margin-left: 5px;
+    @include horizontal-margin(0, 5px);
   }
 
   .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
-    margin-right: 0;
-    margin-left: 4px;
+    @include horizontal-margin(4px, 0);
   }
 
   .navigation-bar__profile {
-    margin-left: 0;
-    margin-right: 8px;
+    @include horizontal-margin(0, 8px);
   }
 
   .search__input {
-    padding-right: 10px;
-    padding-left: 30px;
+    @include horizontal-padding(30px, 10px);
   }
 
   .search__icon .fa {
@@ -46,18 +40,16 @@ body.rtl {
   .column-header__buttons {
     left: 0;
     right: auto;
-    margin-left: 0;
-    margin-right: -15px;
+
+    @include horizontal-margin(0, -15px);
   }
 
   .column-inline-form .icon-button {
-    margin-left: 0;
-    margin-right: 5px;
+    @include horizontal-margin(0, 5px);
   }
 
   .column-header__links .text-btn {
-    margin-left: 10px;
-    margin-right: 0;
+    @include horizontal-margin(10px, 0);
   }
 
   .account__avatar-wrapper {
@@ -65,8 +57,7 @@ body.rtl {
   }
 
   .column-header__back-button {
-    padding-left: 5px;
-    padding-right: 0;
+    @include horizontal-padding(5px, 0);
   }
 
   .column-header__setting-arrows {
@@ -74,8 +65,7 @@ body.rtl {
   }
 
   .setting-toggle__label {
-    margin-left: 0;
-    margin-right: 8px;
+    @include horizontal-margin(0, 8px);
   }
 
   .status__avatar {
@@ -85,24 +75,20 @@ body.rtl {
 
   .status,
   .activity-stream .status.light {
-    padding-left: 10px;
-    padding-right: 68px;
+    @include horizontal-padding(10px, 68px);
   }
 
   .status__info .status__display-name,
   .activity-stream .status.light .status__display-name {
-    padding-left: 25px;
-    padding-right: 0;
+    @include horizontal-padding(25px, 0);
   }
 
   .activity-stream .pre-header {
-    padding-right: 68px;
-    padding-left: 0;
+    @include horizontal-padding(0, 68px);
   }
 
   .status__prepend {
-    margin-left: 0;
-    margin-right: 68px;
+    @include horizontal-margin(0, 68px);
   }
 
   .status__prepend-icon-wrapper {
@@ -120,7 +106,7 @@ body.rtl {
     left: 0;
   }
 
-  .column-back-button--slim-button {
+  .column-back-button--slim {
     right: auto;
     left: 0;
   }
@@ -133,20 +119,18 @@ body.rtl {
   .status__action-bar {
 
     &__counter {
-      margin-right: 0;
-      margin-left: 11px;
+      @include horizontal-margin(11px, 0);
 
       .status__action-bar-button {
-        margin-right: 0;
-        margin-left: 4px;
+        @include horizontal-margin(4px, 0);
       }
     }
   }
 
   .status__action-bar-button {
     float: right;
-    margin-right: 0;
-    margin-left: 18px;
+
+    @include horizontal-margin(18px, 0);
   }
 
   .status__action-bar-dropdown {
@@ -154,13 +138,11 @@ body.rtl {
   }
 
   .privacy-dropdown__dropdown {
-    margin-left: 0;
-    margin-right: 40px;
+    @include horizontal-margin(0, 40px);
   }
 
   .privacy-dropdown__option__icon {
-    margin-left: 10px;
-    margin-right: 0;
+    @include horizontal-margin(10px, 0);
   }
 
   .detailed-status__display-name .display-name {
@@ -168,15 +150,14 @@ body.rtl {
   }
 
   .detailed-status__display-avatar {
-    margin-right: 0;
-    margin-left: 10px;
     float: right;
+
+    @include horizontal-margin(10px, 0);
   }
 
   .detailed-status__favorites,
   .detailed-status__reblogs {
-    margin-left: 0;
-    margin-right: 6px;
+    @include horizontal-margin(0, 6px);
   }
 
   .fa-ul {
@@ -195,18 +176,15 @@ body.rtl {
 
   .admin-wrapper .sidebar ul a i.fa,
   a.table-action-link i.fa {
-    margin-right: 0;
-    margin-left: 5px;
+    @include horizontal-margin(5px, 0);
   }
 
   .simple_form .check_boxes .checkbox label {
-    padding-left: 0;
-    padding-right: 25px;
+    @include horizontal-padding(0, 25px);
   }
 
   .simple_form .input.with_label.boolean label.checkbox {
-    padding-left: 25px;
-    padding-right: 0;
+    @include horizontal-padding(25px, 0);
   }
 
   .simple_form .check_boxes .checkbox input[type="checkbox"],
@@ -220,14 +198,12 @@ body.rtl {
     right: 0;
   }
 
-  .simple_form .input.radio_buttons .radio > label {
-    padding-right: 28px;
-    padding-left: 0;
+  .simple_form .input.radio_buttons .radio>label {
+    @include horizontal-padding(0, 28px);
   }
 
   .simple_form .input-with-append .input input {
-    padding-left: 142px;
-    padding-right: 0;
+    @include horizontal-padding(142px, 0);
   }
 
   .simple_form .input.boolean label.checkbox {
@@ -237,8 +213,7 @@ body.rtl {
 
   .simple_form .input.boolean .label_input,
   .simple_form .input.boolean .hint {
-    padding-left: 0;
-    padding-right: 28px;
+    @include horizontal-padding(0, 28px);
   }
 
   .simple_form .label_input__append {
@@ -262,8 +237,7 @@ body.rtl {
   }
 
   .filters .filter-subset {
-    margin-right: 0;
-    margin-left: 45px;
+    @include horizontal-margin(45px, 0);
   }
 
   .landing-page .header-wrapper .mascot {
@@ -295,32 +269,29 @@ body.rtl {
   }
 
   .landing-page .fa-external-link {
-    padding-right: 5px;
-    padding-left: 0 !important;
+    @include horizontal-padding(0 !important, 5px);
   }
 
   .landing-page .features #gabsocial-timeline {
-    margin-right: 0;
-    margin-left: 30px;
+    @include horizontal-margin(30px, 0);
   }
 
   @media screen and (min-width: 631px) {
+
     .column,
     .drawer {
-      padding-left: 5px;
-      padding-right: 5px;
+      @include horizontal-padding(5px);
 
       &:first-child {
-        padding-left: 5px;
-        padding-right: 10px;
+        @include horizontal-padding(5px, 10px);
       }
     }
 
-    .columns-area > div {
+    .columns-area>div {
+
       .column,
       .drawer {
-        padding-left: 5px;
-        padding-right: 5px;
+        @include horizontal-padding(5px);
       }
     }
   }
@@ -328,33 +299,29 @@ body.rtl {
   .public-layout {
     .header {
       .nav-button {
-        margin-left: 8px;
-        margin-right: 0;
+        @include horizontal-margin(8px, 0);
       }
     }
 
     .public-account-header__tabs {
-      margin-left: 0;
-      margin-right: 20px;
+      @include horizontal-margin(0, 20px);
     }
   }
 
   .landing-page__information {
     .account__display-name {
-      margin-right: 0;
-      margin-left: 5px;
+      @include horizontal-margin(5px, 0);
     }
 
     .account__avatar-wrapper {
-      margin-left: 12px;
-      margin-right: 0;
+      @include horizontal-margin(12px, 0);
     }
   }
 
   .card__bar .display-name {
-    margin-left: 0;
-    margin-right: 15px;
     text-align: right;
+
+    @include horizontal-margin(0, 15px);
   }
 
   .fa-chevron-left::before {
@@ -366,17 +333,15 @@ body.rtl {
   }
 
   .column-back-button__icon {
-    margin-right: 0;
-    margin-left: 5px;
+    @include horizontal-margin(5px, 0);
   }
 
   .column-header__setting-arrows .column-header__setting-btn:last-child {
-    padding-left: 0;
-    padding-right: 10px;
+    @include horizontal-padding(0, 10px);
   }
 
-  .simple_form .input.radio_buttons .radio > label input {
+  .simple_form .input.radio_buttons .radio>label input {
     left: auto;
     right: 0;
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/scrollbars.scss b/app/javascript/styles/gabsocial/scrollbars.scss
index 88216f89..a452245f 100644
--- a/app/javascript/styles/gabsocial/scrollbars.scss
+++ b/app/javascript/styles/gabsocial/scrollbars.scss
@@ -4,8 +4,7 @@
 
 html {scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;}
 ::-webkit-scrollbar {
-	width: 12px;
-	height: 12px;
+	@include size(12px);
 }
 ::-webkit-scrollbar-thumb {
 	border: none;
diff --git a/app/javascript/styles/gabsocial/stream_entries.scss b/app/javascript/styles/gabsocial/stream_entries.scss
index bfbb907e..76f4a995 100644
--- a/app/javascript/styles/gabsocial/stream_entries.scss
+++ b/app/javascript/styles/gabsocial/stream_entries.scss
@@ -75,21 +75,21 @@
 
 .button.logo-button {
   flex: 0 auto;
-  font-size: 14px;
   background: $ui-highlight-color;
   color: $primary-text-color;
   text-transform: none;
-  line-height: 36px;
   height: auto;
   padding: 3px 15px;
   border: 0;
 
+  @include text-sizing(14px, 400, 36px);
+
   svg {
-    width: 20px;
-    height: auto;
     vertical-align: middle;
     margin-right: 5px;
     fill: $primary-text-color;
+
+    @include size(20px, auto);
   }
 
   &:active,
diff --git a/app/javascript/styles/gabsocial/tables.scss b/app/javascript/styles/gabsocial/tables.scss
index 26789e70..cc77b907 100644
--- a/app/javascript/styles/gabsocial/tables.scss
+++ b/app/javascript/styles/gabsocial/tables.scss
@@ -157,8 +157,7 @@ a.table-action-link {
 
     &__actions,
     &__content {
-      padding: 8px 0;
-      padding-right: 16px;
+      padding: 8px 16px 8px 0;
       flex: 1 1 auto;
     }
   }
@@ -204,8 +203,7 @@ a.table-action-link {
     }
 
     &__content {
-      padding-top: 12px;
-      padding-bottom: 16px;
+      @include vertical-padding(12px, 16px);
 
       &--unpadded {
         padding: 0;
diff --git a/app/javascript/styles/gabsocial/variables.scss b/app/javascript/styles/gabsocial/variables.scss
index 8b6ea323..3320b30c 100644
--- a/app/javascript/styles/gabsocial/variables.scss
+++ b/app/javascript/styles/gabsocial/variables.scss
@@ -105,7 +105,3 @@ $media-modal-media-max-width: 100%;
 $media-modal-media-max-height: 80%;
 
 $no-gap-breakpoint: 415px;
-
-$font-sans-serif: 'gabsocial-font-sans-serif' !default;
-$font-display: 'gabsocial-font-display' !default;
-$font-monospace: 'gabsocial-font-monospace' !default;
\ No newline at end of file
diff --git a/app/javascript/styles/gabsocial/widgets.scss b/app/javascript/styles/gabsocial/widgets.scss
index 89505584..5069912c 100644
--- a/app/javascript/styles/gabsocial/widgets.scss
+++ b/app/javascript/styles/gabsocial/widgets.scss
@@ -12,10 +12,10 @@
     img {
       object-fit: cover;
       display: block;
-      width: 100%;
-      height: 100%;
       margin: 0;
       border-radius: 4px 4px 0 0;
+
+      @include size(100%);
     }
   }
 
@@ -23,16 +23,15 @@
     background: $ui-base-color;
     padding: 20px;
     border-radius: 0 0 4px 4px;
-    font-size: 15px;
     color: $darker-text-color;
-    line-height: 20px;
     word-wrap: break-word;
-    font-weight: 400;
+
+    @include text-sizing(15px, 400, 20px);
 
     .emojione {
-      width: 20px;
-      height: 20px;
       margin: -3px 0 0;
+
+      @include size(20px);
     }
 
     p {
@@ -47,12 +46,11 @@
       display: inline;
       margin: 0;
       padding: 0;
-      font-weight: 700;
       background: transparent;
       font-family: inherit;
-      font-size: inherit;
-      line-height: inherit;
       color: lighten($darker-text-color, 10%);
+
+      @include text-sizing(inherit, 700, inherit);
     }
 
     a {
@@ -77,9 +75,9 @@
   h4 {
     padding: 10px;
     text-transform: uppercase;
-    font-weight: 700;
-    font-size: 13px;
     color: $darker-text-color;
+
+    @include text-sizing(13px, 700);
   }
 
   .account {
@@ -95,9 +93,9 @@
     }
 
     .account__avatar {
-      width: 44px;
-      height: 44px;
       background-size: 44px 44px;
+
+      @include size(44px);
     }
   }
 }
@@ -120,11 +118,10 @@
 }
 
 .contact-widget {
-  font-size: 15px;
   color: $darker-text-color;
-  line-height: 20px;
   word-wrap: break-word;
-  font-weight: 400;
+
+  @include text-sizing(15px, 400, 20px);
 
   strong {
     font-weight: 500;
@@ -238,10 +235,9 @@
 
   h1 {
     color: $primary-text-color;
-    font-size: 36px;
-    line-height: 1.1;
-    font-weight: 700;
     margin-bottom: 10px;
+
+    @include text-sizing(36px, 700, 1.1);
   }
 
   p {
@@ -268,20 +264,20 @@
     box-sizing: border-box;
     margin-bottom: 10px;
 
-    & > a,
-    & > div {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+    &>a,
+    &>div {
       background: $ui-base-color;
       border-radius: 4px;
       padding: 15px;
       text-decoration: none;
       color: inherit;
       box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+
+      @include flex(space-between, center);
     }
 
-    & > a {
+    &>a {
+
       &:hover,
       &:active,
       &:focus {
@@ -289,24 +285,22 @@
       }
     }
 
-    &.active > a {
+    &.active>a {
       background: $ui-highlight-color;
       cursor: default;
     }
 
-    &.disabled > div {
+    &.disabled>div {
       opacity: 0.5;
       cursor: default;
     }
 
     h4 {
       flex: 1 1 auto;
-      font-size: 18px;
-      font-weight: 700;
       color: $primary-text-color;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      @include text-overflow(nowrap);
+      @include text-sizing(18px, 700);
 
       .fa {
         color: $darker-text-color;
@@ -314,14 +308,15 @@
 
       small {
         display: block;
-        font-weight: 400;
-        font-size: 15px;
         margin-top: 8px;
         color: $darker-text-color;
+
+        @include text-sizing(15px, 400);
       }
     }
 
     &.active h4 {
+
       &,
       .fa,
       small {
@@ -341,19 +336,17 @@
 }
 
 .avatar-stack {
-  display: flex;
-  justify-content: flex-end;
+  @include flex(flex-end);
 
   .account__avatar {
     flex: 0 0 auto;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
     position: relative;
     margin-left: -10px;
     background: darken($ui-base-color, 8%);
     border: 2px solid $ui-base-color;
 
+    @include circle(36px);
+
     &:nth-child(1) {
       z-index: 1;
     }
@@ -404,16 +397,15 @@
 
   &__count {
     width: 120px;
-    text-align: center;
-    font-size: 15px;
-    font-weight: 500;
     color: $primary-text-color;
 
+    @include text-sizing(15px, 500, 1, center);
+
     small {
       display: block;
       color: $darker-text-color;
-      font-weight: 400;
-      font-size: 14px;
+
+      @include text-sizing(14px, 400);
     }
   }
 
@@ -444,7 +436,7 @@
 }
 
 $maximum-width: 1235px;
-$fluid-breakpoint: $maximum-width + 20px;
+$fluid-breakpoint: $maximum-width+20px;
 
 .statuses-grid {
   min-height: 600px;
@@ -482,13 +474,12 @@ $fluid-breakpoint: $maximum-width + 20px;
       }
 
       .status__content {
-        font-size: 15px;
-        line-height: 20px;
+        @include text-sizing(15px, 400, 20px);
 
         .emojione {
-          width: 20px;
-          height: 20px;
           margin: -3px 0 0;
+
+          @include size(20px);
         }
 
         .status__content__spoiler-link {
@@ -519,16 +510,15 @@ $fluid-breakpoint: $maximum-width + 20px;
   }
 
   a {
-    font-size: 14px;
-    line-height: 20px;
     text-decoration: none;
-    font-weight: 500;
     color: $ui-highlight-color;
 
+    @include text-sizing(14px, 500, 20px);
+
     &:hover,
     &:focus,
     &:active {
       text-decoration: underline;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/styles/mailer.scss b/app/javascript/styles/mailer.scss
index f7b76389..9bd11d87 100644
--- a/app/javascript/styles/mailer.scss
+++ b/app/javascript/styles/mailer.scss
@@ -20,6 +20,7 @@ body {
 }
 
 .email-body {
+
   td,
   div,
   a,
@@ -29,6 +30,7 @@ body {
 }
 
 a {
+
   &,
   &:visited,
   span {
@@ -72,8 +74,8 @@ td {
   font-size: 0 !important;
   line-height: 100%;
   text-align: center;
-  padding-left: 16px;
-  padding-right: 16px;
+
+  @include horizontal-padding(16px);
 }
 
 .email-start {
@@ -98,7 +100,8 @@ body {
 .col-3,
 .col-4,
 .col-5,
-.col-6, {
+.col-6,
+  {
   font-size: 0;
   display: inline-block;
   width: 100%;
@@ -114,10 +117,10 @@ body {
 }
 
 .column-cell {
-  padding-top: 16px;
-  padding-bottom: 16px;
   vertical-align: top;
 
+  @include vertical-padding(16px);
+
   &.button-cell {
     padding-top: 0;
   }
@@ -187,8 +190,8 @@ p {
 
 p {
   display: block;
-  margin-top: 0;
-  margin-bottom: 16px;
+
+  @include vertical-margin(0, 16px);
 
   &.small {
     font-size: 13px;
@@ -207,12 +210,11 @@ h4,
 h5,
 h6 {
   color: $ui-secondary-color;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 20px;
-  margin-bottom: 8px;
   padding: 0;
   font-weight: 500;
+
+  @include horizontal-margin(0);
+  @include vertical-margin(20px, 8px);
 }
 
 h1 {
@@ -231,10 +233,9 @@ h3 {
 }
 
 h5 {
-  font-size: 16px;
-  line-height: 21px;
-  font-weight: 700;
   color: lighten($ui-base-color, 34%);
+
+  @include text-sizing(16px, 700, 21px);
 }
 
 .input-cell {
@@ -248,12 +249,10 @@ h5 {
     background: darken($ui-base-color, 8%);
     border-radius: 4px;
     padding: 16px;
-    line-height: 20px;
     mso-line-height-rule: exactly;
     border-radius: 4px;
-    text-align: center;
-    font-weight: 500;
-    font-size: 17px;
+
+    @include text-sizing(17px, 500, 20px, center);
   }
 }
 
@@ -263,8 +262,8 @@ h5 {
   font-size: 0;
   text-align: center;
   vertical-align: top;
-  padding-left: 16px;
-  padding-right: 16px;
+
+  @include horizontal-padding(16px);
 }
 
 .content-cell {
@@ -298,8 +297,8 @@ h5 {
 
   .column-cell {
     text-align: center;
-    padding-top: 20px;
-    padding-bottom: 8px;
+
+    @include vertical-padding(20px, 8px);
   }
 }
 
@@ -313,6 +312,7 @@ h5 {
 }
 
 .footer {
+
   .column-cell,
   p {
     color: lighten($ui-base-color, 34%);
@@ -344,18 +344,16 @@ h5 {
 
 .button {
   display: table;
-  margin-left: auto;
-  margin-right: auto;
+
+  @include horizontal-margin(auto);
 
   td {
-    line-height: 20px;
     mso-line-height-rule: exactly;
     border-radius: 4px;
-    text-align: center;
-    font-weight: 500;
-    font-size: 17px;
     padding: 0 !important;
 
+    @include text-sizing(17px, 500, 20x, center);
+
     a,
     a span {
       color: $primary-text-color;
@@ -403,8 +401,7 @@ h5 {
 }
 
 .padded {
-  padding-left: 16px;
-  padding-right: 16px;
+  @include horizontal-padding(16px);
 }
 
 .padded-bottom {
@@ -434,10 +431,10 @@ h5 {
 
   img {
     max-width: 32px;
-    width: 32px;
-    height: 32px;
     display: block;
     line-height: 100%;
+
+    @include size(32px);
   }
 }
 
@@ -467,9 +464,9 @@ h5 {
 
     bdi {
       color: $white;
-      font-size: 16px;
       display: block;
-      font-weight: 500;
+
+      @include text-sizing(16px, 500);
     }
 
     td:first-child {
@@ -477,9 +474,9 @@ h5 {
     }
 
     img {
-      width: 48px;
-      height: 48px;
       border-radius: 4px;
+
+      @include size(48px);
     }
   }
 
@@ -505,10 +502,10 @@ h5 {
 
 ul {
   padding-left: 15px;
-  margin-top: 0;
-  margin-bottom: 0;
   padding-top: 16px;
 
+  @include vertical-margin(0);
+
   li {
     margin-bottom: 16px;
     color: lighten($ui-base-color, 26%);
@@ -526,6 +523,7 @@ ul {
 }
 
 @media (max-width: 697px) {
+
   .email-container,
   .col-1,
   .col-2,
@@ -546,7 +544,6 @@ ul {
   }
 
   .padded {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+    @include horizontal-padding(0 !important);
   }
-}
+}
\ No newline at end of file
diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml
index e4223119..f727e0b0 100644
--- a/app/views/accounts/show.html.haml
+++ b/app/views/accounts/show.html.haml
@@ -28,7 +28,7 @@
     .h-feed
       %data.p-name{ value: "#{@account.username} on #{site_hostname}" }/
 
-      .account__section-headline
+      .account-section-headline
         = active_link_to t('accounts.posts_tab_heading'), short_account_url(@account)
         = active_link_to t('accounts.posts_with_replies'), short_account_with_replies_url(@account)
         = active_link_to t('accounts.media'), short_account_media_url(@account)
diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index 36d19e24..cc7f95c0 100644
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -1,5 +1,4 @@
 - content_for :header_tags do
-  = preload_link_tag asset_pack_path('features/getting_started.js'), crossorigin: 'anonymous'
   = preload_link_tag asset_pack_path('features/compose.js'), crossorigin: 'anonymous'
   = preload_link_tag asset_pack_path('features/home_timeline.js'), crossorigin: 'anonymous'
   = preload_link_tag asset_pack_path('features/notifications.js'), crossorigin: 'anonymous'
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 220a4ca9..f4d594d3 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -20,8 +20,8 @@
 
     %title= content_for?(:page_title) ? safe_join([yield(:page_title).chomp.html_safe, title], ' - ') : title
 
-    = stylesheet_pack_tag 'common', media: 'all'
-    = stylesheet_pack_tag current_theme, media: 'all'
+    -# = stylesheet_pack_tag 'common', media: 'all'
+    -# = stylesheet_pack_tag current_theme, media: 'all'
     = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous'
     = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous'
     = csrf_meta_tags
diff --git a/app/views/stream_entries/_poll.html.haml b/app/views/stream_entries/_poll.html.haml
index ba34890d..d921621e 100644
--- a/app/views/stream_entries/_poll.html.haml
+++ b/app/views/stream_entries/_poll.html.haml
@@ -17,7 +17,7 @@
             = Formatter.instance.format_poll_option(status, option, autoplay: autoplay)
   .poll__footer
     - unless show_results
-      %button.button.button-secondary{ disabled: true }
+      %button.button.button--secondary{ disabled: true }
         = t('statuses.poll.vote')
 
     %span= t('statuses.poll.total_votes', count: poll.votes_count)
diff --git a/config/webpack/shared.js b/config/webpack/shared.js
index 2fac41c3..a990f716 100644
--- a/config/webpack/shared.js
+++ b/config/webpack/shared.js
@@ -84,6 +84,7 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: 'css/[name]-[contenthash:8].css',
       chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
+      ignoreOrder: true,
     }),
     new AssetsManifestPlugin({
       integrity: false,
diff --git a/package.json b/package.json
index ad72cbba..62dc91f0 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "start": "node ./streaming/index.js",
     "test": "${npm_execpath} run test:lint && ${npm_execpath} run test:jest",
     "test:lint": "eslint --ext=js .",
-    "test:jest": "cross-env NODE_ENV=test jest --coverage"
+    "test:jest": "cross-env NODE_ENV=test jest --coverage",
+    "webpack-defaults": "webpack-defaults"
   },
   "repository": {
     "type": "git",