From 3886195c59b21ff0a6fe7c8898c2a7bb89f7a344 Mon Sep 17 00:00:00 2001
From: Josh Rutherford <joshua.rutherford1@gmail.com>
Date: Sat, 24 Jul 2021 06:48:07 -0500
Subject: [PATCH] Tidy hero layout.

---
 src/hero/Hero.tsx  | 92 +++++++++++++++++++++++-----------------------
 src/hero/hero.scss | 56 +++++++++-------------------
 2 files changed, 63 insertions(+), 85 deletions(-)

diff --git a/src/hero/Hero.tsx b/src/hero/Hero.tsx
index 4a23cde..68009dd 100644
--- a/src/hero/Hero.tsx
+++ b/src/hero/Hero.tsx
@@ -21,55 +21,53 @@ export function Hero() {
           <h2>Software Developer</h2>
         </div>
       </header>
-      <main>
+      <p className="content">
+        I’m a curiosity-driven developer with over 8 years of experience. I've
+        spent most of that time focused on building web apps and UI, for the
+        last 5 years working primarily with React and Typescript.{" "}
+        {showMore ? null : (
+          <button
+            className="link"
+            onClick={function toggle() {
+              setShowMore((showing) => !showing);
+            }}
+          >
+            Read the whole story +
+          </button>
+        )}
+      </p>
+      <div
+        className={showMore ? "more-content visible" : "more-content"}
+        aria-hidden={!showMore}
+      >
         <p>
-          I’m a curiosity-driven developer with over 8 years of experience. I've
-          spent most of that time focused on building web apps and UI, for the
-          last 5 years working primarily with React and Typescript.{" "}
-          {showMore ? null : (
-            <button
-              className="link"
-              onClick={function toggle() {
-                setShowMore((showing) => !showing);
-              }}
-            >
-              Read the whole story +
-            </button>
-          )}
+          My background is in design, and in 2013{" "}
+          <a
+            href="https://blog.codepen.io/2013/08/23/josh-rutherford-gets-a-job-on-codepen/"
+            rel="noreferrer"
+            target="_blank"
+          >
+            I left my design job in Arkansas for a development gig at a startup
+            in San Francisco
+          </a>{" "}
+          after spending the previous year learning web development in my spare
+          time. I got the itch while working on a portfolio site for myself and
+          haven't been able to stop tinkering since.
         </p>
-        <div
-          className={showMore ? "more-content visible" : "more-content"}
-          aria-hidden={!showMore}
-        >
-          <p>
-            My background is in design, and in 2013{" "}
-            <a
-              href="https://blog.codepen.io/2013/08/23/josh-rutherford-gets-a-job-on-codepen/"
-              rel="noreferrer"
-              target="_blank"
-            >
-              I left my design job in Arkansas for a development gig at a
-              startup in San Francisco
-            </a>{" "}
-            after spending the previous year learning web development in my
-            spare time. I got the itch while working on a portfolio site for
-            myself and haven't been able to stop tinkering since.
-          </p>
-          <p>
-            Currently considering individual contributor roles. Especially
-            interested in areas of nature, biology, physics, art, politics, and
-            literature.{" "}
-            <button
-              className="link"
-              onClick={function toggle() {
-                setShowMore((showing) => !showing);
-              }}
-            >
-              Show less -
-            </button>
-          </p>
-        </div>
-      </main>
+        <p>
+          Currently considering individual contributor roles. Especially
+          interested in areas of nature, biology, physics, art, politics, and
+          literature.{" "}
+          <button
+            className="link"
+            onClick={function toggle() {
+              setShowMore((showing) => !showing);
+            }}
+          >
+            Show less -
+          </button>
+        </p>
+      </div>
     </section>
   );
 }
diff --git a/src/hero/hero.scss b/src/hero/hero.scss
index 6a68443..eb67c5e 100644
--- a/src/hero/hero.scss
+++ b/src/hero/hero.scss
@@ -1,8 +1,17 @@
 @import "../variables.scss";
 
-$horizontal_breakpoint: 800px;
+$horizontal_breakpoint: 724px;
 
 .hero {
+  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;
+  }
+
   h1 {
     font-size: 3.5rem;
     line-height: 3rem;
@@ -16,20 +25,14 @@ $horizontal_breakpoint: 800px;
   }
 
   p {
-    max-width: 30rem;
-    margin-bottom: 0;
+    margin: 0;
   }
 
   figure {
     margin: 0;
     position: relative;
-    transform: translateY(20px);
     z-index: -1;
 
-    @media all and (min-width: $horizontal_breakpoint) {
-      transform: translateY(0px);
-    }
-
     &:after {
       content: "";
       position: absolute;
@@ -41,44 +44,21 @@ $horizontal_breakpoint: 800px;
     }
   }
 
-  header,
-  main {
-    margin-left: auto;
-    margin-right: auto;
+  .content {
+    align-self: flex-end;
   }
 
-  header {
-    max-width: 30rem;
+  .more-content {
+    grid-column: 1 / span 2;
 
     @media all and (min-width: $horizontal_breakpoint) {
-      max-width: unset;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      column-gap: inherit;
     }
-  }
 
-  .more-content {
     &:not(.visible) {
       @extend .offscreen;
     }
   }
-
-  @media all and (min-width: $horizontal_breakpoint) {
-    display: flex;
-    justify-content: center;
-    padding-top: 4rem;
-
-    header,
-    main {
-      flex-basis: 50%;
-    }
-
-    header {
-      display: flex;
-      align-self: flex-start;
-      margin-right: 2rem;
-
-      figure {
-        margin-right: 1rem;
-      }
-    }
-  }
 }