From b315b14226b1baa248b7e59cb34f629973abef49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Fri, 11 May 2018 09:07:16 -0500
Subject: [PATCH] iPhone X support

---
 .vuepress/scss/pages/_home.scss          | 5 ++++-
 .vuepress/scss/pages/_page.scss          | 4 ++++
 .vuepress/scss/partials/_footer.scss     | 4 +++-
 .vuepress/scss/partials/_navigation.scss | 4 +++-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/.vuepress/scss/pages/_home.scss b/.vuepress/scss/pages/_home.scss
index 4b67b77..0e9a6d0 100644
--- a/.vuepress/scss/pages/_home.scss
+++ b/.vuepress/scss/pages/_home.scss
@@ -1,4 +1,7 @@
 .home {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+
   h1, h2 {
     text-align: center;
   }
@@ -37,7 +40,7 @@
     background-position: center;
     background-repeat: no-repeat;
     display: flex;
-    height: calc(50vh - 4rem);
+    height: calc(50vh - 4rem); min-height: 300px;
     justify-content: center;
 
     @media (max-width: 850px) {
diff --git a/.vuepress/scss/pages/_page.scss b/.vuepress/scss/pages/_page.scss
index cfcbe0b..ab05fe2 100644
--- a/.vuepress/scss/pages/_page.scss
+++ b/.vuepress/scss/pages/_page.scss
@@ -17,6 +17,8 @@
   background-repeat: no-repeat;
   background-size: cover;
   color: $white;
+  padding-right: env(safe-area-inset-right);
+  padding-left: env(safe-area-inset-left);
   position: relative;
   width: 100%;
 }
@@ -44,6 +46,8 @@
   flex: 1;
   padding-top: 2rem;
   padding-bottom: 2rem;
+  padding-right: env(safe-area-inset-right);
+  padding-left: env(safe-area-inset-left);
 
   h1 {
     font-size: 2rem;
diff --git a/.vuepress/scss/partials/_footer.scss b/.vuepress/scss/partials/_footer.scss
index 6d528b5..b7b2468 100644
--- a/.vuepress/scss/partials/_footer.scss
+++ b/.vuepress/scss/partials/_footer.scss
@@ -2,13 +2,15 @@
   background-color: $black;
   color: rgba($white, 0.15);
   font-size: 1rem;
+  padding-right: env(safe-area-inset-right);
+  padding-left: env(safe-area-inset-left);
 
   > div:first-of-type {
     @media (max-width: 900px) {
       overflow: auto;
       overflow-scrolling: touch;
       white-space: nowrap;
-      width: 102%;
+      width: 100%;
     }
   }
 
diff --git a/.vuepress/scss/partials/_navigation.scss b/.vuepress/scss/partials/_navigation.scss
index 0f2f460..0da1a84 100644
--- a/.vuepress/scss/partials/_navigation.scss
+++ b/.vuepress/scss/partials/_navigation.scss
@@ -3,6 +3,8 @@
 
   background-color: $white;
   box-shadow: 0 1px 5px rgba($black, 0.1);
+  padding-right: env(safe-area-inset-right);
+  padding-left: env(safe-area-inset-left);
   position: fixed;
   width: 100%;
   z-index: 10;
@@ -20,7 +22,7 @@
       overflow: auto;
       overflow-scrolling: touch;
       white-space: nowrap;
-      width: 102%;
+      width: 100%;
 
       &::before {
         width: 2rem; height: 4rem;