Grid layout for tag pages (#6545)

* Use grid layout for the landing page

* Use grid layout for tag pages

* Set 2 columns width as explicit percentage for tag pages

app/javascript/styles/mastodon/about.scss

@@ -1015,26 +1015,20 @@ $small-breakpoint: 960px;
   }
 
   &.tag-page {
-    .features {
+    .grid {
-      padding: 30px 0;
+      @media screen and (min-width: $small-breakpoint) {
-
+        grid-template-columns: 33% 67%;
-      .container-alt {
-        max-width: 820px;
-
-        #mastodon-timeline {
-          margin-right: 0;
-          border-top-right-radius: 0;
       }
 
-        .about-mastodon {
+      .column-2 {
-          .about-hashtag {
+        grid-column: 2;
-            background: darken($ui-base-color, 4%);
+        grid-row: 1;
-            padding: 0 20px 20px 30px;
+      }
-            border-radius: 0 5px 5px 0;
+    }
 
     .brand {
-              padding-top: 20px;
+      text-align: unset;
-              margin-bottom: 20px;
+      padding: 0;
 
       img {
         height: 48px;
@@ -1042,13 +1036,6 @@ $small-breakpoint: 960px;
       }
     }
 
-            p {
-              strong {
-                color: $ui-secondary-color;
-                font-weight: 700;
-              }
-            }
-
     .cta {
       margin: 0;
 
@@ -1056,53 +1043,27 @@ $small-breakpoint: 960px;
         margin-right: 4px;
       }
     }
+
+    @media screen and (max-width: $column-breakpoint) {
+      .grid {
+        .column-1 {
+          grid-column: 1;
+          grid-row: 2;
         }
 
-          .features-list {
+        .column-2 {
-            margin-left: 30px;
+          grid-column: 1;
-            margin-right: 10px;
+          grid-row: 1;
-          }
-        }
         }
       }
 
-    @media screen and (max-width: 675px) {
+      .brand {
-      .features {
+        margin: 0;
-        padding: 10px 0;
-
-        .container-alt {
-          display: flex;
-          flex-direction: column;
-
-          #mastodon-timeline {
-            order: 2;
-            flex: 0 0 auto;
-            height: 60vh;
-            margin-bottom: 20px;
-            border-top-right-radius: 4px;
       }
 
-          .about-mastodon {
+      .landing-page__features {
-            order: 1;
-            flex: 0 0 auto;
-            max-width: 100%;
-
-            .about-hashtag {
-              background: unset;
-              padding: 0;
-              border-radius: 0;
-
-              .cta {
-                margin: 20px 0;
-              }
-            }
-
-            .features-list {
         display: none;
       }
     }
   }
 }
-    }
-  }
-}

app/views/tags/_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/tags/show.html.haml

@@ -6,13 +6,16 @@
   = javascript_pack_tag 'about', integrity: true, crossorigin: 'anonymous'
   = render 'og'
 
-.landing-page.tag-page
+.landing-page.tag-page.alternative
   .features
     .container
+      .grid
+        .column-1
           #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
 
+        .column-2
           .about-mastodon
-        .about-hashtag
+            .about-hashtag.landing-page__information
               .brand
                 = link_to root_url do
                   = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
@@ -26,28 +29,8 @@
                   = link_to t('auth.login'), new_user_session_path, class: 'button button-secondary'
                 = link_to t('about.learn_more'), about_path, class: 'button button-alternative'
 
-        .features-list
+            .landing-page__features.landing-page__information
-          .features-list__row
+              %h3= t 'about.what_is_mastodon'
-            .text
+              %p= t 'about.about_mastodon_html'
-              %h6= t 'about.features.real_conversation_title'
+
-              = t 'about.features.real_conversation_body'
+              = render 'features'
-            .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'