Gab Social. All are welcome.

app/javascript/styles/application.scss

@@ -0,0 +1,36 @@
+@import 'gabsocial/mixins';
+@import 'gabsocial/variables';
+@import 'gabsocial/fonts';
+@import 'gabsocial/reset';
+@import 'gabsocial/scrollbars';
+@import 'gabsocial/basics';
+@import 'gabsocial/containers';
+@import 'gabsocial/lists';
+@import 'gabsocial/footer';
+@import 'gabsocial/compact_header';
+@import 'gabsocial/widgets';
+@import 'gabsocial/forms';
+@import 'gabsocial/accounts';
+@import 'gabsocial/stream_entries';
+@import 'gabsocial/boost';
+
+// NOTE - In the process of stripping this giant file into individual components (below)
+@import 'gabsocial/components';
+
+// COMPONENTS
+@import 'gabsocial/components/tabs-bar';
+@import 'gabsocial/components/dropdown-menu';
+@import 'gabsocial/components/modal';
+@import 'gabsocial/components/account-header';
+@import 'gabsocial/components/user-panel';
+@import 'gabsocial/components/compose-form';
+
+@import 'gabsocial/polls';
+@import 'gabsocial/introduction';
+@import 'gabsocial/emoji_picker';
+@import 'gabsocial/about';
+@import 'gabsocial/tables';
+@import 'gabsocial/admin';
+@import 'gabsocial/dashboard';
+@import 'gabsocial/rtl';
+@import 'gabsocial/accessibility';

app/javascript/styles/contrast.scss

@@ -0,0 +1,3 @@
+@import 'contrast/variables';
+@import 'application';
+@import 'contrast/diff';

app/javascript/styles/contrast/diff.scss

