Change public accounts pages to mount the web UI (#19319)

* Change public accounts pages to mount the web UI

* Fix handling of remote usernames in routes

- When logged in, serve web app
- When logged out, redirect to permalink
- Fix `app-body` class not being set sometimes due to name conflict

* Fix missing `multiColumn` prop

* Fix failing test

* Use `discoverable` attribute to control indexing directives

* Fix `<ColumnLoading />` not using `multiColumn`

* Add `noindex` to accounts in REST API

* Change noindex directive to not be rendered by default before a route is mounted

* Add loading indicator for detailed status in web UI

* Fix missing indicator appearing while account is loading in web UI

7 files changed, 1 insertions, 1104 deletions

diff --git a/app/javascript/styles/application.scss b/app/javascript/styles/application.scss
index e9f596e2f..81a040108 100644
--- a/app/javascript/styles/application.scss
+++ b/app/javascript/styles/application.scss
@@ -8,7 +8,6 @@
 @import 'mastodon/branding';
 @import 'mastodon/containers';
 @import 'mastodon/lists';
-@import 'mastodon/footer';
 @import 'mastodon/widgets';
 @import 'mastodon/forms';
 @import 'mastodon/accounts';
diff --git a/app/javascript/styles/contrast/diff.scss b/app/javascript/styles/contrast/diff.scss
index 22f5bcc94..27eb837df 100644
--- a/app/javascript/styles/contrast/diff.scss
+++ b/app/javascript/styles/contrast/diff.scss
@@ -68,10 +68,6 @@
   color: $darker-text-color;
 }
 
-.public-layout .public-account-header__tabs__tabs .counter.active::after {
-  border-bottom: 4px solid $ui-highlight-color;
-}
-
 .compose-form .autosuggest-textarea__textarea::placeholder,
 .compose-form .spoiler-input__input::placeholder {
   color: $inverted-text-color;
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 4b27e6b4f..20e973b8b 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -655,95 +655,6 @@ html {
   }
 }
 
-.public-layout {
-  .account__section-headline {
-    border: 1px solid lighten($ui-base-color, 8%);
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 0;
-    }
-  }
-
-  .header,
-  .public-account-header,
-  .public-account-bio {
-    box-shadow: none;
-  }
-
-  .public-account-bio,
-  .hero-widget__text {
-    background: $account-background-color;
-  }
-
-  .header {
-    background: $ui-base-color;
-    border: 1px solid lighten($ui-base-color, 8%);
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border: 0;
-    }
-
-    .brand {
-      &:hover,
-      &:focus,
-      &:active {
-        background: lighten($ui-base-color, 4%);
-      }
-    }
-  }
-
-  .public-account-header {
-    &__image {
-      background: lighten($ui-base-color, 12%);
-
-      &::after {
-        box-shadow: none;
-      }
-    }
-
-    &__bar {
-      &::before {
-        background: $account-background-color;
-        border: 1px solid lighten($ui-base-color, 8%);
-        border-top: 0;
-      }
-
-      .avatar img {
-        border-color: $account-background-color;
-      }
-
-      @media screen and (max-width: $no-columns-breakpoint) {
-        background: $account-background-color;
-        border: 1px solid lighten($ui-base-color, 8%);
-        border-top: 0;
-      }
-    }
-
-    &__tabs {
-      &__name {
-        h1,
-        h1 small {
-          color: $white;
-
-          @media screen and (max-width: $no-columns-breakpoint) {
-            color: $primary-text-color;
-          }
-        }
-      }
-    }
-
-    &__extra {
-      .public-account-bio {
-        border: 0;
-      }
-
-      .public-account-bio .account__header__fields {
-        border-color: lighten($ui-base-color, 8%);
-      }
-    }
-  }
-}
-
 .notification__filter-bar button.active::after,
 .account__section-headline a.active::after {
   border-color: transparent transparent $white;
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 8e5ed03f0..b49b93984 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -104,785 +104,3 @@
     margin-left: 10px;
   }
 }
