Add safe-area-inset

NotWoods · Sep 23, 2023 · 8d671c4 · 8d671c4
1 parent a3334e3
commit 8d671c4
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 6 deletions.
diff --git a/editor.html b/editor.html
@@ -9,6 +9,7 @@
     <script type="module" src="/src/viewer/change-mask.js"></script>
     <script type="module" src="/src/editor/main.js"></script>
     <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     {{> meta }}
   </head>
 

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <script type="module" src="/src/viewer/keys.js"></script>
     <script type="module" src="/src/viewer/load-url.js"></script>
     <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     {{> meta }}
   </head>
 
@@ -111,10 +112,10 @@
 
         <section class="icon__grid">
           <div class="icon__original">
-            <img class="icon" alt="Preview of original icon" src="demo/spec.svg" />
+            <img width="192" height="192" class="icon" alt="Preview of original icon" src="demo/spec.svg" />
           </div>
           <div class="icon__mask masked">
-            <img class="icon" alt="Preview of maskable icon" src="demo/spec.svg" />
+            <img width="192" height="192" class="icon" alt="Preview of maskable icon" src="demo/spec.svg" />
           </div>
           <div class="icon__shadow masked"></div>
         </section>

diff --git a/partials/meta.hbs b/partials/meta.hbs
@@ -1,7 +1,6 @@
 <link rel="preload" href="toggle/sun.svg" as="image" />
 <link rel="preload" href="toggle/moon.svg" as="image" />
 
-<meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon_16.png" />
 <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon_32.png" />
 <link rel="icon" type="image/png" sizes="196x196" href="favicon/favicon_196.png" />

diff --git a/public/css/editor.css b/public/css/editor.css
@@ -13,8 +13,11 @@ dark-mode-toggle {
   background: var(--background);
   position: relative;
   overflow-y: auto;
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
 }
 .layers {
+  padding-left: env(safe-area-inset-left);
   resize: horizontal;
   overflow-x: hidden;
   overflow-y: auto;

diff --git a/public/css/viewer.css b/public/css/viewer.css
@@ -397,9 +397,6 @@ hr {
   display: block;
   margin: auto;
 }
-.contributors {
-  width: 100%;
-}
 
 .clip-paths {
   position: absolute;

diff --git a/settings.html b/settings.html
@@ -11,6 +11,7 @@
     <script type="module" src="/src/viewer/upload-icon.js"></script>
     <script type="module" src="/src/viewer/keys.js"></script>
     <script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     {{> meta }}
   </head>