sjs/samhuri.net
1
0
Fork 0
mirror of https://github.com/samsonjs/samhuri.net.git synced 2026-03-25 09:05:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make it look decent on the iPhone X

Browse source
This commit is contained in:
Sami Samhuri 2017-09-20 21:23:29 -07:00
parent 9c7e1f9568
commit f39f9b9a0d
No known key found for this signature in database
GPG key ID: F76F41F04D99808F
2 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/_layout.ejs
View file

@ -27,7 +27,7 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<% if (typeof title != 'undefined') { -%>
<title><%= site %>: <%= title %></title>

27
public/css/style.css.less
View file

@ -10,7 +10,9 @@
@screen-medium: 40rem; /* ~ 640px */
@screen-large: 64rem; /* ~ 1024px */
body { font-size: 100%; }
body {
font-size: 100%;
}
@media (min-width: @screen-medium) {
body { font-size: 112%; }
@ -224,15 +226,6 @@ header.primary {
} /* nav */
} /* header.primary */
/* Improve colours in mobile Safari ... wish I could include desktop Safari somehow */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
header.primary nav {
a, a:visited {
color: lighten(@highlight, 10%);
}
}
}
footer {
padding: 1rem 0;
text-align: center;
@ -244,6 +237,20 @@ footer {
}
}
/* iPhone X */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
body {
padding-bottom: constant(safe-area-inset-bottom);
}
}
@media only screen and (orientation: landscape) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.container {
padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
}
header.primary {
padding: 0.4rem constant(safe-area-inset-right) 0.4rem constant(safe-area-inset-left);
}
}
/**
* Archive