-
-.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;
-  }
-
-  @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;
-    }
-  }
-}
-
-.grid-4 {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  grid-auto-columns: 25%;
-  grid-auto-rows: max-content;
-
-  .column-0 {
-    grid-column: 1 / 5;
-    grid-row: 1;
-  }
-
-  .column-1 {
-    grid-column: 1 / 4;
-    grid-row: 2;
-  }
-
-  .column-2 {
-    grid-column: 4;
-    grid-row: 2;
-  }
-
-  .column-3 {
-    grid-column: 2 / 5;
-    grid-row: 3;
-  }
-
-  .column-4 {
-    grid-column: 1;
-    grid-row: 3;
-  }
-
-  .landing-page__call-to-action {
-    min-height: 100%;
-  }
-
-  .flash-message {
-    margin-bottom: 10px;
-  }
-
-  @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: 5;
-    }
-
-    .column-4 {
-      grid-column: 1;
-      grid-row: 4;
-    }
-  }
-}
-
-.public-layout {
-  @media screen and (max-width: $no-gap-breakpoint) {
-    padding-top: 48px;
-  }
-
-  .container {
-    max-width: 960px;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding: 0;
-    }
-  }
-
-  .header {
-    background: lighten($ui-base-color, 8%);
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
-    border-radius: 4px;
-    height: 48px;
-    margin: 10px 0;
-    display: flex;
-    align-items: stretch;
-    justify-content: center;
-    flex-wrap: nowrap;
-    overflow: hidden;
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      position: fixed;
-      width: 100%;
-      top: 0;
-      left: 0;
-      margin: 0;
-      border-radius: 0;
-      box-shadow: none;
-      z-index: 110;
-    }
-
-    & > div {
-      flex: 1 1 33.3%;
-      min-height: 1px;
-    }
-
-    .nav-left {
-      display: flex;
-      align-items: stretch;
-      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: stretch;
-      justify-content: flex-end;
-      flex-wrap: nowrap;
-    }
-
-    .brand {
-      display: block;
-      padding: 15px;
-
-      .logo {
-        display: block;
-        height: 18px;
-        width: auto;
-        position: relative;
-        bottom: -2px;
-        fill: $primary-text-color;
-
-        @media screen and (max-width: $no-gap-breakpoint) {
-          height: 20px;
-        }
-      }
-
-      &:hover,
-      &:focus,
-      &:active {
-        background: lighten($ui-base-color, 12%);
-      }
-    }
-
-    .nav-link {
-      display: flex;
-      align-items: center;
-      padding: 0 1rem;
-      font-size: 12px;
-      font-weight: 500;
-      text-decoration: none;
-      color: $darker-text-color;
-      white-space: nowrap;
-      text-align: center;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-        color: $primary-text-color;
-      }
-
-      @media screen and (max-width: 550px) {
-        &.optional {
-          display: none;
-        }
-      }
-    }
-
-    .nav-button {
-      background: lighten($ui-base-color, 16%);
-      margin: 8px;
-      margin-left: 0;
-      border-radius: 4px;
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: none;
-        background: lighten($ui-base-color, 20%);
-      }
-    }
-  }
-
-  $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;
-      }
-    }
-  }
-
-  .page-header {
-    @media screen and (max-width: $no-gap-breakpoint) {
-      border-bottom: 0;
-    }
-  }
-
-  .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;
-      }
-    }
-
-    .logo-button {
-      padding: 3px 15px;
-    }
-
-    &__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 {
-          min-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: $highlight-text-color;
-      }
-
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
-
-      .verified a {
-        color: $valid-value-color;
-      }
-    }
-
-    .account__header__content {
-      padding: 20px;
-      padding-bottom: 0;
-      color: $primary-text-color;
-    }
-
-    &__extra,
-    .roles {
-      padding: 20px;
-      font-size: 14px;
-      color: $darker-text-color;
-    }
-
-    .roles {
-      padding-bottom: 0;
-    }
-  }
-
-  .directory__list {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-
-    .account-card {
-      display: flex;
-      flex-direction: column;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      display: block;
-
-      .account-card {
-        margin-bottom: 10px;
-        display: block;
-      }
-    }
-  }
-
-  .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%);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss
deleted file mode 100644
index 0c3e42033..000000000
--- a/app/javascript/styles/mastodon/footer.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-.public-layout {
-  .footer {
-    text-align: left;
-    padding-top: 20px;
-    padding-bottom: 60px;
-    font-size: 12px;
-    color: lighten($ui-base-color, 34%);
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-
-    .grid {
-      display: grid;
-      grid-gap: 10px;
-      grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
-
-      .column-0 {
-        grid-column: 1;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      .column-1 {
-        grid-column: 2;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      .column-2 {
-        grid-column: 3;
-        grid-row: 1;
-        min-width: 0;
-        text-align: center;
-
-        h4 a {
-          color: lighten($ui-base-color, 34%);
-        }
-      }
-
-      .column-3 {
-        grid-column: 4;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      .column-4 {
-        grid-column: 5;
-        grid-row: 1;
-        min-width: 0;
-      }
-
-      @media screen and (max-width: 690px) {
-        grid-template-columns: 1fr 2fr 1fr;
-
-        .column-0,
-        .column-1 {
-          grid-column: 1;
-        }
-
-        .column-1 {
-          grid-row: 2;
-        }
-
-        .column-2 {
-          grid-column: 2;
-        }
-
-        .column-3,
-        .column-4 {
-          grid-column: 3;
-        }
-
-        .column-4 {
-          grid-row: 2;
-        }
-      }
-
-      @media screen and (max-width: 600px) {
-        .column-1 {
-          display: block;
-        }
-      }
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        .column-0,
-        .column-1,
-        .column-3,
-        .column-4 {
-          display: none;
-        }
-
-        .column-2 h4 {
-          display: none;
-        }
-      }
-    }
-
-    .legal-xs {
-      display: none;
-      text-align: center;
-      padding-top: 20px;
-
-      @media screen and (max-width: $no-gap-breakpoint) {
-        display: block;
-      }
-    }
-
-    h4 {
-      text-transform: uppercase;
-      font-weight: 700;
-      margin-bottom: 8px;
-      color: $darker-text-color;
-
-      a {
-        color: inherit;
-        text-decoration: none;
-      }
-    }
-
-    ul a,
-    .legal-xs a {
-      text-decoration: none;
-      color: lighten($ui-base-color, 34%);
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: underline;
-      }
-    }
-
-    .brand {
-      .logo {
-        display: block;
-        height: 36px;
-        width: auto;
-        margin: 0 auto;
-        color: lighten($ui-base-color, 34%);
-      }
-
-      &:hover,
-      &:focus,
-      &:active {
-        .logo {
-          color: lighten($ui-base-color, 38%);
-        }
-      }
-    }
-  }
-}
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index 98eb1511c..ccec8e95e 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -53,16 +53,6 @@ body.rtl {
     right: -26px;
   }
 
-  .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;
@@ -350,44 +340,6 @@ body.rtl {
     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 #mastodon-timeline {
-    margin-right: 0;
-    margin-left: 30px;
-  }
-
   @media screen and (min-width: 631px) {
     .column,
     .drawer {
@@ -415,32 +367,6 @@ body.rtl {
     padding-right: 0;
   }
 
-  .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;
diff --git a/app/javascript/styles/mastodon/statuses.scss b/app/javascript/styles/mastodon/statuses.scss
index a3237a630..ce71d11e4 100644
--- a/app/javascript/styles/mastodon/statuses.scss
+++ b/app/javascript/styles/mastodon/statuses.scss
@@ -137,8 +137,7 @@ a.button.logo-button {
   justify-content: center;
 }
 
-.embed,
-.public-layout {
+.embed {
   .status__content[data-spoiler="folded"] {
     .e-content {
       display: none;