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 {
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) {

View file

@ -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;

View file

@ -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%;
}
}

View file

@ -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;