@@ -0,0 +1,77 @@
+// components.scss
+.compose-form {
+  .compose-form__modifiers {
+    .compose-form__upload {
+      &-description {
+        input {
+          &::placeholder {
+            opacity: 1.0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.rich-formatting a,
+.rich-formatting p a,
+.rich-formatting li a,
+.landing-page__short-description p a,
+.status__content a,
+.reply-indicator__content a {
+  color: lighten($ui-highlight-color, 12%);
+  text-decoration: underline;
+
+  &.mention {
+    text-decoration: none;
+  }
+
+  &.mention span {
+    text-decoration: underline;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+
+  &.status__content__spoiler-link {
+    color: $secondary-text-color;
+    text-decoration: none;
+  }
+}
+
+.status__content__read-more-button {
+  text-decoration: underline;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+}
+
+.getting-started__footer a {
+  text-decoration: underline;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+  }
+}
+
+.nothing-here {
+  color: $darker-text-color;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
+  border-bottom: 4px solid $ui-highlight-color;
+}

app/javascript/styles/contrast/variables.scss

@@ -0,0 +1,24 @@
+// Dependent colors
+$black: #000000;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #2b90d9;
+
+$ui-base-color: $classic-base-color !default;
+$ui-primary-color: $classic-primary-color !default;
+$ui-secondary-color: $classic-secondary-color !default;
+
+// Differences
+$ui-highlight-color: #2b5fd9;
+
+$darker-text-color: lighten($ui-primary-color, 20%) !default;
+$dark-text-color: lighten($ui-primary-color, 12%) !default;
+$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
+$highlight-text-color: $classic-highlight-color !default;
+$action-button-color: #8d9ac2;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: darken($ui-base-color,6%) !default;
+$light-text-color: darken($ui-primary-color, 40%) !default;

app/javascript/styles/gabsocial-light.scss

@@ -0,0 +1,3 @@
+@import 'gabsocial-light/variables';
+@import 'application';
+@import 'gabsocial-light/diff';

app/javascript/styles/gabsocial-light/diff.scss

@@ -0,0 +1,342 @@
+// Notes!
+// Sass color functions, "darken" and "lighten" are automatically replaced.
+
+// Change the colors of button texts
+.button {
+  color: $white;
+
+  &.button-alternative-2 {
+    color: $white;
+  }
+}
+
+// Change default background colors of columns
+.column {
+  article {
+    background: $white;
+  }
+}
+
+.drawer__inner {
+  background: $ui-base-color;
+}
+
+.drawer__inner__gabsocial {
+  background: $ui-base-color 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($white)}"/></svg>') no-repeat bottom / 100% auto;
+}
+
+// Change the colors used in compose-form
+.compose-form {
+  .compose-form__modifiers {
+    .compose-form__upload-description input {
+      color: lighten($white, 7%);
+      &::placeholder {color: lighten($white, 7%);}
+    }
+  }
+
+  .compose-form__buttons-wrapper {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions {
+    background: darken($ui-base-color, 6%);
+  }
+
+  .autosuggest-textarea__suggestions__item {
+    &:hover,
+    &:focus,
+    &:active,
+    &.selected {
+      background: lighten($ui-base-color, 4%);
+    }
+  }
+}
+
+.emoji-mart-bar {
+  border-color: lighten($ui-base-color, 4%);
+
+  &:first-child {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.emoji-mart-search input {
+  background: rgba($ui-base-color, 0.3);
+  border-color: $ui-base-color;
+}
+
+// Change the background colors of statuses
+.focusable:focus {
+  background: $ui-base-color;
+}
+
+.status.status-direct {
+  background: lighten($ui-base-color, 4%);
+}
+
+.focusable:focus .status.status-direct {
+  background: lighten($ui-base-color, 8%);
+}
+
+.detailed-status,
+.detailed-status__action-bar {
+  background: darken($ui-base-color, 6%);
+}
+
+// Change the background colors of status__content__spoiler-link
+.reply-indicator__content .status__content__spoiler-link,
+.status__content .status__content__spoiler-link {
+  background: $ui-base-lighter-color;
+
+  &:hover {
+    background: lighten($ui-base-lighter-color, 6%);
+  }
+}
+
+// Change the background colors of media and video spoilers
+.media-spoiler,
+.video-player__spoiler {
+  background: $ui-base-color;
+}
+
+.account-gallery__item a {
+  background-color: $ui-base-color;
+}
+
+// Change the colors used in the dropdown menu
+.dropdown-menu {
+  background: $ui-base-color;
+
+  &__arrow {
+    &.left {
+      border-left-color: $ui-base-color;
+    }
+
+    &.top {
+      border-top-color: $ui-base-color;
+    }
+
+    &.bottom {
+      border-bottom-color: $ui-base-color;
+    }
+
+    &.right {
+      border-right-color: $ui-base-color;
+    }
+  }
+
+  &__item {
+    a {
+      background: $ui-base-color;
+      color: $darker-text-color;
+    }
+  }
+}
+
+// Change the text colors on inverted background
+.privacy-dropdown__option.active .privacy-dropdown__option__content,
+.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content,
+.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
+.dropdown-menu__item a:active,
+.dropdown-menu__item a:focus,
+.dropdown-menu__item a:hover,
+.actions-modal ul li:not(:empty) a.active,
+.actions-modal ul li:not(:empty) a.active button,
+.actions-modal ul li:not(:empty) a:active,
+.actions-modal ul li:not(:empty) a:active button,
+.actions-modal ul li:not(:empty) a:focus,
+.actions-modal ul li:not(:empty) a:focus button,
+.actions-modal ul li:not(:empty) a:hover,
+.actions-modal ul li:not(:empty) a:hover button,
+.admin-wrapper .sidebar ul li a.selected,
+.simple_form .block-button,
+.simple_form .button,
+.simple_form button {
+  color: $white;
+}
+
+.dropdown-menu__separator {
+  border-bottom-color: lighten($ui-base-color, 12%);
+}
+
+// Change the background colors of modals
+.actions-modal,
+.boost-modal,
+.confirmation-modal,
+.mute-modal,
+.report-modal,
+.embed-modal,
+.error-modal,
+.onboarding-modal {
+  background: $ui-base-color;
+}
+
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.onboarding-modal__paginator,
+.error-modal__footer {
+  background: darken($ui-base-color, 6%);
+
+  .onboarding-modal__nav,
+  .error-modal__nav {
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: darken($ui-base-color, 12%);
+    }
+  }
+}
+
+.display-case__case {
+  background: $white;
+}
+
+.embed-modal .embed-modal__container .embed-modal__html {
+  background: $white;
+
+  &:focus {
+    background: darken($ui-base-color, 6%);
+  }
+}
+
+.react-toggle-track {
+  background: $ui-secondary-color;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: darken($ui-secondary-color, 10%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: lighten($ui-highlight-color, 10%);
+}
+
+// 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;
+}
+
+// Change the default colors used on some parts of the profile pages
+.activity-stream-tabs {
+  background: $account-background-color;
+  border-bottom-color: lighten($ui-base-color, 8%);
+}
+
+.activity-stream {
+  .entry {
+    background: $account-background-color;
+
+    .detailed-status.light,
+    .more.light,
+    .status.light {
+      border-bottom-color: lighten($ui-base-color, 8%);
+    }
+  }
+
+  .status.light {
+    .status__content {
+      color: $primary-text-color;
+    }
+
+    .display-name {
+      strong {
+        color: $primary-text-color;
+      }
+    }
+  }
+}
+
+.accounts-grid {
+  .account-grid-card {
+
+    .name {
+      a {
+        color: $primary-text-color;
+      }
+    }
+
+    .username {
+      color: $darker-text-color;
+    }
+
+    .account__header__content {
+      color: $primary-text-color;
+    }
+  }
+}
+
+.simple_form,
+.table-form {
+  .warning {
+    box-shadow: none;
+    background: rgba($error-red, 0.5);
+    text-shadow: none;
+  }
+}
+
+.status__content,
+.reply-indicator__content {
+  a {
+    color: $highlight-text-color;
+  }
+}
+
+.button.logo-button {
+  color: $white;
+
+  svg {
+    fill: $white;
+  }
+}
+
+.public-layout {
+  .header,
+  .public-account-header,
+  .public-account-bio {
+    box-shadow: none;
+  }
+
+  .header {
+    background: lighten($ui-base-color, 12%);
+  }
+
+  .public-account-header {
+    &__image {
+      background: lighten($ui-base-color, 12%);
+
+      &::after {
+        box-shadow: none;
+      }
+    }
+
+    &__tabs {
+      &__name {
+        h1,
+        h1 small {
+          color: $white;
+        }
+      }
+    }
+  }
+}
+
+.account__section-headline a.active::after {
+  border-color: transparent transparent $white;
+}
+
+.hero-widget,
+.box-widget,
+.contact-widget,
+.landing-page__information.contact-widget,
+.moved-account-widget,
+.memoriam-widget,
+.activity-stream,
+.nothing-here,
+.directory__tag > a,
+.directory__tag > div {
+  box-shadow: none;
+}

app/javascript/styles/gabsocial-light/variables.scss

@@ -0,0 +1,41 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+
+$classic-base-color: #282c37;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #2b90d9;
+
+// Differences
+$success-green: #3c754d;
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: #b0c0cf;
+$ui-primary-color: #9bcbed;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: #2b5fd9;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$dark-text-color: #444b5d;
+$action-button-color: #606984;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #444b5d;
+
+//Newly added colors
+$account-background-color: $white !default;
+
+//Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}

app/javascript/styles/gabsocial/_mixins.scss

@@ -0,0 +1,67 @@
+@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-background-info;
+	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;}
+		}
+	}
+}

app/javascript/styles/gabsocial/about.scss

@@ -0,0 +1,932 @@
+$maximum-width: 1235px;
+$fluid-breakpoint: $maximum-width + 20px;
+$column-breakpoint: 700px;
+$small-breakpoint: 960px;
+
+.container {
+  box-sizing: border-box;
+  max-width: $maximum-width;
+  margin: 0 auto;
+  position: relative;
+
+  @media screen and (max-width: $fluid-breakpoint) {
+    width: 100%;
+    padding: 0 10px;
+  }
+}
+
+.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;
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: underline;
+  }
+
+  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;
+
+    a {
+      color: $highlight-text-color;
+      text-decoration: underline;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  strong,
+  em {
+    font-weight: 700;
+    color: lighten($darker-text-color, 10%);
+  }
+
+  h1 {
+    font-family: $font-display, sans-serif;
+    font-size: 26px;
+    line-height: 30px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+
+    small {
+      font-family: $font-sans-serif, sans-serif;
+      display: block;
+      font-size: 18px;
+      font-weight: 400;
+      color: lighten($darker-text-color, 10%);
+    }
+  }
+
+  h2 {
+    font-family: $font-display, sans-serif;
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h3 {
+    font-family: $font-display, sans-serif;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h4 {
+    font-family: $font-display, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h5 {
+    font-family: $font-display, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h6 {
+    font-family: $font-display, sans-serif;
+    font-size: 12px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  ul,
+  ol {
+    margin-left: 20px;
+
+    &[type='a'] {
+      list-style-type: lower-alpha;
+    }
+
+    &[type='i'] {
+      list-style-type: lower-roman;
+    }
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  li > ol,
+  li > ul {
+    margin-top: 6px;
+  }
+
+  hr {
+    width: 100%;
+    height: 0;
+    border: 0;
+    border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+    margin: 20px 0;
+
+    &.spacer {
+      height: 1px;
+      border: 0;
+    }
+  }
+}
+
+.information-board {
+  background: darken($ui-base-color, 4%);
+  padding: 20px 0;
+
+  .container-alt {
+    position: relative;
+    padding-right: 280px + 15px;
+  }
+
+  &__sections {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  &__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;
+
+    span,
+    strong {
+      display: block;
+    }
+
+    span {
+      &:last-child {
+        color: $secondary-text-color;
+      }
+    }
+
+    strong {
+      font-family: $font-display, sans-serif;
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 48px;
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      text-align: center;
+    }
+  }
+
+  .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;
+
+      img {
+        display: block;
+        width: 80px;
+        height: 80px;
+        border-radius: 48px;
+      }
+    }
+
+    .name {
+      font-size: 14px;
+
+      a {
+        display: block;
+        color: $primary-text-color;
+        text-decoration: none;
+
+        &:hover {
+          .display_name {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .username {
+        display: block;
+        color: $darker-text-color;
+      }
+    }
+  }
+}
+
+.landing-page {
+  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;
+
+    a {
+      color: $highlight-text-color;
+      text-decoration: underline;
+    }
+  }
+
+  em {
+    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%);
+  }
+
+  h1 {
+    font-family: $font-display, sans-serif;
+    font-size: 26px;
+    line-height: 30px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+
+    small {
+      font-family: $font-sans-serif, sans-serif;
+      display: block;
+      font-size: 18px;
+      font-weight: 400;
+      color: lighten($darker-text-color, 10%);
+    }
+  }
+
+  h2 {
+    font-family: $font-display, sans-serif;
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h3 {
+    font-family: $font-display, sans-serif;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h4 {
+    font-family: $font-display, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h5 {
+    font-family: $font-display, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  h6 {
+    font-family: $font-display, sans-serif;
+    font-size: 12px;
+    line-height: 24px;
+    font-weight: 500;
+    margin-bottom: 20px;
+    color: $secondary-text-color;
+  }
+
+  ul,
+  ol {
+    margin-left: 20px;
+
+    &[type='a'] {
+      list-style-type: lower-alpha;
+    }
+
+    &[type='i'] {
+      list-style-type: lower-roman;
+    }
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  ol {
+    list-style: decimal;
+  }
+
+  li > ol,
+  li > ul {
+    margin-top: 6px;
+  }
+
+  hr {
+    width: 100%;
+    height: 0;
+    border: 0;
+    border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+    margin: 20px 0;
+
+    &.spacer {
+      height: 1px;
+      border: 0;
+    }
+  }
+
+  &__information,
+  &__forms {
+    padding: 20px;
+  }
+
+  &__call-to-action {
+    background: darken($ui-base-color, 4%);
+    border-radius: 4px;
+    padding: 25px 40px;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .row {
+      width: 100%;
+      display: flex;
+      flex-direction: row-reverse;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .row__information-board {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+
+      .information-board__section {
+        flex: 1 0 auto;
+        padding: 0 10px;
+      }
+
+      @media screen and (max-width: $no-gap-breakpoint) {
+        width: 100%;
+        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;
+    }
+  }
+
+  &__information {
+    padding: 45px 40px;
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    strong {
+      font-weight: 500;
+      color: lighten($darker-text-color, 10%);
+    }
+
+    .account {
+      border-bottom: 0;
+      padding: 0;
+
+      &__display-name {
+        align-items: center;
+        display: flex;
+        margin-right: 5px;
+      }
+
+      div.account__display-name {
+        &:hover {
+          .display-name strong {
+            text-decoration: none;
+          }
+        }
+
+        .account__avatar {
+          cursor: default;
+        }
+      }
+
+      &__avatar-wrapper {
+        margin-left: 0;
+        flex: 0 0 auto;
+      }
+
+      &__avatar {
+        width: 44px;
+        height: 44px;
+        background-size: 44px 44px;
+      }
+
+      .display-name {
+        font-size: 15px;
+
+        &__account {
+          font-size: 14px;
+        }
+      }
+    }
+
+    @media screen and (max-width: $small-breakpoint) {
+      .contact {
+        margin-top: 30px;
+      }
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      padding: 25px 20px;
+    }
+  }
+
+  &__information,
+  &__forms,
+  #gabsocial-timeline {
+    box-sizing: border-box;
+    background: $ui-base-color;
+    border-radius: 4px;
+    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;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 40px;
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      .row {
+        margin-bottom: 20px;
+      }
+    }
+
+    p a {
+      color: $secondary-text-color;
+    }
+
+    h1 {
+      font-weight: 500;
+      color: $primary-text-color;
+      margin-bottom: 0;
+
+      small {
+        color: $darker-text-color;
+
+        span {
+          color: $secondary-text-color;
+        }
+      }
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__hero {
+    margin-bottom: 10px;
+
+    img {
+      display: block;
+      margin: 0;
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+  }
+
+  @media screen and (max-width: 840px) {
+    .information-board {
+      .container-alt {
+        padding-right: 20px;
+      }
+
+      .panel {
+        position: static;
+        margin-top: 20px;
+        width: 100%;
+        border-radius: 4px;
+
+        .panel-header {
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 675px) {
+    .header-wrapper {
+      padding-top: 0;
+
+      &.compact {
+        padding-bottom: 0;
+      }
+
+      &.compact .hero .heading {
+        text-align: initial;
+      }
+    }
+
+    .header .container-alt,
+    .features .container-alt {
+      display: block;
+    }
+  }
+
+  .cta {
+    margin: 20px;
+  }
+}
+
+.landing {
+  height: auto;
+  min-height: 80vh;
+
+  @media (min-width:767px) {
+    height: 100vh;
+    height: calc(100vh - 180px);
+    min-height: 580px;
+  }
+
+  .landing-columns {
+    display: flex;
+    flex-direction: row;
+    padding: 40px 0 20px;
+
+    &--left {
+      margin-right: 80px;
+    }
+
+    &--right {
+      margin-left: auto;
+      width: 395px;
+    }
+
+    @media (min-width:767px) and (max-width:1024px) {
+      padding: 40px 20px 20px 20px;
+
+      &--left {
+        margin-right: 40px;
+      }
+
+      &--right {
+        width: 425px;
+      }
+    }
+
+    @media screen and (max-width:767px) {
+      height: auto;
+      padding: 20px 10px 30px;
+      flex-direction: column;
+      align-items: center;
+
+      &--left {
+        margin-right: 0;
+      }
+
+      &--right {
+        width: 100%;
+        margin-left: 0;
+        margin-top: 30px;
+      }
+    }
+  }
+
+  &__brand {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-direction: column;
+
+    .brand {
+      margin-right: auto !important;
+    }
+
+    img {
+      height: 130px;
+
+      @media (min-width:767px) and (max-width:1024px) {
+        height: 90px;
+      }
+
+      @media screen and (max-width:767px) {
+        display: none;
+      }
+    }
+  }
+
+  .directory {
+    margin-top: 30px;
+    background: transparent;
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  .hero-widget {
+    margin-top: 30px;
+    margin-bottom: 0;
+
+    h4 {
+      padding: 10px;
+      text-transform: uppercase;
+      font-weight: 700;
+      font-size: 13px;
+      color: $darker-text-color;
+    }
+
+    &__text {
+      border-radius: 0;
+      padding-bottom: 0;
+    }
+
+    &__footer {
+      background: $ui-base-color;
+      padding: 10px;
+      border-radius: 0 0 4px 4px;
+      display: flex;
+
+      &__column {
+        flex: 1 1 50%;
+      }
+    }
+
+    .account {
+      padding: 10px 0;
+      border-bottom: 0;
+
+      .account__display-name {
+        display: flex;
+        align-items: center;
+      }
+
+      .account__avatar {
+        width: 44px;
+        height: 44px;
+        background-size: 44px 44px;
+      }
+    }
+
+    &__counter {
+      padding: 10px;
+
+      strong {
+        font-family: $font-display, sans-serif;
+        font-size: 15px;
+        font-weight: 700;
+        display: block;
+      }
+
+      span {
+        font-size: 14px;
+        color: $darker-text-color;
+      }
+    }
+  }
+
+  .simple_form .user_agreement .label_input > label {
+    font-weight: 400;
+    color: $darker-text-color;
+  }
+
+  .simple_form p.lead {
+    color: $darker-text-color;
+    font-size: 15px;
+    line-height: 20px;
+    font-weight: 400;
+    margin-bottom: 25px;
+  }
+
+  &__grid {
+    max-width: 960px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
+    grid-gap: 30px;
+
+    @media screen and (max-width: 738px) {
+      grid-template-columns: minmax(0, 100%);
+      grid-gap: 10px;
+
+      &__column-login {
+        grid-row: 1;
+        display: flex;
+        flex-direction: column;
+
+        .box-widget {
+          order: 2;
+          flex: 0 0 auto;
+        }
+
+        .hero-widget {
+          margin-top: 0;
+          margin-bottom: 10px;
+          order: 1;
+          flex: 0 0 auto;
+        }
+      }
+
+      &__column-registration {
+        grid-row: 2;
+      }
+
+      .directory {
+        margin-top: 10px;
+      }
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      grid-gap: 0;
+
+      .hero-widget {
+        display: block;
+        margin-bottom: 0;
+        box-shadow: none;
+
+        &__img,
+        &__img img,
+        &__footer {
+          border-radius: 0;
+        }
+      }
+
+      .hero-widget,
+      .box-widget,
+      .directory__tag {
+        border-bottom: 1px solid lighten($ui-base-color, 8%);
+      }
+
+      .directory {
+        margin-top: 0;
+
+        &__tag {
+          margin-bottom: 0;
+
+          & > a,
+          & > div {
+            border-radius: 0;
+            box-shadow: none;
+          }
+
+          &:last-child {
+            border-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.brand {
+  position: relative;
+  text-decoration: none;
+  margin-right: 15px;
+}
+
+.brand__tagline {
+  display: block;
+  width: 470px;
+  color: $primary-text-color;
+  font-size: 30px;
+  line-height: 1.4;
+  margin-top: 25px;
+  font-weight: 400;
+
+  @media (min-width:767px) and (max-width:1024px) {
+    width: 320px;
+    font-size: 20px;
+  }
+
+  @media screen and (max-width:767px) {
+    width: 100%;
+    font-size: 22px;
+    margin-top: 0;
+  }
+}
+
+@media (min-width:767px) {
+  .hidden-sm {
+    display: block;
+  }
+
+  .visible-sm {
+    display: none;
+  }
+}
+
+@media screen and (max-width:767px) {
+  .hidden-sm {
+    display: none !important;
+  }
+
+  .visible-sm {
+    display: block !important;
+  }
+}

app/javascript/styles/gabsocial/accessibility.scss

@@ -0,0 +1,14 @@
+$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash';
+
+%white-emoji-outline {
+  filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white);
+  transform: scale(.71);
+}
+
+.emojione {
+  @each $emoji in $black-emojis {
+    &[title=':#{$emoji}:'] {
+      @extend %white-emoji-outline;
+    }
+  }
+}

app/javascript/styles/gabsocial/accounts.scss

@@ -0,0 +1,321 @@
+.card {
+  & > a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      box-shadow: none;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      .card__bar {
+        background: lighten($ui-base-color, 8%);
+      }
+    }
+  }
+
+  &__img {
+    height: 130px;
+    position: relative;
+    background: darken($ui-base-color, 12%);
+    border-radius: 4px 4px 0 0;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      object-fit: cover;
+      border-radius: 4px 4px 0 0;
+    }
+
+    @media screen and (max-width: 600px) {
+      height: 200px;
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  &__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;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-radius: 0;
+    }
+
+    .avatar {
+      flex: 0 0 auto;
+      width: 48px;
+      height: 48px;
+      padding-top: 2px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+        margin: 0;
+        border-radius: 4px;
+        background: darken($ui-base-color, 8%);
+        object-fit: cover;
+      }
+    }
+
+    .display-name {
+      margin-left: 15px;
+      text-align: left;
+
+      strong {
+        font-size: 15px;
+        color: $primary-text-color;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      span {
+        display: block;
+        font-size: 14px;
+        color: $gab-background-info;
+        font-weight: 400;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+}
+
+.pagination {
+  padding: 30px 0;
+  text-align: center;
+  overflow: hidden;
+
+  a,
+  .current,
+  .newer,
+  .older,
+  .page,
+  .gap {
+    font-size: 14px;
+    color: $primary-text-color;
+    font-weight: 500;
+    display: inline-block;
+    padding: 6px 10px;
+    text-decoration: none;
+  }
+
+  .current {
+    background: $simple-background-color;
+    border-radius: 100px;
+    color: $inverted-text-color;
+    cursor: default;
+    margin: 0 10px;
+  }
+
+  .gap {
+    cursor: default;
+  }
+
+  .older,
+  .newer {
+    text-transform: uppercase;
+    color: $secondary-text-color;
+  }
+
+  .older {
+    float: left;
+    padding-left: 0;
+
+    .fa {
+      display: inline-block;
+      margin-right: 5px;
+    }
+  }
+
+  .newer {
+    float: right;
+    padding-right: 0;
+
+    .fa {
+      display: inline-block;
+      margin-left: 5px;
+    }
+  }
+
+  .disabled {
+    cursor: default;
+    color: lighten($inverted-text-color, 10%);
+  }
+
+  @media screen and (max-width: 700px) {
+    padding: 30px 20px;
+
+    .page {
+      display: none;
+    }
+
+    .newer,
+    .older {
+      display: inline-block;
+    }
+  }
+}
+
+.nothing-here {
+  background: $ui-base-color;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  color: $gab-background-info;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: default;
+  border-radius: 4px;
+  padding: 20px;
+  min-height: 30vh;
+
+  &--under-tabs {
+    border-radius: 0 0 4px 4px;
+  }
+
+  &--flexible {
+    box-sizing: border-box;
+    min-height: 100%;
+  }
+}
+
+.account-role {
+  display: inline-block;
+  padding: 4px 6px;
+  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);
+
+  &.moderator {
+    color: $success-green;
+    background-color: rgba($success-green, 0.1);
+    border-color: rgba($success-green, 0.5);
+  }
+
+  &.admin {
+    color: lighten($error-red, 12%);
+    background-color: rgba(lighten($error-red, 12%), 0.1);
+    border-color: rgba(lighten($error-red, 12%), 0.5);
+  }
+}
+
+.account__header__fields {
+  padding: 0;
+  margin: 15px -15px -15px;
+  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;
+
+  dl {
+    display: flex;
+    border-bottom: 1px solid lighten($ui-base-color, 12%);
+  }
+
+  dt,
+  dd {
+    box-sizing: border-box;
+    padding: 14px;
+    text-align: center;
+    max-height: 48px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  dt {
+    font-weight: 500;
+    width: 120px;
+    flex: 0 0 auto;
+    color: $secondary-text-color;
+    background: rgba(darken($ui-base-color, 8%), 0.5);
+  }
+
+  dd {
+    flex: 1 1 auto;
+    color: $darker-text-color;
+  }
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+
+  .verified {
+    border: 1px solid rgba($valid-value-color, 0.5);
+    background: rgba($valid-value-color, 0.25);
+
+    a {
+      color: $valid-value-color;
+      font-weight: 500;
+    }
+
+    &__mark {
+      color: $valid-value-color;
+    }
+  }
+
+  dl:last-child {
+    border-bottom: 0;
+  }
+}
+
+.directory__tag .trends__item__current {
+  width: auto;
+}
+
+.pending-account {
+  &__header {
+    color: $darker-text-color;
+
+    a {
+      color: $ui-secondary-color;
+      text-decoration: none;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: underline;
+      }
+    }
+
+    strong {
+      color: $primary-text-color;
+      font-weight: 700;
+    }
+  }
+
+  &__body {
+    margin-top: 10px;
+  }
+}

app/javascript/styles/gabsocial/admin.scss

@@ -0,0 +1,706 @@
+$no-columns-breakpoint: 600px;
+$sidebar-width: 240px;
+$content-width: 840px;
+
+.admin-wrapper {
+  display: flex;
+  justify-content: center;
+  height: 100%;
+
+  .sidebar-wrapper {
+    flex: 1 1 $sidebar-width;
+    height: 100%;
+    background: $ui-base-color;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .sidebar {
+    width: $sidebar-width;
+    height: 100%;
+    padding: 0;
+    overflow-y: auto;
+
+    .logo {
+      display: block;
+      margin: 40px auto;
+      width: 100px;
+      height: 100px;
+    }
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      & > a:first-child {
+        display: none;
+      }
+    }
+
+    ul {
+      list-style: none;
+      border-radius: 4px 0 0 4px;
+      overflow: hidden;
+      margin-bottom: 20px;
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        margin-bottom: 0;
+      }
+
+      a {
+        display: block;
+        padding: 15px;
+        color: $gab-background-info;
+        text-decoration: none;
+        transition: all 200ms linear;
+        transition-property: color, background-color;
+        border-radius: 4px 0 0 4px;
+
+        i.fa {
+          margin-right: 5px;
+        }
+
+        &:hover {
+          color: #fff;
+          background-color: $gab-background-base;
+          transition: all 100ms linear;
+          transition-property: color, background-color;
+        }
+
+        &.selected {
+          background: darken($ui-base-color, 2%);
+          border-radius: 4px 0 0;
+        }
+      }
+
+      ul {
+        background: darken($ui-base-color, 4%);
+        border-radius: 0 0 0 4px;
+        margin: 0;
+
+        a {
+          border: 0;
+          padding: 15px 35px;
+        }
+      }
+
+      .simple-navigation-active-leaf a {
+        color: $primary-text-color;
+        background-color: $ui-highlight-color;
+        border-bottom: 0;
+        border-radius: 0;
+
+        &:hover {
+          background-color: lighten($ui-highlight-color, 5%);
+        }
+      }
+    }
+
+    & > ul > .simple-navigation-active-leaf a {
+      border-radius: 4px 0 0 4px;
+    }
+  }
+
+  .content-wrapper {
+    flex: 2 1 $content-width;
+    overflow: auto;
+  }
+
+  .content {
+    max-width: $content-width;
+    padding: 20px 15px;
+    padding-top: 60px;
+    padding-left: 25px;
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      max-width: none;
+      padding: 15px;
+      padding-top: 30px;
+    }
+
+    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;
+    }
+
+    h3 {
+      color: $secondary-text-color;
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 400;
+      margin-bottom: 30px;
+    }
+
+    h4 {
+      text-transform: uppercase;
+      font-size: 13px;
+      font-weight: 700;
+      color: $gab-background-info;
+      padding-bottom: 8px;
+      margin-bottom: 8px;
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
+    }
+
+    h6 {
+      font-size: 16px;
+      color: $secondary-text-color;
+      line-height: 28px;
+      font-weight: 400;
+    }
+
+    .fields-group h6 {
+      color: $primary-text-color;
+      font-weight: 500;
+    }
+
+    .directory__tag > a,
+    .directory__tag > div {
+      box-shadow: none;
+    }
+
+    .directory__tag .table-action-link .fa {
+      color: inherit;
+    }
+
+    .directory__tag h4 {
+      font-size: 18px;
+      font-weight: 700;
+      color: $gab-background-info;
+      text-transform: none;
+      padding-bottom: 0;
+      margin-bottom: 0;
+      border-bottom: none;
+    }
+
+    & > p {
+      font-size: 14px;
+      line-height: 18px;
+      color: $gab-background-info;
+      margin-bottom: 20px;
+
+      strong {
+        color: $gab-background-info;
+        font-weight: 500;
+
+        @each $lang in $cjk-langs {
+          &:lang(#{$lang}) {
+            font-weight: 700;
+          }
+        }
+      }
+    }
+
+    hr {
+      width: 100%;
+      height: 0;
+      border: 0;
+      border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+      margin: 20px 0;
+
+      &.spacer {
+        height: 1px;
+        border: 0;
+      }
+    }
+
+    .muted-hint {
+      color: $gab-background-info;
+
+      a {
+        color: $highlight-text-color;
+      }
+    }
+
+    .positive-hint {
+      color: $valid-value-color;
+      font-weight: 500;
+    }
+
+    .negative-hint {
+      color: $error-value-color;
+      font-weight: 500;
+    }
+
+    .neutral-hint {
+      color: $dark-text-color;
+      font-weight: 500;
+    }
+  }
+
+  @media screen and (max-width: $no-columns-breakpoint) {
+    display: block;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    .sidebar-wrapper,
+    .content-wrapper {
+      flex: 0 0 auto;
+      height: auto;
+      overflow: initial;
+    }
+
+    .sidebar {
+      width: 100%;
+      padding: 0;
+      height: auto;
+    }
+  }
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+
+  .filter-subset {
+    flex: 0 0 auto;
+    margin: 0 40px 10px 0;
+
+    &:last-child {
+      margin-bottom: 20px;
+    }
+
+    ul {
+      margin-top: 5px;
+      list-style: none;
+
+      li {
+        display: inline-block;
+        margin-right: 5px;
+      }
+    }
+
+    strong {
+      font-weight: 500;
+      text-transform: uppercase;
+      font-size: 12px;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          font-weight: 700;
+        }
+      }
+    }
+
+    a {
+      display: inline-block;
+      color: $gab-background-info;
+      text-decoration: none;
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: 500;
+      border-bottom: 2px solid $gab-background-info;
+
+      &:hover {
+        color: $primary-text-color;
+        border-bottom: 2px solid lighten($gab-background-info, 5%);
+      }
+
+      &.selected {
+        color: $highlight-text-color;
+        border-bottom: 2px solid $ui-highlight-color;
+      }
+    }
+  }
+}
+
+.report-accounts {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.report-accounts__item {
+  display: flex;
+  flex: 250px;
+  flex-direction: column;
+  margin: 0 5px;
+
+  & > strong {
+    display: block;
+    margin: 0 0 10px -5px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 18px;
+    color: $secondary-text-color;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  .account-card {
+    flex: 1 1 auto;
+  }
+}
+
+.report-status,
+.account-status {
+  display: flex;
+  margin-bottom: 10px;
+
+  .activity-stream {
+    flex: 2 0 0;
+    margin-right: 20px;
+    max-width: calc(100% - 60px);
+
+    .entry {
+      border-radius: 4px;
+    }
+  }
+}
+
+.report-status__actions,
+.account-status__actions {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  .icon-button {
+    font-size: 24px;
+    width: 24px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+}
+
+.simple_form.new_report_note,
+.simple_form.new_account_moderation_note {
+  max-width: 100%;
+}
+
+.batch-form-box {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 5px;
+
+  #form_status_batch_action {
+    margin: 0 5px 5px 0;
+    font-size: 14px;
+  }
+
+  input.button {
+    margin: 0 5px 5px 0;
+  }
+
+  .media-spoiler-toggle-buttons {
+    margin-left: auto;
+
+    .button {
+      overflow: visible;
+      margin: 0 0 5px 5px;
+      float: right;
+    }
+  }
+}
+
+.back-link {
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
+
+.log-entry {
+  margin-bottom: 20px;
+  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;
+  }
+
+  &__avatar {
+    margin-right: 10px;
+
+    .avatar {
+      display: block;
+      margin: 0;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+    }
+  }
+
+  &__content {
+    max-width: calc(100% - 90px);
+  }
+
+  &__title {
+    word-wrap: break-word;
+  }
+
+  &__timestamp {
+    color: $dark-text-color;
+  }
+
+  &__extras {
+    background: lighten($ui-base-color, 6%);
+    border-radius: 0 0 4px 4px;
+    padding: 10px;
+    color: $darker-text-color;
+    font-family: $font-monospace, monospace;
+    font-size: 12px;
+    word-wrap: break-word;
+    min-height: 20px;
+  }
+
+  &__icon {
+    font-size: 28px;
+    margin-right: 10px;
+    color: $dark-text-color;
+  }
+
+  &__icon__overlay {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+
+    &.positive {
+      background: $success-green;
+    }
+
+    &.negative {
+      background: lighten($error-red, 12%);
+    }
+
+    &.neutral {
+      background: $ui-highlight-color;
+    }
+  }
+
+  a,
+  .username,
+  .target {
+    color: $secondary-text-color;
+    text-decoration: none;
+    font-weight: 500;
+  }
+
+  .diff-old {
+    color: lighten($error-red, 12%);
+  }
+
+  .diff-neutral {
+    color: $secondary-text-color;
+  }
+
+  .diff-new {
+    color: $success-green;
+  }
+}
+
+a.name-tag,
+.name-tag,
+a.inline-name-tag,
+.inline-name-tag {
+  text-decoration: none;
+  color: $secondary-text-color;
+
+  .username {
+    font-weight: 500;
+  }
+
+  &.suspended {
+    .username {
+      text-decoration: line-through;
+      color: lighten($error-red, 12%);
+    }
+
+    .avatar {
+      filter: grayscale(100%);
+      opacity: 0.8;
+    }
+  }
+}
+
+a.name-tag,
+.name-tag {
+  display: flex;
+  align-items: center;
+
+  .avatar {
+    display: block;
+    margin: 0;
+    margin-right: 5px;
+    border-radius: 50%;
+  }
+
+  &.suspended {
+    .avatar {
+      filter: grayscale(100%);
+      opacity: 0.8;
+    }
+  }
+}
+
+.speech-bubble {
+  margin-bottom: 20px;
+  border-left: 4px solid $ui-highlight-color;
+
+  &.positive {
+    border-left-color: $success-green;
+  }
+
+  &.negative {
+    border-left-color: lighten($error-red, 12%);
+  }
+
+  &.warning {
+    border-left-color: $gold-star;
+  }
+
+  &__bubble {
+    padding: 16px;
+    padding-left: 14px;
+    font-size: 15px;
+    line-height: 20px;
+    border-radius: 4px 4px 4px 0;
+    position: relative;
+    font-weight: 500;
+
+    a {
+      color: $darker-text-color;
+    }
+  }
+
+  &__owner {
+    padding: 8px;
+    padding-left: 12px;
+  }
+
+  time {
+    color: $dark-text-color;
+  }
+}
+
+.report-card {
+  background: $ui-base-color;
+  border-radius: 4px;
+  margin-bottom: 20px;
+
+  &__profile {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+
+    .account {
+      padding: 0;
+      border: 0;
+
+      &__avatar-wrapper {
+        margin-left: 0;
+      }
+    }
+
+    &__stats {
+      flex: 0 0 auto;
+      font-weight: 500;
+      color: $darker-text-color;
+      text-transform: uppercase;
+      text-align: right;
+
+      a {
+        color: inherit;
+        text-decoration: none;
+
+        &:focus,
+        &:hover,
+        &:active {
+          color: lighten($darker-text-color, 8%);
+        }
+      }
+
+      .red {
+        color: $error-value-color;
+      }
+    }
+  }
+
+  &__summary {
+    &__item {
+      display: flex;
+      justify-content: flex-start;
+      border-top: 1px solid darken($ui-base-color, 4%);
+
+      &:hover {
+        background: lighten($ui-base-color, 2%);
+      }
+
+      &__reported-by,
+      &__assigned {
+        padding: 15px;
+        flex: 0 0 auto;
+        box-sizing: border-box;
+        width: 150px;
+        color: $darker-text-color;
+
+        &,
+        .username {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      &__content {
+        flex: 1 1 auto;
+        max-width: calc(100% - 300px);
+
+        &__icon {
+          color: $dark-text-color;
+          margin-right: 4px;
+          font-weight: 500;
+        }
+      }
+
+      &__content a {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 15px;
+        text-decoration: none;
+        color: $darker-text-color;
+      }
+    }
+  }
+}
+
+.one-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsized-ip {
+  display: inline-block;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}

app/javascript/styles/gabsocial/basics.scss

@@ -0,0 +1,162 @@
+@function hex-color($color) {
+  @if type-of($color) == 'color' {
+    $color: str-slice(ie-hex-str($color), 4);
+  }
+  @return '%23' + unquote($color)
+}
+
+html {
+  @include font-roboto();
+  @include font-weight(normal);
+  font-size: 62.5%;
+  text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  @include font-size(16);
+  @include line-height(19);
+  color: white;
+  -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: transparent;
+  background: $gab-background-base;
+  &.theme-gabsocial-light {background: $gab-background-base-light;}
+
+  &.system-font {
+    // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
+    // -apple-system => Safari <11 specific
+    // BlinkMacSystemFont => Chrome <56 on macOS specific
+    // Segoe UI => Windows 7/8/10
+    // Oxygen => KDE
+    // Ubuntu => Unity/Ubuntu
+    // Cantarell => GNOME
+    // Fira Sans => Firefox OS
+    // Droid Sans => Older Androids (<4.0)
+    // Helvetica Neue => Older macOS <10.11
+    // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif;
+  }
+
+  &.app-body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    overflow: hidden;
+    overflow-y: scroll;
+
+    &.with-modals--active {
+      overflow-y: hidden;
+    }
+  }
+
+  &.lighter {
+    background: $ui-base-color;
+  }
+
+  &.with-modals {
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    &--active {
+      overflow-y: hidden;
+      margin-right: 13px;
+    }
+  }
+
+  &.player {
+    text-align: center;
+  }
+
+  &.embed {
+    background: lighten($ui-base-color, 4%);
+    margin: 0;
+    padding-bottom: 0;
+
+    .container {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  &.admin {
+    background: darken($ui-base-color, 4%);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
+  &.error {
+    position: absolute;
+    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;
+
+    .dialog {
+      vertical-align: middle;
+      margin: 20px;
+
+      &__illustration {
+        img {
+          display: block;
+          max-width: 470px;
+          width: 100%;
+          height: auto;
+          margin-top: -120px;
+        }
+      }
+
+      h1 {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.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;
+}

app/javascript/styles/gabsocial/compact_header.scss

@@ -0,0 +1,34 @@
+.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;
+    }
+  }
+}

app/javascript/styles/gabsocial/components/account-header.scss

@@ -0,0 +1,146 @@
+.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;
+			}
+		}
+
+	}
+	&__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

app/javascript/styles/gabsocial/components/compose-form.scss

@@ -0,0 +1,285 @@
+.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-background-info;
+					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-background-info;
+					border: 1px solid $gab-background-info;
+					outline: none;
+					padding: 10px;
+					margin: 0;
+					width: 100%;
+					font-family: inherit;
+					font-size: 14px;
+					font-weight: 500;
+					&:focus {color: #fff;}
+					&::placeholder {
+						color: $gab-background-info;
+					}
+				}
+				&.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-background-info;
+				&.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

app/javascript/styles/gabsocial/components/dropdown-menu.scss

@@ -0,0 +1,150 @@
+.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-background-info;
+	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-background-info;
+		&: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;
+}
+

app/javascript/styles/gabsocial/components/modal.scss

@@ -0,0 +1,605 @@
+.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;
+}
+
+.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;
+}
+
+.error-modal__body {
+	height: 80vh;
+	width: 80vw;
+	max-width: 520px;
+	max-height: 420px;
+	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;
+	}
+}
+
+.error-modal__body {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+}
+
+.onboarding-modal__paginator,
+.error-modal__footer {
+	flex: 0 0 auto;
+	background: darken($ui-secondary-color, 8%);
+	display: flex;
+	padding: 25px;
+
+	& > 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;
+
+		&:hover,
+		&:focus,
+		&:active {
+			color: darken($lighter-text-color, 4%);
+			background-color: darken($ui-secondary-color, 16%);
+		}
+
+		&.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;
+}
+
+.display-case {
+	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;
+	}
+
+	&__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;
+}
+
+.boost-modal,
+.confirmation-modal,
+.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-background-info;
+	body.theme-gabsocial-light & {color: $gab-active-border;}
+	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;
+	}
+
+	.dropdown-menu__separator {
+		display: block;
+		margin: 10px;
+		height: 1px;
+		background: $gab-background-base;
+	}
+}
+
+.boost-modal__container {
+	overflow-x: scroll;
+	padding: 10px;
+
+	.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;
+
+	& > 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;
+}
+
+.boost-modal__status-time {
+	float: right;
+	font-size: 14px;
+}
+
+.mute-modal {
+	line-height: 24px;
+}
+
+.mute-modal .react-toggle {
+	vertical-align: middle;
+}
+
+.report-modal {
+	width: 90vw;
+	max-width: 700px;
+}
+
+.report-modal__container {
+	display: flex;
+	border-top: 1px solid $ui-secondary-color;
+
+	@media screen and (max-width: 480px) {
+		flex-wrap: wrap;
+		overflow-y: auto;
+	}
+}
+
+.report-modal__statuses,
+.report-modal__comment {
+	box-sizing: border-box;
+	width: 50%;
+
+	@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;
+
+	.status__content a {
+		color: $highlight-text-color;
+	}
+
+	.status__content,
+	.status__content p {
+		color: $gab-background-info;
+		body.theme-gabsocial-light & {color: $gab-active-border;}
+	}
+
+	@media screen and (max-width: 480px) {
+		max-height: 10vh;
+	}
+}
+
+.report-modal__comment {
+	padding: 20px;
+	border-right: 1px solid $ui-secondary-color;
+	max-width: 320px;
+
+	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;
+
+		&:focus {
+			border: 1px solid darken($ui-secondary-color, 8%);
+		}
+	}
+
+	.setting-toggle {
+		margin-top: 20px;
+		margin-bottom: 24px;
+
+		&__label {
+			color: $inverted-text-color;
+			font-size: 14px;
+		}
+	}
+
+	@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);
+
+		// 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;
+				@inclide font-size(14);
+				color: $gab-background-info;
+				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 {
+		flex-shrink: 1;
+	}
+}
+
+.confirmation-modal__container,
+.mute-modal__container,
+.report-modal__target {
+	padding: 30px;
+	font-size: 16px;
+	text-align: center;
+
+	strong {
+		font-weight: 500;
+
+		@each $lang in $cjk-langs {
+			&:lang(#{$lang}) {
+				font-weight: 700;
+			}
+		}
+	}
+}
+
+.report-modal__target {
+	padding: 20px;
+
+	.media-modal__close {
+		top: 19px;
+		right: 15px;
+	}
+}
+
+.modal-layout {
+  background: $ui-base-color 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-lighter-color)}"/></svg>') repeat-x bottom fixed;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .account-header {
+    margin-top: 0;
+  }
+}

app/javascript/styles/gabsocial/components/tabs-bar.scss

@@ -0,0 +1,230 @@
+.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;
+
+	// NOTE - Explore not using SVG for the navigation icons.
+	// The icon pixels shift around too much on crappy screens in certain situations
+	// If switched to an @2x png sprite, subtle shading and color can be introduced
+
+	&.home {
+		padding: 16px 0 0 25px;
+		background-image: url('../images/gab-icons/icon-home-sprite.svg');
+		background-size: 17px 114px;
+		background-position: 0 -82px;
+		&.active{background-position: 0 18px;}
+		@media screen and (max-width: $nav-breakpoint-1) {
+			background-size: 24px 160.94px;
+			@-moz-document url-prefix() {
+				&.active{background-position: center 10px !important;}
+			}
+		}
+	}
+	&.explore,
+	&.notifications,
+	&.messages,
+	&.optional {
+		padding: 16px 0 0 23px;
+		background-size: 14px 114px;
+		@media screen and (max-width: $nav-breakpoint-1) {
+			background-size: 20px 160.94px;
+		}
+
+		background-position: 0 -82px;
+		&.active{background-position: 0 18px;}
+	}
+	&.explore {background-image: url('../images/gab-icons/icon-explore-sprite.svg');}
+	&.notifications {background-image: url('../images/gab-icons/icon-notifications-sprite.svg');}
+	&.messages {background-image: url('../images/gab-icons/icon-messages-sprite.svg');}
+	&.optional {background-image: url('../images/gab-icons/icon-search-sprite.svg');}
+
+
+	&.optional {
+		display: none;
+		@media screen and (max-width: $nav-breakpoint-2) {display: flex;}
+	}
+
+
+	// REWORK THIS BECAUSE OF FIREFOX BUGS
+
+	@media screen and (max-width: $nav-breakpoint-1) {
+		&.home,
+		&.explore,
+		&.notifications,
+		&.messages,
+		&.optional {
+			width: 46px;
+			height: 42px;
+			margin: 4px 0 0 0;
+			padding: 0;
+			background-position: center -130px;
+			&.active {
+				height: 38px;
+				border-bottom: 4px solid $gab-active-border;
+				background-position: center 11px;
+			}
+		}
+		& span {display: none;}
+	}
+
+	// END REWORK
+
+	&.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;
+	}
+
+}

app/javascript/styles/gabsocial/components/user-panel.scss

@@ -0,0 +1,119 @@
+.user-panel {
+	display: flex;
+	width: 285px;
+	flex-direction: column;
+	overflow-y: hidden;
+	border-radius: 10px;
+	background: $gab-background-container;
+	body.theme-gabsocial-light & {
+		@include light-theme-shadow();
+		background: $gab-background-container-light;
+	}
+
+	&__header {
+		display: block;
+		height: 112px;
+		width: 100%;
+
+		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: 82px 82px;
+		}
+	}
+
+	&__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-active-border;}
+		}
+
+		&:hover & {
+			&__name {
+				text-decoration: underline;
+			}
+		}
+
+		&__username {
+			display: block;
+			font-size: 14px;
+			line-height: 16px;
+			color: $gab-background-info;
+			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-active-border;}
+			font-size: 20px;
+			font-weight: 800;
+			line-height: 24px;
+		}
+
+		&__label {
+			display: block;
+			width: 100%;
+			color: $gab-background-info;
+			font-size: 12px;
+			line-height: 14px;
+		}
+	}
+}

app/javascript/styles/gabsocial/containers.scss

@@ -0,0 +1,885 @@
+.container-alt {
+  width: 700px;
+  margin: 0 auto;
+  margin-top: 40px;
+
+  @media screen and (max-width: 740px) {
+    width: 100%;
+    margin: 0;
+  }
+}
+
+.logo-container {
+  margin: 100px auto 50px;
+
+  @media screen and (max-width: 500px) {
+    margin: 40px auto 0;
+  }
+
+  h1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      height: 42px;
+      margin-right: 10px;
+    }
+
+    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;
+    }
+  }
+}
+
+.compose-standalone {
+  .compose-form {
+    width: 400px;
+    margin: 0 auto;
+    padding: 20px 0;
+    margin-top: 40px;
+    box-sizing: border-box;
+
+    @media screen and (max-width: 400px) {
+      width: 100%;
+      margin-top: 0;
+      padding: 20px;
+    }
+  }
+}
+
+.account-header {
+  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;
+
+  @media screen and (max-width: 440px) {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 10px;
+    padding: 20px;
+    padding-bottom: 0;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    margin-right: 8px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      margin: 0;
+      border-radius: 4px;
+    }
+  }
+
+  .name {
+    flex: 1 1 auto;
+    color: $secondary-text-color;
+    width: calc(100% - 88px);
+
+    .username {
+      display: block;
+      font-weight: 500;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  .logout-link {
+    display: block;
+    font-size: 32px;
+    line-height: 40px;
+    margin-left: 8px;
+  }
+}
+
+.grid-3 {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: 3fr 1fr;
+  grid-auto-columns: 25%;
+  grid-auto-rows: max-content;
+
+  .column-0 {
+    grid-column: 1/3;
+    grid-row: 1;
+  }
+
+  .column-1 {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .column-2 {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .column-3 {
+    grid-column: 1/3;
+    grid-row: 3;
+  }
+
+  .landing-page__call-to-action {
+    min-height: 100%;
+  }
+
+  @media screen and (max-width: 738px) {
+    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
+
+    .landing-page__call-to-action {
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .row__information-board {
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .row__mascot {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    grid-gap: 0;
+    grid-template-columns: minmax(0, 100%);
+
+    .column-0 {
+      grid-column: 1;
+    }
+
+    .column-1 {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+    .column-2 {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .column-3 {
+      grid-column: 1;
+      grid-row: 4;
+    }
+  }
+}
+
+.public-layout {
+  .container {
+    max-width: 960px;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      padding: 0;
+    }
+  }
+
+  .content {
+    display: block;
+    margin: 40px 0;
+  }
+
+  .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;
+  }
+
+  .header {
+    height: 80px;
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    flex-wrap: nowrap;
+    padding: 14px 0;
+    box-sizing: border-box;
+
+    @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 {
+        flex: 1 1 33.3%;
+        min-height: 1px;
+      }
+    }
+
+    .nav-left {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      flex-wrap: nowrap;
+    }
+
+    .nav-center {
+      display: flex;
+      align-items: stretch;
+      justify-content: center;
+      flex-wrap: nowrap;
+    }
+
+    .nav-right {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-wrap: nowrap;
+
+      .simple_form.new_user {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .fields-group {
+          display: flex;
+          flex-direction: row;
+          margin-bottom: 0;
+          position: relative;
+
+          p.hint.subtle-hint {
+            position: absolute;
+            top: 30px;
+            left: 160px;
+
+            a {
+              padding: 4px;
+              border-radius: 4px;
+              background-color: $ui-base-color;
+            }
+          }
+
+          .input {
+            margin-bottom: 0;
+            margin-right: 10px;
+
+            input {
+              min-width: 150px;
+              font-size: 14px;
+            }
+          }
+        }
+
+        .actions {
+          display: flex;
+          margin-top: 0;
+
+          .button {
+            margin-bottom: 0 !important;
+            line-height: 38px !important;
+            border: 1px solid #333 !important;
+            height: 38px !important;
+            box-sizing: border-box !important;
+            padding: 0 18px !important;
+            text-transform: none !important;
+          }
+        }
+      }
+    }
+
+    .brand {
+      display: block;
+
+      img {
+        display: block;
+        height: 30px;
+        width: auto;
+        position: relative;
+        bottom: -2px;
+
+        @media screen and (max-width: $no-gap-breakpoint) {
+          height: 20px;
+        }
+      }
+    }
+
+    .nav-link {
+      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;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+        color: $primary-text-color;
+      }
+
+      &--hollow {
+        background-color: $ui-base-color;
+
+        &:hover,
+        &:focus,
+        &:active {
+          color: $gab-brand-default;
+        }
+
+      }
+
+      @media screen and (max-width: 550px) {
+        &.optional {
+          display: none;
+        }
+      }
+    }
+
+    .nav-button {
+      background: $gab-brand-default;
+      margin: 8px;
+      margin-left: 0;
+      border-radius: 4px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+        background: darken($gab-brand-default, 10%);
+      }
+
+      &--hollow {
+        background: transparent;
+
+        &:hover,
+        &:focus,
+        &:active {
+          background: rgba($gab-brand-default, 0.2);
+        }
+      }
+    }
+  }
+
+  $no-columns-breakpoint: 600px;
+
+  .grid {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
+    grid-auto-columns: 25%;
+    grid-auto-rows: max-content;
+
+    .column-0 {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    .column-1 {
+      grid-row: 1;
+      grid-column: 2;
+    }
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      grid-template-columns: 100%;
+      grid-gap: 0;
+
+      .column-1 {
+        display: none;
+      }
+    }
+  }
+
+  .public-account-header {
+    overflow: hidden;
+    margin-bottom: 10px;
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+
+    &.inactive {
+      opacity: 0.5;
+
+      .public-account-header__image,
+      .avatar {
+        filter: grayscale(100%);
+      }
+
+      .logo-button {
+        background-color: $secondary-text-color;
+      }
+    }
+
+    &__image {
+      border-radius: 4px 4px 0 0;
+      overflow: hidden;
+      height: 300px;
+      position: relative;
+      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;
+      }
+
+      img {
+        object-fit: cover;
+        display: block;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        border-radius: 4px 4px 0 0;
+      }
+
+      @media screen and (max-width: 600px) {
+        height: 200px;
+      }
+    }
+
+    &--no-bar {
+      margin-bottom: 0;
+
+      .public-account-header__image,
+      .public-account-header__image img {
+        border-radius: 4px;
+
+        @media screen and (max-width: $no-gap-breakpoint) {
+          border-radius: 0;
+        }
+      }
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      margin-bottom: 0;
+      box-shadow: none;
+
+      &__image::after {
+        display: none;
+      }
+
+      &__image,
+      &__image img {
+        border-radius: 0;
+      }
+    }
+
+    &__bar {
+      position: relative;
+      margin-top: -80px;
+      display: flex;
+      justify-content: 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;
+      }
+
+      .avatar {
+        display: block;
+        width: 120px;
+        height: 120px;
+        padding-left: 20px - 4px;
+        flex: 0 0 auto;
+
+        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%);
+        }
+      }
+
+      @media screen and (max-width: 600px) {
+        margin-top: 0;
+        background: lighten($ui-base-color, 4%);
+        border-radius: 0 0 4px 4px;
+        padding: 5px;
+
+        &::before {
+          display: none;
+        }
+
+        .avatar {
+          width: 48px;
+          height: 48px;
+          padding: 7px 0;
+          padding-left: 10px;
+
+          img {
+            border: 0;
+            border-radius: 4px;
+          }
+
+          @media screen and (max-width: 360px) {
+            display: none;
+          }
+        }
+      }
+
+      @media screen and (max-width: $no-gap-breakpoint) {
+        border-radius: 0;
+      }
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        flex-wrap: wrap;
+      }
+    }
+
+    &__tabs {
+      flex: 1 1 auto;
+      margin-left: 20px;
+
+      &__name {
+        padding-top: 20px;
+        padding-bottom: 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;
+
+          small {
+            display: block;
+            font-size: 14px;
+            color: $primary-text-color;
+            font-weight: 400;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      @media screen and (max-width: 600px) {
+        margin-left: 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &__name {
+          padding-top: 0;
+          padding-bottom: 0;
+
+          h1 {
+            font-size: 16px;
+            line-height: 24px;
+            text-shadow: none;
+
+            small {
+              color: $darker-text-color;
+            }
+          }
+        }
+      }
+
+      &__tabs {
+        display: flex;
+        justify-content: flex-start;
+        align-items: stretch;
+        height: 58px;
+
+        .details-counters {
+          display: flex;
+          flex-direction: row;
+          min-width: 300px;
+        }
+
+        @media screen and (max-width: $no-columns-breakpoint) {
+          .details-counters {
+            display: none;
+          }
+        }
+
+        .counter {
+          width: 33.3%;
+          box-sizing: border-box;
+          flex: 0 0 auto;
+          color: $darker-text-color;
+          padding: 10px;
+          border-right: 1px solid lighten($ui-base-color, 4%);
+          cursor: default;
+          text-align: center;
+          position: relative;
+
+          a {
+            display: block;
+          }
+
+          &:last-child {
+            border-right: 0;
+          }
+
+          &::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;
+          }
+
+          &.active {
+            &::after {
+              border-bottom: 4px solid $highlight-text-color;
+              opacity: 1;
+            }
+
+            &.inactive::after {
+              border-bottom-color: $secondary-text-color;
+            }
+          }
+
+          &:hover {
+            &::after {
+              opacity: 1;
+              transition-duration: 100ms;
+            }
+          }
+
+          a {
+            text-decoration: none;
+            color: inherit;
+          }
+
+          .counter-label {
+            font-size: 12px;
+            display: block;
+          }
+
+          .counter-number {
+            font-weight: 500;
+            font-size: 18px;
+            margin-bottom: 5px;
+            color: $primary-text-color;
+            font-family: $font-display, sans-serif;
+          }
+        }
+
+        .spacer {
+          flex: 1 1 auto;
+          height: 1px;
+        }
+
+        &__buttons {
+          padding: 7px 8px;
+        }
+      }
+    }
+
+    &__extra {
+      display: none;
+      margin-top: 4px;
+
+      .public-account-bio {
+        border-radius: 0;
+        box-shadow: none;
+        background: transparent;
+        margin: 0 -5px;
+
+        .account__header__fields {
+          border-top: 1px solid lighten($ui-base-color, 12%);
+        }
+
+        .roles {
+          display: none;
+        }
+      }
+
+      &__links {
+        margin-top: -15px;
+        font-size: 14px;
+        color: $darker-text-color;
+
+        a {
+          display: inline-block;
+          color: $darker-text-color;
+          text-decoration: none;
+          padding: 15px;
+          font-weight: 500;
+
+          strong {
+            font-weight: 700;
+            color: $primary-text-color;
+          }
+        }
+      }
+
+      @media screen and (max-width: $no-columns-breakpoint) {
+        display: block;
+        flex: 100%;
+      }
+    }
+  }
+
+  .account__section-headline {
+    border-radius: 4px 4px 0 0;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-radius: 0;
+    }
+  }
+
+  .detailed-status__meta {
+    margin-top: 25px;
+  }
+
+  .public-account-bio {
+    background: lighten($ui-base-color, 8%);
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 10px;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      box-shadow: none;
+      margin-bottom: 0;
+      border-radius: 0;
+    }
+
+    .account__header__fields {
+      margin: 0;
+      border-top: 0;
+
+      a {
+        color: lighten($ui-highlight-color, 8%);
+      }
+
+      dl:first-child .verified {
+        border-radius: 0 4px 0 0;
+      }
+
+      .verified a {
+        color: $valid-value-color;
+      }
+    }
+
+    .account__header__content {
+      padding: 20px;
+      padding-bottom: 0;
+      color: $primary-text-color;
+    }
+
+    &__extra,
+    .roles {
+      padding: 20px;
+      font-size: 14px;
+      color: $darker-text-color;
+    }
+
+    .roles {
+      padding-bottom: 0;
+    }
+  }
+
+  .static-icon-button {
+    color: $action-button-color;
+    font-size: 18px;
+
+    & > span {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  .card-grid {
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 100%;
+    margin: 0 -5px;
+
+    & > div {
+      box-sizing: border-box;
+      flex: 1 0 auto;
+      width: 300px;
+      padding: 0 5px;
+      margin-bottom: 10px;
+      max-width: 33.333%;
+
+      @media screen and (max-width: 900px) {
+        max-width: 50%;
+      }
+
+      @media screen and (max-width: 600px) {
+        max-width: 100%;
+      }
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      margin: 0;
+      border-top: 1px solid lighten($ui-base-color, 8%);
+
+      & > div {
+        width: 100%;
+        padding: 0;
+        margin-bottom: 0;
+        border-bottom: 1px solid lighten($ui-base-color, 8%);
+
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        .card__bar {
+          background: $ui-base-color;
+
+          &:hover,
+          &:active,
+          &:focus {
+            background: lighten($ui-base-color, 4%);
+          }
+        }
+      }
+    }
+  }
+}

app/javascript/styles/gabsocial/dashboard.scss

@@ -0,0 +1,76 @@
+.dashboard__counters {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -5px;
+  margin-bottom: 20px;
+
+  & > div {
+    box-sizing: border-box;
+    flex: 0 0 33.333%;
+    padding: 0 5px;
+    margin-bottom: 10px;
+
+    & > div,
+    & > a {
+      padding: 20px;
+      background: lighten($ui-base-color, 4%);
+      border-radius: 4px;
+    }
+
+    & > a {
+      text-decoration: none;
+      color: inherit;
+      display: block;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: lighten($ui-base-color, 8%);
+      }
+    }
+  }
+
+  &__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;
+  }
+
+  &__text {
+    font-size: 18px;
+  }
+
+  &__label {
+    font-size: 14px;
+    color: $gab-background-info;
+    text-align: center;
+    font-weight: 500;
+  }
+}
+
+.dashboard__widgets {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -5px;
+
+  & > div {
+    flex: 0 0 33.333%;
+    margin-bottom: 20px;
+
+    & > div {
+      padding: 0 5px;
+    }
+  }
+
+  a:not(.name-tag) {
+    color: $ui-secondary-color;
+    font-weight: 500;
+    text-decoration: none;
+  }
+}

