Adjust public hashtag pages (#5357)

1 files changed, 70 insertions, 60 deletions

diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
index a15afc32c..358d86eec 100644
--- a/app/javascript/styles/about.scss
+++ b/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 {
-      padding-top: 20px;
-      margin-bottom: 20px;
+    .features {
+      padding: 30px 0;
 
-      img {
-        height: 48px;
-        width: auto;
-      }
-    }
+      .container {
+        max-width: 820px;
 
-    .container {
-      max-width: 690px;
-    }
+        #mastodon-timeline {
+          margin-right: 0;
+          border-top-right-radius: 0;
+        }
 
-    .cta {
-      margin: 40px 0;
-      margin-bottom: 80px;
+        .about-mastodon {
+          .about-hashtag {
+            background: darken($ui-base-color, 4%);
+            padding: 0 20px 20px 30px;
+            border-radius: 0 5px 5px 0;
 
-      .button {
-        margin-right: 4px;
-      }
-    }
+            .brand {
+              padding-top: 20px;
+              margin-bottom: 20px;
 
-    .about-mastodon {
-      max-width: 330px;
+              img {
+                height: 48px;
+                width: auto;
+              }
+            }
 
-      p {
-        strong {
-          color: $ui-secondary-color;
-          font-weight: 700;
+            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) {
-      .container {
-        display: flex;
-        flex-direction: column;
-      }
-
       .features {
-        padding: 20px 0;
-      }
+        padding: 10px 0;
 
-      .about-mastodon {
-        order: 1;
-        flex: 0 0 auto;
-        max-width: 100%;
-      }
+        .container {
+          display: flex;
+          flex-direction: column;
 
-      #mastodon-timeline {
-        order: 2;
-        flex: 0 0 auto;
-        height: 60vh;
-      }
+          #mastodon-timeline {
+            order: 2;
+            flex: 0 0 auto;
+            height: 60vh;
+            margin-bottom: 20px;
+            border-top-right-radius: 4px;
+          }
 
-      .cta {
-        margin: 20px 0;
-        margin-bottom: 30px;
-      }
+          .about-mastodon {
+            order: 1;
+            flex: 0 0 auto;
+            max-width: 100%;
 
-      .features-list {
-        display: none;
-      }
+            .about-hashtag {
+              background: unset;
+              padding: 0;
+              border-radius: 0;
+
+              .cta {
+                margin: 20px 0;
+              }
+            }
 
-      .stripe {
-        display: none;
+            .features-list {
+              display: none;
+            }
+          }
+        }
       }
     }
   }
-
-  .stripe {
-    width: 100%;
-    height: 360px;
-    overflow: hidden;
-    background: darken($ui-base-color, 4%);
-    position: absolute;
-    z-index: -1;
-  }
 }
 
 @keyframes floating {