Improve styles and compatibility

src/page/background/background.scss

@@ -1,5 +1,4 @@
 @use '../../style/mixins' as *;
-@use '../../style/dark-mode/dark-mode' as *;
 
 #background {
   transform-style: preserve-3d;

src/page/header/theme-switcher/theme-switcher.ts

@@ -1,13 +1,4 @@
 import { createElement } from '../../../helper/create-element';
-import {
-  turnOffAnimations,
-  turnOnAnimations,
-} from '../../../style/animations/animations';
-import {
-  isSystemLevelDarkModeEnabled,
-  turnOnDarkMode,
-  turnOnLightMode,
-} from '../../../style/dark-mode/dark-mode';
 import { PageElement } from '../../page-element';
 import { generate } from './theme-switcher.html';
 
@@ -60,3 +51,18 @@ export class PageThemeSwitcher extends PageElement {
     }
   }
 }
+
+export const isSystemLevelDarkModeEnabled = (): boolean =>
+  matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
+
+export const turnOnDarkMode = () =>
+  document.documentElement.setAttribute('theme', 'dark');
+
+export const turnOnLightMode = () =>
+  document.documentElement.setAttribute('theme', 'light');
+
+export const turnOnAnimations = () =>
+  document.documentElement.setAttribute('animations', 'on');
+
+export const turnOffAnimations = () =>
+  document.documentElement.setAttribute('animations', 'off');

src/page/image-viewer/image-viewer.scss

@@ -20,8 +20,8 @@
     }
 
     @include on-small-screen {
-      max-width: 92.5vw;
-      max-height: 92.5vh;
+      max-width: 95vw;
+      max-height: 80vh;
     }
   }
 

src/style/animations/animations.scss

@@ -1,9 +0,0 @@
-html[animations='off'] {
-  &,
-  *,
-  *::before,
-  *::after {
-    transition: none !important;
-    animation: none !important;
-  }
-}

src/style/animations/animations.ts

@@ -1,5 +0,0 @@
-export const turnOnAnimations = () =>
-  document.documentElement.setAttribute('animations', 'on');
-
-export const turnOffAnimations = () =>
-  document.documentElement.setAttribute('animations', 'off');

src/style/dark-mode/dark-mode.scss

@@ -1,5 +0,0 @@
-@mixin in-dark-mode() {
-  html[theme='dark'] {
-    @content;
-  }
-}

src/style/dark-mode/dark-mode.ts

@@ -1,8 +0,0 @@
-export const isSystemLevelDarkModeEnabled = (): boolean =>
-  matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
-
-export const turnOnDarkMode = () =>
-  document.documentElement.setAttribute('theme', 'dark');
-
-export const turnOnLightMode = () =>
-  document.documentElement.setAttribute('theme', 'light');

src/style/mixins.scss

@@ -12,6 +12,22 @@ $breakpoint-width: 925px !default;
   }
 }
 
+@mixin in-dark-mode() {
+  html[theme='dark'] {
+    @content;
+  }
+}
+
+html[animations='off'] {
+  &,
+  *,
+  *::before,
+  *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
 @mixin image-button($icon-size) {
   display: block;
   box-sizing: content-box;
@@ -45,7 +61,12 @@ $breakpoint-width: 925px !default;
 
 @mixin blurred-background() {
   backdrop-filter: blur(var(--blur-radius));
-  @supports not (backdrop-filter: blur(var(--blur-radius))) {
+  -webkit-backdrop-filter: blur(var(--blur-radius));
+
+  @supports not (
+    (backdrop-filter: blur(var(--blur-radius))) or
+      (-webkit-backdrop-filter: blur(var(--blur-radius)))
+  ) {
     background-color: var(--card-color);
   }
 }

src/style/vars.scss

@@ -1,6 +1,4 @@
 @use 'mixins' as *;
-@use 'dark-mode/dark-mode' as *;
-@use 'animations/animations' as *;
 
 :root {
   --transition-time: 150ms;
@@ -27,7 +25,7 @@
     --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2);
     --inset-shadow: inset 0 -9px 7px -7px rgb(0, 0, 0, 0.15);
     --icon-size: 45px;
-    --large-icon-size: 80px;
+    --large-icon-size: 60px;
     --body-width: 765px;
   }
 }

src/styles.scss

@@ -1,14 +1,17 @@
 @use 'style/fonts';
 @use 'style/vars';
 @use 'style/mixins' as *;
-@use 'style/animations/animations';
-@use 'style/dark-mode/dark-mode';
 
 *,
 *::before,
 *::after {
   margin: 0;
   box-sizing: border-box;
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+    animation: none !important;
+  }
 }
 
 html {
@@ -64,7 +67,7 @@ noscript {
 
   svg {
     border-radius: 10000px;
-    backdrop-filter: blur(16px);
+    @include blurred-background;
     transition: transform var(--transition-time), box-shadow var(--transition-time);
   }