fix: Add patch outline (#1068)

georgegillams · Feb 25, 2024 · 177d7e9 · 177d7e9
1 parent d5c4ea6
commit 177d7e9
Show file tree

Hide file tree

Showing 8 changed files with 3,716 additions and 3,910 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     ]
   },
   "dependencies": {
-    "@george-gillams/components": "^28.14.2",
+    "@george-gillams/components": "^28.15.0",
     "@george-gillams/webapp": "1.0.5",
     "@next/bundle-analyzer": "^14.1.0",
     "async-lock": "^1.4.1",

diff --git a/src/components/HomePageV2/LifeSection/LifeSection.js b/src/components/HomePageV2/LifeSection/LifeSection.js
@@ -4,13 +4,14 @@ import { HP_CARD_LAYOUT } from './HomepageCard-constants';
 
 import Section from '@george-gillams/components/section';
 import {
-  DualCardWrapper,
+  CardWrapper,
   StyledBlogCard,
   StyledMedalCard,
   StyledMedals,
   StyledParagraph,
   StyledPhotoGallery,
   StyledPhotographyCard,
+  StyledReadingCard,
   Wrapper,
 } from './life-section.styles';
 import { ScrollAnimationWrapper } from '@george-gillams/components/effects';
@@ -23,15 +24,21 @@ const LifeSection = props => {
       <Section name="About">
         <StyledParagraph>I love travel, photography, and obstacle course racing.</StyledParagraph>
         <ScrollAnimationWrapper>
-          <DualCardWrapper>
+          <CardWrapper>
             <StyledBlogCard
               title="Blog"
               blurb="I occasionally write about tech, photography and OCR."
               linkText="Blog →"
               href="/blog"
-              layout={HP_CARD_LAYOUT.COLUMN}>
-              {/* <StyledBlogGallery /> */}
-            </StyledBlogCard>
+              layout={HP_CARD_LAYOUT.COLUMN}
+            />
+            {/* <StyledReadingCard
+              title="Reading list"
+              blurb="See what I'm reading."
+              linkText="Reading list →"
+              href="/reading-list"
+              layout={HP_CARD_LAYOUT.COLUMN}
+            /> */}
             <StyledPhotographyCard
               title="Photography"
               blurb="Check out my photos. Disclaimer: 99% of them are the dog."
@@ -40,17 +47,15 @@ const LifeSection = props => {
               layout={HP_CARD_LAYOUT.COLUMN}>
               <StyledPhotoGallery />
             </StyledPhotographyCard>
-          </DualCardWrapper>
-        </ScrollAnimationWrapper>
-        <ScrollAnimationWrapper>
-          <StyledMedalCard
-            title="Racing"
-            blurb="Visit my virtual medal shelf."
-            linkText="Medals →"
-            href="/medals"
-            layout={HP_CARD_LAYOUT.AUTO}>
-            <StyledMedals />
-          </StyledMedalCard>
+            <StyledMedalCard
+              title="Racing"
+              blurb="Visit my virtual medal shelf."
+              linkText="Medals →"
+              href="/medals"
+              layout={HP_CARD_LAYOUT.AUTO}>
+              <StyledMedals />
+            </StyledMedalCard>
+          </CardWrapper>
         </ScrollAnimationWrapper>
       </Section>
     </Wrapper>

diff --git a/src/components/HomePageV2/LifeSection/life-section.styles.js b/src/components/HomePageV2/LifeSection/life-section.styles.js
@@ -12,56 +12,48 @@ export const StyledParagraph = styled(Paragraph)`
   font-size: ${fontSizeMd};
 `;
 
-export const DualCardWrapper = styled.div`
+export const CardWrapper = styled.div`
   margin-top: ${spacingLg};
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
+  /* grid-template-rows: 1fr 1fr 3fr 2fr; */
+  grid-template-rows: 1fr 3fr 2fr;
+  grid-gap: ${spacingLg};
 
   @media (min-width: ${breakpointMd}) {
-    flex-direction: row;
-    align-items: stretch;
+    grid-template-columns: 3fr 5fr;
+    grid-template-rows: 1.25fr 1.25fr 1fr;
     margin-top: calc(2 * ${spacingLg});
   }
 `;
 
 export const StyledBlogCard = styled(HomepageCard)`
-  margin-bottom: ${spacingLg};
-  width: 100%;
-  max-width: 24rem;
-  margin-left: auto;
-  margin-right: auto;
+  @media (min-width: ${breakpointMd}) {
+    grid-row: 1;
+    grid-column: 1;
+  }
+`;
 
+export const StyledReadingCard = styled(HomepageCard)`
   @media (min-width: ${breakpointMd}) {
-    max-width: 20rem;
-    margin-right: ${spacingLg};
-    margin-left: unset;
+    grid-row: 2;
+    grid-column: 1;
   }
 `;
 
 export const StyledPhotographyCard = styled(HomepageCard)`
-  flex-grow: 1;
-  margin-bottom: ${spacingLg};
-  max-width: 24rem;
-  margin-left: auto;
-  margin-right: auto;
-
   @media (min-width: ${breakpointMd}) {
-    max-width: unset;
-    margin-left: unset;
-    margin-right: unset;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    grid-column: 2;
   }
 `;
 
 export const StyledMedalCard = styled(HomepageCard)`
-  width: 100%;
-  max-width: 24rem;
-  margin-left: auto;
-  margin-right: auto;
-
   @media (min-width: ${breakpointMd}) {
-    max-width: unset;
-    margin-left: unset;
-    margin-right: unset;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row: 3;
   }
 `;