jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-28 02:10:33 -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; font-size: 1.5em;
line-height: 1.5; line-height: 1.5;
max-width: 1070px; max-width: 1070px;
padding: 2em 2.5em; padding: 50px 65px;
h1 { h1 {
margin: 0; margin: 0;
@ -240,7 +240,7 @@ body {
line-height: 1.5; line-height: 1.5;
font-weight: 400; font-weight: 400;
max-width: 1010px; max-width: 1010px;
padding: 3em; padding: 35px 50px;
header { header {
margin-bottom: 1.75em; margin-bottom: 1.75em;
@ -355,7 +355,6 @@ body {
&#content { &#content {
line-height: 1.8; line-height: 1.8;
object-fit: contain;
h1, h1,
h2, h2,
@ -370,7 +369,6 @@ body {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
object-fit: scale-down;
} }
img + em, img + em,
@ -530,11 +528,19 @@ body {
// Responsive Awesomeness // Responsive Awesomeness
@media screen and (max-width: 800px) { @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 // Responsive Home
body#home { &#home {
font-size: 1em; font-size: 1em;
padding: 2em; padding: 25px;
margin-bottom: 1.75em; // hard to click lower links on mobile
p { p {
font-size: 1.1em; font-size: 1.1em;
@ -576,9 +582,8 @@ body {
} }
// Responsive Blog // Responsive Blog
body#notes { &#notes {
padding: 2em; padding: 20px;
margin-bottom: 2em;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -596,14 +601,13 @@ body {
} }
footer div { footer div {
line-height: 1.8;
&#panda { &#panda {
display: none; display: none;
} }
&#copyright, &#copyright,
&#poweredby { &#poweredby {
line-height: 1.8;
width: 50%; width: 50%;
} }
@ -629,6 +633,7 @@ body {
} }
} }
} }
}
/*! Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/ */ /*! Fancy Waving Hand Emoji (TM) - https://jarv.is/notes/css-waving-hand-emoji/ */