From e2f20b7498bc0ba2309f644da28d51210e6f1048 Mon Sep 17 00:00:00 2001
From: nanxiaobei <nanxiaobei@gmail.com>
Date: Sat, 21 Aug 2021 01:30:41 +0800
Subject: [PATCH] fix mobile ui

---
 assets/app.css | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/assets/app.css b/assets/app.css
index 3cff64d..ce1cd7a 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -42,8 +42,12 @@ body {
   --air: rgba(var(--dark), 0.48);
   --fog: rgba(var(--dark), 0.12);
 
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  padding-right: var(--gap);
+  padding-left: var(--gap);
   margin: 0;
-  padding-inline: var(--gap);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;
   font-size: 2rem;
@@ -54,6 +58,11 @@ body {
   transition: background 0.4s ease-out;
 }
 
+body > * {
+  width: 100%;
+  margin-inline: auto;
+}
+
 .not-ready,
 .not-ready *,
 .not-ready *::before {
@@ -64,6 +73,10 @@ body {
   html {
     font-size: 7px;
   }
+
+  body {
+    min-height: -webkit-fill-available;
+  }
 }
 
 /* Reset
@@ -151,7 +164,6 @@ img {
   display: flex;
   max-width: var(--wide);
   height: var(--header);
-  margin-inline: auto;
 }
 
 .header a {
@@ -257,9 +269,8 @@ img {
  -------------------------------------------------- */
 .main {
   max-width: var(--narrow);
-  min-height: calc(100vh - var(--header) - var(--footer));
-  padding-block: var(--y-gap);
-  margin-inline: auto;
+  padding-top: var(--y-gap);
+  padding-bottom: var(--y-gap);
 }
 
 .page-title {
@@ -366,9 +377,10 @@ img {
   display: flex;
   justify-content: space-between;
   margin-top: var(--y-gap);
+  margin-right: calc(var(--gap) * -1);
+  margin-left: calc(var(--gap) * -1);
   color: var(--white);
   background: var(--black);
-  margin-inline: calc(var(--gap) * -1);
   border-radius: 0.5rem;
 }
 
@@ -624,16 +636,15 @@ img {
 /* Footer
  -------------------------------------------------- */
 .footer {
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: var(--narrow);
-  min-height: var(--footer);
+  height: var(--footer);
+  margin-top: auto;
   font-size: 1.6rem;
   color: var(--lit);
   border-top: 1px solid var(--fog);
-  margin-inline: auto;
 }
 
 .footer p + p::before {