theme: Make things degrade gracefully on mobile

1 files changed, 18 insertions, 2 deletions

diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index 831e4cb..78635d5 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -224,7 +224,7 @@ main::before {
     top: 0;
     width: 100%;
     height: 100%;
-    backdrop-filter: brightness(100%) blur(10px);
+    backdrop-filter: blur(10px);
     z-index: -1;
 }
 
@@ -284,7 +284,7 @@ body > header > h1 {
     -webkit-background-clip: text;
     color: transparent;
     filter: drop-shadow(0 0 10px rgba(0, 0, 0, var(--shadow-opacity)));
-    font-size: 120px;
+    font-size: clamp(20px, 120px, min(10vw, 10vh));
     /* Padding to avoid the first character getting cut off in firefox */
     padding-left: 40px;
     padding-right: 40px;
@@ -656,3 +656,19 @@ body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.L
     }
 }
 
+@media print, (max-width: 60em) {
+    main::before {
+        backdrop-filter: none;
+    }
+    
+    main {
+        background-color: hsl(230 10% 15%);
+    }
+}
+
+@media print, (max-width: 60em) and (prefers-color-scheme: light) {
+    main {
+        background-color: hsl(260 5% 90%);
+    }
+}
+