Inlined stylesheet, fixed colors

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "moshing-mammut",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "moshing-mammut",
-      "version": "1.3.0",
+      "version": "1.3.1",
       "license": "LGPL-3.0-or-later",
       "dependencies": {
         "dotenv": "^16.0.3",
@@ -704,13 +704,13 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "1.15.7",
+      "version": "1.15.8",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.7.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.8.tgz",
-      "integrity": "sha512-dgdKExsMJ16X3q8tEcuDlv+QIWAlJcf7IqCU2HWV13nmtTzwSA2n4VtEx9Gy5OGhH0SUAGNIupmlf0TdFSMXbw==",
+      "integrity": "sha512-xPIF3UbFEA5BBZWFTGGUtSZ0O3DAtmzIp/yZZVdLIfzZ9+geKG3iGSVFnOUdYstjU7JcvJg12UC5MD5xoED59A==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
-        "@sveltejs/vite-plugin-svelte": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^2.1.0",
         "@types/cookie": "^0.5.1",
         "cookie": "^0.5.0",
         "devalue": "^4.3.0",
@@ -722,7 +722,7 @@
         "set-cookie-parser": "^2.5.1",
         "sirv": "^2.0.2",
         "tiny-glob": "^0.2.9",
-        "undici": "5.20.0"
+        "undici": "~5.22.0"
       },
       "bin": {
         "svelte-kit": "svelte-kit.js"
@@ -748,9 +748,9 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "2.1.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.1.1.tgz",
-      "integrity": "sha512-Bc9A8mtTGlhTICdLL/aZ+jyHI3kwtkcXremOH5xwjbNNKOTOtY8nMyG8/oZ5KK8IuUfAn1WL58Bp2tofDJBW0w==",
+      "integrity": "sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -808,9 +808,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.16.0",
+      "version": "18.16.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
-      "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ==",
+      "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA==",
       "dev": true
     },
     "node_modules/@types/pug": {
@@ -850,15 +850,15 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.1.tgz",
-      "integrity": "sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==",
+      "integrity": "sha512-AVi0uazY5quFB9hlp2Xv+ogpfpk77xzsgsIEWyVS7uK/c7MZ5tw7ZPbapa0SbfkqE0fsAMkz5UwtgMLVk2BQAg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
-        "@typescript-eslint/type-utils": "5.59.0",
+        "@typescript-eslint/type-utils": "5.59.1",
-        "@typescript-eslint/utils": "5.59.0",
+        "@typescript-eslint/utils": "5.59.1",
         "debug": "^4.3.4",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
@@ -884,14 +884,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.1.tgz",
-      "integrity": "sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==",
+      "integrity": "sha512-nzjFAN8WEu6yPRDizIFyzAfgK7nybPodMNFGNH0M9tei2gYnYszRDqVA0xlnRjkl7Hkx2vYrEdb6fP2a21cG1g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.1",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -911,13 +911,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.1.tgz",
-      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
+      "integrity": "sha512-mau0waO5frJctPuAzcxiNWqJR5Z8V0190FTSqRw1Q4Euop6+zTwHAf8YIXNwDOT29tyUDrQ65jSg9aTU/H0omA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
-        "@typescript-eslint/visitor-keys": "5.59.0"
+        "@typescript-eslint/visitor-keys": "5.59.1"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -928,13 +928,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.1.tgz",
-      "integrity": "sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==",
+      "integrity": "sha512-ZMWQ+Oh82jWqWzvM3xU+9y5U7MEMVv6GLioM3R5NJk6uvP47kZ7YvlgSHJ7ERD6bOY7Q4uxWm25c76HKEwIjZw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.1",
-        "@typescript-eslint/utils": "5.59.0",
+        "@typescript-eslint/utils": "5.59.1",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -955,9 +955,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.1.tgz",
-      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==",
+      "integrity": "sha512-dg0ICB+RZwHlysIy/Dh1SP+gnXNzwd/KS0JprD3Lmgmdq+dJAJnUPe1gNG34p0U19HvRlGX733d/KqscrGC1Pg==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -968,13 +968,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.1.tgz",
-      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
+      "integrity": "sha512-lYLBBOCsFltFy7XVqzX0Ju+Lh3WPIAWxYpmH/Q7ZoqzbscLiCW00LeYCdsUnnfnj29/s1WovXKh2gwCoinHNGA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
-        "@typescript-eslint/visitor-keys": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.1",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -995,17 +995,17 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.1.tgz",
-      "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
+      "integrity": "sha512-MkTe7FE+K1/GxZkP5gRj3rCztg45bEhsd8HYjczBuYm+qFHP5vtZmjx3B0yUCDotceQ4sHgTyz60Ycl225njmA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.1",
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.1",
         "eslint-scope": "^5.1.1",
         "semver": "^7.3.7"
       },
