1
0
Fork 0

fix mobile ui

This commit is contained in:
nanxiaobei 2021-08-21 01:30:41 +08:00
parent 445fb2a6aa
commit e2f20b7498

View file

@ -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 {