app/javascript/styles/gabsocial/emoji_picker.scss

@@ -0,0 +1,204 @@
+.emoji-mart {
+  &,
+  * {
+    box-sizing: border-box;
+    line-height: 1.15;
+  }
+
+  font-size: 13px;
+  display: inline-block;
+  color: $inverted-text-color;
+
+  .emoji-mart-emoji {
+    padding: 6px;
+  }
+}
+
+.emoji-mart-bar {
+  border: 0 solid darken($ui-secondary-color, 8%);
+
+  &:first-child {
+    border-bottom-width: 1px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    background: $ui-secondary-color;
+  }
+
+  &:last-child {
+    border-top-width: 1px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    display: none;
+  }
+}
+
+.emoji-mart-anchors {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 6px;
+  color: $lighter-text-color;
+  line-height: 0;
+}
+
+.emoji-mart-anchor {
+  position: relative;
+  flex: 1;
+  text-align: center;
+  padding: 12px 4px;
+  overflow: hidden;
+  transition: color .1s ease-out;
+  cursor: pointer;
+
+  &:hover {
+    color: darken($lighter-text-color, 4%);
+  }
+}
+
+.emoji-mart-anchor-selected {
+  color: $highlight-text-color;
+
+  &:hover {
+    color: darken($highlight-text-color, 4%);
+  }
+
+  .emoji-mart-anchor-bar {
+    bottom: -1px;
+  }
+}
+
+.emoji-mart-anchor-bar {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: $highlight-text-color;
+}
+
+.emoji-mart-anchors {
+  i {
+    display: inline-block;
+    width: 100%;
+    max-width: 22px;
+  }
+
+  svg {
+    fill: currentColor;
+    max-height: 18px;
+  }
+}
+
+.emoji-mart-scroll {
+  overflow-y: scroll;
+  height: 270px;
+  max-height: 35vh;
+  padding: 0 6px 6px;
+  background: $simple-background-color;
+  will-change: transform;
+
+  &::-webkit-scrollbar-track:hover,
+  &::-webkit-scrollbar-track:active {
+    background-color: rgba($base-overlay-background, 0.3);
+  }
+}
+
+.emoji-mart-search {
+  padding: 10px;
+  padding-right: 45px;
+  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;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+  }
+}
+
+.emoji-mart-category .emoji-mart-emoji {
+  cursor: pointer;
+
+  span {
+    z-index: 1;
+    position: relative;
+    text-align: center;
+  }
+
+  &: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%;
+  }
+}
+
+.emoji-mart-category-label {
+  z-index: 2;
+  position: relative;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+
+  span {
+    display: block;
+    width: 100%;
+    font-weight: 500;
+    padding: 5px 6px;
+    background: $simple-background-color;
+  }
+}
+
+.emoji-mart-emoji {
+  position: relative;
+  display: inline-block;
+  font-size: 0;
+
+  span {
+    width: 22px;
+    height: 22px;
+  }
+}
+
+.emoji-mart-no-results {
+  font-size: 14px;
+  text-align: center;
+  padding-top: 70px;
+  color: $light-text-color;
+
+  .emoji-mart-category-label {
+    display: none;
+  }
+
+  .emoji-mart-no-results-label {
+    margin-top: .2em;
+  }
+
+  .emoji-mart-emoji:hover::before {
+    content: none;
+  }
+}
+
+.emoji-mart-preview {
+  display: none;
+}

