Add viewport-fit and env paddings

shower · Jul 6, 2021 · ae71736 · ae71736
1 parent 9cd5fd6
commit ae71736
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <head>
     <title>Ribbon 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/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;