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 { Link as RouterLink } from 'react-router-dom'
import styles from './style.module.scss' import styles from './style.module.scss'
export const Footer = () => ( export const Footer = () => (
<footer className={`${styles.borderTop} ${styles.footer}`}> <footer className={`${styles.borderTop} ${styles.footer}`}>
<Grid <Container
container
maxWidth="xl" maxWidth="xl"
sx={{ padding: '75px 0' }} sx={{
columnSpacing={'50px'} 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" /> <img src="/logo.png" alt="Logo" />
</Box>
</Link> </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={'/'}> <RouterLink to={'/'}>
<Button variant={'text'} focusRipple={false}> <Button variant={'text'} focusRipple={false}>
Home Home
@ -34,10 +73,16 @@ export const Footer = () => (
Source Source
</Button> </Button>
</RouterLink> </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 <Link
href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv" href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
target="_blank" target="_blank"
@ -57,9 +102,9 @@ export const Footer = () => (
/> />
</Button> </Button>
</Link> </Link>
</div> </Box>
</Grid> </Box>
</Grid> </Container>
<div className={`${styles.borderTop} ${styles.credits}`}> <div className={`${styles.borderTop} ${styles.credits}`}>
Built by&nbsp; Built by&nbsp;
<Link href="https://nostrdev.com/" target="_blank"> <Link href="https://nostrdev.com/" target="_blank">

View File

@ -15,36 +15,21 @@
font-weight: 500; 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 { button {
width: 100%; width: 100%;
justify-content: start; justify-content: start;
} }
} }
.about {
font-weight: 500;
> p {
margin: 0;
}
}
.links {
> a + a {
margin-left: 25px;
}
}
.credits { .credits {
width: 100%; width: 100%;
text-align: center; text-align: center;