style: improve responsive design
This commit is contained in:
parent
a95fe094b7
commit
e42c224b86
|
@ -86,6 +86,11 @@ const StyledProgressBar = styled.section`
|
||||||
const ProgressHeader = styled.div`
|
const ProgressHeader = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const EpochLabel = styled.span`
|
const EpochLabel = styled.span`
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { breakpoints } from '@/configs/ui.configs'
|
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
|
@ -20,17 +19,21 @@ const Navbar: React.FC<NavbarProps> = () => {
|
||||||
const Navigation = styled.ul`
|
const Navigation = styled.ul`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%); */
|
transform: translateX(-50%);
|
||||||
gap: 37px;
|
gap: 37px;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
@media (max-width: ${breakpoints.md}px) {
|
@media (max-width: 1300px) {
|
||||||
position: static;
|
position: static;
|
||||||
transform: none;
|
transform: none;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const NavItem = styled.li<{ active?: boolean }>`
|
const NavItem = styled.li<{ active?: boolean }>`
|
||||||
|
|
|
@ -23,7 +23,7 @@ const Container = styled.div`
|
||||||
max-width: ${uiConfigs.maxContainerWidth}px;
|
max-width: ${uiConfigs.maxContainerWidth}px;
|
||||||
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 24px;
|
padding: 24px 0;
|
||||||
|
|
||||||
@media (max-width: ${breakpoints.md}px) {
|
@media (max-width: ${breakpoints.md}px) {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
|
|
@ -87,6 +87,13 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
word-break: keep-all;
|
word-break: keep-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
{getLayout(<Component {...pageProps} />)}
|
{getLayout(<Component {...pageProps} />)}
|
||||||
|
|
Loading…
Reference in New Issue