app/javascript/styles/gabsocial/fonts.scss

@@ -0,0 +1,126 @@
+// Roboto Regular
+@font-face {
+	font-family: 'Roboto';
+	font-weight: 400;
+	font-style: normal;
+	src:	url('../fonts/roboto/roboto-regular-400.eot?#iefix');
+	src:	url('../fonts/roboto/roboto-regular-400.eot?#iefix') format('embedded-opentype'),
+			url('../fonts/roboto/roboto-regular-400.woff2') format('woff2'),
+			url('../fonts/roboto/roboto-regular-400.woff') format('woff'),
+			url('../fonts/roboto/roboto-regular-400.ttf') format('truetype'),
+			url('../fonts/roboto/roboto-regular-400.svg') format('svg');
+	}
+
+// Roboto Regular Italic
+@font-face {
+	font-family: 'Roboto';
+	font-weight: 400;
+	font-style: italic;
+	src:	url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix');
+	src:	url('../fonts/roboto/roboto-regular-italic-400.eot?#iefix') format('embedded-opentype'),
+			url('../fonts/roboto/roboto-regular-italic-400.woff2') format('woff2'),
+			url('../fonts/roboto/roboto-regular-italic-400.woff') format('woff'),
+			url('../fonts/roboto/roboto-regular-italic-400.ttf') format('truetype'),
+			url('../fonts/roboto/roboto-regular-italic-400.svg') format('svg');
+	}
+
+// Roboto Light
+@font-face {
+	font-family: 'Roboto';
+	font-weight: 300;
+	font-style: normal;
+	src:	url('../fonts/roboto/roboto-light-300.eot?#iefix');
+	src:	url('../fonts/roboto/roboto-light-300.eot?#iefix') format('embedded-opentype'),
+			url('../fonts/roboto/roboto-light-300.woff2') format('woff2'),
+			url('../fonts/roboto/roboto-light-300.woff') format('woff'),
+			url('../fonts/roboto/roboto-light-300.ttf') format('truetype'),
+			url('../fonts/roboto/roboto-light-300.svg') format('svg');
+	}
+
+// Roboto Light Italic
+@font-face {
+	font-family: 'Roboto';
+	font-weight: 300;
+	font-style: italic;
+	src:	url('../fonts/roboto/roboto-light-italic-300.eot?#iefix');
+	src:	url('../fonts/roboto/roboto-light-italic-300.eot?#iefix') format('embedded-opentype'),
+			url('../fonts/roboto/roboto-light-italic-300.woff2') format('woff2'),
+			url('../fonts/roboto/roboto-light-italic-300.woff') format('woff'),
+			url('../fonts/roboto/roboto-light-italic-300.ttf') format('truetype'),
+			url('../fonts/roboto/roboto-light-italic-300.svg') format('svg');
+	}
+
+// Roboto Bold
+@font-face {
+	font-family: 'Roboto';
+	font-weight: 700;
+	font-style: normal;
+	src:	url('../fonts/roboto/roboto-bold-700.eot?#iefix');
+	src:	url('../fonts/roboto/roboto-bold-700.eot?#iefix') format('embedded-opentype'),
+			url('../fonts/roboto/roboto-bold-700.woff2') format('woff2'),
+			url('../fonts/roboto/roboto-bold-700.woff') format('woff'),
+			url('../fonts/roboto/roboto-bold-700.ttf') format('truetype'),
+			url('../fonts/roboto/roboto-bold-700.svg') format('svg');
+	}
+
+// Roboto Bold Italic
+@font-face {
+	font-family: 'Roboto';
+	font-weight: 700;
+	font-style: italic;
+	src:	url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix');
+	src:	url('../fonts/roboto/roboto-bold-italic-700.eot?#iefix') format('embedded-opentype'),
+			url('../fonts/roboto/roboto-bold-italic-700.woff2') format('woff2'),
+			url('../fonts/roboto/roboto-bold-italic-700.woff') format('woff'),
+			url('../fonts/roboto/roboto-bold-italic-700.ttf') format('truetype'),
+			url('../fonts/roboto/roboto-bold-italic-700.svg') format('svg');
+	}
+
+// Montserrat Extra Bold
+// Used for all bold number, scoreboard, count displays
+@font-face {
+	font-family: 'Montserrat';
+	font-weight: 800;
+	font-style: normal;
+	src:	url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix');
+	src:	url('../fonts/montserrat/montserrat-extra-bold-800.eot?#iefix') format('embedded-opentype'),
+			url('../fonts/montserrat/montserrat-extra-bold-800.woff2') format('woff2'),
+			url('../fonts/montserrat/montserrat-extra-bold-800.woff') format('woff'),
+			url('../fonts/montserrat/montserrat-extra-bold-800.ttf') format('truetype'),
+			url('../fonts/montserrat/montserrat-extra-bold-800.svg') format('svg');
+	}
+
+
+// TYPEOGRAPHY MIXINS
+
+// declare the font family using these shortcuts
+@mixin font-roboto() {font-family: 'Roboto', Arial, sans-serif !important;}
+@mixin font-montserrat() {font-family: 'Montserrat', Arial, sans-serif !important;}
+
+// Declare font weights as a numerical value in rendered output
+// Prevents certain browsers which do not play nice with "light, medium" textual declarations
+// Numeical values always work more consistently across browsers
+// Each font-weight is linked with the @font-face declaration to the actual font file
+@mixin font-weight($weight) {
+	@if $weight == 'light' {font-weight: 300;}
+	@if $weight == 'normal' {font-weight: 400;}
+	@if $weight == 'medium' {font-weight: 500;}
+	@if $weight == 'bold' {font-weight: 700;}
+	@if $weight == 'extrabold' {font-weight: 800;}
+	}
+
+// Use these mixins to define font-size and line-height
+// html and body declaration allows developer to pass px value as argument
+// Rendered css will default to "rem" and fall back to "px" for unsupported browsers
+@mixin font-size($size) {
+	$rem: ($size / 10);
+	$px: $size;
+	font-size: #{$px + "px"};
+	font-size: #{$rem + "rem"};
+	}
+@mixin line-height($size) {
+	$rem: ($size / 10);
+	$px: $size;
+	line-height: #{$px + "px"};
+	line-height: #{$rem + "rem"};
+	}

