custom theme (#7)

* feat: new theme

* fix: title

* feat: colors

* feat: improve layout

* chore: upgrade deps

Author: natemoo-re

astro.config.mjs

@@ -15,14 +15,13 @@ export default defineConfig({
 	integrations: [
 		starlight({
 			title: "Bombshell",
-			customCss: [
-				// Relative path to your @font-face CSS file.
-				"./src/fonts/font-face.css",
-			],
 			logo: {
 				dark: "./src/assets/dark.svg",
 				light: "./src/assets/light.svg",
 			},
+			customCss: [
+				'./src/styles/tint.css'
+			],
 			components: {
 				Head: "./src/starlightOverrides/Head.astro",
 			},
@@ -37,7 +36,7 @@ export default defineConfig({
 					tag: "link",
 					attrs: {
 						rel: "stylesheet",
-						href: "https://use.typekit.net/bst3mzh.css?v=4",
+						href: "https://use.typekit.net/bst3mzh.css?v=5",
 					},
 				},
 				{
@@ -69,11 +68,11 @@ export default defineConfig({
 					},
 				},
 			],
-			social: {
-				discord: "https://bomb.sh/chat",
-				blueSky: "https://bomb.sh/on/bluesky",
-				github: "https://bomb.sh/on/github",
-			},
+			social: [
+				{ icon: 'discord', label: 'Discord', href: 'https://bomb.sh/chat' },
+				{ icon: 'blueSky', label: 'Bluesky', href: 'https://bomb.sh/on/bluesky' },
+				{ icon: 'github', label: 'GitHub', href: 'https://bomb.sh/on/github' },
+			],
 			plugins: [
 				topics([
 					{

package.json

@@ -10,12 +10,12 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.32.2",
+    "@astrojs/starlight": "^0.34.4",
+    "@bomb.sh/args": "^0.3.1",
     "@clack/core": "^0.4.2",
     "@clack/prompts": "1.0.0-alpha.0",
-    "@bomb.sh/args": "^0.3.1",
     "@types/node": "^22.13.11",
-    "astro": "^5.1.5",
+    "astro": "^5.10.0",
     "expressive-code-twoslash": "^0.4.0",
     "sharp": "^0.33.5",
     "starlight-sidebar-topics": "^0.6.0"

pnpm-lock.yaml

@@ -1,10 +1,61 @@
 :root {
-	/* Font settings */
-	--sl-font: 'Urbanis', sans-serif;
-	--sl-font-heading: 'Urbanist', sans-serif;
+	--sl-font: system-ui, sans-serif;
+	--sl-font-heading: 'polymath-display', sans-serif;
 
-	/* Ensure these are set for both light and dark themes */
-	--sl-color-text-heading: var(--sl-color-text);
+	--sl-color-text-heading: var(--heading-fill);
+	--sl-text-h1: var(--sl-text-6xl);
+  --sl-color-accent-hsl: 311 100% 50%;
+  --sl-color-accent-low: hsl(311 100% 50% / 0.5);
+  --sl-color-accent: hsl(311 100% 50% / 0.9);
+  --sl-color-accent-high: hsl(311 100% 50% / 1);
+
+  --sl-color-bg: var(--container-fill);
+  --sl-color-bg-nav: var(--container-fill);
+  --sl-color-bg-sidebar: var(--container-fill);
+  --sl-color-bg-inline-code: var(--surface-inner-fill);
+  --sl-color-bg-accent: var(--sl-color-accent-high);
+  --sl-color-hairline-light: var(--surface-border-fill);
+  --sl-color-hairline: var(--surface-border-fill);
+  --sl-color-hairline-shade: var(--surface-border-fill);
+
+  --sl-icon-color: var(--color-white-90);
+}
+
+:is(h1, h2, h3, h4, h5, h6) {
+  font-feature-settings: 'ss03' on, 'ss12' on;
+}
+
+:is(h1, .starlight-sidebar-topics) {
+  font-feature-settings: 'ss01' on, 'ss03' on, 'ss09' on, 'ss10' on, 'ss12' on;
+  font-family: var(--sl-font-heading);
+}
+:is(.starlight-sidebar-topics li) {
+	font: inherit;
+	font-feature-settings: inherit;
+	text-transform: lowercase;
+}
+
+:is(h1) {
+  --c-border: var(--color-white-100);
+  --c-start: var(--color-white-90);
+  --c-end: var(--color-white-50);
+  --s-border: 1px;
+  -webkit-text-stroke-color: var(--c-border);
+  -webkit-text-stroke-width: var(--s-border);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(to right, var(--c-start), var(--c-end));
+  letter-spacing: 1px;
+}
+
+:is(h2, h3, h4, h5, h6) {
+  --c-start: var(--color-white-100);
+  --c-end: var(--color-white-50);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-image: linear-gradient(to right, var(--c-start), var(--c-end));
 }
 
 /* Target specific elements */
@@ -15,6 +66,33 @@ header h1 {
 	font-family: var(--sl-font-heading);
 }
 
+a.site-title {
+  color: white;
+}
+
+starlight-toc nav > ul {
+  --c-start: var(--color-white-50);
+  --c-end: var(--color-white-10);
+  border-left: 1px solid transparent;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: var(--border-050);
+    background: linear-gradient(to bottom, var(--c-start), var(--c-end));
+  }
+  a {
+    border-left: 2px solid transparent;
+    border-radius: 0;
+  }
+  [aria-current] {
+    border-left-color: var(--sl-color-accent);
+  }
+}
+
 p, 
 li, 
 td, 
@@ -32,3 +110,30 @@ blockquote {
 	background-color: #181818;
 	color: white;
 }
+
+.sidebar-pane {
+  a {
+    border: 1px solid transparent;
+  }
+  [aria-current="page"] {
+    --c-start: hsl(var(--sl-color-accent-hsl) / 5%);
+    --c-end: hsl(var(--sl-color-accent-hsl) / 30%);
+    color: var(--sl-color-accent);
+    background: linear-gradient(to right, var(--c-start), var(--c-end));
+    border-color: var(--sl-color-accent);
+
+    &:hover {
+      --c-start: hsl(var(--sl-color-accent-hsl) / 100%);
+      --c-end: hsl(var(--sl-color-accent-hsl) / 50%);
+      border-color: var(--sl-color-accent);
+      color: var(--color-gray-100);
+      background: linear-gradient(to right, var(--c-start), var(--c-end));
+    }
+  }
+}
+
+starlight-menu-button button,
+mobile-starlight-toc nav {
+  top: unset;
+  bottom: 0;
+}