implemented lazy loading and other small fixes

package.json

@@ -13,7 +13,7 @@
   "author": "libremdb-contributors",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "axios": "^0.25.0",
+    "axios": "^0.26.1",
     "cheerio": "^1.0.0-rc.10",
     "compression": "^1.7.4",
     "dotenv": "^16.0.0",
@@ -21,7 +21,7 @@
     "helmet": "^5.0.2",
     "morgan": "^1.10.0",
     "pug": "^3.0.2",
-    "sass": "^1.49.9"
+    "sass": "^1.50.0"
   },
   "devDependencies": {
     "@types/express": "^4.17.13",

pnpm-lock.yaml

@@ -6,7 +6,7 @@ overrides:
 specifiers:
   '@types/express': ^4.17.13
   '@types/morgan': ^1.9.3
-  axios: ^0.25.0
+  axios: ^0.26.1
   cheerio: ^1.0.0-rc.10
   compression: ^1.7.4
   dotenv: ^16.0.0
@@ -15,10 +15,10 @@ specifiers:
   morgan: ^1.10.0
   nodemon: ^2.0.15
   pug: ^3.0.2
-  sass: ^1.49.9
+  sass: ^1.50.0
 
 dependencies:
-  axios: 0.25.0
+  axios: 0.26.1
   cheerio: 1.0.0-rc.10
   compression: 1.7.4
   dotenv: 16.0.0
@@ -26,12 +26,12 @@ dependencies:
   helmet: 5.0.2
   morgan: 1.10.0
   pug: 3.0.2
+  sass: 1.50.0
 
 devDependencies:
   '@types/express': 4.17.13
   '@types/morgan': 1.9.3
   nodemon: 2.0.15
-  sass: 1.49.9
 
 packages:
 
@@ -40,8 +40,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/parser/7.17.8:
+  /@babel/parser/7.17.9:
-    resolution: {integrity: sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==}
+    resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dev: false
@@ -70,19 +70,19 @@ packages:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 17.0.21
+      '@types/node': 17.0.24
     dev: true
 
   /@types/connect/3.4.35:
     resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
     dependencies:
-      '@types/node': 17.0.21
+      '@types/node': 17.0.24
     dev: true
 
   /@types/express-serve-static-core/4.17.28:
     resolution: {integrity: sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==}
     dependencies:
-      '@types/node': 17.0.21
+      '@types/node': 17.0.24
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
     dev: true
@@ -103,11 +103,11 @@ packages:
   /@types/morgan/1.9.3:
     resolution: {integrity: sha512-BiLcfVqGBZCyNCnCH3F4o2GmDLrpy0HeBVnNlyZG4fo88ZiE9SoiBe3C+2ezuwbjlEyT+PDZ17//TAlRxAn75Q==}
     dependencies:
-      '@types/node': 17.0.21
+      '@types/node': 17.0.24
     dev: true
 
-  /@types/node/17.0.21:
+  /@types/node/17.0.24:
-    resolution: {integrity: sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==}
+    resolution: {integrity: sha512-aveCYRQbgTH9Pssp1voEP7HiuWlD2jW2BO56w+bVrJn04i61yh6mRfoKO6hEYQD9vF+W8Chkwc6j1M36uPkx4g==}
     dev: true
 
   /@types/qs/6.9.7:
@@ -122,7 +122,7 @@ packages:
     resolution: {integrity: sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==}
     dependencies:
       '@types/mime': 1.3.2
-      '@types/node': 17.0.21
+      '@types/node': 17.0.24
     dev: true
 
   /abbrev/1.1.1:
@@ -167,7 +167,6 @@ packages:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
-    dev: true
 
   /array-flatten/1.1.1:
     resolution: {integrity: sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=}
@@ -181,8 +180,8 @@ packages:
     resolution: {integrity: sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==}
     dev: false
 
-  /axios/0.25.0:
+  /axios/0.26.1:
-    resolution: {integrity: sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==}
+    resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==}
     dependencies:
       follow-redirects: 1.14.9
     transitivePeerDependencies:
@@ -210,7 +209,6 @@ packages:
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
-    dev: true
 
   /body-parser/1.19.2:
     resolution: {integrity: sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==}
@@ -258,7 +256,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       fill-range: 7.0.1
-    dev: true
 
   /bytes/3.0.0:
     resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=}
@@ -309,13 +306,13 @@ packages:
       is-regex: 1.1.4
     dev: false
 
