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,85 +717,96 @@
   }
 
   &.tag-page {
-    .brand {
+    .features {
-      padding-top: 20px;
+      padding: 30px 0;
-      margin-bottom: 20px;
 
-      img {
+      .container {
-        height: 48px;
+        max-width: 820px;
-        width: auto;
-      }
-    }
 
-    .container {
+        #mastodon-timeline {
-      max-width: 690px;
+          margin-right: 0;
-    }
+          border-top-right-radius: 0;
+        }
 
-    .cta {
+        .about-mastodon {
-      margin: 40px 0;
+          .about-hashtag {
-      margin-bottom: 80px;
+            background: darken($ui-base-color, 4%);
+            padding: 0 20px 20px 30px;
+            border-radius: 0 5px 5px 0;
 
-      .button {
+            .brand {
-        margin-right: 4px;
+              padding-top: 20px;
-      }
+              margin-bottom: 20px;
-    }
 
-    .about-mastodon {
+              img {
-      max-width: 330px;
+                height: 48px;
+                width: auto;
+              }
+            }
 
-      p {
+            p {
-        strong {
+              strong {
-          color: $ui-secondary-color;
+                color: $ui-secondary-color;
-          font-weight: 700;
+                font-weight: 700;
+              }
+            }
+
+            .cta {
+              margin: 0;
+
+              .button {
+                margin-right: 4px;
+              }
+            }
+          }
+
+          .features-list {
+            margin-left: 30px;
+            margin-right: 10px;
+          }
         }
       }
     }
 
     @media screen and (max-width: 675px) {
-      .container {
-        display: flex;
-        flex-direction: column;
-      }
-
       .features {
-        padding: 20px 0;
+        padding: 10px 0;
-      }
 
-      .about-mastodon {
+        .container {
-        order: 1;
+          display: flex;
-        flex: 0 0 auto;
+          flex-direction: column;
-        max-width: 100%;
-      }
 
-      #mastodon-timeline {
+          #mastodon-timeline {
-        order: 2;
+            order: 2;
-        flex: 0 0 auto;
+            flex: 0 0 auto;
-        height: 60vh;
+            height: 60vh;
-      }
+            margin-bottom: 20px;
+            border-top-right-radius: 4px;
+          }
 
-      .cta {
+          .about-mastodon {
-        margin: 20px 0;
+            order: 1;
-        margin-bottom: 30px;
+            flex: 0 0 auto;
-      }
+            max-width: 100%;
 
-      .features-list {
+            .about-hashtag {
-        display: none;
+              background: unset;
-      }
+              padding: 0;
+              border-radius: 0;
+
+              .cta {
+                margin: 20px 0;
+              }
+            }
 
-      .stripe {
+            .features-list {
-        display: none;
+              display: none;
+            }
+          }
+        }
       }
     }
   }
-
-  .stripe {
-    width: 100%;
-    height: 360px;
-    overflow: hidden;
-    background: darken($ui-base-color, 4%);
-    position: absolute;
-    z-index: -1;
-  }
 }
 
 @keyframes floating {

app/views/tags/show.html.haml

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