fix: simplify window.matchMedia (#1359)

There is really no reason to call window.matchMedia instead of just matchMedia.

package.json

@@ -149,7 +149,8 @@
       "DOMParser",
       "CSS",
       "customElements",
-      "AbortController"
+      "AbortController",
+      "matchMedia"
     ],
     "ignore": [
       "dist",

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
     })
   }
 

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
 }
 

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

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