nmemmert
5668686f59
black-translucent status bar overlays page content, pushing the top nav buttons behind the status bar where they can't be tapped. Switch to black (status bar takes its own space, content starts below). Also add env(safe-area-inset-top) padding on <header> elements when running in standalone/PWA mode so notched iPhones are handled too. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
28 lines
933 B
HTML
28 lines
933 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<title>Bible Study Project</title>
|
|
|
|
<!-- PWA manifest -->
|
|
<link rel="manifest" href="/manifest.json" />
|
|
|
|
<!-- Theme / status bar -->
|
|
<meta name="theme-color" content="#0f172a" />
|
|
|
|
<!-- iOS PWA -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
<meta name="apple-mobile-web-app-title" content="Bible Study" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
|
|
<!-- Fallback icon for browsers -->
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-900">
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.jsx"></script>
|
|
</body>
|
|
</html>
|