Copy in new CSS for about page.

1 files changed, 199 insertions, 168 deletions

diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index a25a50739..9ce83aa9b 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -15,117 +15,169 @@ $small-breakpoint: 960px;
   }
 }
 
-.show-xs,
-.show-sm {
-  display: none;
-}
+.landing-page {
+  .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 {
-  display: block;
-}
+    .column-1 {
+      grid-column: 1;
+      grid-row: 1;
+    }
 
-@media screen and (max-width: $small-breakpoint) {
-  .hide-sm {
-    display: none !important;
-  }
+    .column-2 {
+      grid-column: 2;
+      grid-row: 1;
+    }
 
-  .show-sm {
-    display: block !important;
-  }
-}
+    .column-3 {
+      grid-column: 3;
+      grid-row: 1 / 3;
+    }
 
-@media screen and (max-width: $column-breakpoint) {
-  .hide-xs {
-    display: none !important;
+    .column-4 {
+      grid-column: 1 / 3;
+      grid-row: 2;
+    }
   }
 
-  .show-xs {
-    display: block !important;
-  }
-}
+  @media screen and (max-width: $small-breakpoint) {
+    .grid {
+      grid-template-columns: 40% 60%;
 
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 -5px;
+      .column-0 {
+        display: none;
+      }
 
-  @for $i from 1 through 15 {
-    .column-#{$i} {
-      box-sizing: border-box;
-      min-height: 1px;
-      flex: 0 0 percentage($i / 15);
-      max-width: percentage($i / 15);
-      padding: 0 5px;
+      .column-1 {
+        grid-column: 1;
+        grid-row: 1;
 
-      @media screen and (max-width: $small-breakpoint) {
-        &-sm {
-          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: $column-breakpoint) {
-            max-width: 100%;
-            flex: 0 0 100%;
-            margin-bottom: 10px;
-
-            &:last-child {
-              margin-bottom: 0;
-            }
-          }
+        &.non-preview .landing-page__forms {
+          height: 100%;
         }
       }
 
-      @media screen and (max-width: $column-breakpoint) {
-        max-width: 100%;
-        flex: 0 0 100%;
-        margin-bottom: 10px;
+      .column-2 {
+        grid-column: 2;
+        grid-row: 1 / 3;
 
-        &:last-child {
-          margin-bottom: 0;
+        &.non-preview {
+          grid-column: 2;
+          grid-row: 1;
+        }
+      }
+
+      .column-3 {
+        grid-column: 1;
+        grid-row: 2 / 4;
+      }
+
+      .column-4 {
+        grid-column: 2;
+        grid-row: 3;
+
+        &.non-preview {
+          grid-column: 1 / 3;
+          grid-row: 2;
         }
       }
     }
   }
-}
 
-.column-flex {
-  display: flex;
-  flex-direction: column;
-}
+  @media screen and (max-width: $column-breakpoint) {
+    .grid {
+      grid-template-columns: auto;
 
-.separator-or {
-  position: relative;
-  margin: 40px 0;
-  text-align: center;
+      .column-0 {
+        display: block;
+        grid-column: 1;
+        grid-row: 1;
+      }
 
-  &::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 0;
-    border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
-    position: absolute;
-    top: 50%;
-    left: 0;
+      .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-3 {
+        grid-column: 1;
+        grid-row: 5;
+      }
+
+      .column-4 {
+        grid-column: 1;
+        grid-row: 4;
+
+        &.non-preview {
+          grid-column: 1;
+          grid-row: 4;
+        }
+      }
+    }
   }
 
-  span {
-    display: inline-block;
-    background: $ui-base-color;
-    font-size: 12px;
-    font-weight: 500;
-    color: $ui-primary-color;
-    text-transform: uppercase;
+  .column-flex {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .separator-or {
     position: relative;
-    z-index: 1;
-    padding: 0 8px;
-    cursor: default;
+    margin: 40px 0;
+    text-align: center;
+
+    &::before {
+      content: "";
+      display: block;
+      width: 100%;
+      height: 0;
+      border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
+      position: absolute;
+      top: 50%;
+      left: 0;
+    }
+
+    span {
+      display: inline-block;
+      background: $ui-base-color;
+      font-size: 12px;
+      font-weight: 500;
+      color: $ui-primary-color;
+      text-transform: uppercase;
+      position: relative;
+      z-index: 1;
+      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;
     }
 
-    .information-board__section {
-      padding: 0;
+    .row__information-board {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-end;
+
+      .information-board__section {
+        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,93 +1012,54 @@ $small-breakpoint: 960px;
   }
 
   &.tag-page {
-    .features {
-      padding: 30px 0;
-
-      .container-alt {
-        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;
-
-              img {
-                height: 48px;
-                width: auto;
-              }
-            }
-
-            p {
-              strong {
-                color: $ui-secondary-color;
-                font-weight: 700;
-              }
-            }
+    .grid {
+      @media screen and (min-width: $small-breakpoint) {
+        grid-template-columns: 33% 67%;
+      }
 
-            .cta {
-              margin: 0;
+      .column-2 {
+        grid-column: 2;
+        grid-row: 1;
+      }
+    }
 
-              .button {
-                margin-right: 4px;
-              }
-            }
-          }
+    .brand {
+      text-align: unset;
+      padding: 0;
 
-          .features-list {
-            margin-left: 30px;
-            margin-right: 10px;
-          }
-        }
+      img {
+        height: 48px;
+        width: auto;
       }
     }
 
-    @media screen and (max-width: 675px) {
-      .features {
-        padding: 10px 0;
+    .cta {
+      margin: 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;
-          }
+      .button {
+        margin-right: 4px;
+      }
+    }
 
-          .about-mastodon {
-            order: 1;
-            flex: 0 0 auto;
-            max-width: 100%;
+    @media screen and (max-width: $column-breakpoint) {
+      .grid {
+        .column-1 {
+          grid-column: 1;
+          grid-row: 2;
+        }
 
-            .about-hashtag {
-              background: unset;
-              padding: 0;
-              border-radius: 0;
+        .column-2 {
+          grid-column: 1;
+          grid-row: 1;
+        }
+      }
 
-              .cta {
-                margin: 20px 0;
-              }
-            }
+      .brand {
+        margin: 0;
+      }
 
-            .features-list {
-              display: none;
-            }
-          }
-        }
+      .landing-page__features {
+        display: none;
       }
     }
   }