Improve Blog page layout on mobile

Author: shellbear

components/Card.tsx

@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components';
+import { layout, space, compose } from 'styled-system';
+
 import Grid, { GridProps } from './Grid';
 
 export interface CardProps extends GridProps {
@@ -17,12 +19,14 @@ const Card = styled(Grid)<CardProps>`
   ${({ selected }) =>
     selected &&
     css`
-      box-shadow: rgb(232 235 248 / 90%) 0px 0px 60px;
+      box-shadow: rgb(232 235 248 / 90%) 0 0 60px;
     `}
 
   :hover {
-    box-shadow: rgb(232 235 248 / 90%) 0px 0px 60px;
+    box-shadow: rgb(232 235 248 / 90%) 0 0 60px;
   }
+
+  ${compose(layout, space)}
 `;
 
 export default Card;

pages/blog/index.tsx

@@ -32,10 +32,10 @@ const Blog: NextPage<BlogProps> = ({ pages }) => {
           .
         </Text>
       </Container>
-      <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gridGap="2rem">
+      <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gridGap={['3rem', '2rem']}>
         {pages.map(({ title, uri, date, cover }, i) => (
           <Link key={i} href={uri}>
-            <Card>
+            <Card padding={[0]} margin={[0]}>
               <Grid
                 gridTemplateColumns={'1fr'}
                 justifyItems={['center', 'flex-start']}
@@ -49,7 +49,10 @@ const Blog: NextPage<BlogProps> = ({ pages }) => {
                     alt={title}
                   />
                 )}
-                <Container gridGap=".5rem">
+                <Container
+                  gridGap=".5rem"
+                  alignItems={['center', 'flex-start']}
+                >
                   <Title
                     as="h2"
                     fontSize="1.5rem"