src/components/Footer/Footer.tsx

@@ -1,24 +1,63 @@
-import { Box, Button, Grid, Link } from '@mui/material'
+import { Box, Button, Container, Grid, Link } from '@mui/material'
 import { Link as RouterLink } from 'react-router-dom'
 import styles from './style.module.scss'
 
 export const Footer = () => (
   <footer className={`${styles.borderTop} ${styles.footer}`}>
-    <Grid
+    <Container
-      container
       maxWidth="xl"
-      sx={{ padding: '75px 0' }}
+      sx={{
-      columnSpacing={'50px'}
+        paddingY: '50px'
+      }}
     >
-      <Grid item xs={12} sm={2}>
+      <Box
-        <Link component={RouterLink} to={'/'}>
+        display={'grid'}
-          <Box className={styles.logo}>
+        sx={{
-            <img src="/logo.png" alt="Logo" />
+          gridTemplateColumns: {
-          </Box>
+            xs: '1fr',
+            md: '0.5fr 1.75fr 0.75fr'
+          },
+          alignItems: {
+            xs: 'center',
+            md: 'start'
+          }
+        }}
+        gap={'50px'}
+      >
+        <Link
+          sx={{
+            justifySelf: {
+              xs: 'center',
+              md: 'start'
+            }
+          }}
+          component={RouterLink}
+          to={'/'}
+          className={styles.logo}
+        >
+          <img src="/logo.png" alt="Logo" />
         </Link>
-      </Grid>
+        <Box
-      <Grid item xs={12} sm={7} component={'nav'}>
+          display={'grid'}
-        <div className={styles.nav}>
+          sx={{
+            gap: '15px',
+            gridTemplateColumns: {
+              xs: '1fr',
+              sm: 'repeat(2, 1fr)',
+              xl: 'repeat(3, 1fr)'
+            },
+            borderBlock: {
+              xs: 'solid 1px rgba(0, 0, 0, 0.1)',
+              md: 'unset'
+            },
+            paddingY: {
+              xs: '10px',
+              md: 'unset'
+            }
+          }}
+          component={'nav'}
+          className={styles.nav}
+        >
           <RouterLink to={'/'}>
             <Button variant={'text'} focusRipple={false}>
               Home
@@ -34,10 +73,16 @@ export const Footer = () => (
               Source
             </Button>
           </RouterLink>
-        </div>
+        </Box>
-      </Grid>
+        <Box
-      <Grid item xs={12} sm={3} className={styles.about}>
+          className={styles.links}
-        <div className={styles.links}>
+          sx={{
+            justifySelf: {
+              xs: 'center',
+              md: 'end'
+            }
+          }}
+        >
           <Link
             href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
             target="_blank"
@@ -57,9 +102,9 @@ export const Footer = () => (
               />
             </Button>
           </Link>
-        </div>
+        </Box>
-      </Grid>
+      </Box>
-    </Grid>
+    </Container>
     <div className={`${styles.borderTop} ${styles.credits}`}>
       Built by&nbsp;
       <Link href="https://nostrdev.com/" target="_blank">

src/components/Footer/style.module.scss

@@ -15,36 +15,21 @@
   font-weight: 500;
 }
 
-.nav {
+.links {
-  display: grid;
+  font-weight: 500;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: none;
-  grid-gap: 15px;
 
-  > a {
+  > a + a {
-    min-height: 0;
+    margin-left: 25px;
   }
+}
 
+.nav {
   button {
     width: 100%;
     justify-content: start;
   }
 }
 
-.about {
-  font-weight: 500;
-
-  > p {
-    margin: 0;
-  }
-}
-
-.links {
-  > a + a {
-    margin-left: 25px;
-  }
-}
-
 .credits {
   width: 100%;
   text-align: center;