Add color scheme

3 months ago · 8a41ff4e58
parent d0b90e80c1
commit 8a41ff4e58
7 changed files with 882 additions and 6 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -11,13 +11,19 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-node": "^5.2.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"mdsvex": "^0.11.2",
+		"sass": "^1.77.6",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"sanitize.css": "^13.0.0"
+	}
 }
--- a/src/error.html
+++ b/src/error.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+	</head>
+	<body data-sveltekit-preload-data="hover">
+    <h1>That didn't work</h1>
+		<h2>%sveltekit.error.message%</h2>
+    <code>%sveltekit.status%</code>
+	</body>
+</html>
--- a/src/global.scss
+++ b/src/global.scss
@ -0,0 +1,32 @@
+@import url(sanitize.css);
+
+:root {
+  --color-background: #3A2A4D;
+  --color-background-dark: #2B1C3D;
+  --color-foreground: #ffffff;
+  --color-foreground-tint: #ffd1f8;
+  --color-foreground-dim: #acbacd;
+  --color-primary: #ff79c6;
+  --color-purple: #bd93f9;
+  --color-cyan: #8be9fd;
+  --color-green: #50fa7b;
+  --color-red: #ff5555;
+  --color-orange: #ffb86c;
+  --color-yellow: #f1fa8c;
+}
+
+@layer default {
+  body {
+    font-family: Lexend, Arial, Helvetica, sans-serif;
+    color: var(--color-foreground);
+    background-color: var(--color-background);
+  }
+
+  a {
+    color: var(--color-primary);
+
+    &:hover {
+      background-color: var(--color-background-dark);
+    }
+  }
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,5 @@
+<script>
+  import "../global.scss";
+</script>
+
+<slot/>
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@ -0,0 +1 @@
+export const ssr = true;
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,18 +1,21 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { mdsvex } from "mdsvex";
+import adapter from "@sveltejs/adapter-node";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [vitePreprocess(), mdsvex()],

 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// 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()
-	}
+		adapter: adapter(),
+	},
+
+	extensions: [".svelte", ".svx"],
 };

 export default config;