iPhone X support (#4835)

Adds support for the iPhone X safe area insets.

Link: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Here’s a preview of what it looks like: https://twitter.com/codeOfRobin/status/981473964223430658

Signed-off-by: Robin Malhotra <me@rmalhotra.com>

www/src/components/navigation-mobile.js

@@ -45,6 +45,7 @@ const MobileNavigation = () => (
       borderTop: `1px solid ${colors.ui.light}`,
       background: colors.ui.whisper,
       fontFamily: typography.options.headerFontFamily.join(`,`),
+      paddingBottom: `env(safe-area-inset-bottom)`,
       [presets.Tablet]: {
         display: `none`,
       },

www/src/html.js

@@ -49,7 +49,7 @@ export default class HTML extends React.Component {
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
           <meta
             name="viewport"
-            content="width=device-width, initial-scale=1.0"
+            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
           />
           <link
             rel="apple-touch-icon"