Restore 2.7 landing page

app/javascript/mastodon/components/status_action_bar.js

@@ -249,7 +249,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='status__action-bar'>
-        <div className='status__action-bar__counter'><IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} />
+        <div className='status__action-bar__counter'><IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
         <IconButton className='status__action-bar-button' disabled={!publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='floppy-o' onClick={this.handleFavouriteClick} />
         {shareButton}

app/javascript/styles/mastodon/about.scss

@@ -193,7 +193,6 @@ $small-breakpoint: 960px;
     }
 
     strong {
-      font-family: $font-display, sans-serif;
       font-weight: 500;
       font-size: 32px;
       line-height: 48px;
@@ -281,6 +280,168 @@ $small-breakpoint: 960px;
 }
 
 .landing-page {
+  .grid {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 2fr;
+    grid-auto-columns: 25%;
+    grid-auto-rows: max-content;
+
+    .column-0 {
+      display: none;
+    }
+
+    .column-1 {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .column-2 {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .column-3 {
+      grid-column: 3;
+      grid-row: 1 / 3;
+    }
+
+    .column-4 {
+      grid-column: 1 / 3;
+      grid-row: 2;
+    }
+  }
+
+  @media screen and (max-width: $small-breakpoint) {
+    .grid {
+      grid-template-columns: 40% 60%;
+
+      .column-0 {
+        display: none;
+      }
+
+      .column-1 {
+        grid-column: 1;
+        grid-row: 1;
+
+        &.non-preview .landing-page__forms {
+          height: 100%;
+        }
+      }
+
+      .column-2 {
+        grid-column: 2;
+        grid-row: 1 / 3;
+
+        &.non-preview {
+          grid-column: 2;
+          grid-row: 1;
+        }
+      }
+
+      .column-3 {
+        grid-column: 1;
+        grid-row: 2 / 4;
+      }
+
+      .column-4 {
+        grid-column: 2;
+        grid-row: 3;
+
+        &.non-preview {
+          grid-column: 1 / 3;
+          grid-row: 2;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: $column-breakpoint) {
+    .grid {
+      grid-template-columns: 100%;
+
+      .column-0 {
+        display: block;
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      .column-1 {
+        grid-column: 1;
+        grid-row: 3;
+
+        .brand {
+          display: none;
+        }
+      }
+
+      .column-2 {
+        grid-column: 1;
+        grid-row: 2;
+
+        .landing-page__logo,
+        .landing-page__call-to-action {
+          display: none;
+        }
+
+        &.non-preview {
+          grid-column: 1;
+          grid-row: 2;
+        }
+      }
+
+      .column-3 {
+        grid-column: 1;
+        grid-row: 5;
+      }
+
+      .column-4 {
+        grid-column: 1;
+        grid-row: 4;
+
+        &.non-preview {
+          grid-column: 1;
+          grid-row: 4;
+        }
+      }
+    }
+  }
+
+  .column-flex {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .separator-or {
+    position: relative;
+    margin: 40px 0;
+    text-align: center;
+
+    &::before {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 0;
+      border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+      position: absolute;
+      top: 50%;
+      left: 0;
+    }
+
+    span {
+      display: inline-block;
+      background: $ui-base-color;
+      font-size: 12px;
+      font-weight: 500;
+      color: $darker-text-color;
+      text-transform: uppercase;
+      position: relative;
+      z-index: 1;
+      padding: 0 8px;
+      cursor: default;
+    }
+  }
+
   p,
   li {
     font-family: $font-sans-serif, sans-serif;
@@ -297,6 +458,28 @@ $small-breakpoint: 960px;
     }
   }
 
+  .closed-registrations-message {
+    margin-top: 20px;
+
+    &,
+    p {
+      text-align: center;
+      font-size: 12px;
+      line-height: 18px;
+      color: $darker-text-color;
+      margin-bottom: 0;
+
+      a {
+        color: $highlight-text-color;
+        text-decoration: underline;
+      }
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
   em {
     display: inline;
     margin: 0;
@@ -410,6 +593,187 @@ $small-breakpoint: 960px;
     }
   }
 
+  .container-alt {
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 800px;
+    margin: 0 auto;
+    word-wrap: break-word;
+  }
+
+  .header-wrapper {
+    padding-top: 15px;
+    background: $ui-base-color;
+    background: linear-gradient(150deg, lighten($ui-base-color, 8%), $ui-base-color);
+    position: relative;
+
+    &.compact {
+      background: $ui-base-color;
+      padding-bottom: 15px;
+
+      .hero .heading {
+        padding-bottom: 20px;
+        font-family: $font-sans-serif, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 30px;
+        color: $darker-text-color;
+
+        a {
+          color: $highlight-text-color;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  .brand {
+    a {
+      padding-left: 0;
+      padding-right: 0;
+      color: $white;
+    }
+
+    img {
+      height: 32px;
+      position: relative;
+      top: 4px;
+      left: -10px;
+    }
+  }
+
+  .header {
+    line-height: 30px;
+    overflow: hidden;
+
+    .container-alt {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .links {
+      position: relative;
+      z-index: 4;
+
+      a {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: $darker-text-color;
+        text-decoration: none;
+        padding: 12px 16px;
+        line-height: 32px;
+        font-family: $font-display, sans-serif;
+        font-weight: 500;
+        font-size: 14px;
+
+        &:hover {
+          color: $secondary-text-color;
+        }
+      }
+
+      ul {
+        list-style: none;
+        margin: 0;
+
+        li {
+          display: inline-block;
+          vertical-align: bottom;
+          margin: 0;
+
+          &:first-child a {
+            padding-left: 0;
+          }
+
+          &:last-child a {
+            padding-right: 0;
+          }
+        }
+      }
+    }
+
+    .hero {
+      margin-top: 50px;
+      align-items: center;
+      position: relative;
+
+      .heading {
+        position: relative;
+        z-index: 4;
+        padding-bottom: 150px;
+      }
+
+      .simple_form,
+      .closed-registrations-message {
+        background: darken($ui-base-color, 4%);
+        width: 280px;
+        padding: 15px 20px;
+        border-radius: 4px 4px 0 0;
+        line-height: initial;
+        position: relative;
+        z-index: 4;
+
+        .actions {
+          margin-bottom: 0;
+
+          button,
+          .button,
+          .block-button {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      .closed-registrations-message {
+        min-height: 330px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+    }
+  }
+
+  .about-short {
+    background: darken($ui-base-color, 4%);
+    padding: 50px 0 30px;
+    font-family: $font-sans-serif, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 30px;
+    color: $darker-text-color;
+
+    a {
+      color: $highlight-text-color;
+      text-decoration: underline;
+    }
+  }
+
+  &.alternative {
+    padding: 10px 0;
+
+    .brand {
+      text-align: center;
+      padding: 30px 0;
+      margin-bottom: 10px;
+
+      img {
+        position: static;
+        padding: 10px 0;
+      }
+
+      @media screen and (max-width: $small-breakpoint) {
+        padding: 15px 0;
+      }
+
+      @media screen and (max-width: $column-breakpoint) {
+        padding: 0;
+        margin-bottom: -10px;
+      }
+    }
+  }
+
   &__information,
   &__forms {
     padding: 20px;
@@ -603,7 +967,215 @@ $small-breakpoint: 960px;
     }
   }
 
+  &__forms {
+    height: 100%;
+
+    @media screen and (max-width: $small-breakpoint) {
+      height: auto;
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      background: transparent;
+      box-shadow: none;
+      padding: 0 20px;
+      margin-top: 30px;
+      margin-bottom: 40px;
+
+      .separator-or {
+        span {
+          background: darken($ui-base-color, 8%);
+        }
+      }
+    }
+
+    hr {
+      margin: 40px 0;
+    }
+
+    .button {
+      display: block;
+    }
+
+    .subtle-hint a {
+      text-decoration: none;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  #mastodon-timeline {
+    display: flex;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    font-family: $font-sans-serif, sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    font-weight: 400;
+    color: $primary-text-color;
+    width: 100%;
+    flex: 1 1 auto;
+    overflow: hidden;
+    height: 100%;
+
+    .column-header {
+      color: inherit;
+      font-family: inherit;
+      font-size: 16px;
+      line-height: inherit;
+      font-weight: inherit;
+      margin: 0;
+      padding: 0;
+    }
+
+    .column {
+      padding: 0;
+      border-radius: 4px;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .scrollable {
+      height: 400px;
+    }
+
+    p {
+      font-size: inherit;
+      line-height: inherit;
+      font-weight: inherit;
+      color: $primary-text-color;
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      a {
+        color: $secondary-text-color;
+        text-decoration: none;
+      }
+    }
+
+    .attachment-list__list {
+      margin-left: 0;
+      list-style: none;
+
+      li {
+        font-size: inherit;
+        line-height: inherit;
+        font-weight: inherit;
+        margin-bottom: 0;
+
+        a {
+          color: $dark-text-color;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      display: none;
+    }
+  }
+
+  &__features {
+    & > p {
+      padding-right: 60px;
+    }
+
+    .features-list {
+      margin: 40px 0;
+      margin-top: 30px;
+    }
+
+    &__action {
+      text-align: center;
+    }
+  }
+
+  .features-list {
+    .features-list__row {
+      display: flex;
+      padding: 10px 0;
+      justify-content: space-between;
+
+      .visual {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        margin-left: 15px;
+
+        .fa {
+          display: block;
+          color: $darker-text-color;
+          font-size: 48px;
+        }
+      }
+
+      .text {
+        font-size: 16px;
+        line-height: 30px;
+        color: $darker-text-color;
+
+        h6 {
+          font-size: inherit;
+          line-height: inherit;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    @media screen and (min-width: $small-breakpoint) {
+      display: grid;
+      grid-gap: 30px;
+      grid-template-columns: 1fr 1fr;
+      grid-auto-columns: 50%;
+      grid-auto-rows: max-content;
+    }
+  }
+
+  .footer-links {
+    padding-bottom: 50px;
+    text-align: right;
+    color: $dark-text-color;
+
+    p {
+      font-size: 14px;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+
+  &__footer {
+    margin-top: 10px;
+    text-align: center;
+    color: $dark-text-color;
+
+    p {
+      font-size: 14px;
+
+      a {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
+  }
+
   @media screen and (max-width: 840px) {
+    .container-alt {
+      padding: 0 20px;
+    }
+
     .information-board {
       .container-alt {
         padding-right: 20px;
@@ -639,217 +1211,109 @@ $small-breakpoint: 960px;
     .features .container-alt {
       display: block;
     }
+
+    .header {
+      .links {
+        padding-top: 15px;
+        background: darken($ui-base-color, 4%);
+
+        a {
+          padding: 12px 8px;
+        }
+
+        .nav {
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: space-around;
+        }
+
+        .brand img {
+          left: 0;
+          top: 0;
+        }
+      }
+
+      .hero {
+        margin-top: 30px;
+        padding: 0;
+
+        .heading {
+          padding: 30px 20px;
+          text-align: center;
+        }
+
+        .simple_form,
+        .closed-registrations-message {
+          background: darken($ui-base-color, 8%);
+          width: 100%;
+          border-radius: 0;
+          box-sizing: border-box;
+        }
+      }
+    }
   }
 
   .cta {
     margin: 20px;
   }
-}
 
-.landing {
+  &.tag-page {
-  margin-bottom: 100px;
+    @media screen and (max-width: $column-breakpoint) {
-
+      padding: 0;
-  @media screen and (max-width: 738px) {
+
-    margin-bottom: 0;
+      .container {
-  }
-
-  &__brand {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 50px;
-
-    img {
-      height: 52px;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
         padding: 0;
-      margin-bottom: 30px;
-    }
       }
 
-  .directory {
+      #mastodon-timeline {
-    margin-top: 30px;
+        display: flex;
-    background: transparent;
+        height: 100vh;
-    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 {
+    .grid {
-      border-radius: 0;
+      @media screen and (min-width: $small-breakpoint) {
-      padding-bottom: 0;
+        grid-template-columns: 33% 67%;
       }
 
-    &__footer {
+      .column-2 {
-      background: $ui-base-color;
+        grid-column: 2;
-      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-align: unset;
-  text-decoration: none;
+      padding: 0;
-}
 
-.brand__tagline {
+      img {
-  display: block;
+        height: 48px;
-  position: absolute;
-  bottom: -10px;
-  left: 50px;
-  width: 300px;
-  color: $ui-primary-color;
-  text-decoration: none;
-  font-size: 14px;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    position: static;
         width: auto;
-    margin-top: 20px;
-    color: $dark-text-color;
       }
     }
 
+    .cta {
+      margin: 0;
+
+      .button {
+        margin-right: 4px;
+      }
+    }
+
+    @media screen and (max-width: $column-breakpoint) {
+      .grid {
+        grid-gap: 0;
+
+        .column-1 {
+          grid-column: 1;
+          grid-row: 1;
+        }
+
+        .column-2 {
+          display: none;
+        }
+      }
+    }
+  }
+}

app/presenters/instance_presenter.rb

@@ -8,6 +8,7 @@ class InstancePresenter
     :site_description,
     :site_extended_description,
     :site_terms,
+    :open_registrations,
     :closed_registrations_message,
     to: Setting
   )

app/views/about/_features.html.haml

@@ -0,0 +1,25 @@
+.features-list
+  .features-list__row
+    .text
+      %h6= t 'about.features.real_conversation_title'
+      = t 'about.features.real_conversation_body'
+    .visual
+      = fa_icon 'fw comments'
+  .features-list__row
+    .text
+      %h6= t 'about.features.not_a_product_title'
+      = t 'about.features.not_a_product_body'
+    .visual
+      = fa_icon 'fw users'
+  .features-list__row
+    .text
+      %h6= t 'about.features.within_reach_title'
+      = t 'about.features.within_reach_body'
+    .visual
+      = fa_icon 'fw mobile'
+  .features-list__row
+    .text
+      %h6= t 'about.features.humane_approach_title'
+      = t 'about.features.humane_approach_body'
+    .visual
+      = fa_icon 'fw leaf'

app/views/about/_forms.html.haml

@@ -0,0 +1,15 @@
+- if @instance_presenter.open_registrations
+  = render 'registration'
+- else
+  = link_to t('auth.register_elsewhere'), 'https://joinmastodon.org', class: 'button button-primary'
+
+  .closed-registrations-message
+    - if @instance_presenter.closed_registrations_message.blank?
+      %p= t('about.closed_registrations')
+    - else
+      = @instance_presenter.closed_registrations_message.html_safe
+
+.separator-or
+  %span= t('auth.or')
+
+= link_to t('auth.login'), new_user_session_path, class: 'button button-alternative-2 webapp-btn'

app/views/about/_links.html.haml

@@ -0,0 +1,16 @@
+.container-alt.links
+  .brand
+    = link_to root_url do
+      = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
+  %ul.nav
+    %li
+      - if user_signed_in?
+        = link_to t('settings.back'), root_url, class: 'webapp-btn'
+      - else
+        = link_to t('auth.login'), new_user_session_path, class: 'webapp-btn'
+    %li= link_to t('about.about_this'), about_more_path
+    %li
+      = link_to 'https://joinmastodon.org/' do
+        = "#{t('about.other_instances')}"
+        %i.fa.fa-external-link{ style: 'padding-left: 5px;' }

app/views/about/_registration.html.haml

@@ -1,28 +1,12 @@
 = simple_form_for(new_user, url: user_registration_path) do |f|
-  .simple_form__overlay-area
-    %p.lead= t('about.federation_hint_html', instance: content_tag(:strong, site_hostname))
-
-    .fields-group
   = f.simple_fields_for :account do |account_fields|
-        = account_fields.input :username, wrapper: :with_label, label: false, required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.username') }, append: "@#{site_hostname}", hint: false, disabled: closed_registrations?
+    = account_fields.input :username, wrapper: :with_label, autofocus: true, label: false, required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.username'), :autocomplete => 'off', placeholder: t('simple_form.labels.defaults.username') }, append: "@#{site_hostname}", hint: false
 
-      = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false, disabled: closed_registrations?
+  = f.input :email, placeholder: t('simple_form.labels.defaults.email'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.email'), :autocomplete => 'off' }, hint: false
-      = f.input :password, placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false, disabled: closed_registrations?
+  = f.input :password, placeholder: t('simple_form.labels.defaults.password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.password'), :autocomplete => 'off' }, hint: false
-      = f.input :password_confirmation, placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'off' }, hint: false, disabled: closed_registrations?
+  = f.input :password_confirmation, placeholder: t('simple_form.labels.defaults.confirm_password'), required: true, input_html: { 'aria-label' => t('simple_form.labels.defaults.confirm_password'), :autocomplete => 'off' }, hint: false
-
-    - if approved_registrations?
-      .fields-group
-        = f.simple_fields_for :invite_request do |invite_request_fields|
-          = invite_request_fields.input :text, as: :text, wrapper: :with_block_label, required: false
-
-    .fields-group
-      = f.input :agreement, as: :boolean, wrapper: :with_label, label: t('auth.checkbox_agreement_html', rules_path: about_more_path, terms_path: terms_path), disabled: closed_registrations?
 
   .actions
-      = f.button :button, sign_up_message, type: :submit, class: 'button button-primary', disabled: closed_registrations?
+    = f.button :button, t('auth.register'), type: :submit, class: 'button button-primary'
 
-    - if closed_registrations? && @instance_presenter.closed_registrations_message.present?
+  %p.hint.subtle-hint=t('auth.agreement_html', rules_path: about_more_path, terms_path: terms_path)
-      .simple_form__overlay-area__overlay
-        .simple_form__overlay-area__overlay__content.rich-formatting
-          .block-icon= fa_icon 'warning'
-          = @instance_presenter.closed_registrations_message.html_safe

app/views/about/show.html.haml

@@ -7,13 +7,13 @@
 
 .landing-page.alternative
   .header{ style: 'display: none' }
-    = image_tag asset_pack_path('header-cybre-alt.jpg'), alt: @instance_presenter.site_title
+    = image_pack_tag 'header-cybre-alt.jpg', alt: @instance_presenter.site_title
   .container
     .grid
       .column-0
         .brand
           = link_to root_url do
-            = image_tag asset_pack_path('logo-cybre.png')
+            = image_pack_tag 'logo-cybre.png'
             = Setting.site_title
 
       - if Setting.timeline_preview
@@ -21,7 +21,7 @@
           .landing-page__forms
             .brand
               = link_to root_url do
-                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+                = image_pack_tag 'logo_full.svg', alt: 'Mastodon'
 
             = render 'forms'
 
@@ -30,7 +30,7 @@
           .landing-page__forms
             .brand
               = link_to root_url do
-                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+                = image_pack_tag 'logo_full.svg', alt: 'Mastodon'
 
             = render 'forms'
 
@@ -43,7 +43,7 @@
             .landing-page__short-description
               .row
                 .landing-page__logo
-                  = image_tag asset_pack_path('logo-cybre.png'), alt: 'Cybrespace'
+                  = image_pack_tag 'logo-cybre.png', alt: 'Cybrespace'
 
                 %h1
                   = @instance_presenter.site_title
@@ -65,11 +65,11 @@
               .row__mascot
                 .landing-page__mascot
                   .floats.float-1
-                    = image_tag asset_pack_path('floppy-3.svg')
+                    = image_pack_tag 'floppy-3.svg'
                   .floats.float-2
-                    = image_tag asset_pack_path('floppy-1.svg')
+                    = image_pack_tag 'floppy-1.svg'
                   .floats.float-3
-                    = image_tag asset_pack_path('floppy-2.svg')
+                    = image_pack_tag 'floppy-2.svg'
 
       - else
         .column-2.non-preview
@@ -80,7 +80,7 @@
             .landing-page__short-description
               .row
                 .landing-page__logo
-                  = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
+                  = image_pack_tag 'logo_transparent.svg', alt: 'Mastodon'
 
                 %h1
                   = @instance_presenter.site_title