Working more

assets/templates/base.njk

@@ -10,7 +10,12 @@
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+{# No viewport-fit=cover, deliberately. It extends the page into the notch
+   and the home indicator, which only makes sense paired with safe-area-inset
+   padding in the stylesheet -- and without that padding on iOS the first line
+   of scripture sits under the clock. Paired with the status bar style below:
+   change one and the other has to change too. #}
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{% block title %}{{ title | safe }}{% endblock %}</title>
 {# Vendored rather than linked from a CDN: sw.js only caches same-origin
    responses, so a CDN stylesheet would leave the app unstyled offline. #}
@@ -48,7 +53,12 @@
 <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
-<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+{# black, not black-translucent. Translucent makes iOS draw the status bar
+   over the web view and reserve no space for it, so the navbar starts at the
+   very top of the screen with the clock and battery on top of it. black keeps
+   the status bar opaque and the view below it, which is what this app wants:
+   there is no full-bleed artwork here to show through. #}
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
 <meta name="apple-mobile-web-app-title" content="Bible">
 </head>
 {# Boosted links swap only the fragment, so the navbar, the modal and the