Copy in new CSS for about page.

app/javascript/flavours/glitch/styles/about.scss

@@ -15,87 +15,140 @@ $small-breakpoint: 960px;
   }
 }
 
-.show-xs,
+.landing-page {
-.show-sm {
+  .grid {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 2fr;
+    grid-auto-columns: 25%;
+    grid-auto-rows: max-content;
+
+    .column-0 {
       display: none;
-}
+    }
 
-.show-m {
+    .column-1 {
-  display: block;
+      grid-column: 1;
-}
+      grid-row: 1;
+    }
 
-@media screen and (max-width: $small-breakpoint) {
+    .column-2 {
-  .hide-sm {
+      grid-column: 2;
-    display: none !important;
+      grid-row: 1;
     }
 
-  .show-sm {
+    .column-3 {
-    display: block !important;
+      grid-column: 3;
+      grid-row: 1 / 3;
     }
-}
 
-@media screen and (max-width: $column-breakpoint) {
+    .column-4 {
-  .hide-xs {
+      grid-column: 1 / 3;
-    display: none !important;
+      grid-row: 2;
+    }
   }
 
-  .show-xs {
+  @media screen and (max-width: $small-breakpoint) {
-    display: block !important;
+    .grid {
+      grid-template-columns: 40% 60%;
+
+      .column-0 {
+        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) {
+      .column-2 {
-        &-sm {
+        grid-column: 2;
-          box-sizing: border-box;
+        grid-row: 1 / 3;
-          min-height: 1px;
-          flex: 0 0 percentage($i / 15);
-          max-width: percentage($i / 15);
-          padding: 0 5px;
 
-          @media screen and (max-width: $column-breakpoint) {
+        &.non-preview {
-            max-width: 100%;
+          grid-column: 2;
-            flex: 0 0 100%;
+          grid-row: 1;
-            margin-bottom: 10px;
+        }
+      }
 
-            &:last-child {
+      .column-3 {
-              margin-bottom: 0;
+        grid-column: 1;
+        grid-row: 2 / 4;
+      }
+
+      .column-4 {
+        grid-column: 2;
+        grid-row: 3;
+
+        &.non-preview {
+          grid-column: 1 / 3;
+          grid-row: 2;
         }
       }
     }
   }
 
   @media screen and (max-width: $column-breakpoint) {
-        max-width: 100%;
+    .grid {
-        flex: 0 0 100%;
+      grid-template-columns: auto;
-        margin-bottom: 10px;
 
-        &:last-child {
+      .column-0 {
-          margin-bottom: 0;
+        display: block;
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      .column-1 {
+        grid-column: 1;
+        grid-row: 3;
+
+        .brand {
+          display: none;
         }
       }
+
+      .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-flex {
+      .column-3 {
+        grid-column: 1;
+        grid-row: 5;
+      }
+
+      .column-4 {
+        grid-column: 1;
+        grid-row: 4;
+
+        &.non-preview {
+          grid-column: 1;
+          grid-row: 4;
+        }
+      }
+    }
+  }
+
+  .column-flex {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.separator-or {
+  .separator-or {
     position: relative;
     margin: 40px 0;
     text-align: center;
@@ -123,9 +176,8 @@ $small-breakpoint: 960px;
       padding: 0 8px;
       cursor: default;
     }
-}
+  }
 
-.landing-page {
   p,
   li {
     font-family: 'mastodon-font-sans-serif', sans-serif;
@@ -502,7 +554,7 @@ $small-breakpoint: 960px;
           display: block;
           width: 80px;
           height: 80px;
-          border-radius: $ui-avatar-border-size;
+          border-radius: 48px;
         }
       }
 
@@ -539,6 +591,7 @@ $small-breakpoint: 960px;
 
       img {
         position: static;
+        padding: 10px 0;
       }
 
       @media screen and (max-width: $small-breakpoint) {
@@ -558,18 +611,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;
     }
 
+    .row__information-board {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+
       .information-board__section {
-      padding: 0;
+        flex: 1 0 auto;
+        padding: 0 10px;
+      }
+    }
+
+    .row__mascot {
+      flex: 1;
+      margin: 10px -50px 0 0;
     }
   }
 
@@ -619,6 +687,8 @@ $small-breakpoint: 960px;
 
   &__short-description {
     .row {
+      display: flex;
+      flex-wrap: wrap;
       align-items: center;
       margin-bottom: 40px;
     }
@@ -668,7 +738,6 @@ $small-breakpoint: 960px;
     height: 100%;
 
     @media screen and (max-width: $small-breakpoint) {
-      margin-bottom: 10px;
       height: auto;
     }
 
@@ -717,15 +786,16 @@ $small-breakpoint: 960px;
     width: 100%;
     flex: 1 1 auto;
     overflow: hidden;
+    height: 100%;
 
     .column-header {
       color: inherit;
       font-family: inherit;
       font-size: 16px;
-      padding: 15px;
       line-height: inherit;
       font-weight: inherit;
       margin: 0;
+      padding: 0;
     }
 
     .column {
@@ -942,26 +1012,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;
@@ -969,13 +1033,6 @@ $small-breakpoint: 960px;
       }
     }
 
-            p {
-              strong {
-                color: $ui-secondary-color;
-                font-weight: 700;
-              }
-            }
-
     .cta {
       margin: 0;
 
@@ -983,53 +1040,27 @@ $small-breakpoint: 960px;
         margin-right: 4px;
       }
     }
-          }
 
-          .features-list {
+    @media screen and (max-width: $column-breakpoint) {
-            margin-left: 30px;
+      .grid {
-            margin-right: 10px;
+        .column-1 {
-          }
+          grid-column: 1;
-        }
+          grid-row: 2;
-      }
         }
 
-    @media screen and (max-width: 675px) {
+        .column-2 {
-      .features {
+          grid-column: 1;
-        padding: 10px 0;
+          grid-row: 1;
-
-        .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 {
-            order: 1;
-            flex: 0 0 auto;
-            max-width: 100%;
-
-            .about-hashtag {
-              background: unset;
-              padding: 0;
-              border-radius: 0;
-
-              .cta {
-                margin: 20px 0;
       }
+
+      .brand {
+        margin: 0;
       }
 
-            .features-list {
+      .landing-page__features {
         display: none;
       }
     }
   }
-      }
-    }
-  }
 }