its all about the notch

2 files changed, 18 insertions, 10 deletions

diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 2130c675..d4336438 100755
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -2,8 +2,8 @@
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 body, html {
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
@@ -18,7 +18,6 @@ body {
   background: #fff;
   font-family: pfd, sans-serif;
   font-size: 0.875rem;
-  padding-top: constant(safe-area-inset-top);
 }
 a, a:visited {
   color: #000;
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 8ae57921..bd6747b1 100755
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -3,7 +3,9 @@
 
 #nav {
   position: fixed;
-  top: 0; left: 0;
+  top: env(safe-area-inset-top);
+  left: 0;
+  height: calc(100vh - env(safe-area-inset-top));
   width: 249px;
   -webkit-transform: translateZ(0) translateX(-249px);
   -webkit-transition: -webkit-transform 0.1s;
@@ -11,8 +13,10 @@
 }
 #content {
   position: fixed;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+  top: env(safe-area-inset-top);
+  left: 0;
+  width: 100%;
+  height: calc(100vh - env(safe-area-inset-top));
   overflow: hidden;
   -webkit-transform: translateZ(0) translateX(0px);
   -webkit-transition: -webkit-transform 0.1s;
@@ -88,7 +92,7 @@
   position: absolute;
   width: 100%;
   padding: 20px 0;
-  top:0;
+  top: 0;
   border-top: 1px solid #ddd;
 }
 
@@ -102,9 +106,10 @@
 
 #nav .social {
   position: absolute;
-  top: calc(100vh - 48px);
+  bottom: env(safe-area-inset-bottom);
   left: 0;
   border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
   display: flex;
   flex-direction: row;
 }
@@ -162,7 +167,7 @@
 
 #nav-container {
   display:flex;
-  height:calc(100vh - 40px);
+  height: 100%;
   width:100%;
   position:absolute;
   flex-direction: column;
@@ -343,9 +348,13 @@ padding-bottom:0px;
 #footer {
   display: block;
   position: fixed;
-  bottom: 0; left: 0; width: 100%;
+  bottom: 0;
+  left: 0;
+  width: 100%;
   background: #fff;
   border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: env(safe-area-inset-bottom);
   z-index: 1;
 }
 #footer div {