Add viewport-fit and env paddings

shower · Jul 6, 2021 · a5455e2 · a5455e2
1 parent 4109384
commit a5455e2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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;