diff --git a/index.html b/index.html
index 2d43d6f..07fb159 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
-
+
Hávamál Stanza of the Day
diff --git a/muninn.css b/muninn.css
index 5821367..b2e88c0 100644
--- 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);
+ }
}
\ No newline at end of file
diff --git a/vellum-dark-75.png b/vellum-dark-75.png
new file mode 100644
index 0000000..de7cfe7
Binary files /dev/null and b/vellum-dark-75.png differ