diff options
| author | jaseg <git@jaseg.de> | 2023-10-14 17:40:05 +0200 |
|---|---|---|
| committer | jaseg <git@jaseg.de> | 2023-10-14 17:40:05 +0200 |
| commit | 588b0a9e1049ab0398b411dc2c2910176b8cdcce (patch) | |
| tree | d5aa59f534bbf6bc735c2707b9ff1eb3adfe106c | |
| parent | 096ffb8c4e3417fedaa34555f1d2db521c22a0eb (diff) | |
| download | blog-588b0a9e1049ab0398b411dc2c2910176b8cdcce.tar.gz blog-588b0a9e1049ab0398b411dc2c2910176b8cdcce.tar.bz2 blog-588b0a9e1049ab0398b411dc2c2910176b8cdcce.zip | |
theme: Make things degrade gracefully on mobile
| -rw-r--r-- | themes/conspiracy/assets/css/style.css | 20 |
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%); + } +} + |