feat: PWA with responsiveness

learnwithparam · May 24, 2020 · b8503f8 · b8503f8
1 parent 7e909ca
commit b8503f8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/src/components/footer.js b/src/components/footer.js
@@ -12,14 +12,22 @@ const FooterLink = styled(StyledLink)`
 const Footer = () => {
   return (
     <Box as="header" borderTop="1px solid" borderColor="gray.700" py="4">
-      <Flex width="100%" maxW="720px" m="0 auto" alignItems="center">
+      <Flex
+        width="100%"
+        maxW="720px"
+        m="0 auto"
+        px="2"
+        alignItems="center"
+        flexDirection={["column", "row"]}
+        justifyContent={["center", "flex-start"]}
+      >
         <Box>
           <Text as="span">© {new Date().getFullYear()} </Text>
           <Text as="span" color="red.400">
             learnwithparam.com
           </Text>
         </Box>
-        <Box as="nav" ml="auto">
+        <Box as="nav" ml={["0", "auto"]}>
           <FooterLink to="/support/terms-and-conditions">
             Terms and Conditions
           </FooterLink>

diff --git a/src/components/header.js b/src/components/header.js
@@ -29,7 +29,7 @@ const Header = ({ siteTitle }) => {
 
   return (
     <Box as="header" borderBottom="1px solid" borderColor="gray.700" py="3">
-      <Flex width="100%" maxW="720px" m="0 auto" alignItems="center">
+      <Flex width="100%" maxW="720px" m="0 auto" px="2" alignItems="center">
         <Box>
           <Heading as="h1" m="0" fontSize="32px">
             <LogoLink to="/">

diff --git a/src/components/layout.js b/src/components/layout.js
@@ -28,15 +28,9 @@ const Layout = ({ children }) => {
   return (
     <Box color="white">
       <Header siteTitle={data.site.siteMetadata.title} />
-      <div
-        style={{
-          margin: `0 auto`,
-          maxWidth: 960,
-          padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
+      <Box p="2">
         <main>{children}</main>
-      </div>
+      </Box>
       <Footer />
     </Box>
   );

diff --git a/src/components/products.js b/src/components/products.js
@@ -18,7 +18,7 @@ const Products = ({ products }) => {
           </Text>
         </Text>
       </Box>
-      <Grid templateColumns="repeat(2, 1fr)" gap={6}>
+      <Grid templateColumns={["repeat(1, 1fr)", "repeat(2, 1fr)"]} gap={6}>
         {products.map(({ node: product }) => (
           <Product product={product} key={product.name} />
         ))}