feat: update styling

README.md

@@ -1,4 +1,4 @@
-# Starlight Starter Kit: Basics
+# Starlight
 
 [![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
 
@@ -6,8 +6,6 @@
 pnpm create astro@latest -- --template starlight
 ```
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
 ## 🚀 Project Structure
 
 Inside of your Astro + Starlight project, you'll see the following folders and files:
@@ -43,7 +41,3 @@ All commands are run from the root of the project, from a terminal:
 | `pnpm preview`         | Preview your build locally, before deploying     |
 | `pnpm astro ...`       | Run CLI commands like `astro add`, `astro check` |
 | `pnpm astro -- --help` | Get help using the Astro CLI                     |
-
-## 👀 Want to learn more?
-
-Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

astro.config.mjs

@@ -20,12 +20,15 @@ export default defineConfig({
   integrations: [
     tailwindcss(),
     starlight({
-      title: "My Docs",
+      title: "Alex Lebens Docs",
+      customCss: [
+        './src/styles/custom.css',
+      ],
       social: [
         {
-          icon: "github",
+          icon: "external",
-          label: "GitHub",
+          label: "Homepage",
-          href: "https://github.com/withastro/starlight",
+          href: "https://www.alexlebens.dev",
         },
       ],
       plugins: [
@@ -34,10 +37,7 @@ export default defineConfig({
       sidebar: [
         {
           label: "Guides",
-          items: [
+          autogenerate: { directory: "guides" },
-            // Each item here is one entry in the navigation menu.
-            { label: "Example Guide", slug: "guides/example" },
-          ],
         },
         {
           label: "Reference",

src/content/docs/index.mdx

@@ -5,7 +5,7 @@ template: splash
 hero:
   tagline: Congrats on setting up a new Starlight project!
   image:
-    file: ../../assets/houston.webp
+    file: ../../assets/autumn_mountain.png
   actions:
     - text: Example Guide
       link: /guides/example/

src/styles/custom.css

@@ -0,0 +1,34 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+
+/* Custom colors */
+@theme {
+  --color-midnight: #0c354d;
+  --color-turquoise: #0da797;
+  --color-steel: #4682b4;
+  --color-bermuda: #7fbab4;
+  --color-desert: #f9deb2;
+  --color-bronze: #9e7f5e;
+  --color-gitea-primary: #609926;
+  --color-gitea-secondary: #4c7a33;
+}
+
+@layer starlight, rapide, overrides;
+
+@layer overrides {
+  :root {
+    --sl-color-accent-high: var(--color-steel);
+    --sl-color-accent-high: var(--color-steel);
+    --sl-color-accent-low: var(--color-bermuda);
+  }
+
+  :root[data-theme='light'] {
+    --sl-color-accent: var(--color-steel);
+    --sl-color-accent-high: var(--color-steel);
+    --sl-color-accent-low: var(--color-turquoise);
+  }
+
+  .site-title:where(.astro-gmuhlsjs) {
+    color: var(--color-turquoise);
+  }
+}

tailwind.config.cjs

@@ -1,7 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}', '*.{js,ts,jsx,tsx,mdx}'],
-  darkMode: 'class',
+  darkMode: ['class', '[data-theme="dark"]'],
-  theme: {},
+  theme: {
+      extend: {},
+    },
   plugins: [require('@tailwindcss/typography')],
 };