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;