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

app/javascript/styles/mastodon/about.scss

@@ -15,117 +15,172 @@ $small-breakpoint: 960px;
   }
 }
 
-.show-xs,
-.show-sm {
-  display: none;
-}
 
-.show-m {
-  display: block;
-}
 
-@media screen and (max-width: $small-breakpoint) {
+.landing-page {
-  .hide-sm {
+  .grid {
-    display: none !important;
+    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;
+    }
   }
 
-  .show-sm {
+  @media screen and (max-width: $small-breakpoint) {
-    display: block !important;
-  }
-}
 
-@media screen and (max-width: $column-breakpoint) {
+    .grid {
-  .hide-xs {
+      grid-template-columns: 40% 60%;
-    display: none !important;
-  }
 
-  .show-xs {
+      .column-0 {
-    display: block !important;
+        display: none;
-  }
+      }
-}
 
-.row {
+      .column-1 {
-  display: flex;
+        grid-column: 1;
-  flex-wrap: wrap;
+        grid-row: 1;
-  margin: 0 -5px;
 
-  @for $i from 1 through 15 {
+        &.non-preview .landing-page__forms {
-    .column-#{$i} {
+          height: 100%;
-      box-sizing: border-box;
-      min-height: 1px;
-      flex: 0 0 percentage($i / 15);
-      max-width: percentage($i / 15);
-      padding: 0 5px;
-
-      @media screen and (max-width: $small-breakpoint) {
-        &-sm {
-          box-sizing: border-box;
-          min-height: 1px;
-          flex: 0 0 percentage($i / 15);
-          max-width: percentage($i / 15);
-          padding: 0 5px;
-
-          @media screen and (max-width: $column-breakpoint) {
-            max-width: 100%;
-            flex: 0 0 100%;
-            margin-bottom: 10px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
         }
       }
 
-      @media screen and (max-width: $column-breakpoint) {
+      .column-2 {
-        max-width: 100%;
+        grid-column: 2;
-        flex: 0 0 100%;
+        grid-row: 1 / 3;
-        margin-bottom: 10px;
 
-        &:last-child {
+        &.non-preview {
-          margin-bottom: 0;
+          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;
         }
       }
     }
   }
-}
 
-.column-flex {
+  @media screen and (max-width: $column-breakpoint) {
-  display: flex;
+    .grid {
-  flex-direction: column;
+      grid-template-columns: auto;
-}
 
-.separator-or {
+      .column-0 {
-  position: relative;
+        display: block;
-  margin: 40px 0;
+        grid-column: 1;
-  text-align: center;
+        grid-row: 1;
+      }
 
-  &::before {
+      .column-1 {
-    content: "";
+        grid-column: 1;
-    display: block;
+        grid-row: 3;
-    width: 100%;
+
-    height: 0;
+        .brand {
-    border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+          display: none;
-    position: absolute;
+        }
-    top: 50%;
+      }
-    left: 0;
+
+      .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;
+        }
+      }
+    }
   }
 
-  span {
+  .column-flex {
-    display: inline-block;
+    display: flex;
-    background: $ui-base-color;
+    flex-direction: column;
-    font-size: 12px;
+  }
-    font-weight: 500;
+
-    color: $ui-primary-color;
+  .separator-or {
-    text-transform: uppercase;
     position: relative;
-    z-index: 1;
+    margin: 40px 0;
-    padding: 0 8px;
+    text-align: center;
-    cursor: default;
+
-  }
+    &::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: $ui-primary-color;
+      text-transform: uppercase;
+      position: relative;
+      z-index: 1;
+      padding: 0 8px;
+      cursor: default;
+    }
+  }
 
-.landing-page {
   p,
   li {
     font-family: 'mastodon-font-sans-serif', sans-serif;
@@ -539,6 +594,7 @@ $small-breakpoint: 960px;
 
       img {
         position: static;
+        padding: 10px 0;
       }
 
       @media screen and (max-width: $small-breakpoint) {
@@ -558,18 +614,33 @@ $small-breakpoint: 960px;
   }
 
   &__call-to-action {
-    margin-bottom: 10px;
     background: darken($ui-base-color, 4%);
     border-radius: 4px;
     padding: 25px 40px;
     overflow: hidden;
 
     .row {
+      display: flex;
+      flex-direction: row-reverse;
+      flex-wrap: wrap;
+      justify-content: space-between;
       align-items: center;
     }
 
-    .information-board__section {
+    .row__information-board {
-      padding: 0;
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+
+      .information-board__section {
+        flex: 1 0 80px;
+        padding: 0 5px;
+      }
+    }
+
+    .row__mascot {
+      flex: 1;
+      margin: 10px -50px 0 0;
     }
   }
 
@@ -619,6 +690,8 @@ $small-breakpoint: 960px;
 
   &__short-description {
     .row {
+      display: flex;
+      flex-wrap: wrap;
       align-items: center;
       margin-bottom: 40px;
     }
@@ -668,7 +741,6 @@ $small-breakpoint: 960px;
     height: 100%;
 
     @media screen and (max-width: $small-breakpoint) {
-      margin-bottom: 10px;
       height: auto;
     }
 
@@ -717,6 +789,7 @@ $small-breakpoint: 960px;
     width: 100%;
     flex: 1 1 auto;
     overflow: hidden;
+    height: 100%;
 
     .column-header {
       color: inherit;

app/views/about/show.html.haml

@@ -8,51 +8,100 @@
 
 .landing-page.alternative
   .container
-    .row
+    .grid
-      .column-4.hide-sm.show-xs.show-m
+      .column-0
-        .landing-page__forms
+        .brand
-          .brand
+          = link_to root_url do
-            = link_to root_url do
+            = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
-              = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
 
-          .hide-xs
+      - if Setting.timeline_preview
-            = render 'forms'
+        .column-1
-
-      .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
-
-        .landing-page__information
-          .landing-page__short-description
-            .row
-              .landing-page__logo.hide-xs
-                = 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)
-
-        .show-xs
           .landing-page__forms
+            .brand
+              = link_to root_url do
+                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
+
             = render 'forms'
-        .landing-page__call-to-action.hide-xs
+
-          .row
+      - else
-            .column-5
+        .column-1.non-preview
-              .landing-page__mascot
+          .landing-page__forms
-                = image_tag asset_pack_path('elephant_ui_plane.svg')
+            .brand
-            .column-5
+              = link_to root_url do
-              .information-board__section
+                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
-                %span= t 'about.user_count_before'
+
-                %strong= number_with_delimiter @instance_presenter.user_count
+            = render 'forms'
-                %span= t 'about.user_count_after'
+
-            .column-5
+      - if Setting.timeline_preview
-              .information-board__section
+        .column-2
-                %span= t 'about.status_count_before'
+          .landing-page__hero
-                %strong= number_with_delimiter @instance_presenter.status_count
+            = image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
-                %span= t 'about.status_count_after'
+
-        .landing-page__information
+          .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
+              .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')
+
+      - 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
+
+          .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
+              .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
+      - else
-        .show-sm.hide-xs
+        .column-4.non-preview.landing-page__information
-          .landing-page__forms
+          .landing-page__features
-            .brand
+            %h3= t 'about.what_is_mastodon'
-              = link_to root_url do
+            %p= t 'about.about_mastodon_html'
-                = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
 
-            = render 'forms'
+            = render 'features'
-        - if Setting.timeline_preview
+
-          #mastodon-timeline{ data: { props: Oj.dump(default_props) } }
+            .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})"