Color redesign (#11)

Before:


![image](https://github.com/user-attachments/assets/6ed01dc0-a146-4dfb-9bb9-d728ea440324)

After:


![image](https://github.com/user-attachments/assets/615713c9-2fbb-4092-a8c7-f16b3cbb7aa8)

Mobile support is still iffy, but it has improved somewhat!

Author: BD103

src/lib/Callout.svelte

@@ -19,5 +19,9 @@
 </div>
 
 <style>
-  /* TODO */
+  .callout {
+    background-color: var(--sand-darker);
+    box-shadow: 0.5em 0.5em 0 var(--turquoise-darker);
+    padding: 1em 1em;
+  }
 </style>

src/routes/+layout.svelte

@@ -42,4 +42,9 @@
       grid-template-columns: 1fr !important;
     }
   }
+
+  /* Prevent elements that cannot wrap from stealing screen space from the nav bar. */
+  .container main {
+    max-width: 40em;
+  }
 </style>

src/styles/main.css

@@ -1,24 +1,43 @@
 /* Site-wide styles. */
 :global {
   body {
-    background-color: var(--background-color);
-    color: var(--text-color);
+    /* Fallback color for parts that the gradient does not cover. */
+    background-color: var(--turquoise-dark);
+
+    /* Background gradient */
+    background-image: var(--background);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    /* Text */
+    color: var(--floral-lighter);
+    font-size: 13pt;
     font-family: var(--font-family);
     line-height: var(--line-height);
   }
 
   h1,
   h2,
   strong {
-    color: var(--text-color-strong);
+    color: var(--sand-light);
+    font-weight: bold;
+  }
+
+  h1, h2, h3 {
+    text-shadow: 0.1em 0.1em 0 var(--turquoise-darker);
   }
 
   a {
-    color: var(--primary);
-    transition: color var(--transition-delay);
+    color: var(--sand-lighter);
+    transition: color 200ms;
   }
 
   a:hover {
-    color: var(--primary-hover);
+    color: var(--turquoise-light);
+  }
+
+  pre {
+    max-width: 40em;
+    overflow-x: scroll;
   }
 }

src/styles/syntax.css

@@ -1,14 +1,28 @@
-/* Prism syntax highlighting theme. */
+/* 
+Prism syntax highlighting theme.
+
+Based on <https://prismjs.com/tokens>.
+*/
 :global {
-  .token.comment {
-    color: #a7a7a7;
-  }
+  .token {
+    &.keyword {
+      color: var(--sand-light);
+    }
 
-  .token.constant {
-    color: #80f880;
-  }
+    &.string,
+    &.char,
+    &.number,
+    &.boolean {
+      color: var(--sand-lighter);
+    }
+
+    &.comment,
+    &.punctuation {
+      color: var(--floral-light);
+    }
 
-  .token.keyword {
-    color: #0c5;
+    &.attribute {
+      color: var(--turquoise-light);
+    }
   }
 }

src/styles/vars.css

@@ -1,22 +1,24 @@
 /* Global site variables. */
 :global {
   :root {
-    --primary: #0c5;
-    --primary-hover: #00a344;
+    /* Colors */
+    --sand-lighter: lab(90 21 35);
+    --sand-light: lab(80 21 35);
+    --sand-dark: lab(60 26 43);
+    --sand-darker: lab(40 26 43);
 
-    --background-color: #383a39;
+    --turquoise-light: lab(80 -25 10);
+    --turquoise-dark: lab(29 -16 1);
+    --turquoise-darker: lab(15 -16 1);
 
-    --text-color: #e7e7e7;
-    --text-color-strong: #fff;
-    --text-color-weak: #b1b1b1;
+    --floral-lighter: lab(90 10 10);
+    --floral-light: lab(70 10 10);
 
+    /* Text */
     --font-family: "DM Serif Display", Georgia, serif;
-
     --line-height: 1.5;
 
-    --border-radius: 30px;
-    --border-color: black;
-
-    --transition-delay: 200ms;
+    /* Background */
+    --background: linear-gradient(to bottom right, var(--turquoise-dark), var(--turquoise-darker));
   }
 }