fix: footer padding and responsiveness
This commit is contained in:
parent
5b9093a6e7
commit
45f0764fa8
@ -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
|
Built by
|
||||||
<Link href="https://nostrdev.com/" target="_blank">
|
<Link href="https://nostrdev.com/" target="_blank">
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user