fix mobile ui
This commit is contained in:
parent
445fb2a6aa
commit
e2f20b7498
1 changed files with 20 additions and 9 deletions
|
@ -42,8 +42,12 @@ body {
|
||||||
--air: rgba(var(--dark), 0.48);
|
--air: rgba(var(--dark), 0.48);
|
||||||
--fog: rgba(var(--dark), 0.12);
|
--fog: rgba(var(--dark), 0.12);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-right: var(--gap);
|
||||||
|
padding-left: var(--gap);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-inline: var(--gap);
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
@ -54,6 +58,11 @@ body {
|
||||||
transition: background 0.4s ease-out;
|
transition: background 0.4s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body > * {
|
||||||
|
width: 100%;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.not-ready,
|
.not-ready,
|
||||||
.not-ready *,
|
.not-ready *,
|
||||||
.not-ready *::before {
|
.not-ready *::before {
|
||||||
|
@ -64,6 +73,10 @@ body {
|
||||||
html {
|
html {
|
||||||
font-size: 7px;
|
font-size: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: -webkit-fill-available;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reset
|
/* Reset
|
||||||
|
@ -151,7 +164,6 @@ img {
|
||||||
display: flex;
|
display: flex;
|
||||||
max-width: var(--wide);
|
max-width: var(--wide);
|
||||||
height: var(--header);
|
height: var(--header);
|
||||||
margin-inline: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header a {
|
.header a {
|
||||||
|
@ -257,9 +269,8 @@ img {
|
||||||
-------------------------------------------------- */
|
-------------------------------------------------- */
|
||||||
.main {
|
.main {
|
||||||
max-width: var(--narrow);
|
max-width: var(--narrow);
|
||||||
min-height: calc(100vh - var(--header) - var(--footer));
|
padding-top: var(--y-gap);
|
||||||
padding-block: var(--y-gap);
|
padding-bottom: var(--y-gap);
|
||||||
margin-inline: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-title {
|
.page-title {
|
||||||
|
@ -366,9 +377,10 @@ img {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: var(--y-gap);
|
margin-top: var(--y-gap);
|
||||||
|
margin-right: calc(var(--gap) * -1);
|
||||||
|
margin-left: calc(var(--gap) * -1);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
background: var(--black);
|
background: var(--black);
|
||||||
margin-inline: calc(var(--gap) * -1);
|
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -624,16 +636,15 @@ img {
|
||||||
/* Footer
|
/* Footer
|
||||||
-------------------------------------------------- */
|
-------------------------------------------------- */
|
||||||
.footer {
|
.footer {
|
||||||
position: relative;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
max-width: var(--narrow);
|
max-width: var(--narrow);
|
||||||
min-height: var(--footer);
|
height: var(--footer);
|
||||||
|
margin-top: auto;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
color: var(--lit);
|
color: var(--lit);
|
||||||
border-top: 1px solid var(--fog);
|
border-top: 1px solid var(--fog);
|
||||||
margin-inline: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer p + p::before {
|
.footer p + p::before {
|
||||||
|
|
Loading…
Reference in a new issue