Merge pull request #36 from NASA-IMPACT/more-grid

Style polish
NASA-IMPACT · Nov 17, 2023 · 9662e7b · 9662e7b
2 parents 5a8d5c9 + 28f2def
commit 9662e7b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/overrides/components/page-footer/component.tsx b/overrides/components/page-footer/component.tsx
@@ -73,13 +73,14 @@ const FooterMenuLink = styled(NavLink)`
 const FooterContacts = styled.div`
   display: flex;
   justify-content: space-between;
-  align-items: center;
+
   padding: ${variableGlsp(1)};
   gap: ${glsp()};
   flex-flow: column;
 
   ${media.mediumUp`
     flex-flow: row nowrap;
+    align-items: center;
   `}
 `;
 

diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
@@ -72,34 +72,17 @@ const GradientWrapper = styled.div`
   );
 `;
 
-const BottomContent = styled(Hug)`
-  display: flex;
-  flex-flow: column;
-  width: 80%;
-  margin: auto;
-  gap: ${glsp()};
-  p {
-    width: 60%;
-  }
-
-  ${media.largeDown`
-    width: 100%;
-    margin: 0;
-    p {
-      width: 100%;
-    }
-  `}
-`;
+const BottomContent = styled(Hug)``;
 
 const InfoImageContent = styled.div`
   display: flex;
   flex-flow: row;
   background-color: #02225b; // @TODO: But where can I get this color?
   color: #ffffff;
   width: 100%;
-  height: 350px;
+  height: 300px;
   background-image: url(${RedEarthImg});
-  background-position: right;
+  background-position: right bottom -50px;
   background-repeat: no-repeat;
   div {
     display: flex;
@@ -112,6 +95,11 @@ const InfoImageContent = styled.div`
   a {
     width: 18.5rem;
   }
+  grid-column: full-start / full-end;
+  ${media.largeUp`
+    grid-column: content-2 / content-12;
+    height: 350px;
+  `}
 `;
 
 const CollaboratorsContent = styled.div`
@@ -132,6 +120,14 @@ const CollaboratorsContent = styled.div`
     text-align: center;
   }
 `;
+const HugP = styled(Hug)`
+  > p {
+    grid-column: full-start / full-end;
+    ${media.largeUp`
+      grid-column: content-2 / content-12;
+    `}
+  }
+`;
 
 export default function HomeComponent() {
   const description =
@@ -178,7 +174,7 @@ export default function HomeComponent() {
       <GradientWrapper>
         <Fold>
           <FoldBody>
-            <BottomContent>
+            <HugP>
               <p>
                 Earth.gov is also the gateway to other interagency cooperative
                 efforts for our planet, like the{" "}
@@ -187,6 +183,8 @@ export default function HomeComponent() {
                   U.S. Greenhouse Gas Center
                 </ExpandLink>
               </p>
+            </HugP>
+            <BottomContent>
               <InfoImageContent>
                 <div>
                   <StyledVarHeading size="small" as="h2">