style: apply style guide fonts, colours, and readability fixes (#31)

## Summary

- Replaces custom "Vampyr" font with style guide fonts (Griffy, Kalam, Creepster, Henny Penny)
- Fixes illegible tagline, search placeholder, search results, shortcut badge, theme dropdown, and active sidebar item across light and dark modes
- Applies witchy code themes for light and dark mode
- Fixes invalid `env` language in code blocks (replaced with `sh`)
- Fixes invalid `message` aside icon in contact page (replaced with `star`)

✨ This PR was created with help from Hikari~ 🌸

Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Reviewed-on: #31
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>

src/styles/style.css

@@ -1,7 +1,7 @@
 :root {
   /* Witch color palette */
   --witch-purple: #2b1b3d;
-  --witch-purple-translucent: hsla(267, 40%, 17%, 0.597);
+  --witch-purple-translucent: hsla(267, 40%, 17%, 0.85);
   --witch-plum: #44275a;
   --witch-rose: #a8577e;
   --witch-mauve: #d4a5c7;
@@ -25,7 +25,7 @@
   --sl-color-gray-6: var(--witch-purple);
 
   /* Translucent background */
-  --content-bg: rgba(181, 185, 187, 0.543);
+  --content-bg: rgba(181, 185, 187, 0.85);
   --content-blur: 8px;
 }
 
@@ -33,7 +33,7 @@ html[data-theme="dark"] {
   /* Dark theme uses darker colors for background, lighter for text */
 
   .page {
-    --background-color: var(--witch-purple-translucent);
+    --background-color: transparent;
   }
   --primary-color: var(--witch-lavender);
   --sl-color-text-accent: var(--witch-lavender);
@@ -70,11 +70,15 @@ html[data-theme="dark"] {
 }
 
 .sidebar-pane,
-.right-sidebar-panel {
+.right-sidebar {
   background-color: var(--background-color);
   color: var(--primary-color);
 }
 
+.right-sidebar-panel {
+  color: var(--primary-color);
+}
+
 h1,
 h2,
 h3,
@@ -90,14 +94,26 @@ a {
   backdrop-filter: var(--content-blur);
 }
 
+html[data-theme="dark"] .page {
+  background: var(--witch-purple-translucent);
+}
+
 a[aria-current="page"] {
   color: var(--background-color) !important;
   background-color: var(--witch-rose) !important;
 }
 
+html[data-theme="dark"] a[aria-current="page"] {
+  color: var(--witch-moon) !important;
+}
+
 header {
   color: var(--primary-color) !important;
-  background-color: var(--background-color) !important;
+  background-color: var(--witch-lavender) !important;
+}
+
+html[data-theme="dark"] header {
+  background-color: var(--witch-purple) !important;
 }
 
 .large {
@@ -124,6 +140,21 @@ starlight-theme-select > label {
   color: var(--primary-color) !important;
 }
 
+starlight-theme-select select {
+  color: var(--primary-color) !important;
+  background-color: var(--background-color) !important;
+}
+
+starlight-theme-select select option {
+  color: var(--primary-color);
+  background-color: var(--background-color);
+}
+
+html[data-theme="dark"] starlight-theme-select select option {
+  color: var(--witch-purple) !important;
+  background-color: var(--witch-lavender) !important;
+}
+
 .social-icons::after {
   display: none;
 }
@@ -146,6 +177,35 @@ starlight-theme-select > label {
   background-color: var(--witch-plum) !important;
 }
 
+.hero .tagline {
+  color: var(--primary-color) !important;
+}
+
+site-search button[data-open-modal] {
+  color: var(--primary-color) !important;
+}
+
+site-search button[data-open-modal] kbd {
+  color: var(--primary-color) !important;
+  background-color: var(--background-color) !important;
+  border-color: var(--primary-color) !important;
+}
+
+#starlight__search {
+  --pagefind-ui-text: var(--primary-color);
+  --pagefind-ui-primary: var(--witch-rose);
+}
+
+#starlight__search input::placeholder {
+  color: var(--primary-color) !important;
+  opacity: 0.8;
+}
+
+.pagefind-ui__result-excerpt {
+  color: var(--primary-color) !important;
+  opacity: 0.9;
+}
+
 #extra-footer-content {
   display: flex;
   flex-direction: row;