app/javascript/styles/gabsocial/footer.scss

@@ -0,0 +1,96 @@
+.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%);
+
+    @media screen and (max-width:1024px) {
+      padding: 40px 20px;
+    }
+
+    .footer-container {
+      display: flex;
+      width: 960px;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+
+      @media screen and (max-width:1024px) {
+        width: 100%;
+      }
+
+      @media screen and (max-width:767px) {
+        flex-direction: column-reverse;
+        justify-content: center;
+      }
+    }
+
+    h4 {
+      text-transform: uppercase;
+      font-weight: 700;
+      margin-bottom: 8px;
+      color: $darker-text-color;
+      font-size: 1.6rem;
+      line-height: 1.5;
+
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+    }
+
+    .copyright {
+      margin-right: auto;
+
+      span {
+        color: $primary-text-color;
+        font-size: 1.3rem;
+        font-weight: 500;
+        line-height: 1.5;
+
+        &:last-of-type {
+          color: darken($primary-text-color, 20%);
+        }
+      }
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: auto;
+
+      li {
+        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;
+
+          &:hover,
+          &:active,
+          &:focus {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width:767px) {
+      .copyright {
+        margin: 0 auto auto;
+        text-align: center;
+      }
+
+      ul {
+        margin: 0 auto 20px;
+      }
+    }
+  }
+}

app/javascript/styles/gabsocial/forms.scss

