diff --git a/package.json b/package.json index 9623803c..57cee731 100644 --- a/package.json +++ b/package.json @@ -149,7 +149,8 @@ "DOMParser", "CSS", "customElements", - "AbortController" + "AbortController", + "matchMedia" ], "ignore": [ "dist", diff --git a/src/routes/_store/observers/resizeObservers.js b/src/routes/_store/observers/resizeObservers.js index c5266bc9..0d6970f0 100644 --- a/src/routes/_store/observers/resizeObservers.js +++ b/src/routes/_store/observers/resizeObservers.js @@ -7,9 +7,9 @@ export function resizeObservers (store) { const recalculateIsMobileSize = () => { store.set({ - isMobileSize: window.matchMedia('(max-width: 767px)').matches, // e.g. iPhone Plus - isSmallMobileSize: window.matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5 - isTinyMobileSize: window.matchMedia('(max-width: 320px)').matches // e.g. iPhone 4 + isMobileSize: matchMedia('(max-width: 767px)').matches, // e.g. iPhone Plus + isSmallMobileSize: matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5 + isTinyMobileSize: matchMedia('(max-width: 320px)').matches // e.g. iPhone 4 }) } diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js index 865732d5..47f282f2 100644 --- a/src/routes/_store/store.js +++ b/src/routes/_store/store.js @@ -35,7 +35,7 @@ const persistedState = { pushSubscriptions: {}, reduceMotion: !process.browser || - window.matchMedia('(prefers-reduced-motion: reduce)').matches, + matchMedia('(prefers-reduced-motion: reduce)').matches, underlineLinks: false } diff --git a/src/routes/_utils/getMainTopMargin.js b/src/routes/_utils/getMainTopMargin.js index 4748fd86..87bf742f 100644 --- a/src/routes/_utils/getMainTopMargin.js +++ b/src/routes/_utils/getMainTopMargin.js @@ -1,8 +1,8 @@ // should be kept in sync with global.scss export function getMainTopMargin () { - if (window.matchMedia('(max-width: 767px)').matches) { + if (matchMedia('(max-width: 767px)').matches) { return 62 - } else if (window.matchMedia('(max-width: 991px').matches) { + } else if (matchMedia('(max-width: 991px').matches) { return 52 } else { return 42 diff --git a/src/routes/_utils/themeEngine.js b/src/routes/_utils/themeEngine.js index cf69458b..3bfe9e73 100644 --- a/src/routes/_utils/themeEngine.js +++ b/src/routes/_utils/themeEngine.js @@ -1,4 +1,4 @@ -const prefersDarkTheme = process.browser && window.matchMedia('(prefers-color-scheme: dark)').matches +const prefersDarkTheme = process.browser && matchMedia('(prefers-color-scheme: dark)').matches const meta = process.browser && document.getElementById('theThemeColor') export const INLINE_THEME = 'default' // theme that does not require external CSS