Introduce iPhone X Safe Area

p0wen · Sep 29, 2020 · e7c4258 · e7c4258
1 parent 92e3520
commit e7c4258
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -279,25 +279,27 @@ input:checked + .slider:before {
 }
 
 @media all and (max-height: 414px) and (orientation: landscape) {
+ /** https://webkit.org/blog/7929/designing-websites-for-iphone-x/ **/
+  @supports (padding: max(0px)) {
+    .app {
+      padding-left: max(12px, env(safe-area-inset-left));
+      padding-right: max(12px, env(safe-area-inset-right));
+      font-size: 0.9rem;
+    }
+  }
   .streakbar {
     padding: 0rem;
     height: calc(20 * var(--vh));
   }
   .quote {
     height: calc(25 * var(--vh));
-    font-size: 0.9rem;
-  }
-  .appname {
-    padding-right: 27px;
-    padding-left: 27px;
-    padding-top: 5px;
   }
   .starttimer {
     font-size: 1.5rem;
     transform: translate(0%, 70%);
   }
   .meditationtime {
     font-size: 1.5rem;
-    transform:translate(0%, 100%)
+    transform: translate(0%, 100%);
   }
 }