fix: footer padding and responsiveness

This commit is contained in:
enes 2024-07-25 18:03:03 +02:00
parent 5b9093a6e7
commit 45f0764fa8
2 changed files with 71 additions and 41 deletions

View File

@ -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' }}
columnSpacing={'50px'}
sx={{
paddingY: '50px'
}}
>
<Box
display={'grid'}
sx={{
gridTemplateColumns: {
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}
>
<Grid item xs={12} sm={2}>
<Link component={RouterLink} to={'/'}>
<Box className={styles.logo}>
<img src="/logo.png" alt="Logo" />
</Box>
</Link>
</Grid>
<Grid item xs={12} sm={7} component={'nav'}>
<div className={styles.nav}>
<Box
display={'grid'}
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>
</Grid>
<Grid item xs={12} sm={3} className={styles.about}>
<div className={styles.links}>
</Box>
<Box
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>
</Grid>
</Grid>
</Box>
</Box>
</Container>
<div className={`${styles.borderTop} ${styles.credits}`}>
Built by&nbsp;
<Link href="https://nostrdev.com/" target="_blank">

View File

@ -15,36 +15,21 @@
font-weight: 500;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: none;
grid-gap: 15px;
.links {
font-weight: 500;
> a {
min-height: 0;
> a + a {
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;