Media queries for iOS/Safari, and dark theme settings

zalbright90 · Jul 30, 2024 · 7864a89 · 7864a89
1 parent b56c8f6
commit 7864a89
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
     <title>Hávamál Stanza of the Day</title>
     <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
     <link rel="icon" type="favicon" sizes="32x32" href="favicon/favicon-32x32.png">

diff --git a/muninn.css b/muninn.css
@@ -1,12 +1,17 @@
 body {
-    font-family: 'Helvetica', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
     margin: 0;
     padding: 0;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
     background: #000000;
     color: #5c0101;
     line-height: 1.6;
 }
 
+html, body {
+    -webkit-overflow-scrolling: touch;
+  }
+
 .background-container {
     position: relative;
     width: 100%;
@@ -214,6 +219,20 @@ footer {
     padding: 1rem 0;
 }
 
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    .container {
+        box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.4);
+    }
+
+    #stanza, #runic-translation {
+        font-size: 1.5em;
+    }
+
+    .tiktok-embed {
+        border-width: 12px;
+    }
+}
+
 @media (max-width: 768px) {
     .container {
         width: 95%;
@@ -232,7 +251,7 @@ footer {
 
 @media (max-width: 480px) {
     .container {
-        width: 95%;
+        width: 85%;
         padding: 1rem;
     }
 
@@ -259,4 +278,31 @@ footer {
         min-height: 100vh;
         background-size: cover; /* Adjust background image for smaller screens */
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #121212;
+    }
+
+    .background-container {
+        backdrop-filter: brightness(0.8), blur(15px);
+    }
+
+    .container {
+        background-image: url(vellum-dark-75.png);
+        box-shadow: 15px 15px 30px
+    }
+
+    #stanza, #runic-translation, h1, h2, h3 {
+        color: #8B0000;
+    }
+
+    .disclaimer, footer {
+        color: #a0a0a0;
+    }
+
+    .runic-text::after {
+        background-color: rgba(30, 30, 30, 0.9);
+    }
 }
diff --git a/vellum-dark-75.png b/vellum-dark-75.png