Initial commit

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img alt="Vue logo" src="./assets/logo.png" @click="setSat" />
+    <h1>{{ sat }}</h1>
+    <HelloWorld msg="Click the logo to update the inset value" />
   </div>
 </template>
 
@@ -13,16 +14,54 @@ export default {
   components: {
     HelloWorld,
   },
+  data() {
+    return {
+      sat: undefined,
+    };
+  },
+  methods: {
+    setSat() {
+      this.sat = getComputedStyle(document.body).getPropertyValue('--sat');
+    },
+  },
+  mounted() {
+    window.onload = this.setSat;
+  },
 };
 </script>
 
 <style lang="scss">
+:root {
+  --sat: env(safe-area-inset-top);
+  --sar: env(safe-area-inset-right);
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+}
+
+@supports (padding: max(0px)) {
+  html,
+  body,
+  header,
+  footer,
+  #app {
+    min-height: calc(100% + env(safe-area-inset-top));
+    padding-top: min(0vmin, env(safe-area-inset-top));
+  }
+}
+
+body {
+  margin: 0;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  color: white;
+  background-color: #2c3e50;
+  position: relative;
+  top: calc(env(safe-area-inset-top) * -1);
+  padding-top: 100px;
 }
 </style>

src/components/HelloWorld.vue

@@ -42,6 +42,10 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.hello {
+
+}
+
 h3 {
   margin: 40px 0 0;
 }