4 files changed, 23 insertions, 13 deletions
diff --git a/StoneIsland/platforms/ios/www/css/blogs.css b/StoneIsland/platforms/ios/www/css/blogs.css
index ee54a31f..f56ec474 100755
--- a/StoneIsland/platforms/ios/www/css/blogs.css
+++ b/StoneIsland/platforms/ios/www/css/blogs.css
@@ -36,7 +36,8 @@
   text-decoration: underline;
 }
 #story .content > div {
-  display:none;
+  display: none;
+  padding-bottom: env(safe-area-inset-bottom);
 }
 #story .content div.active {
   display:block;
@@ -340,7 +341,7 @@ ul.links {
 
 #archive .scroll {
   top: 0; left: 0;
-  height: calc(100% - 125px);
+  height: 100%;
 }
 #archive .row:first-of-type {
   margin-top: 7em;
diff --git a/StoneIsland/platforms/ios/www/css/index.css b/StoneIsland/platforms/ios/www/css/index.css
index 2130c675..496a0ee4 100755
--- a/StoneIsland/platforms/ios/www/css/index.css
+++ b/StoneIsland/platforms/ios/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;
@@ -60,6 +59,7 @@ a, a:visited {
 }
 .vscroll .scroll {
   width: 100%;
+  overflow-x: hidden;
 /*  height: calc(100vh - 2.5rem);
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
diff --git a/StoneIsland/platforms/ios/www/css/nav.css b/StoneIsland/platforms/ios/www/css/nav.css
index 8ae57921..bd6747b1 100755
--- a/StoneIsland/platforms/ios/www/css/nav.css
+++ b/StoneIsland/platforms/ios/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 {
diff --git a/StoneIsland/platforms/ios/www/css/vendor/imageviewer.css b/StoneIsland/platforms/ios/www/css/vendor/imageviewer.css
index 739c37a1..90d80fde 100644
--- a/StoneIsland/platforms/ios/www/css/vendor/imageviewer.css
+++ b/StoneIsland/platforms/ios/www/css/vendor/imageviewer.css
@@ -26,7 +26,7 @@
   height: 48px;
   position: fixed;
   right: 20px;
-  top: 20px;
+  top: calc(20px + env(safe-area-inset-top));
   cursor: pointer;
   text-align: center;
   overflow: hidden;