fix: update footer design
This commit is contained in:
parent
5d59ffce28
commit
af689a00f7
@ -1,13 +1,13 @@
|
||||
import { Box, Button, Container, Link as LinkMui } from '@mui/material'
|
||||
import { Box, Button, Link as LinkMui } from '@mui/material'
|
||||
import { Link } from 'react-router-dom'
|
||||
import styles from './style.module.scss'
|
||||
import { Container } from '../Container'
|
||||
|
||||
export const Footer = () => (
|
||||
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
||||
<Container
|
||||
maxWidth="xl"
|
||||
sx={{
|
||||
paddingY: '50px'
|
||||
style={{
|
||||
paddingBlock: '50px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -58,13 +58,43 @@ export const Footer = () => (
|
||||
component={'nav'}
|
||||
className={styles.nav}
|
||||
>
|
||||
<Button component={Link} to={'/'} variant={'text'}>
|
||||
<Button
|
||||
sx={{
|
||||
justifyContent: {
|
||||
xs: 'center',
|
||||
sm: 'start'
|
||||
}
|
||||
}}
|
||||
component={Link}
|
||||
to={'/'}
|
||||
variant={'text'}
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
<Button component={Link} to={'/#'} variant={'text'}>
|
||||
<Button
|
||||
sx={{
|
||||
justifyContent: {
|
||||
xs: 'center',
|
||||
sm: 'start'
|
||||
}
|
||||
}}
|
||||
component={Link}
|
||||
to={'/#'}
|
||||
variant={'text'}
|
||||
>
|
||||
Documentation
|
||||
</Button>
|
||||
<Button component={Link} to={'/#'} variant={'text'}>
|
||||
<Button
|
||||
sx={{
|
||||
justifyContent: {
|
||||
xs: 'center',
|
||||
sm: 'start'
|
||||
}
|
||||
}}
|
||||
component={Link}
|
||||
to={'/#'}
|
||||
variant={'text'}
|
||||
>
|
||||
Source
|
||||
</Button>
|
||||
</Box>
|
||||
@ -99,9 +129,9 @@ export const Footer = () => (
|
||||
</Container>
|
||||
<div className={`${styles.borderTop} ${styles.credits}`}>
|
||||
Built by
|
||||
<LinkMui href="https://nostrdev.com/" target="_blank">
|
||||
<a href="https://nostrdev.com/" target="_blank">
|
||||
Nostr Dev
|
||||
</LinkMui>{' '}
|
||||
</a>{' '}
|
||||
2024.
|
||||
</div>
|
||||
</footer>
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import '../../styles/colors.scss';
|
||||
|
||||
.borderTop {
|
||||
border-top: solid 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
@ -7,16 +9,12 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
letter-spacing: 1px;
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
word-break: break-word;
|
||||
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.links {
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
> a + a {
|
||||
margin-left: 25px;
|
||||
@ -24,9 +22,10 @@
|
||||
}
|
||||
|
||||
.nav {
|
||||
button {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,29 +39,22 @@
|
||||
|
||||
> a {
|
||||
transition: ease 0.4s;
|
||||
color: rgba(1, 170, 173, 0.75);
|
||||
|
||||
color: $primary-main;
|
||||
text-decoration-color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: #01aaad;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
max-width: 300px;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.logo {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user