diff --git a/src/page/background/background.scss b/src/page/background/background.scss index 87e12b5..df0fda6 100644 --- a/src/page/background/background.scss +++ b/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; diff --git a/src/page/header/theme-switcher/theme-switcher.ts b/src/page/header/theme-switcher/theme-switcher.ts index c6b4358..caa1902 100644 --- a/src/page/header/theme-switcher/theme-switcher.ts +++ b/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'); diff --git a/src/page/image-viewer/image-viewer.scss b/src/page/image-viewer/image-viewer.scss index f578bb6..afe5a9a 100644 --- a/src/page/image-viewer/image-viewer.scss +++ b/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; } } diff --git a/src/style/animations/animations.scss b/src/style/animations/animations.scss deleted file mode 100644 index 8695e0c..0000000 --- a/src/style/animations/animations.scss +++ /dev/null @@ -1,9 +0,0 @@ -html[animations='off'] { - &, - *, - *::before, - *::after { - transition: none !important; - animation: none !important; - } -} diff --git a/src/style/animations/animations.ts b/src/style/animations/animations.ts deleted file mode 100644 index 6f41e54..0000000 --- a/src/style/animations/animations.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const turnOnAnimations = () => - document.documentElement.setAttribute('animations', 'on'); - -export const turnOffAnimations = () => - document.documentElement.setAttribute('animations', 'off'); diff --git a/src/style/dark-mode/dark-mode.scss b/src/style/dark-mode/dark-mode.scss deleted file mode 100644 index 98bef70..0000000 --- a/src/style/dark-mode/dark-mode.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin in-dark-mode() { - html[theme='dark'] { - @content; - } -} diff --git a/src/style/dark-mode/dark-mode.ts b/src/style/dark-mode/dark-mode.ts deleted file mode 100644 index 35c165b..0000000 --- a/src/style/dark-mode/dark-mode.ts +++ /dev/null @@ -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'); diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 81c5e05..1eaf5b4 100644 --- a/src/style/mixins.scss +++ b/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); } } diff --git a/src/style/vars.scss b/src/style/vars.scss index b31ff76..39e8d3e 100644 --- a/src/style/vars.scss +++ b/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; } } diff --git a/src/styles.scss b/src/styles.scss index b407ccd..f09789f 100644 --- a/src/styles.scss +++ b/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); }