iPhone X support

This commit is contained in:
ポール ウェッブ 2018-05-11 09:07:16 -05:00
parent 3170d45868
commit b315b14226
4 changed files with 14 additions and 3 deletions

View file

@ -1,4 +1,7 @@
.home { .home {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
h1, h2 { h1, h2 {
text-align: center; text-align: center;
} }
@ -37,7 +40,7 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
display: flex; display: flex;
height: calc(50vh - 4rem); height: calc(50vh - 4rem); min-height: 300px;
justify-content: center; justify-content: center;
@media (max-width: 850px) { @media (max-width: 850px) {

View file

@ -17,6 +17,8 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
color: $white; color: $white;
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
position: relative; position: relative;
width: 100%; width: 100%;
} }
@ -44,6 +46,8 @@
flex: 1; flex: 1;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
h1 { h1 {
font-size: 2rem; font-size: 2rem;

View file

@ -2,13 +2,15 @@
background-color: $black; background-color: $black;
color: rgba($white, 0.15); color: rgba($white, 0.15);
font-size: 1rem; font-size: 1rem;
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
> div:first-of-type { > div:first-of-type {
@media (max-width: 900px) { @media (max-width: 900px) {
overflow: auto; overflow: auto;
overflow-scrolling: touch; overflow-scrolling: touch;
white-space: nowrap; white-space: nowrap;
width: 102%; width: 100%;
} }
} }

View file

@ -3,6 +3,8 @@
background-color: $white; background-color: $white;
box-shadow: 0 1px 5px rgba($black, 0.1); 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; position: fixed;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
@ -20,7 +22,7 @@
overflow: auto; overflow: auto;
overflow-scrolling: touch; overflow-scrolling: touch;
white-space: nowrap; white-space: nowrap;
width: 102%; width: 100%;
&::before { &::before {
width: 2rem; height: 4rem; width: 2rem; height: 4rem;