Adjust public hashtag pages (#5357)

app/javascript/styles/about.scss

@@ -704,7 +704,6 @@
     .features #mastodon-timeline {
       height: 70vh;
       width: 100%;
-      min-width: 330px;
       margin-bottom: 50px;
 
       .column {
@@ -718,6 +717,23 @@
   }
 
   &.tag-page {
+    .features {
+      padding: 30px 0;
+
+      .container {
+        max-width: 820px;
+
+        #mastodon-timeline {
+          margin-right: 0;
+          border-top-right-radius: 0;
+        }
+
+        .about-mastodon {
+          .about-hashtag {
+            background: darken($ui-base-color, 4%);
+            padding: 0 20px 20px 30px;
+            border-radius: 0 5px 5px 0;
+
             .brand {
               padding-top: 20px;
               margin-bottom: 20px;
@@ -728,74 +744,68 @@
               }
             }
 
-    .container {
-      max-width: 690px;
-    }
-
-    .cta {
-      margin: 40px 0;
-      margin-bottom: 80px;
-
-      .button {
-        margin-right: 4px;
-      }
-    }
-
-    .about-mastodon {
-      max-width: 330px;
-
             p {
               strong {
                 color: $ui-secondary-color;
                 font-weight: 700;
               }
             }
+
+            .cta {
+              margin: 0;
+
+              .button {
+                margin-right: 4px;
+              }
+            }
+          }
+
+          .features-list {
+            margin-left: 30px;
+            margin-right: 10px;
+          }
+        }
+      }
     }
 
     @media screen and (max-width: 675px) {
+      .features {
+        padding: 10px 0;
+
         .container {
           display: flex;
           flex-direction: column;
-      }
 
-      .features {
+          #mastodon-timeline {
-        padding: 20px 0;
+            order: 2;
+            flex: 0 0 auto;
+            height: 60vh;
+            margin-bottom: 20px;
+            border-top-right-radius: 4px;
           }
 
           .about-mastodon {
             order: 1;
             flex: 0 0 auto;
             max-width: 100%;
-      }
 
-      #mastodon-timeline {
+            .about-hashtag {
-        order: 2;
+              background: unset;
-        flex: 0 0 auto;
+              padding: 0;
-        height: 60vh;
+              border-radius: 0;
-      }
 
               .cta {
                 margin: 20px 0;
-        margin-bottom: 30px;
+              }
             }
 
             .features-list {
               display: none;
             }
-
-      .stripe {
-        display: none;
           }
         }
       }
-
+    }
-  .stripe {
-    width: 100%;
-    height: 360px;
-    overflow: hidden;
-    background: darken($ui-base-color, 4%);
-    position: absolute;
-    z-index: -1;
   }
 }
 

app/views/tags/show.html.haml

@@ -7,12 +7,12 @@
   = render 'og'
 
 .landing-page.tag-page
-  .stripe
   .features
     .container
       #mastodon-timeline{ data: { props: Oj.dump(default_props.merge(hashtag: @tag.name)) } }
 
       .about-mastodon
+        .about-hashtag
           .brand
             = link_to root_url do
               = image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
@@ -24,12 +24,24 @@
             = link_to t('about.learn_more'), root_url, class: 'button button-alternative'
 
         .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'