doing a clean wipe to touch up the sludge links

I suppose I should do a profile here.

.gitignore

@@ -1,4 +1,6 @@
 node_modules
+build
+ARCHIVE
 
 # Output
 .output

bun.lock

@@ -11,6 +11,8 @@
       },
       "dependencies": {
         "marked": "^15.0.11",
+        "@sveltejs/kit": "^2.27.3",
+        "marked": "^15.0.12",
         "proquint": "^0.0.1",
       },
       "devDependencies": {
@@ -26,10 +28,13 @@
         "@sveltejs/vite-plugin-svelte": "^5.0.0",
         "sass": "^1.87.0",
         "svelte": "^5.0.0",
+        "@sveltejs/vite-plugin-svelte": "^5.1.1",
+        "sass": "^1.90.0",
+        "svelte": "^5.38.0",
         "svelte-adapter-bun": "^0.5.2",
-        "svelte-check": "^4.0.0",
+        "svelte-check": "^4.3.1",
-        "typescript": "^5.0.0",
+        "typescript": "^5.9.2",
-        "vite": "^6.2.6",
+        "vite": "^6.3.5",
       },
     },
   },
@@ -190,12 +195,17 @@
 
     "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
 
+    "@standard-schema/spec": ["@standard-schema/spec@1.0.0", "", {}, "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="],
+
     "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.5", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ=="],
 
     "@sveltejs/adapter-node": ["@sveltejs/adapter-node@5.5.4", "", { "dependencies": { "@rollup/plugin-commonjs": "^29.0.0", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^16.0.0", "rollup": "^4.59.0" }, "peerDependencies": { "@sveltejs/kit": "^2.4.0" } }, "sha512-45X92CXW+2J8ZUzPv3eLlKWEzINKiiGeFWTjyER4ZN4sGgNoaoeSkCY/QYNxHpPXy71QPsctwccBo9jJs0ySPQ=="],
 
     "@sveltejs/kit": ["@sveltejs/kit@2.27.3", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.1.0", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^3.0.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-jiG3NGZ8RRpi+ncjVnX+oR7uWEgzy//3YLGcTU5mHtjGraeGyNDr7GJFHlk7z0vi8bMXpXIUkEXj6p70FJmHvw=="],
 
+    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@5.1.1", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1", "debug": "^4.4.1", "deepmerge": "^4.3.1", "kleur": "^4.1.5", "magic-string": "^0.30.17", "vitefu": "^1.0.6" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ=="],
+    "@sveltejs/kit": ["@sveltejs/kit@2.27.3", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.1.0", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^3.0.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-jiG3NGZ8RRpi+ncjVnX+oR7uWEgzy//3YLGcTU5mHtjGraeGyNDr7GJFHlk7z0vi8bMXpXIUkEXj6p70FJmHvw=="],
+
     "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@5.1.1", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1", "debug": "^4.4.1", "deepmerge": "^4.3.1", "kleur": "^4.1.5", "magic-string": "^0.30.17", "vitefu": "^1.0.6" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ=="],
 
     "@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@4.0.1", "", { "dependencies": { "debug": "^4.3.7" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^5.0.0", "svelte": "^5.0.0", "vite": "^6.0.0" } }, "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw=="],
@@ -241,6 +251,7 @@
     "esrap": ["esrap@2.1.0", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" } }, "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA=="],
 
     "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+    "esrap": ["esrap@2.1.0", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" } }, "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA=="],
 
     "fdir": ["fdir@6.4.4", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg=="],
 
@@ -269,8 +280,6 @@
 
     "immutable": ["immutable@5.1.1", "", {}, "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="],
 
-    "import-meta-resolve": ["import-meta-resolve@4.1.0", "", {}, "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw=="],
-
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
@@ -288,6 +297,7 @@
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
     "marked": ["marked@15.0.11", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-1BEXAU2euRCG3xwgLVT1y0xbJEld1XOrmRJpUwRCcy7rxhSCwMrmEu9LXoPhHSCJG41V7YcQ2mjKRr5BA3ITIA=="],
+    "marked": ["marked@15.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA=="],
 
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
@@ -326,6 +336,7 @@
     "sass": ["sass@1.90.0", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q=="],
 
     "sass": ["sass@1.87.0", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-d0NoFH4v6SjEK7BoX810Jsrhj7IQSYHAHLi/iSpgqKc7LaIDshFRlSg5LOymf9FqQhxEHs2W5ZQXlvy0KD45Uw=="],
+    "sass": ["sass@1.90.0", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q=="],
 
     "set-cookie-parser": ["set-cookie-parser@2.7.1", "", {}, "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="],
 
@@ -339,10 +350,11 @@
 
     "svelte-check": ["svelte-check@4.3.1", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-lkh8gff5gpHLjxIV+IaApMxQhTGnir2pNUAqcNgeKkvK5bT/30Ey/nzBxNLDlkztCH4dP7PixkMt9SWEKFPBWg=="],
     "svelte": ["svelte@5.28.2", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^1.4.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-FbWBxgWOpQfhKvoGJv/TFwzqb4EhJbwCD17dB0tEpQiw1XyUEKZJtgm4nA4xq3LLsMo7hu5UY/BOFmroAxKTMg=="],
+    "svelte": ["svelte@5.38.0", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^2.1.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-cWF1Oc2IM/QbktdK89u5lt9MdKxRtQnRKnf2tq6KOhYuhLOd2hbMuTiJ+vWMzAeMDe81AzbCgLd4GVtOJ4fDRg=="],
 
     "svelte-adapter-bun": ["svelte-adapter-bun@0.5.2", "", { "dependencies": { "tiny-glob": "^0.2.9" } }, "sha512-xEtFgaal6UgrCwwkSIcapO9kopoFNUYCYqyKCikdqxX9bz2TDYnrWQZ7qBnkunMxi1HOIERUCvTcebYGiarZLA=="],
 
-    "svelte-check": ["svelte-check@4.1.7", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-1jX4BzXrQJhC/Jt3SqYf6Ntu//vmfc6VWp07JkRfK2nn+22yIblspVUo96gzMkg0Zov8lQicxhxsMzOctwcMQQ=="],
+    "svelte-check": ["svelte-check@4.3.1", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-lkh8gff5gpHLjxIV+IaApMxQhTGnir2pNUAqcNgeKkvK5bT/30Ey/nzBxNLDlkztCH4dP7PixkMt9SWEKFPBWg=="],
 
     "tiny-glob": ["tiny-glob@0.2.9", "", { "dependencies": { "globalyzer": "0.1.0", "globrex": "^0.1.2" } }, "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg=="],
 
@@ -356,6 +368,9 @@
 
     "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
 
+    "vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
+    "typescript": ["typescript@5.9.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A=="],
+
     "vite": ["vite@6.3.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ=="],
 
     "vitefu": ["vitefu@1.0.6", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["vite"] }, "sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA=="],
@@ -408,6 +423,8 @@
 
     "vite/rollup/@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.40.1", "", { "os": "win32", "cpu": "x64" }, "sha512-ECyOuDeH3C1I8jH2MK1RtBJW+YPMvSfT0a5NN0nHfQYnDSJ6tUiZH3gzwVP5/Kfh/+Tt7tpWVF9LXNTnhTJ3kA=="],
 
+    "@sveltejs/vite-plugin-svelte-inspector/debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
+
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
   }
 }

package.json

@@ -14,18 +14,17 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.1.1",
-		"@sveltejs/kit": "^2.16.0",
+		"sass": "^1.90.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"svelte": "^5.38.0",
-		"sass": "^1.87.0",
-		"svelte": "^5.0.0",
 		"svelte-adapter-bun": "^0.5.2",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.3.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.9.2",
-		"vite": "^6.2.6"
+		"vite": "^6.3.5"
 	},
 	"dependencies": {
-		"marked": "^15.0.11",
+		"marked": "^15.0.12",
+		"@sveltejs/kit": "^2.27.3",
 		"proquint": "^0.0.1"
 	}
 }

sludge-link.servce

@@ -0,0 +1,15 @@
+[Unit]
+Description=Sludge Link website, built on Sveltekit, compiled into Bun
+After=network.target
+StartLimitIntervalSec=10
+
+[Service]
+Type=simple
+User=root
+WorkingDirectory=/root/build
+ExecStart=/root/.bun/bin/bun run index.js
+Restart=always
+StartLimitBurst=3
+
+[Install]
+WantedBy=multi-user.target

src/app.scss

@@ -1,6 +1,7 @@
 $blue: oklch(0.76 0.0358 233.23);
 $yellow: oklch(0.84 0.123 100);
-$orange: oklch(0.76 0.1239 65);
+$orange: oklch(0.76 0.239 65);
 $brown: oklch(0.36 0.042 42);
 $green: oklch(0.22 0.0211 174);
-$green-42: oklch(0.42 0.042 142);
+$green-42: oklch(0.42 0.042 142);
+

src/routes/+layout.svelte

@@ -5,6 +5,13 @@
   }
   let { data, children }: Props = $props();
   // $inspect("l",data);
+  let theme = $state("green");
+  const THEMES = ["blue", "yellow", "orange", "brown", "green"];
+
+  function change_theme() {
+    let index = THEMES.findIndex((color) => theme == color);
+    theme = THEMES[(index + 1) % THEMES.length];
+  }
 </script>
 
 <svelte:head>
@@ -12,44 +19,220 @@
   <meta name="description" content="Sludge's internet facing spot" />
 </svelte:head>
 
-<nav>
+<div id="buddy" class={theme}>
-  <a href="/">Sludge</a>
+  <nav>
-  <a href="/fest">Fest</a>
+    <a href="/">Sludge</a>
-  <a href="/pork">Pork</a>
+    <button onclick={change_theme}>Cycle Color</button>
-  <a href="/blag">Blag</a>
+    <a href="/fest">Fest</a>
-</nav>
+    <a href="/pork">Pork</a>
+    <!-- <a href="/blag">Blag</a> -->
+  </nav>
 
-<main>
+  <main>
-  {@render children()}
+    {@render children()}
-</main>
+  </main>
+</div>
 
 <style lang="scss">
-  @use "/src/app.scss" as *;
+  :root {
-  :global(body) {
+    --blue: 324;
-    background-color: $green-42;
+    --yellow: 77;
+    --orange: 188;
+    --brown: 42;
+    --green: 142;
+    --green-42: oklch(0.42 0.042 142);
+    --br: 0.375rem;
+    --primary: var(--green);
+
+    .blue {
+      --primary: var(--blue);
+      --primary-1: oklch(0.91 0.046 var(--primary));
+      --primary-2: oklch(0.843 0.083 var(--primary));
+      --primary-3: oklch(0.777 0.122 var(--primary));
+      --primary-4: oklch(0.71 0.163 var(--primary));
+      --primary-5: oklch(0.643 0.179 var(--primary));
+      --primary-6: oklch(0.577 0.161 var(--primary));
+      --primary-7: oklch(0.51 0.142 var(--primary));
+      --primary-8: oklch(0.443 0.124 var(--primary));
+      --primary-9: oklch(0.377 0.105 var(--primary));
+      --primary-10: oklch(0.31 0.086 var(--primary));
+      --primary-11: oklch(0.243 0.068 var(--primary));
+      --primary-12: oklch(0.177 0.049 var(--primary));
+      --primary-13: oklch(0.11 0.031 var(--primary));
+    }
+    .yellow {
+      --primary: var(--yellow);
+      --primary-1: oklch(0.91 0.046 var(--primary));
+      --primary-2: oklch(0.843 0.083 var(--primary));
+      --primary-3: oklch(0.777 0.122 var(--primary));
+      --primary-4: oklch(0.71 0.163 var(--primary));
+      --primary-5: oklch(0.643 0.179 var(--primary));
+      --primary-6: oklch(0.577 0.161 var(--primary));
+      --primary-7: oklch(0.51 0.142 var(--primary));
+      --primary-8: oklch(0.443 0.124 var(--primary));
+      --primary-9: oklch(0.377 0.105 var(--primary));
+      --primary-10: oklch(0.31 0.086 var(--primary));
+      --primary-11: oklch(0.243 0.068 var(--primary));
+      --primary-12: oklch(0.177 0.049 var(--primary));
+      --primary-13: oklch(0.11 0.031 var(--primary));
+    }
+    .orange {
+      --primary: var(--brown);
+      --primary-1: oklch(0.91 0.046 var(--primary));
+      --primary-2: oklch(0.843 0.083 var(--primary));
+      --primary-3: oklch(0.777 0.122 var(--primary));
+      --primary-4: oklch(0.71 0.163 var(--primary));
+      --primary-5: oklch(0.643 0.179 var(--primary));
+      --primary-6: oklch(0.577 0.161 var(--primary));
+      --primary-7: oklch(0.51 0.142 var(--primary));
+      --primary-8: oklch(0.443 0.124 var(--primary));
+      --primary-9: oklch(0.377 0.105 var(--primary));
+      --primary-10: oklch(0.31 0.086 var(--primary));
+      --primary-11: oklch(0.243 0.068 var(--primary));
+      --primary-12: oklch(0.177 0.049 var(--primary));
+      --primary-13: oklch(0.11 0.031 var(--primary));
+    }
+    .brown {
+      --primary: var(--brown);
+      --primary-1: oklch(0.91 0.046 var(--primary));
+      --primary-2: oklch(0.843 0.083 var(--primary));
+      --primary-3: oklch(0.777 0.122 var(--primary));
+      --primary-4: oklch(0.71 0.163 var(--primary));
+      --primary-5: oklch(0.643 0.179 var(--primary));
+      --primary-6: oklch(0.577 0.161 var(--primary));
+      --primary-7: oklch(0.51 0.142 var(--primary));
+      --primary-8: oklch(0.443 0.124 var(--primary));
+      --primary-9: oklch(0.377 0.105 var(--primary));
+      --primary-10: oklch(0.31 0.086 var(--primary));
+      --primary-11: oklch(0.243 0.068 var(--primary));
+      --primary-12: oklch(0.177 0.049 var(--primary));
+      --primary-13: oklch(0.11 0.031 var(--primary));
+    }
+    .green {
+      --primary: var(--green);
+      --primary-1: oklch(0.91 0.046 var(--primary));
+      --primary-2: oklch(0.843 0.083 var(--primary));
+      --primary-3: oklch(0.777 0.122 var(--primary));
+      --primary-4: oklch(0.71 0.163 var(--primary));
+      --primary-5: oklch(0.643 0.179 var(--primary));
+      --primary-6: oklch(0.577 0.161 var(--primary));
+      --primary-7: oklch(0.51 0.142 var(--primary));
+      --primary-8: oklch(0.443 0.124 var(--primary));
+      --primary-9: oklch(0.377 0.105 var(--primary));
+      --primary-10: oklch(0.31 0.086 var(--primary));
+      --primary-11: oklch(0.243 0.068 var(--primary));
+      --primary-12: oklch(0.177 0.049 var(--primary));
+      --primary-13: oklch(0.11 0.031 var(--primary));
+    }
+  }
+  #buddy {
+    min-height: 100vh;
+    background-color: var(--primary-11);
     // '3px-tile.png',
     // 'arabesque.png',
     // 'beige-paper.png',
     // 'binding-dark.png',
     // '45-degree-fabric-light.png'
-
     background-image: url("/patterns/arabesque.png");
     background-attachment: fixed;
   }
+
+  :global {
+    html,
+    body,
+    div,
+    span,
+    object,
+    iframe,
+    figure,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    code,
+    em,
+    img,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    b,
+    u,
+    i,
+    ol,
+    ul,
+    li,
+    fieldset,
+    form,
+    label,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    main,
+    canvas,
+    embed,
+    footer,
+    header,
+    nav,
+    section,
+    video {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: 100%;
+      // font: inherit;
+      color: var(--primary-1);
+      font-family: "Garamond", serif;
+      font-size-adjust: 0.75;
+      vertical-align: baseline;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+    }
+  }
+
   nav {
-    padding: 0 20%;
+    padding: 1rem 20%;
     display: flex;
     gap: 1rem;
     justify-content: flex-end;
-    text-shadow: 3px 3px 3px $green;
+    text-shadow: 3px 3px 3px var(--primary-9);
     a {
       font-weight: 700;
+      line-height: 2rem;
+      font-size: 1.5rem;
       text-decoration: none;
       &:first-child {
         margin-right: auto;
       }
       &:hover {
-        color: $orange;
+        color: var(--primary-8);
+      }
+    }
+    button {
+      background: var(--primary-8);
+      border-radius: var(--br);
+      border: none;
+      height: fit-content;
+      padding: 0.375rem 0.5rem;
+      margin: auto 0;
+      font-family: "Baskerville";
+      font-weight: 900;
+      color: var(--primary-1);
+      &:hover {
+        background: var(--primary-10);
       }
     }
   }
@@ -59,72 +242,6 @@
     flex-direction: row;
   }
 
-  :global(
-      html,
-      body,
-      div,
-      span,
-      object,
-      iframe,
-      figure,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p,
-      blockquote,
-      pre,
-      a,
-      code,
-      em,
-      img,
-      small,
-      strike,
-      strong,
-      sub,
-      sup,
-      tt,
-      b,
-      u,
-      i,
-      ol,
-      ul,
-      li,
-      fieldset,
-      form,
-      label,
-      table,
-      caption,
-      tbody,
-      tfoot,
-      thead,
-      tr,
-      th,
-      td,
-      main,
-      canvas,
-      embed,
-      footer,
-      header,
-      nav,
-      section,
-      video
-    ) {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    // font: inherit;
-    color: $yellow;
-    font-family: "Garamond", serif;
-    font-size-adjust: 0.75;
-    vertical-align: baseline;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-  }
-
   @font-face {
     font-family: "Baskerville";
     font-display: swap;

src/routes/+page.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <section>
-  <h1><b>S</b>ludge and <b>F</b>riends</h1>
+  <h1><b title="Sludge">S</b>&amp;<b title="Friends">F</b></h1>
   <h3>Here we make friends and mistakes</h3>
   <div>
     <div>
@@ -21,37 +21,57 @@
       </p>
     </div>
     <div>
-      <a href="/blag"><h2>Blag</h2></a>
+      <a href="https://plotters.sludge.link"><h2>Plotters</h2></a>
       <p>
-        There is nothing of value here, I like misspelling things and also for
+        This is a game we slapped together to see if we can agree on things. Its
-        some reason building my own versions of things that other people have
+        definitely not the same as some of those other games
-        perfected
       </p>
     </div>
   </div>
 </section>
 
 <style lang="scss">
-  @use "/src/app.scss" as *;
-  @use "sass:color";
-
   section {
     max-width: 60rem;
-    margin: 1rem auto 0;
+    margin: 1rem auto;
     display: flex;
     flex-direction: column;
     align-items: center;
+    div {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      a:hover {
+        color: var(--primary-3);
+      }
+      div {
+        background: var(--primary-8);
+        padding: 2rem 1.5rem;
+        border-radius: var(--br);
+        max-width: 40rem;
+      }
+    }
     h1 {
+      line-height: 5rem;
       font-size: 1.5rem;
+      text-align: center;
+      text-justify: center;
       b {
         font-family: Initials;
         font-weight: 500;
-        font-size: 4.5rem;
+        font-size: 3.5rem;
+        padding: 0.5rem;
       }
     }
     h3 {
-      color: color.scale($yellow, $alpha: -35%);
+      // color: oklch(from var(--primary-4) calc(l + 0.2) c h);
+      color: var(--primary-9);
       font-size: 0.75rem;
     }
+    h2 {
+      // line-height: 2rem;
+      font-size: 1.5rem;
+      color: inherit;
+    }
   }
 </style>

src/routes/blag/new/+page.server.ts

@@ -8,7 +8,7 @@ import { publish_blog } from "$lib/db"
 export const actions = {
   default: async ({ cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest }) => {
     let data = await request.formData();
-    console.log(data);
+    console.log("lol maybe dont have sql insert open on the internet will", data);
-    console.log(publish_blog(data.get('title'), data.get('uri'), data.get('body')))
+    //   console.log(publish_blog(data.get('title'), data.get('uri'), data.get('body')))
   }
 }

src/routes/fest/+page.svelte

@@ -1,26 +1,4 @@
 <script lang="typescript">
-  let photos = [
-    "00",
-    "01",
-    "02",
-    "03",
-    "04",
-    "05",
-    "06",
-    "07",
-    "08",
-    "09",
-    "10",
-    "11",
-    "12",
-    "13",
-    "14",
-    "15",
-    "16",
-    "17",
-    "18",
-    "19",
-  ];
 </script>
 
 <svelte:head>
@@ -167,20 +145,13 @@
 </section>
 
 <style lang="scss">
-  @use "/src/app.scss" as *;
-  @use "sass:color";
-
-  :global(body) {
-    background-color: $brown;
-  }
-
   section {
     width: 100%;
     text-align: center;
     padding-top: 2rem;
-    text-shadow: 3px 3px 3px $green;
+    text-shadow: 3px 3px 3px var(--primary-9);
     hr {
-      background: color.complement($brown, oklch);
+      background: var(--primary-4);
       border: none;
       height: 0.25rem;
       margin: 2rem 0;
@@ -213,4 +184,3 @@
     }
   }
 </style>
-

src/routes/pork/+page.svelte

@@ -1,41 +1,47 @@
 <script lang="ts">
-  import { RAW_COST, PROCESSED_COST } from '$lib/index';
+  import { RAW_COST, PROCESSED_COST } from "$lib/index";
+  import type { MouseEventHandler } from "svelte/elements";
   let { data } = $props<{ data: { pork: Pork[] } }>();
   interface Pork {
     pork: {
-        name: string;
+      name: string;
-        min_weight: number;
+      min_weight: number;
-        max_weight: number;
+      max_weight: number;
-        stock: number;
+      stock: number;
-        raw_cut: boolean;
+      raw_cut: boolean;
-        id: number;
+      id: number;
-        preweighed: boolean;
+      preweighed: boolean;
     };
   }
 
-  let selected = $state("Chop")
+  let selected = $state("Chop");
+  const PRICE_PER_LB = 6;
 
-  function change_photo({target:{id}}){
+  function change_photo({ target: { id } }) {
-    console.log(id)
+    console.log(id);
-    selected = id
+    selected = id;
   }
-  
 </script>
 
-
 <svelte:head>
   <title>Sludge Farm Pork</title>
-  <meta name="description" content="Please buy some Pork, it tastes good I swear" />
+  <meta
+    name="description"
+    content="Please buy some Pork, it tastes good I swear"
+  />
 </svelte:head>
 
 <section>
   <h1><b>F</b>arm Raised Pork</h1>
   <h5>this ain't your grocery store's pork</h5>
+  <h5>All priced at {PRICE_PER_LB}$/#</h5>
   <div id="tui">
     <ol>
-      <li><span>Cut</span><span>Weight</span><span class="small">$/#</span><span class="small">Stock</span></li>
+      <li>
-      {#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
+        <span>Cut</span>
-        {@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
+        <span>Weight</span>
+      </li>
+      {#each data.pork as { name, preweighed, min_weight, max_weight }}
         <li onmouseenter={change_photo} id={name}>
           <span>{name}</span>
           {#if preweighed}
@@ -43,24 +49,22 @@
           {:else}
             <span>{min_weight} ~ {max_weight} lbs</span>
           {/if}
-          <span class="small">{price_per_lb}$</span>
-          <span class="small">{stock}</span>
         </li>
       {/each}
     </ol>
-    <img src={`/pork/${selected.replace(' ', '_')}.jpg`} alt={`Image of a ${selected}`} />
+    <img
+      src={`/pork/${selected.replace(" ", "_")}.jpg`}
+      alt={`Image of a ${selected}`}
+    />
   </div>
 </section>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
+  b {
-  @use 'sass:color';
-
-
-  b{
     font-family: "Initials";
     font-weight: 100;
   }
+
   section {
     width: 100%;
     display: flex;
@@ -68,63 +72,61 @@
     align-items: center;
     justify-content: center;
     h1 {
-        font-family: "Initials";
+      font-family: "Initials";
-        text-align: center;
+      text-align: center;
-        font-size: 2.5rem;
+      font-size: 2.5rem;
-        font-weight: 500;
+      font-weight: 500;
-        text-shadow: 3px 3px 3px $green;
+      text-shadow: 3px 3px 3px var(--primary-8);
     }
-    h5{
+    h5 {
       font-size: 0.75rem;
-      color: color.adjust($yellow, $alpha: -0.5)
+      color: var(--primary-8);
     }
 
     img {
       display: none;
     }
 
-    #tui{
+    #tui {
       display: flex;
       width: 90%;
       font-size: 1rem;
       gap: 1rem;
 
-      ol{
+      ol {
         width: 100%;
         display: inherit;
         flex-direction: column;
         list-style: none;
-        li{
+        li {
           display: inherit;
           gap: 1rem;
           padding-left: 1rem;
-          span{
+          span {
             flex-basis: 50%;
             text-align: center;
-            text-shadow: 3px 3px 3px $green;
+            text-shadow: 3px 3px 3px var(--primary-7);
-            &.small{
+            &.small {
               flex-basis: 25%;
             }
-            &:first-child{
+            &:first-child {
               text-align: left;
             }
           }
-          &:nth-child(2n){
+          &:nth-child(2n) {
-            background: color.adjust($blue,  $alpha: -0.75);
+            background: var(--primary-8);
           }
-          &:not(:first-child):hover{
+          &:not(:first-child):hover {
-            background: color.adjust($green, $alpha: -0.5);
+            background: var(--primary-10);
-            // background: $green;
           }
         }
       }
     }
   }
 
-
+  @media screen and (min-width: 640px) {
-  @media screen and (min-width: 640px){
+    img {
-    img{
+      display: unset !important;
-      display: unset!important;
       width: 50%;
       height: fit-content;
       border-radius: 0.375rem;
@@ -132,4 +134,5 @@
       align-self: center;
     }
   }
-</style>
+</style>
+