From 588b0a9e1049ab0398b411dc2c2910176b8cdcce Mon Sep 17 00:00:00 2001 From: jaseg Date: Sat, 14 Oct 2023 17:40:05 +0200 Subject: theme: Make things degrade gracefully on mobile --- themes/conspiracy/assets/css/style.css | 20 ++++++++++++++++++-- 1 file 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%); + } +} + -- cgit