jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 17:30:28 -04:00
Code Issues

fix bottom padding on mobile safari: https://www.eventbrite.com/engineering/mobile-safari-why/

Browse Source
This commit is contained in:
Jake Jarvis 2019-10-04 20:57:44 -04:00
parent 81ba6780f7
commit ae9f7c658e
1 changed files with 97 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/style.scss
View File

@ -107,7 +107,7 @@ body {
font-size: 1.5em;
line-height: 1.5;
max-width: 1070px;
padding: 2em 2.5em;
padding: 50px 65px;
h1 {
margin: 0;
@ -240,7 +240,7 @@ body {
line-height: 1.5;
font-weight: 400;
max-width: 1010px;
padding: 3em;
padding: 35px 50px;
header {
margin-bottom: 1.75em;
@ -355,7 +355,6 @@ body {
&#content {
line-height: 1.8;
object-fit: contain;
h1,
h2,
@ -370,7 +369,6 @@ body {
max-width: 100%;
margin: 0 auto;
display: block;
object-fit: scale-down;
}
img + em,
@ -530,11 +528,19 @@ body {
// Responsive Awesomeness
@media screen and (max-width: 800px) {
body {
// Safari iOS menu bar reappers below 44px:
// https://www.eventbrite.com/engineering/mobile-safari-why/
padding-bottom: 50px !important;
// Allows content to fill the viewport and go beyond the bottom
height: 100%;
// Allows you to scroll below the viewport; default value is visible
overflow-y: scroll;
// Responsive Home
body#home {
&#home {
font-size: 1em;
padding: 2em;
margin-bottom: 1.75em; // hard to click lower links on mobile
padding: 25px;
p {
font-size: 1.1em;
@ -576,9 +582,8 @@ body {
}
// Responsive Blog
body#notes {
padding: 2em;
margin-bottom: 2em;
&#notes {
padding: 20px;
width: 100%;
max-width: 100%;
@ -596,14 +601,13 @@ body {
}
footer div {
line-height: 1.8;
&#panda {
display: none;
}
&#copyright,
&#poweredby {
line-height: 1.8;
width: 50%;
}
@ -628,6 +632,7 @@ body {
}
}
}
}
}