Update page body layout, hero responsiveness

NASA-IMPACT · Jul 26, 2024 · f749957 · f749957
1 parent 02d8ca0
commit f749957
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 34 deletions.
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -55,8 +55,7 @@ const Headline = styled.p`
   }
 `
 
-const Footer = ({ shortname, isMediumDown }) => {
-  console.log(isMediumDown)
+const Footer = ({ shortname }) => {
   return (
     <PageFooter data-cy="page-footer">
       <PageFooterInner>
@@ -233,7 +232,6 @@ const Footer = ({ shortname, isMediumDown }) => {
 
 Footer.propTypes = {
   shortname: PropTypes.string.isRequired,
-  isMediumDown: PropTypes.bool,
 }
 
 export default Footer
diff --git a/src/components/hero.js b/src/components/hero.js
@@ -5,7 +5,7 @@ import styled from "styled-components"
 import { StaticImage } from "gatsby-plugin-image"
 
 import { NEGATIVE, POSITIVE } from "../utils/constants"
-import { colors, layout } from "../theme"
+import { colors, layout, breakpoints } from "../theme"
 import DateList from "./date-list-hover"
 import { ArrowIcon } from "../icons"
 import { TypeAhead } from "../components/typeahead-box"
@@ -75,7 +75,26 @@ const Container = styled.section`
         }%, rgba(12,21,32, 0.0)${ratioInPercent + 20}%)`
       : null};
 `
+const HeroContentWrapper = styled.div`
+  grid-area: 1 / 2 / 1 / 2;
 
+  display: grid;
+  grid-template-columns: ${({ textToImageRatio }) =>
+    textToImageRatio && `${textToImageRatio[0]}fr ${textToImageRatio[1]}fr`};
+  grid-template-areas:
+    "title image"
+    "extras image";
+  grid-gap: 0.5rem;
+  padding: 0 ${layout.smallPageMargin};
+  @media screen and (min-width: ${breakpoints["sm"]}) {
+    padding: 0 ${layout.pageMargin};
+  }
+`
+const HeroTitle = styled.h1`
+  @media screen and (max-width: ${breakpoints["sm"]}) {
+    font-size: 2.875rem;
+  }
+`
 export default function Hero({
   backlink,
   tagline,
@@ -117,19 +136,7 @@ export default function Hero({
       backgroundImage={backgroundImage}
       ratioInPercent={ratioInPercent}
     >
-      <div
-        css={`
-          grid-area: 1 / 2 / 1 / 2;
-
-          display: grid;
-          grid-template-columns: ${textToImageRatio[0]}fr ${textToImageRatio[1]}fr;
-          grid-template-areas:
-            "title image"
-            "extras image";
-          grid-gap: 0.5rem;
-          padding: 0 ${layout.pageMargin};
-        `}
-      >
+      <HeroContentWrapper textToImageRatio={textToImageRatio}>
         <div
           css={`
             align-self: end;
@@ -165,7 +172,7 @@ export default function Hero({
             </p>
           )}
 
-          <h1>{title}</h1>
+          <HeroTitle>{title}</HeroTitle>
         </div>
 
         <div
@@ -190,6 +197,7 @@ export default function Hero({
                 font-weight: bold;
                 padding: 1rem 5rem;
                 align-self: flex-start;
+                white-space: pre;
               `}
               data-cy="cta-link"
             >
@@ -211,7 +219,7 @@ export default function Hero({
             {image}
           </div>
         )}
-      </div>
+      </HeroContentWrapper>
 
       {backgroundImage && (
         <div

diff --git a/src/components/layout/page-body.js b/src/components/layout/page-body.js
@@ -1,22 +1,20 @@
 import React from "react"
+import styled from "styled-components"
 import PropTypes from "prop-types"
 
-import { layout } from "../../theme"
+import { layout, breakpoints } from "../../theme"
 
+const PageBodyStyles = styled.div`
+  width: 100%;
+  max-width: ${layout.maxWidth};
+  margin: 0 auto;
+  padding: 0 ${layout.smallPageMargin};
+  @media screen and (min-width: ${breakpoints["sm"]}) {
+    padding: 0 ${layout.pageMargin};
+  }
+`
 export default function PageBody({ children, id }) {
-  return (
-    <div
-      css={`
-        width: 100%;
-        max-width: ${layout.maxWidth};
-        margin: 0 auto;
-        padding: 0 ${layout.pageMargin};
-      `}
-      data-cy={`main-${id}`}
-    >
-      {children}
-    </div>
-  )
+  return <PageBodyStyles data-cy={`main-${id}`}>{children}</PageBodyStyles>
 }
 
 PageBody.propTypes = {

diff --git a/src/components/typeahead-box.js b/src/components/typeahead-box.js
@@ -111,7 +111,10 @@ export function TypeAhead() {
           align-items: center;
           cursor: pointer;
           width: 100%;
-          min-width: 24rem;
+          min-width: 80vw;
+          @media screen and (min-width: 800px) {
+            min-width: 24rem;
+          }
         `}
       >
         <input