-  /cheerio-select/1.5.0:
+  /cheerio-select/1.6.0:
-    resolution: {integrity: sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==}
+    resolution: {integrity: sha512-eq0GdBvxVFbqWgmCm7M3XGs1I8oLy/nExUnh6oLqmBditPO9AqQJrkslDpMun/hZ0yyTs8L0m85OHp4ho6Qm9g==}
     dependencies:
-      css-select: 4.2.1
+      css-select: 4.3.0
-      css-what: 5.1.0
+      css-what: 6.1.0
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
-      domhandler: 4.3.0
+      domhandler: 4.3.1
       domutils: 2.8.0
     dev: false
 
@@ -323,9 +320,9 @@ packages:
     resolution: {integrity: sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==}
     engines: {node: '>= 6'}
     dependencies:
-      cheerio-select: 1.5.0
+      cheerio-select: 1.6.0
-      dom-serializer: 1.3.2
+      dom-serializer: 1.4.1
-      domhandler: 4.3.0
+      domhandler: 4.3.1
       htmlparser2: 6.1.0
       parse5: 6.0.1
       parse5-htmlparser2-tree-adapter: 6.0.1
@@ -345,7 +342,6 @@ packages:
       readdirp: 3.6.0
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /ci-info/2.0.0:
     resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
@@ -402,7 +398,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       dot-prop: 5.3.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       make-dir: 3.1.0
       unique-string: 2.0.0
       write-file-atomic: 3.0.3
@@ -412,7 +408,7 @@ packages:
   /constantinople/4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
     dependencies:
-      '@babel/parser': 7.17.8
+      '@babel/parser': 7.17.9
       '@babel/types': 7.17.0
     dev: false
 
@@ -442,18 +438,18 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /css-select/4.2.1:
+  /css-select/4.3.0:
-    resolution: {integrity: sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==}
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
     dependencies:
       boolbase: 1.0.0
-      css-what: 5.1.0
+      css-what: 6.1.0
-      domhandler: 4.3.0
+      domhandler: 4.3.1
       domutils: 2.8.0
       nth-check: 2.0.1
     dev: false
 
-  /css-what/5.1.0:
+  /css-what/6.1.0:
-    resolution: {integrity: sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==}
+    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
     dev: false
 
@@ -503,31 +499,31 @@ packages:
     resolution: {integrity: sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=}
     dev: false
 
-  /dom-serializer/1.3.2:
+  /dom-serializer/1.4.1:
-    resolution: {integrity: sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==}
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
     dependencies:
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
-      domhandler: 4.3.0
+      domhandler: 4.3.1
       entities: 2.2.0
     dev: false
 
-  /domelementtype/2.2.0:
+  /domelementtype/2.3.0:
-    resolution: {integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==}
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
     dev: false
 
-  /domhandler/4.3.0:
+  /domhandler/4.3.1:
-    resolution: {integrity: sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==}
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
     engines: {node: '>= 4'}
     dependencies:
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
     dev: false
 
   /domutils/2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
     dependencies:
-      dom-serializer: 1.3.2
+      dom-serializer: 1.4.1
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
-      domhandler: 4.3.0
+      domhandler: 4.3.1
     dev: false
 
   /dot-prop/5.3.0:
@@ -624,7 +620,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       to-regex-range: 5.0.1
-    dev: true
 
   /finalhandler/1.1.2:
     resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
@@ -664,7 +659,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
-    dev: true
     optional: true
 
   /function-bind/1.1.1:
