Fixing hero layout.

theruther4d · Jul 24, 2021 · 4dafbd8 · 4dafbd8 · vercel · Jul 24, 2021
1 parent 3886195
commit 4dafbd8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -54,7 +54,7 @@ h3 {
 p {
   font-size: 1.25rem;
   font-weight: 300;
-  line-height: 1.6875rem;
+  line-height: 2rem;
   color: rgba(255, 255, 255, 0.7);
   margin: 2rem auto;
 }

diff --git a/src/hero/hero.scss b/src/hero/hero.scss
@@ -6,11 +6,7 @@ $horizontal_breakpoint: 724px;
   display: grid;
   justify-content: center;
   gap: 2rem;
-  grid-template-columns: minmax(auto, 30rem);
-
-  @media all and (min-width: $horizontal_breakpoint) {
-    grid-template-columns: 1fr 1fr;
-  }
+  grid-template-columns: (minmax(auto, 30rem));
 
   h1 {
     font-size: 3.5rem;
@@ -46,19 +42,25 @@ $horizontal_breakpoint: 724px;
 
   .content {
     align-self: flex-end;
+    grid-column: 1;
   }
 
   .more-content {
+    display: grid;
     grid-column: 1 / span 2;
-
-    @media all and (min-width: $horizontal_breakpoint) {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      column-gap: inherit;
-    }
+    gap: inherit;
+    grid-template-columns: inherit;
 
     &:not(.visible) {
       @extend .offscreen;
     }
   }
+
+  @media all and (min-width: $horizontal_breakpoint) {
+    grid-template-columns: 1fr 1fr;
+
+    .content {
+      grid-column: unset;
+    }
+  }
 }