@@ -0,0 +1,912 @@
+$no-columns-breakpoint: 600px;
+
+code {
+  font-family: $font-monospace, monospace;
+  font-weight: 400;
+}
+
+.form-container {
+  max-width: 400px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+.simple_form {
+  .input {
+    margin-bottom: 15px;
+    overflow: hidden;
+
+    &.hidden {
+      margin: 0;
+    }
+
+    &.radio_buttons {
+      .radio {
+        margin-bottom: 15px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      .radio > label {
+        position: relative;
+        padding-left: 28px;
+
+        input {
+          position: absolute;
+          top: -2px;
+          left: 0;
+        }
+      }
+    }
+
+    &.boolean {
+      position: relative;
+      margin-bottom: 0;
+
+      .label_input > label {
+        font-family: inherit;
+        font-size: 14px;
+        padding-top: 5px;
+        color: $primary-text-color;
+        display: block;
+        width: auto;
+      }
+
+      .label_input,
+      .hint {
+        padding-left: 28px;
+      }
+
+      .label_input__wrapper {
+        position: static;
+      }
+
+      label.checkbox {
+        position: absolute;
+        top: 2px;
+        left: 0;
+      }
+
+      label a {
+        color: $highlight-text-color;
+        text-decoration: underline;
+
+        &:hover,
+        &:active,
+        &:focus {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .row {
+    display: flex;
+    margin: 0 -5px;
+
+    .input {
+      box-sizing: border-box;
+      flex: 1 1 auto;
+      width: 50%;
+      padding: 0 5px;
+    }
+  }
+
+  .hint {
+    color: $gab-background-info;
+
+    a {
+      color: $highlight-text-color;
+    }
+
+    code {
+      border-radius: 3px;
+      padding: 0.2em 0.4em;
+      background: darken($ui-base-color, 12%);
+    }
+  }
+
+  span.hint {
+    display: block;
+    font-size: 12px;
+    margin-top: 4px;
+  }
+
+  p.hint {
+    margin-bottom: 15px;
+    color: $gab-background-info;
+
+    &.subtle-hint {
+      text-align: center;
+      font-size: 12px;
+      line-height: 18px;
+      margin-top: 15px;
+      margin-bottom: 0;
+    }
+  }
+
+  .card {
+    margin-bottom: 15px;
+  }
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  .input.with_floating_label {
+    .label_input {
+      display: flex;
+
+      & > label {
+        font-family: inherit;
+        font-size: 14px;
+        color: $primary-text-color;
+        font-weight: 500;
+        min-width: 150px;
+        flex: 0 0 auto;
+      }
+
+      input,
+      select {
+        flex: 1 1 auto;
+      }
+    }
+
+    &.select .hint {
+      margin-top: 6px;
+      margin-left: 150px;
+    }
+  }
+
+  .input.with_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;
+    }
+
+    .hint {
+      margin-top: 6px;
+    }
+
+    ul {
+      flex: 390px;
+    }
+  }
+
+  .input.with_block_label {
+    max-width: none;
+
+    & > label {
+      font-family: inherit;
+      font-size: 16px;
+      color: $primary-text-color;
+      display: block;
+      font-weight: 500;
+      padding-top: 5px;
+    }
+
+    .hint {
+      margin-bottom: 15px;
+    }
+
+    ul {
+      columns: 2;
+    }
+  }
+
+  .required abbr {
+    text-decoration: none;
+    color: lighten($error-value-color, 12%);
+  }
+
+  .fields-group {
+    margin-bottom: 25px;
+
+    .input:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .fields-row {
+    display: flex;
+    margin: 0 -10px;
+    padding-top: 5px;
+    margin-bottom: 25px;
+
+    .input {
+      max-width: none;
+    }
+
+    &__column {
+      box-sizing: border-box;
+      padding: 0 10px;
+      flex: 1 1 auto;
+      min-height: 1px;
+
+      &-6 {
+        max-width: 50%;
+      }
+    }
+
+    .fields-group:last-child,
+    .fields-row__column.fields-group {
+      margin-bottom: 0;
+    }
+
+    @media screen and (max-width: $no-columns-breakpoint) {
+      display: block;
+      margin-bottom: 0;
+
+      &__column {
+        max-width: none;
+      }
+
+      .fields-group:last-child,
+      .fields-row__column.fields-group,
+      .fields-row__column {
+        margin-bottom: 25px;
+      }
+    }
+  }
+
+  .input.radio_buttons .radio label {
+    margin-bottom: 5px;
+    font-family: inherit;
+    font-size: 14px;
+    color: $primary-text-color;
+    display: block;
+    width: auto;
+  }
+
+  .check_boxes {
+    .checkbox {
+      label {
+        font-family: inherit;
+        font-size: 14px;
+        color: $primary-text-color;
+        display: inline-block;
+        width: auto;
+        position: relative;
+        padding-top: 5px;
+        padding-left: 25px;
+        flex: 1 1 auto;
+      }
+
+      input[type=checkbox] {
+        position: absolute;
+        left: 0;
+        top: 5px;
+        margin: 0;
+      }
+    }
+  }
+
+  input[type=text],
+  input[type=number],
+  input[type=email],
+  input[type=password],
+  textarea {
+    box-sizing: border-box;
+    font-size: 16px;
+    color: $primary-text-color;
+    display: block;
+    width: 100%;
+    outline: 0;
+    font-family: inherit;
+    resize: vertical;
+    background: darken($ui-base-color, 10%);
+    border: 1px solid darken($ui-base-color, 14%);
+    border-radius: 4px;
+    padding: 10px;
+
+    &:invalid {
+      box-shadow: none;
+    }
+
+    &:focus:invalid:not(:placeholder-shown) {
+      border-color: lighten($error-red, 12%);
+    }
+
+    &:required:valid {
+      border-color: $valid-value-color;
+    }
+
+    &:hover {
+      border-color: darken($ui-base-color, 20%);
+    }
+
+    &:active,
+    &:focus {
+      border-color: $highlight-text-color;
+      background: darken($ui-base-color, 8%);
+    }
+  }
+
+  .input.field_with_errors {
+    label {
+      color: lighten($error-red, 12%);
+    }
+
+    input[type=text],
+    input[type=number],
+    input[type=email],
+    input[type=password],
+    textarea,
+    select {
+      border-color: lighten($error-red, 12%);
+    }
+
+    .error {
+      display: block;
+      font-weight: 500;
+      color: lighten($error-red, 12%);
+      margin-top: 4px;
+    }
+  }
+
+  .input.disabled {
+    opacity: 0.5;
+  }
+
+  .actions {
+    margin-top: 30px;
+    display: flex;
+
+    &.actions--top {
+      margin-top: 0;
+      margin-bottom: 30px;
+    }
+  }
+
+  button,
+  .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;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      background-color: lighten($ui-highlight-color, 5%);
+    }
+
+    &:active,
+    &:focus {
+      background-color: darken($ui-highlight-color, 5%);
+    }
+
+    &:disabled:hover {
+      background-color: $ui-primary-color;
+    }
+
+    &.negative {
+      background: $error-value-color;
+
+      &:hover {
+        background-color: lighten($error-value-color, 5%);
+      }
+
+      &:active,
+      &:focus {
+        background-color: darken($error-value-color, 5%);
+      }
+    }
+  }
+
+  select {
+    appearance: none;
+    box-sizing: border-box;
+    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;
+  }
+
+  .label_input {
+    &__wrapper {
+      position: relative;
+    }
+
+    &__append {
+      position: absolute;
+      right: 3px;
+      top: 1px;
+      padding: 10px;
+      padding-bottom: 9px;
+      font-size: 16px;
+      color: $dark-text-color;
+      font-family: inherit;
+      pointer-events: none;
+      cursor: default;
+      max-width: 140px;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &::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%));
+      }
+    }
+  }
+
+  &__overlay-area {
+    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;
+
+      &__content {
+        text-align: center;
+
+        &.rich-formatting {
+          &,
+          p {
+            color: $primary-text-color;
+          }
+        }
+      }
+    }
+  }
+}
+
+.block-icon {
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
+.flash-message {
+  background: lighten($ui-base-color, 8%);
+  color: $darker-text-color;
+  border-radius: 4px;
+  padding: 15px 10px;
+  margin-bottom: 30px;
+  text-align: center;
+
+  &.notice {
+    border: 1px solid rgba($valid-value-color, 0.5);
+    background: rgba($valid-value-color, 0.25);
+    color: $valid-value-color;
+  }
+
+  &.alert {
+    border: 1px solid rgba($error-value-color, 0.5);
+    background: rgba($error-value-color, 0.25);
+    color: $error-value-color;
+  }
+
+  a {
+    display: inline-block;
+    color: $darker-text-color;
+    text-decoration: none;
+
+    &:hover {
+      color: $primary-text-color;
+      text-decoration: underline;
+    }
+  }
+
+  p {
+    margin-bottom: 15px;
+  }
+
+  .oauth-code {
+    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;
+
+    &::-moz-focus-inner {
+      border: 0;
+    }
+
+    &::-moz-focus-inner,
+    &:focus,
+    &:active {
+      outline: 0 !important;
+    }
+
+    &:focus {
+      background: lighten($ui-base-color, 4%);
+    }
+  }
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  @media screen and (max-width: 740px) and (min-width: 441px) {
+    margin-top: 40px;
+  }
+}
+
+.form-footer {
+  margin-top: 30px;
+  text-align: center;
+
+  a {
+    color: $darker-text-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.quick-nav {
+  list-style: none;
+  margin-bottom: 25px;
+  font-size: 14px;
+
+  li {
+    display: inline-block;
+    margin-right: 10px;
+  }
+
+  a {
+    color: $highlight-text-color;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: 700;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: lighten($highlight-text-color, 8%);
+    }
+  }
+}
+
+.oauth-prompt,
+.follow-prompt {
+  margin-bottom: 30px;
+  color: $darker-text-color;
+
+  h2 {
+    font-size: 16px;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  strong {
+    color: $secondary-text-color;
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  @media screen and (max-width: 740px) and (min-width: 441px) {
+    margin-top: 40px;
+  }
+}
+
+.qr-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.qr-code {
+  flex: 0 0 auto;
+  background: $simple-background-color;
+  padding: 4px;
+  margin: 0 10px 20px 0;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  display: inline-block;
+
+  svg {
+    display: block;
+    margin: 0;
+  }
+}
+
+.qr-alternative {
+  margin-bottom: 20px;
+  color: $secondary-text-color;
+  flex: 150px;
+
+  samp {
+    display: block;
+    font-size: 14px;
+  }
+}
+
+.table-form {
+  p {
+    margin-bottom: 15px;
+
+    strong {
+      font-weight: 500;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}
+
+.simple_form,
+.table-form {
+  .warning {
+    box-sizing: border-box;
+    background: rgba($error-value-color, 0.5);
+    color: $primary-text-color;
+    text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
+    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 15px;
+
+    a {
+      color: $primary-text-color;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+
+    strong {
+      font-weight: 600;
+      display: block;
+      margin-bottom: 5px;
+
+      @each $lang in $cjk-langs {
+        &:lang(#{$lang}) {
+          font-weight: 700;
+        }
+      }
+
+      .fa {
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+.action-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  .actions,
+  .pagination {
+    flex: 1 1 auto;
+  }
+
+  .actions {
+    padding: 30px 0;
+    padding-right: 20px;
+    flex: 0 0 auto;
+  }
+}
+
+.post-follow-actions {
+  text-align: center;
+  color: $darker-text-color;
+
+  div {
+    margin-bottom: 4px;
+  }
+}
+
+.alternative-login {
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  h4 {
+    font-size: 16px;
+    color: $primary-text-color;
+    text-align: center;
+    margin-bottom: 20px;
+    border: 0;
+    padding: 0;
+  }
+
+  .button {
+    display: block;
+  }
+}
+
+.scope-danger {
+  color: $warning-red;
+}
+
+.form_admin_settings_site_short_description,
+.form_admin_settings_site_description,
+.form_admin_settings_site_extended_description,
+.form_admin_settings_site_terms,
+.form_admin_settings_custom_css,
+.form_admin_settings_closed_registrations_message {
+  textarea {
+    font-family: $font-monospace, monospace;
+  }
+}
+
+.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;
+  position: relative;
+  top: 1px;
+  transition: border-color 300ms linear;
+
+  &__wrapper {
+    flex: 1 1 auto;
+  }
+
+  input[type=text] {
+    background: transparent;
+    border: 0;
+    padding: 10px;
+    font-size: 14px;
+    font-family: $font-monospace, monospace;
+  }
+
+  button {
+    flex: 0 0 auto;
+    margin: 4px;
+    text-transform: none;
+    font-weight: 400;
+    font-size: 14px;
+    padding: 7px 18px;
+    padding-bottom: 6px;
+    width: auto;
+    transition: background 300ms linear;
+  }
+
+  &.copied {
+    border-color: $valid-value-color;
+    transition: none;
+
+    button {
+      background: $valid-value-color;
+      transition: none;
+    }
+  }
+}
+
+.connection-prompt {
+  margin-bottom: 25px;
+
+  .fa-link {
+    background-color: darken($ui-base-color, 4%);
+    border-radius: 100%;
+    font-size: 24px;
+    padding: 10px;
+  }
+
+  &__column {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    flex-shrink: 1;
+    max-width: 50%;
+
+    &-sep {
+      align-self: center;
+      flex-grow: 0;
+      overflow: visible;
+      position: relative;
+      z-index: 1;
+    }
+
+    p {
+      word-break: break-word;
+    }
+  }
+
+  .account__avatar {
+    margin-bottom: 20px;
+  }
+
+  &__connection {
+    background-color: lighten($ui-base-color, 8%);
+    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    border-radius: 4px;
+    padding: 25px 10px;
+    position: relative;
+    text-align: center;
+
+    &::after {
+      background-color: darken($ui-base-color, 4%);
+      content: '';
+      display: block;
+      height: 100%;
+      left: 50%;
+      position: absolute;
+      top: 0;
+      width: 1px;
+    }
+  }
+
+  &__row {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+  }
+}

app/javascript/styles/gabsocial/introduction.scss

@@ -0,0 +1,151 @@
+.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;
+  }
+}

app/javascript/styles/gabsocial/lists.scss

@@ -0,0 +1,19 @@
+.no-list {
+  list-style: none;
+
+  li {
+    display: inline-block;
+    margin: 0 5px;
+  }
+}
+
+.recovery-codes {
+  list-style: none;
+  margin: 0 auto;
+
+  li {
+    font-size: 125%;
+    line-height: 1.5;
+    letter-spacing: 1px;
+  }
+}

app/javascript/styles/gabsocial/modal.scss

@@ -0,0 +1,13 @@
+.modal-layout {
+  background: $ui-base-color 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-lighter-color)}"/></svg>') repeat-x bottom fixed;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  padding: 0;
+}
+
+@media screen and (max-width: 600px) {
+  .account-header {
+    margin-top: 0;
+  }
+}

app/javascript/styles/gabsocial/polls.scss

@@ -0,0 +1,211 @@
+.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: darken($ui-primary-color, 14%);
+
+    &.leading {
+      background: $ui-highlight-color;
+    }
+  }
+
+  &__text {
+    position: relative;
+    display: inline-block;
+    padding: 6px 0;
+    line-height: 18px;
+    cursor: default;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    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%);
+
+  ul {
+    padding: 10px;
+  }
+
+  .poll__footer {
+    border-top: 1px solid darken($simple-background-color, 8%);
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    button,
+    select {
+      flex: 1 1 50%;
+    }
+  }
+
+  .button.button-secondary {
+    font-size: 14px;
+    font-weight: 400;
+    padding: 6px 10px;
+    height: auto;
+    line-height: inherit;
+    color: $action-button-color;
+    border-color: $action-button-color;
+    margin-right: 5px;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+
+    .poll__text {
+      flex: 0 0 auto;
+      width: calc(100% - (23px + 6px));
+      margin-right: 6px;
+    }
+  }
+
+  select {
+    appearance: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: $inverted-text-color;
+    display: inline-block;
+    width: auto;
+    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;
+  }
+
+  .icon-button.disabled {
+    color: darken($simple-background-color, 14%);
+  }
+}
+
+.muted .poll {
+  color: $dark-text-color;
+
+  &__chart {
+    background: rgba(darken($ui-primary-color, 14%), 0.2);
+
+    &.leading {
+      background: rgba($ui-highlight-color, 0.2);
+    }
+  }
+}

app/javascript/styles/gabsocial/reset.scss

@@ -0,0 +1,54 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

app/javascript/styles/gabsocial/rtl.scss

@@ -0,0 +1,382 @@
+body.rtl {
+  direction: rtl;
+
+  .column-header > button {
+    text-align: right;
+    padding-left: 0;
+    padding-right: 15px;
+  }
+
+  .landing-page__logo {
+    margin-right: 0;
+    margin-left: 20px;
+  }
+
+  .landing-page .features-list .features-list__row .visual {
+    margin-left: 0;
+    margin-right: 15px;
+  }
+
+  .column-link__icon,
+  .column-header__icon {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+
+  .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
+    margin-right: 0;
+    margin-left: 4px;
+  }
+
+  .navigation-bar__profile {
+    margin-left: 0;
+    margin-right: 8px;
+  }
+
+  .search__input {
+    padding-right: 10px;
+    padding-left: 30px;
+  }
+
+  .search__icon .fa {
+    right: auto;
+    left: 10px;
+  }
+
+  .column-header__buttons {
+    left: 0;
+    right: auto;
+    margin-left: 0;
+    margin-right: -15px;
+  }
+
+  .column-inline-form .icon-button {
+    margin-left: 0;
+    margin-right: 5px;
+  }
+
+  .column-header__links .text-btn {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+
+  .account__avatar-wrapper {
+    float: right;
+  }
+
+  .column-header__back-button {
+    padding-left: 5px;
+    padding-right: 0;
+  }
+
+  .column-header__setting-arrows {
+    float: left;
+  }
+
+  .setting-toggle__label {
+    margin-left: 0;
+    margin-right: 8px;
+  }
+
+  .status__avatar {
+    left: auto;
+    right: 10px;
+  }
+
+  .status,
+  .activity-stream .status.light {
+    padding-left: 10px;
+    padding-right: 68px;
+  }
+
+  .status__info .status__display-name,
+  .activity-stream .status.light .status__display-name {
+    padding-left: 25px;
+    padding-right: 0;
+  }
+
+  .activity-stream .pre-header {
+    padding-right: 68px;
+    padding-left: 0;
+  }
+
+  .status__prepend {
+    margin-left: 0;
+    margin-right: 68px;
+  }
+
+  .status__prepend-icon-wrapper {
+    left: auto;
+    right: -26px;
+  }
+
+  .activity-stream .pre-header .pre-header__icon {
+    left: auto;
+    right: 42px;
+  }
+
+  .account__avatar-overlay-overlay {
+    right: auto;
+    left: 0;
+  }
+
+  .column-back-button--slim-button {
+    right: auto;
+    left: 0;
+  }
+
+  .status__relative-time,
+  .activity-stream .status.light .status__header .status__meta {
+    float: left;
+  }
+
+  .status__action-bar {
+
+    &__counter {
+      margin-right: 0;
+      margin-left: 11px;
+
+      .status__action-bar-button {
+        margin-right: 0;
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .status__action-bar-button {
+    float: right;
+    margin-right: 0;
+    margin-left: 18px;
+  }
+
+  .status__action-bar-dropdown {
+    float: right;
+  }
+
+  .privacy-dropdown__dropdown {
+    margin-left: 0;
+    margin-right: 40px;
+  }
+
+  .privacy-dropdown__option__icon {
+    margin-left: 10px;
+    margin-right: 0;
+  }
+
+  .detailed-status__display-name .display-name {
+    text-align: right;
+  }
+
+  .detailed-status__display-avatar {
+    margin-right: 0;
+    margin-left: 10px;
+    float: right;
+  }
+
+  .detailed-status__favorites,
+  .detailed-status__reblogs {
+    margin-left: 0;
+    margin-right: 6px;
+  }
+
+  .fa-ul {
+    margin-left: 0;
+    margin-left: 2.14285714em;
+  }
+
+  .fa-li {
+    left: auto;
+    right: -2.14285714em;
+  }
+
+  .admin-wrapper {
+    direction: rtl;
+  }
+
+  .admin-wrapper .sidebar ul a i.fa,
+  a.table-action-link i.fa {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+
+  .simple_form .check_boxes .checkbox label {
+    padding-left: 0;
+    padding-right: 25px;
+  }
+
+  .simple_form .input.with_label.boolean label.checkbox {
+    padding-left: 25px;
+    padding-right: 0;
+  }
+
+  .simple_form .check_boxes .checkbox input[type="checkbox"],
+  .simple_form .input.boolean input[type="checkbox"] {
+    left: auto;
+    right: 0;
+  }
+
+  .simple_form .input.radio_buttons .radio {
+    left: auto;
+    right: 0;
+  }
+
+  .simple_form .input.radio_buttons .radio > label {
+    padding-right: 28px;
+    padding-left: 0;
+  }
+
+  .simple_form .input-with-append .input input {
+    padding-left: 142px;
+    padding-right: 0;
+  }
+
+  .simple_form .input.boolean label.checkbox {
+    left: auto;
+    right: 0;
+  }
+
+  .simple_form .input.boolean .label_input,
+  .simple_form .input.boolean .hint {
+    padding-left: 0;
+    padding-right: 28px;
+  }
+
+  .simple_form .label_input__append {
+    right: auto;
+    left: 3px;
+
+    &::after {
+      right: auto;
+      left: 0;
+      background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
+    }
+  }
+
+  .simple_form select {
+    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 left 8px center / auto 16px;
+  }
+
+  .table th,
+  .table td {
+    text-align: right;
+  }
+
+  .filters .filter-subset {
+    margin-right: 0;
+    margin-left: 45px;
+  }
+
+  .landing-page .header-wrapper .mascot {
+    right: 60px;
+    left: auto;
+  }
+
+  .landing-page__call-to-action .row__information-board {
+    direction: rtl;
+  }
+
+  .landing-page .header .hero .floats .float-1 {
+    left: -120px;
+    right: auto;
+  }
+
+  .landing-page .header .hero .floats .float-2 {
+    left: 210px;
+    right: auto;
+  }
+
+  .landing-page .header .hero .floats .float-3 {
+    left: 110px;
+    right: auto;
+  }
+
+  .landing-page .header .links .brand img {
+    left: 0;
+  }
+
+  .landing-page .fa-external-link {
+    padding-right: 5px;
+    padding-left: 0 !important;
+  }
+
+  .landing-page .features #gabsocial-timeline {
+    margin-right: 0;
+    margin-left: 30px;
+  }
+
+  @media screen and (min-width: 631px) {
+    .column,
+    .drawer {
+      padding-left: 5px;
+      padding-right: 5px;
+
+      &:first-child {
+        padding-left: 5px;
+        padding-right: 10px;
+      }
+    }
+
+    .columns-area > div {
+      .column,
+      .drawer {
+        padding-left: 5px;
+        padding-right: 5px;
+      }
+    }
+  }
+
+  .public-layout {
+    .header {
+      .nav-button {
+        margin-left: 8px;
+        margin-right: 0;
+      }
+    }
+
+    .public-account-header__tabs {
+      margin-left: 0;
+      margin-right: 20px;
+    }
+  }
+
+  .landing-page__information {
+    .account__display-name {
+      margin-right: 0;
+      margin-left: 5px;
+    }
+
+    .account__avatar-wrapper {
+      margin-left: 12px;
+      margin-right: 0;
+    }
+  }
+
+  .card__bar .display-name {
+    margin-left: 0;
+    margin-right: 15px;
+    text-align: right;
+  }
+
+  .fa-chevron-left::before {
+    content: "\F054";
+  }
+
+  .fa-chevron-right::before {
+    content: "\F053";
+  }
+
+  .column-back-button__icon {
+    margin-right: 0;
+    margin-left: 5px;
+  }
+
+  .column-header__setting-arrows .column-header__setting-btn:last-child {
+    padding-left: 0;
+    padding-right: 10px;
+  }
+
+  .simple_form .input.radio_buttons .radio > label input {
+    left: auto;
+    right: 0;
+  }
+}

app/javascript/styles/gabsocial/scrollbars.scss

@@ -0,0 +1,42 @@
+// A lot of this stuff is temporary for now.
+// Content containers are meant to behave much differently than the mastodon default UI
+// For now linking default gab colors to replace the base UI colors and formulas
+
+html {
+  scrollbar-color: lighten($gab-background-container, 4%) $gab-background-container;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: lighten($gab-background-container, 4%);
+  border: none;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: lighten($gab-background-container, 6%);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: lighten($gab-background-container, 4%);
+}
+
+::-webkit-scrollbar-track {
+  border: none;
+  background: $gab-background-container;
+}
+
+::-webkit-scrollbar-track:hover {
+  background: lighten($gab-background-container, 4%);
+}
+
+::-webkit-scrollbar-track:active {
+  background: $gab-background-container;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}

app/javascript/styles/gabsocial/stream_entries.scss

@@ -0,0 +1,159 @@
+.activity-stream {
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 10px;
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    margin-bottom: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  &--headless {
+    border-radius: 0;
+    margin: 0;
+    box-shadow: none;
+
+    .detailed-status,
+    .status {
+      border-radius: 0 !important;
+    }
+  }
+
+  div[data-component] {
+    width: 100%;
+  }
+
+  .entry {
+    background: $ui-base-color;
+
+    .detailed-status,
+    .status,
+    .load-more {
+      animation: none;
+    }
+
+    &:last-child {
+      .detailed-status,
+      .status,
+      .load-more {
+        border-bottom: 0;
+        border-radius: 0 0 4px 4px;
+      }
+    }
+
+    &:first-child {
+      .detailed-status,
+      .status,
+      .load-more {
+        border-radius: 4px 4px 0 0;
+      }
+
+      &:last-child {
+        .detailed-status,
+        .status,
+        .load-more {
+          border-radius: 4px;
+        }
+      }
+    }
+
+    @media screen and (max-width: 740px) {
+      .detailed-status,
+      .status,
+      .load-more {
+        border-radius: 0 !important;
+      }
+    }
+  }
+
+  &--highlighted .entry {
+    background: lighten($ui-base-color, 8%);
+  }
+}
+
+.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;
+
+  svg {
+    width: 20px;
+    height: auto;
+    vertical-align: middle;
+    margin-right: 5px;
+    fill: $primary-text-color;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    background: lighten($ui-highlight-color, 10%);
+  }
+
+  &:disabled,
+  &.disabled {
+    &:active,
+    &:focus,
+    &:hover {
+      background: $ui-primary-color;
+    }
+  }
+
+  &.button--destructive {
+    &:active,
+    &:focus,
+    &:hover {
+      background: $error-red;
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    svg {
+      display: none;
+    }
+  }
+}
+
+.embed,
+.public-layout {
+  .detailed-status {
+    padding: 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,
+    &__action-bar,
+    .video-player {
+      margin-top: 10px;
+    }
+  }
+}

app/javascript/styles/gabsocial/tables.scss

@@ -0,0 +1,243 @@
+.table {
+  width: 100%;
+  max-width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 8px;
+    line-height: 18px;
+    vertical-align: top;
+    border-top: 1px solid $ui-base-color;
+    text-align: left;
+    background: darken($ui-base-color, 4%);
+  }
+
+  & > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid $ui-base-color;
+    border-top: 0;
+    font-weight: 500;
+  }
+
+  & > tbody > tr > th {
+    font-weight: 500;
+  }
+
+  & > tbody > tr:nth-child(odd) > td,
+  & > tbody > tr:nth-child(odd) > th {
+    background: $ui-base-color;
+  }
+
+  a {
+    color: $highlight-text-color;
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  strong {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  &.inline-table {
+    & > tbody > tr:nth-child(odd) {
+      & > td,
+      & > th {
+        background: transparent;
+      }
+    }
+
+    & > tbody > tr:first-child {
+      & > td,
+      & > th {
+        border-top: 0;
+      }
+    }
+  }
+
+  &.batch-table {
+    & > thead > tr > th {
+      background: $ui-base-color;
+      border-top: 1px solid darken($ui-base-color, 8%);
+      border-bottom: 1px solid darken($ui-base-color, 8%);
+
+      &:first-child {
+        border-radius: 4px 0 0;
+        border-left: 1px solid darken($ui-base-color, 8%);
+      }
+
+      &:last-child {
+        border-radius: 0 4px 0 0;
+        border-right: 1px solid darken($ui-base-color, 8%);
+      }
+    }
+  }
+
+  &--invites tbody td {
+    vertical-align: middle;
+  }
+}
+
+.table-wrapper {
+  overflow: auto;
+  margin-bottom: 20px;
+}
+
+samp {
+  font-family: $font-monospace, monospace;
+}
+
+button.table-action-link {
+  background: transparent;
+  border: 0;
+  font: inherit;
+}
+
+button.table-action-link,
+a.table-action-link {
+  text-decoration: none;
+  display: inline-block;
+  margin-right: 5px;
+  padding: 0 10px;
+  color: $gab-background-info;
+  font-weight: 500;
+
+  &:hover {
+    color: $primary-text-color;
+  }
+
+  i.fa {
+    font-weight: 400;
+    margin-right: 5px;
+  }
+
+  &:first-child {
+    padding-left: 0;
+  }
+}
+
+.batch-table {
+  &__toolbar,
+  &__row {
+    display: flex;
+
+    &__select {
+      box-sizing: border-box;
+      padding: 8px 16px;
+      cursor: pointer;
+      min-height: 100%;
+
+      input {
+        margin-top: 8px;
+      }
+
+      &--aligned {
+        display: flex;
+        align-items: center;
+
+        input {
+          margin-top: 0;
+        }
+      }
+
+      @media screen and (max-width: $no-gap-breakpoint) {
+        display: none;
+      }
+    }
+
+    &__actions,
+    &__content {
+      padding: 8px 0;
+      padding-right: 16px;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__toolbar {
+    border: 1px solid darken($ui-base-color, 8%);
+    background: $ui-base-color;
+    border-radius: 4px 0 0;
+    height: 47px;
+    align-items: center;
+
+    &__actions {
+      text-align: right;
+      padding-right: 16px - 5px;
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      display: none;
+    }
+  }
+
+  &__row {
+    border: 1px solid darken($ui-base-color, 8%);
+    border-top: 0;
+    background: darken($ui-base-color, 4%);
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      &:first-child {
+        border-top: 1px solid darken($ui-base-color, 8%);
+      }
+    }
+
+    &:hover {
+      background: darken($ui-base-color, 2%);
+    }
+
+    &:nth-child(even) {
+      background: $ui-base-color;
+
+      &:hover {
+        background: lighten($ui-base-color, 2%);
+      }
+    }
+
+    &__content {
+      padding-top: 12px;
+      padding-bottom: 16px;
+
+      &--unpadded {
+        padding: 0;
+      }
+    }
+  }
+
+  .status__content {
+    padding-top: 0;
+
+    summary {
+      display: list-item;
+    }
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  .nothing-here {
+    border: 1px solid darken($ui-base-color, 8%);
+    border-top: 0;
+    box-shadow: none;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-top: 1px solid darken($ui-base-color, 8%);
+    }
+  }
+
+  @media screen and (max-width: 870px) {
+    .accounts-table tbody td.optional {
+      display: none;
+    }
+  }
+}

app/javascript/styles/gabsocial/variables.scss

@@ -0,0 +1,110 @@
+// Going to create a Gab Specific color stack and gracefully remove the existing stack
+// We know what colors we want to use for everything in the UI
+// The existing color stack is based on propagating color tint variants of a few basic colors
+
+////////// GAB SPECIFIC VARIABLE STACK //////////
+
+$gab-brand-default: #21cf7a;
+$gab-alert-red: #cc6643;
+
+// THEMES
+// default theme (dark)
+$gab-background-base: #333;
+$gab-background-container: #222;
+$gab-text-highlight: $gab-brand-default;
+$gab-bright-highlight: #b2f1d5;
+$gab-placeholder-accent: #666;
+
+// NOTE - needs better descriptive names since these are also used for light theme in different ways
+$gab-background-info: #999;
+$gab-active-border: #6c6c6c;
+
+
+// light theme
+$gab-background-base-light: #f2f3f6;
+$gab-background-container-light: #fff;
+$gab-text-highlight-light: $gab-brand-default;
+
+
+
+// THEME MIXINS
+@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
+
+
+
+// BREAKPOINT SETS
+
+// navigation breakpoints - by default show all elements and link names along with icons
+// turns navigation links into icon-only buttons
+$nav-breakpoint-1: 850px;
+// search field hidden and replaced with search icon link
+$nav-breakpoint-2: 650px;
+// "Gab" button hidden and replaced with floating button on bottom corner
+$nav-breakpoint-3: 450px;
+// Gab Logo hidden - bare minimum navigation for smallest width devices
+$nav-breakpoint-4: 375px;
+
+
+
+
+////////// EXISTING VARIABLE STACK (with modifications) //////////
+
+// Commonly used web colors
+
+// We certainly don't need variables for white and black.
+// you can declare color: white; color: black; or #fff; #000;
+$black: #000000;            // Black
+$white: #ffffff;            // White
+
+
+$success-green: #79bd9a !default;    // Padua
+$error-red: #df405a !default;        // Cerise
+$warning-red: #ff5050 !default;      // Sunset Orange
+$gold-star: #ca8f04 !default;        // Dark Goldenrod
+
+// Values from the classic Gab Social UI
+$classic-base-color: $gab-background-base;
+$classic-primary-color: $gab-background-base;
+$classic-secondary-color: $gab-placeholder-accent;
+$classic-highlight-color: $gab-text-highlight;
+
+// Variables for defaults in UI
+$base-shadow-color: $black !default;
+$base-overlay-background: $black !default;
+$base-border-color: $white !default;
+$simple-background-color: $white !default;
+$valid-value-color: $success-green !default;
+$error-value-color: $error-red !default;
+
+// Tell UI to use selected colors
+$ui-base-color: $classic-base-color !default;                  // Darkest
+$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
+$ui-primary-color: $classic-primary-color !default;            // Lighter
+$ui-secondary-color: $classic-secondary-color !default;        // Lightest
+$ui-highlight-color: $classic-highlight-color !default;
+
+// Variables for texts
+$primary-text-color: $white !default;
+$darker-text-color: $gab-background-info !default;
+$dark-text-color: $ui-base-lighter-color !default;
+$secondary-text-color: $ui-secondary-color !default;
+$highlight-text-color: $ui-highlight-color !default;
+$action-button-color: $ui-base-lighter-color !default;
+// For texts on inverted backgrounds
+$inverted-text-color: $ui-base-color !default;
+$lighter-text-color: $ui-base-lighter-color !default;
+$light-text-color: $ui-primary-color !default;
+
+// Language codes that uses CJK fonts
+$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
+
+// Variables for components
+$media-modal-media-max-width: 100%;
+// put margins on top and bottom of image to avoid the screen covered by image.
+$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;

app/javascript/styles/gabsocial/widgets.scss

@@ -0,0 +1,534 @@
+.hero-widget {
+  margin-bottom: 10px;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+
+  &__img {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    border-radius: 4px 4px 0 0;
+    background: $base-shadow-color;
+
+    img {
+      object-fit: cover;
+      display: block;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      border-radius: 4px 4px 0 0;
+    }
+  }
+
+  &__text {
+    background: $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;
+
+    .emojione {
+      width: 20px;
+      height: 20px;
+      margin: -3px 0 0;
+    }
+
+    p {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    em {
+      display: inline;
+      margin: 0;
+      padding: 0;
+      font-weight: 700;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      color: lighten($darker-text-color, 10%);
+    }
+
+    a {
+      color: $secondary-text-color;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    display: none;
+  }
+}
+
+.endorsements-widget {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+
+  h4 {
+    padding: 10px;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 13px;
+    color: $darker-text-color;
+  }
+
+  .account {
+    padding: 10px 0;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    .account__display-name {
+      display: flex;
+      align-items: center;
+    }
+
+    .account__avatar {
+      width: 44px;
+      height: 44px;
+      background-size: 44px 44px;
+    }
+  }
+}
+
+.box-widget {
+  padding: 20px;
+  border-radius: 4px;
+  background: lighten($ui-base-color, 2.5%);
+  box-shadow: 0 0 1px 1px rgba($base-shadow-color, 0.2);
+}
+
+.contact-widget,
+.landing-page__information.contact-widget {
+  box-sizing: border-box;
+  padding: 20px;
+  min-height: 100%;
+  border-radius: 4px;
+  background: $ui-base-color;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+}
+
+.contact-widget {
+  font-size: 15px;
+  color: $darker-text-color;
+  line-height: 20px;
+  word-wrap: break-word;
+  font-weight: 400;
+
+  strong {
+    font-weight: 500;
+  }
+
+  p {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__mail {
+    margin-top: 10px;
+
+    a {
+      color: $primary-text-color;
+      text-decoration: none;
+    }
+  }
+}
+
+.moved-account-widget {
+  padding: 15px;
+  padding-bottom: 20px;
+  border-radius: 4px;
+  background: $ui-base-color;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  color: $secondary-text-color;
+  font-weight: 400;
+  margin-bottom: 10px;
+
+  strong,
+  a {
+    font-weight: 500;
+
+    @each $lang in $cjk-langs {
+      &:lang(#{$lang}) {
+        font-weight: 700;
+      }
+    }
+  }
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+
+    &.mention {
+      text-decoration: none;
+
+      span {
+        text-decoration: none;
+      }
+
+      &:focus,
+      &:hover,
+      &:active {
+        text-decoration: none;
+
+        span {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  &__message {
+    margin-bottom: 15px;
+
+    .fa {
+      margin-right: 5px;
+      color: $darker-text-color;
+    }
+  }
+
+  &__card {
+    .detailed-status__display-avatar {
+      position: relative;
+      cursor: pointer;
+    }
+
+    .detailed-status__display-name {
+      margin-bottom: 0;
+      text-decoration: none;
+
+      span {
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+.memoriam-widget {
+  padding: 20px;
+  border-radius: 4px;
+  background: $base-shadow-color;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  font-size: 14px;
+  color: $darker-text-color;
+  margin-bottom: 10px;
+}
+
+.page-header {
+  background: lighten($ui-base-color, 8%);
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+  border-radius: 4px;
+  padding: 60px 15px;
+  text-align: center;
+  margin: 10px 0;
+
+  h1 {
+    color: $primary-text-color;
+    font-size: 36px;
+    line-height: 1.1;
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+
+  p {
+    font-size: 15px;
+    color: $darker-text-color;
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    margin-top: 0;
+    background: lighten($ui-base-color, 4%);
+
+    h1 {
+      font-size: 24px;
+    }
+  }
+}
+
+.directory {
+  background: $ui-base-color;
+  border-radius: 4px;
+  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+
+  &__tag {
+    box-sizing: border-box;
+    margin-bottom: 10px;
+
+    & > a,
+    & > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: $ui-base-color;
+      border-radius: 4px;
+      padding: 15px;
+      text-decoration: none;
+      color: inherit;
+      box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
+    }
+
+    & > a {
+      &:hover,
+      &:active,
+      &:focus {
+        background: lighten($ui-base-color, 8%);
+      }
+    }
+
+    &.active > a {
+      background: $ui-highlight-color;
+      cursor: default;
+    }
+
+    &.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;
+
+      .fa {
+        color: $darker-text-color;
+      }
+
+      small {
+        display: block;
+        font-weight: 400;
+        font-size: 15px;
+        margin-top: 8px;
+        color: $darker-text-color;
+      }
+    }
+
+    &.active h4 {
+      &,
+      .fa,
+      small {
+        color: $primary-text-color;
+      }
+    }
+
+    .avatar-stack {
+      flex: 0 0 auto;
+      width: (36px + 4px) * 3;
+    }
+
+    &.active .avatar-stack .account__avatar {
+      border-color: $ui-highlight-color;
+    }
+  }
+}
+
+.avatar-stack {
+  display: flex;
+  justify-content: flex-end;
+
+  .account__avatar {
+    flex: 0 0 auto;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    position: relative;
+    margin-left: -10px;
+    background: darken($ui-base-color, 8%);
+    border: 2px solid $ui-base-color;
+
+    &:nth-child(1) {
+      z-index: 1;
+    }
+
+    &:nth-child(2) {
+      z-index: 2;
+    }
+
+    &:nth-child(3) {
+      z-index: 3;
+    }
+  }
+}
+
+.accounts-table {
+  width: 100%;
+
+  .account {
+    padding: 0;
+    border: 0;
+  }
+
+  strong {
+    font-weight: 700;
+  }
+
+  thead th {
+    text-align: center;
+    text-transform: uppercase;
+    color: $darker-text-color;
+    font-weight: 700;
+    padding: 10px;
+
+    &:first-child {
+      text-align: left;
+    }
+  }
+
+  tbody td {
+    padding: 15px 0;
+    vertical-align: middle;
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 0;
+  }
+
+  &__count {
+    width: 120px;
+    text-align: center;
+    font-size: 15px;
+    font-weight: 500;
+    color: $primary-text-color;
+
+    small {
+      display: block;
+      color: $darker-text-color;
+      font-weight: 400;
+      font-size: 14px;
+    }
+  }
+
+  &__comment {
+    width: 50%;
+    vertical-align: initial !important;
+  }
+
+  @media screen and (max-width: $no-gap-breakpoint) {
+    tbody td.optional {
+      display: none;
+    }
+  }
+}
+
+.moved-account-widget,
+.memoriam-widget,
+.box-widget,
+.contact-widget,
+.landing-page__information.contact-widget,
+.directory,
+.page-header {
+  @media screen and (max-width: $no-gap-breakpoint) {
+    margin-bottom: 0;
+    box-shadow: none;
+    border-radius: 0;
+  }
+}
+
+$maximum-width: 1235px;
+$fluid-breakpoint: $maximum-width + 20px;
+
+.statuses-grid {
+  min-height: 600px;
+
+  @media screen and (max-width: 640px) {
+    width: 100% !important; // Masonry layout is unnecessary at this width
+  }
+
+  &__item {
+    width: (960px - 20px) / 3;
+
+    @media screen and (max-width: $fluid-breakpoint) {
+      width: (940px - 20px) / 3;
+    }
+
+    @media screen and (max-width: 640px) {
+      width: 100%;
+    }
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      width: 100vw;
+    }
+  }
+
+  .detailed-status {
+    border-radius: 4px;
+
+    @media screen and (max-width: $no-gap-breakpoint) {
+      border-top: 1px solid lighten($ui-base-color, 16%);
+    }
+
+    &.compact {
+      .detailed-status__meta {
+        margin-top: 15px;
+      }
+
+      .status__content {
+        font-size: 15px;
+        line-height: 20px;
+
+        .emojione {
+          width: 20px;
+          height: 20px;
+          margin: -3px 0 0;
+        }
+
+        .status__content__spoiler-link {
+          line-height: 20px;
+          margin: 0;
+        }
+      }
+
+      .media-gallery,
+      .status-card,
+      .video-player {
+        margin-top: 15px;
+      }
+    }
+  }
+}
+
+.notice-widget {
+  margin-bottom: 10px;
+  color: $darker-text-color;
+
+  p {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    font-size: 14px;
+    line-height: 20px;
+    text-decoration: none;
+    font-weight: 500;
+    color: $ui-highlight-color;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}

app/javascript/styles/mailer.scss

@@ -0,0 +1,552 @@
+@import 'gabsocial/variables';
+
+//Check this out later - replace with 'gabsocial/fonts'
+//@import 'fonts/roboto';
+
+table,
+td,
+div {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100% !important;
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+.email-body {
+  td,
+  div,
+  a,
+  span {
+    line-height: inherit;
+  }
+}
+
+a {
+  &,
+  &:visited,
+  span {
+    text-decoration: none;
+    color: $ui-highlight-color;
+  }
+
+  #outlook & {
+    padding: 0;
+  }
+}
+
+img {
+  outline: none;
+  border: 0;
+  text-decoration: none;
+  -ms-interpolation-mode: bicubic;
+  clear: both;
+  line-height: 100%;
+}
+
+table {
+  border-spacing: 0;
+  mso-table-lspace: 0;
+  mso-table-rspace: 0;
+}
+
+td {
+  vertical-align: top;
+}
+
+.email-table,
+.content-section,
+.column,
+.column-cell {
+  width: 100%;
+  min-width: 100%;
+}
+
+.email-body {
+  font-size: 0 !important;
+  line-height: 100%;
+  text-align: center;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.email-start {
+  padding-top: 32px;
+}
+
+.email-end {
+  padding-bottom: 32px;
+}
+
+.email-body,
+html,
+body {
+  background-color: lighten($ui-base-color, 4%);
+}
+
+.email-container,
+.email-row,
+.col-0,
+.col-1,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6, {
+  font-size: 0;
+  display: inline-block;
+  width: 100%;
+  min-width: 100%;
+  min-width: 0 !important;
+  vertical-align: top;
+}
+
+.content-cell {
+  width: 100%;
+  min-width: 100%;
+  min-width: 0 !important;
+}
+
+.column-cell {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  vertical-align: top;
+
+  &.button-cell {
+    padding-top: 0;
+  }
+}
+
+.email-container {
+  max-width: 632px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.email-row {
+  display: block;
+  max-width: 600px !important;
+  margin: 0 auto;
+  text-align: center;
+  clear: both;
+}
+
+.col-0 {
+  max-width: 50px;
+}
+
+.col-1 {
+  max-width: 100px;
+}
+
+.col-2 {
+  max-width: 200px;
+}
+
+.col-3 {
+  max-width: 300px;
+}
+
+.col-4 {
+  max-width: 400px;
+}
+
+.col-5 {
+  max-width: 500px;
+}
+
+.col-6 {
+  max-width: 600px;
+}
+
+.column-cell,
+.column-cell td,
+p {
+  font-family: Helvetica, Arial, sans-serif;
+
+  @media only screen {
+    font-family: $font-sans-serif, sans-serif !important;
+  }
+}
+
+.email-body .column-cell,
+.column-cell,
+p {
+  font-size: 15px;
+  line-height: 23px;
+  color: $ui-primary-color;
+  mso-line-height-rule: exactly;
+  text-rendering: optimizelegibility;
+}
+
+p {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 16px;
+
+  &.small {
+    font-size: 13px;
+  }
+
+  &.lead {
+    font-size: 19px;
+    line-height: 27px;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $ui-secondary-color;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 20px;
+  margin-bottom: 8px;
+  padding: 0;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 26px;
+  line-height: 36px;
+}
+
+h2 {
+  font-size: 23px;
+  line-height: 30px;
+}
+
+h3 {
+  font-size: 19px;
+  line-height: 25px;
+}
+
+h5 {
+  font-size: 16px;
+  line-height: 21px;
+  font-weight: 700;
+  color: lighten($ui-base-color, 34%);
+}
+
+.input-cell {
+  h5 {
+    margin-top: 4px;
+  }
+}
+
+.input {
+  td {
+    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;
+  }
+}
+
+.content-cell,
+.blank-cell {
+  width: 100%;
+  font-size: 0;
+  text-align: center;
+  vertical-align: top;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.content-cell {
+  background-color: darken($ui-base-color, 4%);
+
+  &.darker {
+    background-color: darken($ui-base-color, 8%);
+  }
+}
+
+.hero {
+  background-color: $ui-base-color;
+  padding-top: 20px;
+}
+
+.hero-with-button {
+  h1 {
+    margin-bottom: 4px;
+  }
+
+  p.lead {
+    margin-bottom: 32px;
+  }
+
+  padding-bottom: 16px;
+}
+
+.header {
+  border-radius: 5px 5px 0 0;
+  background-color: darken($ui-base-color, 8%);
+
+  .column-cell {
+    text-align: center;
+    padding-top: 20px;
+    padding-bottom: 8px;
+  }
+}
+
+.content-start {
+  padding-top: 32px;
+}
+
+.content-end {
+  border-radius: 0 0 5px 5px;
+  padding-top: 16px;
+}
+
+.footer {
+  .column-cell,
+  p {
+    color: lighten($ui-base-color, 34%);
+  }
+
+  p {
+    margin-bottom: 0;
+    font-size: 13px;
+
+    &.small {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: lighten($ui-base-color, 34%);
+    text-decoration: underline;
+  }
+
+  img {
+    opacity: 0.3;
+  }
+}
+
+.logo {
+  position: relative;
+  left: -4px;
+}
+
+.button {
+  display: table;
+  margin-left: auto;
+  margin-right: 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;
+
+    a,
+    a span {
+      color: $primary-text-color;
+      display: block !important;
+      text-align: center !important;
+      vertical-align: top !important;
+      line-height: inherit !important;
+    }
+
+    a {
+      padding: 10px 22px !important;
+      line-height: 26px !important;
+      font-weight: 500 !important;
+    }
+  }
+
+  &.button-small {
+    td {
+      border-radius: 4px;
+      font-size: 14px;
+      padding: 8px 16px;
+
+      a {
+        padding: 5px 16px !important;
+        line-height: 26px !important;
+      }
+    }
+  }
+}
+
+.button-default {
+  background-color: darken($ui-base-color, 8%);
+}
+
+.button-primary {
+  background-color: darken($ui-highlight-color, 3%);
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.padded {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.padded-bottom {
+  padding-bottom: 32px;
+}
+
+.margin-bottom {
+  margin-bottom: 20px;
+}
+
+.hero-icon {
+  width: 64px;
+
+  td {
+    text-align: center;
+    vertical-align: middle;
+    line-height: 100%;
+    mso-line-height-rule: exactly;
+    padding: 16px;
+    border-radius: 80px;
+    background: $success-green;
+  }
+
+  &.alert-icon td {
+    background: $error-red;
+  }
+
+  img {
+    max-width: 32px;
+    width: 32px;
+    height: 32px;
+    display: block;
+    line-height: 100%;
+  }
+}
+
+.hr {
+  width: 100%;
+
+  td {
+    font-size: 0;
+    line-height: 1px;
+    mso-line-height-rule: exactly;
+    min-height: 1px;
+    overflow: hidden;
+    height: 2px;
+    background-color: transparent !important;
+    border-top: 1px solid lighten($ui-base-color, 8%);
+  }
+}
+
+.status {
+  padding-bottom: 32px;
+
+  .status-header {
+    td {
+      font-size: 14px;
+      padding-bottom: 15px;
+    }
+
+    bdi {
+      color: $white;
+      font-size: 16px;
+      display: block;
+      font-weight: 500;
+    }
+
+    td:first-child {
+      padding-right: 10px;
+    }
+
+    img {
+      width: 48px;
+      height: 48px;
+      border-radius: 4px;
+    }
+  }
+
+  p {
+    font-size: 19px;
+    margin-bottom: 20px;
+
+    &.status-footer {
+      color: lighten($ui-base-color, 26%);
+      font-size: 14px;
+      margin-bottom: 0;
+
+      a {
+        color: lighten($ui-base-color, 26%);
+      }
+    }
+  }
+}
+
+.border-top {
+  border-top: 1px solid lighten($ui-base-color, 8%);
+}
+
+ul {
+  padding-left: 15px;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-top: 16px;
+
+  li {
+    margin-bottom: 16px;
+    color: lighten($ui-base-color, 26%);
+
+    span {
+      color: $ui-primary-color;
+    }
+  }
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+  body {
+    min-height: 1024px !important;
+  }
+}
+
+@media (max-width: 697px) {
+  .email-container,
+  .col-1,
+  .col-2,
+  .col-3,
+  .col-4,
+  .col-5,
+  .col-6 {
+    width: 100% !important;
+    max-width: none !important;
+  }
+
+  .email-start {
+    padding-top: 16px !important;
+  }
+
+  .email-end {
+    padding-bottom: 16px !important;
+  }
+
+  .padded {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}