@@ -1021,12 +1021,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.59.0",
+      "version": "5.59.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.1.tgz",
-      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
+      "integrity": "sha512-6waEYwBTCWryx0VJmP7JaM4FpipLsFl9CvYf2foAE8Qh/Y0s+bxWysciwOs0LTBED4JCaNxTZ5rGadB14M6dwA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.1",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -3484,9 +3484,9 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
     "node_modules/sirv": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
-      "integrity": "sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==",
+      "integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
       "dev": true,
       "dependencies": {
         "@polka/url": "^1.0.0-next.20",
@@ -3940,15 +3940,15 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.20.0",
+      "version": "5.22.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.20.0.tgz",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.22.0.tgz",
-      "integrity": "sha512-J3j60dYzuo6Eevbawwp1sdg16k5Tf768bxYK4TUJRH7cBM4kFCbf3mOnM/0E3vQYXvpxITbbWmBafaDbxLDz3g==",
+      "integrity": "sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==",
       "dev": true,
       "dependencies": {
         "busboy": "^1.6.0"
       },
       "engines": {
-        "node": ">=12.18"
+        "node": ">=14.0"
       }
     },
     "node_modules/unique-filename": {
@@ -3984,14 +3984,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
-      "version": "4.3.1",
+      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.3.tgz",
-      "integrity": "sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==",
+      "integrity": "sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.17.5",
-        "postcss": "^8.4.21",
+        "postcss": "^8.4.23",
-        "rollup": "^3.20.2"
+        "rollup": "^3.21.0"
       },
       "bin": {
         "vite": "bin/vite.js"

src/app.html

@@ -10,7 +10,7 @@
     <meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
     <meta name="application-name" content="Moshing Mammut" />
     <meta name="msapplication-TileColor" content="#2e0b78" />
-    <link rel="stylesheet" href="%sveltekit.assets%/style.css" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#BCB9B2" media="(prefers-color-scheme: light)" />
@@ -19,14 +19,40 @@
     %sveltekit.head%
     <style>
       body {
-        --color-text: #2f0c7a;
+        --color-blue: hsl(259, 82%, 26%);
-        --color-bg: white;
+        --color-blue-dark: hsl(259, 82%, 13%);
-        --color-border: #17063b;
+        --color-lavender: hsl(253, 82%, 33%);
-        --color-link: #563acc;
+        --color-mauve: hsl(273, 82%, 38%);
-        --color-link-visited: #858afa;
+
+        --color-grey: hsl(44, 7%, 41%);
+        --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
+        --color-grey-light: hsl(0, 0%, 98%);
+
+        --color-red: hsl(7, 100%, 56%);
+        --color-red-light: hsl(7, 100%, 61%);
+        --color-red-lighter: hsl(7, 100%, 68%);
+        --color-red-dark: hsl(7, 100%, 48%);
+        --color-red-desat: hsl(7, 20%, 56%);
+        --color-red-desat-dark: hsl(7, 20%, 30%);
+        --color-red-desat-desat: hsl(7, 8%, 56%);
+
+        --color-text: var(--color-blue-dark);
+        --color-border: var(--color-grey);
+        --color-link: var(--color-mauve);
+        --color-link-visited: var(--color-lavender);
+        --color-bg: var(--color-grey-light);
+        --color-bg-translucent: hsla(42, 7%, 72%, 0.5);
+        --color-button: var(--color-red-light);
+        --color-button-shadow: var(--color-red-desat-dark);
+        --color-button-hover: var(--color-red);
+        --color-button-deactivated: var(--color-red-desat-desat);
+        --color-button-text: var(--color-blue-dark);
 
         color: var(--color-text);
         background-color: var(--color-bg);
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
+          Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+          'Segoe UI Emoji', 'Segoe UI Symbol';
       }
 
       a {
@@ -38,11 +64,20 @@
 
       @media (prefers-color-scheme: dark) {
         body {
-          --color-text: white;
+          --color-lavender: hsl(273, 43%, 65%);
-          --color-bg: #17063b;
+          --color-mauve: hsl(286, 73%, 81%);
-          --color-border: white;
+
-          --color-link: #8a9bf0;
+          --color-text: var(--color-grey-light);
-          --color-link-visited: #c384fb;
+          --color-border: var(--color-grey-light);
+          --color-link: var(--color-lavender);
+          --color-link-visited: var(--color-mauve);
+          --color-bg: var(--color-blue-dark);
+          --color-bg-translucent: hsla(259, 82%, 26%, 0.5);
+          --color-button: var(--color-red-light);
+          --color-button-shadow: var(--color-red-desat);
+          --color-button-hover: var(--color-red);
+          --color-button-deactivated: var(--color-red-desat-desat);
+          --color-button-text: var(--color-blue-dark);
         }
       }
     </style>

src/lib/components/PostComponent.svelte

@@ -128,7 +128,6 @@
     }
     .cover:not(.background) {
       z-index: 1;
-      width: 60px;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     }

static/style.css

@@ -1,59 +0,0 @@
-body {
-  --color-blue: hsl(259, 82%, 26%);
-  --color-blue-dark: hsl(259, 82%, 10%);
-  --color-lavender: hsl(273, 43%, 65%);
-  --color-mauve: hsl(286, 73%, 81%);
-
-  --color-grey: hsl(44, 7%, 41%);
-  --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
-  --color-grey-light: hsl(42, 7%, 72%);
-
-  --color-red: hsl(7, 100%, 56%);
-  --color-red-light: hsl(7, 100%, 61%);
-  --color-red-lighter: hsl(7, 100%, 68%);
-  --color-red-dark: hsl(7, 100%, 48%);
-  --color-red-desat: hsl(7, 20%, 56%);
-  --color-red-desat-dark: hsl(7, 20%, 30%);
-  --color-red-desat-desat: hsl(7, 8%, 56%);
-
-  --color-text: var(--color-blue);
-  --color-border: var(--color-grey);
-  --color-link: var(--color-mauve);
-  --color-link-visited: var(--color-lavender);
-  --color-bg: var(--color-grey-light);
-  --color-bg-translucent: hsla(42, 7%, 72%, 0.5);
-  --color-button: var(--color-red-light);
-  --color-button-shadow: var(--color-red-desat-dark);
-  --color-button-hover: var(--color-red);
-  --color-button-deactivated: var(--color-red-desat-desat);
-  --color-button-text: var(--color-blue-dark);
-
-  color: var(--color-text);
-  background-color: var(--color-bg);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
-}
-
-a {
-  color: var(--color-link);
-}
-a:visited {
-  color: var(--color-link-visited);
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    --color-text: var(--color-grey-light);
-    --color-border: var(--color-grey-light);
-    --color-link: var(--color-mauve);
-    --color-link-visited: var(--color-lavender);
-    --color-bg: var(--color-blue);
-    --color-bg-translucent: hsla(259, 82%, 26%, 0.5);
-    --color-button: var(--color-red-light);
-    --color-button-shadow: var(--color-red-desat);
-    --color-button-hover: var(--color-red);
-    --color-button-deactivated: var(--color-red-desat-desat);
-    --color-button-text: var(--color-blue-dark);
-  }
-}

svelte.config.js

@@ -12,6 +12,15 @@ const config = {
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter()
+  },
+
+  csp: {
+    directives: {
+      'script-src': ['self']
+    },
+    reportOnly: {
+      'script-src': ['self']
+    }
   }
 };