Extract global CSS (#10)

This pulls the global CSS from `+layout.svelte` into their own files. It
also formats and deletes some leftover files :)

Author: BD103

.github/workflows/deploy.yml

@@ -26,7 +26,7 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:
@@ -37,12 +37,12 @@ jobs:
         with:
           node-version: 23
           cache: pnpm
-      
+
       - name: Build site
         run: |
           pnpm install
           pnpm build
-      
+
       - name: Upload site artifact
         uses: actions/upload-pages-artifact@v3
         with:

package.json

@@ -27,7 +27,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
     "remark-footnotes": "^2.0.0",
-    "svelte": "^5.22.6",
+    "svelte": "^5.23.0",
     "svelte-check": "^4.1.5",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",

pnpm-lock.yaml

@@ -23,62 +23,9 @@
 </div>
 
 <style>
-  :global {
-    /* Global site variables. */
-    :root {
-      --primary: #0c5;
-      --primary-hover: #00a344;
-
-      --background-color: #383a39;
-
-      --text-color: #e7e7e7;
-      --text-color-strong: #fff;
-      --text-color-weak: #b1b1b1;
-
-      --font-family: "DM Serif Display", Georgia, serif;
-
-      --line-height: 1.5;
-
-      --border-radius: 30px;
-      --border-color: black;
-
-      --transition-delay: 200ms;
-    }
-
-    body {
-      background-color: var(--background-color);
-      color: var(--text-color);
-      font-family: var(--font-family);
-      line-height: var(--line-height);
-    }
-
-    h1,
-    h2,
-    strong {
-      color: var(--text-color-strong);
-    }
-
-    a {
-      color: var(--primary);
-      transition: color var(--transition-delay);
-    }
-
-    a:hover {
-      color: var(--primary-hover);
-    }
-
-    .token.comment {
-      color: #a7a7a7;
-    }
-
-    .token.constant {
-      color: #80f880;
-    }
-
-    .token.keyword {
-      color: #0c5;
-    }
-  }
+  @import "../styles/vars.css";
+  @import "../styles/main.css";
+  @import "../styles/syntax.css";
 
   .container {
     max-width: 60em;

src/app.d.ts

@@ -0,0 +1,24 @@
+/* Site-wide styles. */
+:global {
+  body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: var(--font-family);
+    line-height: var(--line-height);
+  }
+
+  h1,
+  h2,
+  strong {
+    color: var(--text-color-strong);
+  }
+
+  a {
+    color: var(--primary);
+    transition: color var(--transition-delay);
+  }
+
+  a:hover {
+    color: var(--primary-hover);
+  }
+}

src/routes/+layout.svelte

@@ -0,0 +1,14 @@
+/* Prism syntax highlighting theme. */
+:global {
+  .token.comment {
+    color: #a7a7a7;
+  }
+
+  .token.constant {
+    color: #80f880;
+  }
+
+  .token.keyword {
+    color: #0c5;
+  }
+}

src/styles/main.css

@@ -0,0 +1,22 @@
+/* Global site variables. */
+:global {
+  :root {
+    --primary: #0c5;
+    --primary-hover: #00a344;
+
+    --background-color: #383a39;
+
+    --text-color: #e7e7e7;
+    --text-color-strong: #fff;
+    --text-color-weak: #b1b1b1;
+
+    --font-family: "DM Serif Display", Georgia, serif;
+
+    --line-height: 1.5;
+
+    --border-radius: 30px;
+    --border-color: black;
+
+    --transition-delay: 200ms;
+  }
+}