From 0c6cec303c305debd4929745c80f56123d8637af Mon Sep 17 00:00:00 2001
From: nanxiaobei <nanxiaobei@gmail.com>
Date: Tue, 24 Aug 2021 11:17:46 +0800
Subject: [PATCH] add safe bottom

---
 assets/app.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/assets/app.css b/assets/app.css
index cbbe809..308811c 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -15,11 +15,25 @@
   --narrow: 80rem;
   --side: calc((var(--wide) - var(--narrow)) / 2);
   --header: 8rem;
-  --footer: 8rem;
+  --footer: calc(8rem + var(--safe-bottom));
 
   --light: 255, 255, 255;
   --dark: 22, 22, 22;
   --hljs-bg: #111;
+
+  --safe-bottom: 0;
+}
+
+@supports (bottom: constant(safe-area-inset-bottom)) {
+  :root {
+    --safe-bottom: constant(safe-area-inset-bottom);
+  }
+}
+
+@supports (bottom: env(safe-area-inset-bottom)) {
+  :root {
+    --safe-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 .dark {
@@ -634,6 +648,7 @@ img {
   justify-content: center;
   max-width: var(--narrow);
   height: var(--footer);
+  padding-bottom: var(--safe-bottom);
   margin-top: auto;
   font-size: 1.6rem;
   color: var(--lit);