Better grid layout for the landing page (#6543)

* Use grid layout for the landing page

* Fix column settings

Set the ratio explicitly

* Improve information board

1 files changed, 101 insertions, 47 deletions

diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
index fd1cda8b39b..4f3cedacd65 100644
--- a/app/views/about/show.html.haml
+++ b/app/views/about/show.html.haml
@@ -8,51 +8,100 @@
 
 .landing-page.alternative
   .container
-    .row
-      .column-4.hide-sm.show-xs.show-m
-        .landing-page__forms
-          .brand
-            = link_to root_url do
-              = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
-
-          .hide-xs
+    .grid
+      .column-0
+        .brand
+          = link_to root_url do
+            = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
+      - if Setting.timeline_preview
+        .column-1
+          .landing-page__forms
+            .brand
+              = link_to root_url do
+                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
             = render 'forms'
 
-      .column-7.column-9-sm
-        .landing-page__hero
-          = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
+      - else
+        .column-1.non-preview
+          .landing-page__forms
+            .brand
+              = link_to root_url do
+                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
 
-        .landing-page__information
-          .landing-page__short-description
+            = render 'forms'
+
+      - if Setting.timeline_preview
+        .column-2
+          .landing-page__hero
+            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
+
+          .landing-page__information
+            .landing-page__short-description
+              .row
+                .landing-page__logo
+                  = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
+
+                %h1
+                  = @instance_presenter.site_title
+                  %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
+
+              %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
+
+          .landing-page__call-to-action
             .row
-              .landing-page__logo.hide-xs
-                = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
+              .row__information-board
+                .information-board__section
+                  %span= t 'about.user_count_before'
+                  %strong= number_with_delimiter @instance_presenter.user_count
+                  %span= t 'about.user_count_after'
+                .information-board__section
+                  %span= t 'about.status_count_before'
+                  %strong= number_with_delimiter @instance_presenter.status_count
+                  %span= t 'about.status_count_after'
+              .row__mascot
+                .landing-page__mascot
+                  = image_tag asset_pack_path('elephant_ui_plane.svg')
 
-              %h1
-                = @instance_presenter.site_title
-                %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
+      - else
+        .column-2.non-preview
+          .landing-page__hero
+            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
 
-            %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
+          .landing-page__information
+            .landing-page__short-description
+              .row
+                .landing-page__logo
+                  = image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
 
-        .show-xs
-          .landing-page__forms
-            = render 'forms'
-        .landing-page__call-to-action.hide-xs
-          .row
-            .column-5
-              .landing-page__mascot
-                = image_tag asset_pack_path('elephant_ui_plane.svg')
-            .column-5
-              .information-board__section
-                %span= t 'about.user_count_before'
-                %strong= number_with_delimiter @instance_presenter.user_count
-                %span= t 'about.user_count_after'
-            .column-5
-              .information-board__section
-                %span= t 'about.status_count_before'
-                %strong= number_with_delimiter @instance_presenter.status_count
-                %span= t 'about.status_count_after'
-        .landing-page__information
+                %h1
+                  = @instance_presenter.site_title
+                  %small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
+
+              %p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
+
+          .landing-page__call-to-action
+            .row
+              .row__information-board
+                .information-board__section
+                  %span= t 'about.user_count_before'
+                  %strong= number_with_delimiter @instance_presenter.user_count
+                  %span= t 'about.user_count_after'
+                .information-board__section
+                  %span= t 'about.status_count_before'
+                  %strong= number_with_delimiter @instance_presenter.status_count
+                  %span= t 'about.status_count_after'
+              .row__mascot
+                .landing-page__mascot
+                  = image_tag asset_pack_path('elephant_ui_plane.svg')
+
+      - if Setting.timeline_preview
+        .column-3
+          #mastodon-timeline{ data: { props: Oj.dump(default_props) } }
+
+      - if Setting.timeline_preview
+        .column-4.landing-page__information
           .landing-page__features
             %h3= t 'about.what_is_mastodon'
             %p= t 'about.about_mastodon_html'
@@ -67,13 +116,18 @@
               = link_to t('about.source_code'), @instance_presenter.source_url
               = " (#{@instance_presenter.version_number})"
 
-      .column-4.column-6-sm.column-flex
-        .show-sm.hide-xs
-          .landing-page__forms
-            .brand
-              = link_to root_url do
-                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+      - else
+        .column-4.non-preview.landing-page__information
+          .landing-page__features
+            %h3= t 'about.what_is_mastodon'
+            %p= t 'about.about_mastodon_html'
 
-            = render 'forms'
-        - if Setting.timeline_preview
-          #mastodon-timeline{ data: { props: Oj.dump(default_props) } }
+            = render 'features'
+
+            .landing-page__features__action
+              = link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative'
+
+          .landing-page__footer
+            %p
+              = link_to t('about.source_code'), @instance_presenter.source_url
+              = " (#{@instance_presenter.version_number})"