Improved home (/about) for better UX

Gemfile.lock

@@ -789,3 +789,9 @@ DEPENDENCIES
   webpacker (~> 5.4)
   webpush (~> 0.3)
   xorcist (~> 1.1)
+
+RUBY VERSION
+   ruby 2.7.4p191
+
+BUNDLED WITH
+   2.2.29

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

@@ -526,8 +526,16 @@ html {
 }
 
 .landing .hero-widget__text {
+  text-align: center;
   border-top: 0;
   border-bottom: 0;
+  padding-top: 2em;
+
+  p {
+    font-size: 1.1em;
+    line-height: 1.5em;
+  }
+
 }
 
 .simple_form {
@@ -542,13 +550,17 @@ html {
   }
 }
 
-.landing .hero-widget__footer {
-  background: $white;
-  border: 1px solid lighten($ui-base-color, 8%);
-  border-top: 0;
-
-  @media screen and (max-width: $no-gap-breakpoint) {
-    border: 0;
+.landing {
+  .hero-widget__footer {
+    background: $white;
+  }
+  .hero-widget__img {
+    border-radius: 50%;
+    max-width: 20em;
+    height: 20em;
+    margin: auto;
+    box-shadow: 0px 0px 2em #0000004f;
+    border: 1px solid #2f2f2f;
   }
 }
 

app/javascript/styles/mastodon/about.scss

@@ -679,6 +679,14 @@ $small-breakpoint: 960px;
   }
 }
 
+.landing__grid__column.landing__grid__column-registration {
+  display: flex;
+
+  .directory {
+    margin: auto;
+  }
+}
+
 .landing {
   margin-bottom: 100px;
 

app/views/about/show.html.haml

@@ -24,35 +24,6 @@
         %div.button.right=t 'auth.login'
 
   .landing__grid
-    .landing__grid__column.landing__grid__column-registration
-      .directory
-        - if Setting.profile_directory
-          .directory__tag
-            = optional_link_to Setting.profile_directory, explore_path do
-              %h4
-                = fa_icon 'address-book fw'
-                = t('about.discover_users')
-                %small= t('about.browse_directory')
-
-              .avatar-stack
-                - @instance_presenter.sample_accounts.each do |account|
-                  = image_tag current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url, alt: '', class: 'account__avatar'
-
-        - if Setting.timeline_preview
-          .directory__tag
-            = optional_link_to Setting.timeline_preview, public_timeline_path do
-              %h4
-                = fa_icon 'globe fw'
-                = t('about.see_whats_happening')
-                %small= t('about.browse_public_posts')
-
-        .directory__tag
-          = link_to 'https://joinmastodon.org/apps', target: '_blank', rel: 'noopener noreferrer' do
-            %h4
-              = fa_icon 'tablet fw'
-              = t('about.get_apps')
-              %small= t('about.apps_platforms')
-
     .landing__grid__column.landing__grid__column-login
       .hero-widget
         .hero-widget__img
@@ -83,3 +54,33 @@
                 %span
                   = t 'about.active_count_after'
                   %abbr{ title: t('about.active_footnote') } *
+
+    .landing__grid__column.landing__grid__column-registration
+      .directory
+        - if Setting.profile_directory
+          .directory__tag
+            = optional_link_to Setting.profile_directory, explore_path do
+              %h4
+                = fa_icon 'address-book fw'
+                = t('about.discover_users')
+                %small= t('about.browse_directory')
+
+              .avatar-stack
+                - @instance_presenter.sample_accounts.each do |account|
+                  = image_tag current_account&.user&.setting_auto_play_gif ? account.avatar_original_url : account.avatar_static_url, alt: '', class: 'account__avatar'
+
+        - if Setting.timeline_preview
+          .directory__tag
+            = optional_link_to Setting.timeline_preview, public_timeline_path do
+              %h4
+                = fa_icon 'globe fw'
+                = t('about.see_whats_happening')
+                %small= t('about.browse_public_posts')
+
+        .directory__tag
+          = link_to 'https://joinmastodon.org/apps', target: '_blank', rel: 'noopener noreferrer' do
+            %h4
+              = fa_icon 'tablet fw'
+              = t('about.get_apps')
+              %small= t('about.apps_platforms')
+