fix: add paddings with safe area inset variables

fixes #1
kogakure · Oct 2, 2022 · adbb875 · adbb875
1 parent f124f5c
commit adbb875
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/Shibui.iatemplate/Contents/Info.plist b/Shibui.iatemplate/Contents/Info.plist
@@ -11,7 +11,7 @@
     <key>CFBundleName</key>
     <string>Shibui</string>
     <key>CFBundleShortVersionString</key>
-    <string>1.0</string>
+    <string>1.0.1</string>
     <key>CFBundleVersion</key>
     <string>1</string>
     <key>IATemplateDocumentFile</key>

diff --git a/Shibui.iatemplate/Contents/Resources/styles/style.css b/Shibui.iatemplate/Contents/Resources/styles/style.css
@@ -34,9 +34,35 @@ body {
   font-weight: var(--font-weight-normal);
   line-height: var(--line-height-2);
   margin-inline: auto;
+  padding-inline-end: var(--horizontal-padding);
+  padding-inline-start: var(--horizontal-padding);
   width: 88vw;
 }
 
+@supports (padding: constant(safe-area-inset-left)) and
+  (padding: constant(safe-area-inset-right)) {
+  body {
+    padding-inline-start: calc(
+      var(--horizontal-padding) + constant(safe-area-inset-left)
+    );
+    padding-inline-end: calc(
+      var(--horizontal-padding) + constant(safe-area-inset-right)
+    );
+  }
+}
+
+@supports (padding: env(safe-area-inset-left)) and
+  (padding: env(safe-area-inset-right)) {
+  body {
+    padding-inline-end: calc(
+      var(--horizontal-padding) + env(safe-area-inset-right)
+    );
+    padding-inline-start: calc(
+      var(--horizontal-padding) + env(safe-area-inset-left)
+    );
+  }
+}
+
 @media screen {
   body {
     background-color: var(--color-bg);
@@ -46,12 +72,14 @@ body {
 
 @media (min-width: 768px) {
   body {
+    --horizontal-padding: 15px;
     width: 66vw;
   }
 }
 
 @media (min-width: 1200px) {
   body {
+    --horizontal-padding: 45px;
     width: 55vw;
   }
 }