From a5455e248ad946ddd21a3f761f11fa0a34e6438f Mon Sep 17 00:00:00 2001
From: Vadim Makeev <pepelsbey@gmail.com>
Date: Tue, 6 Jul 2021 16:37:24 +0300
Subject: [PATCH] Add viewport-fit and env paddings

---
 index.html                    |  2 +-
 styles/blocks/caption.css     | 13 ++++++++++---
 styles/shower/shower-list.css | 15 +++++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 0e06e51..300e089 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
 	<title>Material theme for Shower</title>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <link rel="stylesheet" href="styles/styles.css">
     <style>
         .shower {
diff --git a/styles/blocks/caption.css b/styles/blocks/caption.css
index e6313bb..48e8561 100644
--- a/styles/blocks/caption.css
+++ b/styles/blocks/caption.css
@@ -3,15 +3,22 @@
 .caption {
     grid-column: 1 / -1;
     margin-top: calc(
-        -1 * var(--slide-gap) * var(--slide-scale)
+        -1 *
+        var(--slide-gap) *
+        var(--slide-scale)
     );
     margin-left: calc(
-        -1 * var(--slide-gap) * var(--slide-scale)
+        -1 *
+        var(--slide-gap) *
+        var(--slide-scale) -
+        env(safe-area-inset-left)
     );
     padding-top: 0.8em;
     padding-bottom: 0.9em;
     padding-left: calc(
-        var(--slide-gap) * var(--slide-scale)
+        var(--slide-gap) *
+        var(--slide-scale) +
+        env(safe-area-inset-left)
     );
     box-sizing: border-box;
     width: 100vw;
diff --git a/styles/shower/shower-list.css b/styles/shower/shower-list.css
index cfc4728..0ead297 100644
--- a/styles/shower/shower-list.css
+++ b/styles/shower/shower-list.css
@@ -1,9 +1,20 @@
 /* Shower List */
 
 .shower.list {
-    padding: calc(
-        var(--slide-gap) * var(--slide-scale)
+    --shower-list-block: calc(
+        var(--slide-gap) *
+        var(--slide-scale)
+    );
+    --shower-list-inline: calc(
+        var(--slide-gap) *
+        var(--slide-scale) +
+        env(safe-area-inset-left)
     );
+
+    padding:
+        var(--shower-list-block)
+        var(--shower-list-inline);
+
     box-sizing: border-box;
     width: 100%;
     display: grid;