@@ -698,7 +692,6 @@ packages:
     engines: {node: '>= 6'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /global-dirs/3.0.0:
     resolution: {integrity: sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==}
@@ -724,8 +717,8 @@ packages:
       url-parse-lax: 3.0.0
     dev: true
 
-  /graceful-fs/4.2.9:
+  /graceful-fs/4.2.10:
-    resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
+    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
     dev: true
 
   /has-flag/3.0.0:
@@ -770,8 +763,8 @@ packages:
   /htmlparser2/6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
     dependencies:
-      domelementtype: 2.2.0
+      domelementtype: 2.3.0
-      domhandler: 4.3.0
+      domhandler: 4.3.1
       domutils: 2.8.0
       entities: 2.2.0
     dev: false
@@ -804,7 +797,7 @@ packages:
 
   /immutable/4.0.0:
     resolution: {integrity: sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==}
-    dev: true
+    dev: false
 
   /import-lazy/2.1.0:
     resolution: {integrity: sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=}
@@ -839,7 +832,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       binary-extensions: 2.2.0
-    dev: true
 
   /is-ci/2.0.0:
     resolution: {integrity: sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==}
@@ -864,7 +856,6 @@ packages:
   /is-extglob/2.1.1:
     resolution: {integrity: sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -876,7 +867,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       is-extglob: 2.1.1
-    dev: true
 
   /is-installed-globally/0.4.0:
     resolution: {integrity: sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==}
@@ -894,7 +884,6 @@ packages:
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
-    dev: true
 
   /is-obj/2.0.0:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
@@ -1021,8 +1010,8 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
-  /minimist/1.2.5:
+  /minimist/1.2.6:
-    resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
+    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
     dev: true
 
   /morgan/1.10.0:
@@ -1076,7 +1065,6 @@ packages:
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /normalize-url/4.5.1:
     resolution: {integrity: sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==}
@@ -1153,7 +1141,6 @@ packages:
   /picomatch/2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
-    dev: true
 
   /prepend-http/2.0.0:
     resolution: {integrity: sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=}
@@ -1309,7 +1296,7 @@ packages:
     dependencies:
       deep-extend: 0.6.0
       ini: 1.3.8
-      minimist: 1.2.5
+      minimist: 1.2.6
       strip-json-comments: 2.0.1
     dev: true
 
@@ -1318,7 +1305,6 @@ packages:
     engines: {node: '>=8.10.0'}
     dependencies:
       picomatch: 2.3.1
-    dev: true
 
   /registry-auth-token/4.2.1:
     resolution: {integrity: sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==}
@@ -1361,15 +1347,15 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
-  /sass/1.49.9:
+  /sass/1.50.0:
-    resolution: {integrity: sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==}
+    resolution: {integrity: sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
       chokidar: 3.5.3
       immutable: 4.0.0
       source-map-js: 1.0.2
-    dev: true
+    dev: false
 
   /semver-diff/3.1.1:
     resolution: {integrity: sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==}
@@ -1388,8 +1374,8 @@ packages:
     hasBin: true
     dev: true
 
-  /semver/7.3.5:
+  /semver/7.3.7:
-    resolution: {integrity: sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==}
+    resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -1436,7 +1422,7 @@ packages:
   /source-map-js/1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
+    dev: false
 
   /statuses/1.5.0:
     resolution: {integrity: sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=}
@@ -1498,7 +1484,6 @@ packages:
     engines: {node: '>=8.0'}
     dependencies:
       is-number: 7.0.0
-    dev: true
 
   /toidentifier/1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
@@ -1570,7 +1555,7 @@ packages:
       is-yarn-global: 0.3.0
       latest-version: 5.1.0
       pupa: 2.1.1
-      semver: 7.3.5
+      semver: 7.3.7
       semver-diff: 3.1.1
       xdg-basedir: 4.0.0
     dev: true
@@ -1608,7 +1593,7 @@ packages:
     resolution: {integrity: sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==}
     engines: {node: '>= 10.0.0'}
     dependencies:
-      '@babel/parser': 7.17.8
+      '@babel/parser': 7.17.9
       '@babel/types': 7.17.0
       assert-never: 1.2.1
       babel-walk: 3.0.0-canary-5

public/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/favicon/mstile-150x150.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
             <TileColor>#b91d47</TileColor>
         </tile>
     </msapplication>

public/site.webmanifest

@@ -3,20 +3,18 @@
   "short_name": "libremdb",
   "icons": [
     {
-      "src": "/favicon/android-chrome-192x192.png",
+      "src": "/android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "any maskable"
     },
     {
-      "src": "/favicon/android-chrome-512x512.png",
+      "src": "/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"
     }
   ],
   "theme_color": "#0f2c67",
-  "background_color": "#0f2c67",
+  "background_color": "#0f2c67"
-  "display": "standalone",
-  "start_url": "."
 }

views/pug/base.pug

@@ -16,15 +16,15 @@ html(lang="en")
     meta(name='color-scheme', content='light dark')
     meta(name='theme-color', content='#0f2c67')
     meta(name='msapplication-TileColor', content='#b91d47')
-    link(rel='apple-touch-icon', sizes='180x180', href='/favicon/apple-touch-icon.png')
+    link(rel='apple-touch-icon', sizes='180x180', href='/apple-touch-icon.png')
-    link(rel='icon', type='image/png', sizes='32x32', href='/favicon/favicon-32x32.png')
+    link(rel='icon', type='image/png', sizes='32x32', href='/favicon-32x32.png')
-    link(rel='icon', type='image/png', sizes='16x16', href='/favicon/favicon-16x16.png')
+    link(rel='icon', type='image/png', sizes='16x16', href='/favicon-16x16.png')
     link(rel='manifest', href='/site.webmanifest')
-    link(rel='mask-icon', href='/favicon/safari-pinned-tab.svg', color='#5bbad5')
+    link(rel='mask-icon', href='/safari-pinned-tab.svg', color='#5bbad5')
 
   body 
   //input is actually a checkbox hack to enable changing themes without js
-  input#theme-switcher.theme-switcher__input(type="checkbox", name="theme switcher checkbox")
+  input#theme-switcher.theme-switcher__input(type="checkbox", name="theme switcher checkbox", aria-label='Change theme')
   .page
     include _header
 

views/pug/movie.pug

@@ -8,7 +8,8 @@ block content
           img.basic__image(
           src=movie.basic.poster,
           alt=`${movie.basic.name} cover image`,
-          title=`${movie.basic.name} cover image`
+          title=`${movie.basic.name} cover image`,
+          loading='lazy'
           )
         else 
           svg.basic__image-na: use(href='/img/misc/sprite.svg#icon-image-slash')
@@ -64,7 +65,7 @@ block content
         each cast in movie.topCast.actors
           li.actor: figure.actor__details 
             if cast.avatar
-              img.actor__image(src=cast.avatar, alt=`image of ${cast.name}`)
+              img.actor__image(src=cast.avatar, alt=`image of ${cast.name}`, loading='lazy')
             else 
               svg.actor__image-na: use(href='/img/misc/sprite.svg#icon-image-slash')
             figcaption.actor__name= cast.name 
@@ -150,6 +151,6 @@ block content
         .movie__media-box 
           each image, index in movie.media.images
             figure.movie__media-image-secondary-box 
-              img.movie__media-image(src=image, alt=`image ${index + 1} from ${movie.basic.name}`)
+              img.movie__media-image(src=image, alt=`a still from ${movie.basic.name}`, loading='lazy')
       -else 
         p.movie-media__na no media avaiable

views/sass/_abstracts.scss

@@ -95,6 +95,7 @@ $font-type-map: (
 // using em for accessibility reasons(see: https://zellwk.com/blog/media-query-units/)
 // 1em = 16px
 $breakpoints: (
+  bp-1800: 112.5em,
   bp-1100: 68.75em,
   bp-900: 56.25em,
   bp-725: 45.32em,
@@ -105,7 +106,7 @@ $breakpoints: (
 );
 
 // mixin to handle known and unknown breakpoints:
-@mixin bp($given-breakpoint) {
+@mixin bp($given-breakpoint, $min:false) {
   // just  assigning the given value to a new variable since we're going to change it conditionally;
   $breakpoint: $given-breakpoint;
   // if $breakpoints map contains the given variable then getting it's value
@@ -113,7 +114,12 @@ $breakpoints: (
     $breakpoint: map.get($breakpoints, $breakpoint);
   }
   // and then using it for media query. This will also work for straight out values(50em or 800px, for example)
-  @media screen and (max-width: $breakpoint) {
+  $expr: 'max-width: #{$breakpoint}';
+  @if($min) {
+    $expr: 'min-width: #{$breakpoint}';
+  }
+
+  @media screen and ($expr) {
     @content;
   }
 }
@@ -160,6 +166,7 @@ $misc-variables: (
   spacer-200: 2rem,
   spacer-050: 0.5rem,
   spacer-100: 1rem,
+  spacer-150: 1.5rem,
   spacer-300: 3rem,
   spacer-500: 5rem,
   spacer-800: 8rem,
@@ -176,12 +183,12 @@ $themed-variables: (
       dark: color.scale($clr-tertiary, $lightness: -82%),
     ),
   clr-base-heading: (
-    light: darken($clr-tertiary, 9%),
+    light: color.scale($clr-tertiary, $lightness: -35%),
-    dark: color.scale($clr-primary, $lightness: -10%, $saturation: -70%),
+    dark: $clr-primary,
     ),
     clr-base-heading-alt-alpha: (
-    light: initial,
+          light: color.scale($clr-tertiary, $lightness: -15%),
-    dark: initial,
+      dark: color.scale($clr-secondary, $lightness: 95%),
   ),
   clr-base-text: (
     light: $clr-alpha,
@@ -239,7 +246,7 @@ $themed-variables: (
   ),
   clr-card-heading: (
     light: color.scale($clr-tertiary, $lightness: -35%),
-    dark: color.scale($clr-secondary, $lightness: 85%, $saturation: 0%),
+    dark: color.scale($clr-secondary, $lightness: 90%, $saturation: 0%),
   ),
   clr-card-heading-alt-alpha: (
     light: color.scale($clr-tertiary, $lightness: -15%),

views/sass/_base.scss

@@ -14,10 +14,6 @@ html {
   scroll-behavior: smooth;
   font-size: 62.5%;
 
-  @include bp(bp-725) {
-    font-size: 58%;
-  }
-
   @include bp(bp-350) {
     font-size: 55%;
   }

views/sass/_components.scss

@@ -356,7 +356,7 @@
 .features {
   display: grid;
   grid-template-rows: max-content auto;
-  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
   gap: var(--spacer-500);
 
   @include bp(bp-550) {

views/sass/_layout.scss

@@ -280,8 +280,10 @@
 //                           MAIN
 ////////////////////////////////////////////////////////////////
 .main {
-  // max-width: 200rem;
+  @include bp(bp-1800, true) {
-  // margin-inline: auto;
+    width: 180rem;
+    margin-inline: auto;
+  }
   padding: 2rem;
 
   @include bp(bp-450) {

views/sass/_pages.scss

@@ -31,10 +31,10 @@
 }
 
 .go-to-page {
-  margin: 3rem 5rem;
+  margin: var(--spacer-300) var(--spacer-500);
   display: grid;
   grid-auto-flow: column;
-  gap: 5rem;
+  gap: var(--spacer-500);
   place-content: center;
   place-items: center;
 
@@ -44,8 +44,8 @@
   }
 
   &__icon {
-    height: 3rem;
+    height: var(--fs-300);
-    width: 3rem;
+    width: var(--fs-300);
     fill: var(--clr-button-alt-alpha);
   }
 
@@ -68,14 +68,14 @@
 ////////////////////////////////////////////////////////////////
 .overview {
   &__nav-box {
-    padding: 5rem 2rem;
+    padding: var(--spacer-500) var(--spacer-200);
 
     @include bp(bp-725) {
-      padding: 2rem;
+      padding: var(--spacer-200);
     }
 
     @include bp(bp-550) {
-      padding: 2rem 0;
+      padding: var(--spacer-200) 0;
     }
   }
 
@@ -86,7 +86,7 @@
   }
 
   &__nav {
-    padding: 0 2rem;
+    padding: 0 var(--spacer-200);
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -94,7 +94,7 @@
     // overflow-x: scroll;
 
     @include bp(bp-725) {
-      padding: 0 1rem;
+      padding: 0 var(--spacer-100);
     }
 
     @include bp(bp-550) {
@@ -159,7 +159,7 @@
   }
 
   &__features {
-    padding: 6rem;
+    padding: var(--spacer-500);
 
     // display: grid;
     // grid-template-rows: max-content auto;
@@ -167,8 +167,8 @@
     // gap: 6rem;
     // padding: 6rem;
 
-    @include bp(bp-450) {
+    @include bp(bp-550) {
-      padding: 1rem;
+      padding: var(--spacer-100);
     }
   }
 
@@ -184,7 +184,7 @@
     max-width: 120rem;
     margin: 0 auto;
 
-    @include bp(bp-450) {
+    @include bp(bp-550) {
       padding: 5rem 1rem;
     }
   }
@@ -222,7 +222,7 @@
   &__item {
     // background-color: var(--color-secondary);
     display: grid;
-    gap: 1.5rem;
+    gap: var(--spacer-150);
   }
 
   &__item-heading {
@@ -275,7 +275,7 @@
 
   &__ways {
     text-align: center;
-    padding: 1rem;
+    padding: var(--spacer-100);
   }
 
   &__ways-image {
@@ -496,17 +496,20 @@
   &__heading-main {
     font-size: var(--fs-350);
     font-family: var(--ff-alt-alpha);
-    color: var(--clr-card-heading);
+    color: var(--clr-base-heading);
 
     @include bp(bp-900) {
-      font-size: 3rem;
+      font-size: var(--fs-300);
+    }
+    @include bp(bp-550) {
+      font-size: var(--fs-250);
     }
   }
   &__heading-sub {
     font-size: 1em;
     font-weight: 600;
     font-family: var(--ff-alt-alpha);
-    color: var(--clr-card-heading-alt-alpha);
+    color: var(--clr-base-heading-alt-alpha);
   }
 
   &__storyline,
@@ -584,11 +587,6 @@
     max-height: 30rem;
     flex: 1 0 30rem;
     max-width: 30rem;
-
-    @include bp(bp-900) {
-      max-height: 20rem;
-      flex: 1 0 20rem;
-    }
   }
   &__media-box {
     display: flex;
@@ -637,6 +635,6 @@
   }
 
   @include bp(bp-550) {
-    padding: var(--spacer-200);
+    padding-inline: var(--spacer-200);
   }
 }