style: improve docs branding and header

astro.config.mjs

@@ -7,7 +7,15 @@ export default defineConfig({
     starlight({
       title: 'Mediary Handleiding',
       description: 'Gebruikershandleiding voor Mediary',
-      favicon: '/favicon.svg',
+      favicon: '/mediary-favicon.svg',
+      logo: {
+        src: './src/assets/mediary-logo.svg',
+        alt: 'Mediary',
+      },
+      components: {
+        ThemeProvider: './src/components/SystemTheme.astro',
+        ThemeSelect: './src/components/EmptyThemeSelect.astro',
+      },
       customCss: ['./src/styles/custom.css'],
       lastUpdated: true,
       editLink: {

public/favicon.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
-  <rect width="64" height="64" rx="14" fill="#7c3aed"/>
-  <path d="M15 45V19h8l9 14 9-14h8v26h-8V31L32 44 23 31v14z" fill="white"/>
-</svg>

public/mediary-favicon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="mediary-gradient" x1="8" y1="4" x2="56" y2="60" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8b5cf6"/>
+      <stop offset="1" stop-color="#6d28d9"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="url(#mediary-gradient)"/>
+  <path d="M15 45V19h8l9 14 9-14h8v26h-8V31L32 44 23 31v14z" fill="#fff"/>
+</svg>

src/assets/mediary-logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img">
+  <title>Mediary</title>
+  <defs>
+    <linearGradient id="mediary-gradient" x1="8" y1="4" x2="56" y2="60" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#8b5cf6"/>
+      <stop offset="1" stop-color="#6d28d9"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="url(#mediary-gradient)"/>
+  <path d="M15 45V19h8l9 14 9-14h8v26h-8V31L32 44 23 31v14z" fill="#fff"/>
+</svg>

src/components/EmptyThemeSelect.astro

@@ -0,0 +1,3 @@
+---
+// Mediary follows the browser/OS color preference, so no manual selector is shown.
+---

src/components/SystemTheme.astro

@@ -0,0 +1,20 @@
+<script is:inline>
+  (() => {
+    const preference = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const applySystemTheme = () => {
+      const theme = preference.matches ? 'dark' : 'light';
+      document.documentElement.dataset.theme = theme;
+      document.documentElement.style.colorScheme = theme;
+    };
+
+    try {
+      localStorage.removeItem('starlight-theme');
+    } catch {
+      // The system preference still works when storage is unavailable.
+    }
+
+    applySystemTheme();
+    preference.addEventListener?.('change', applySystemTheme);
+  })();
+</script>

src/content/docs/index.mdx

@@ -4,6 +4,9 @@ description: Houd je bibliotheek, kijkgeschiedenis en persoonlijke lijsten op é
 template: splash
 hero:
   tagline: Mediary brengt de beschikbaarheid van je mediaservers, je kijkgeschiedenis en je persoonlijke keuzes samen in één overzicht.
+  image:
+    file: ~/assets/mediary-logo.svg
+    alt: Mediary-logo
   actions:
     - text: Begin met Mediary
       link: /aan-de-slag/eerste-stappen/

src/styles/custom.css

@@ -10,8 +10,55 @@
   --sl-color-gray-5: #27272a;
   --sl-color-gray-6: #18181b;
   --sl-color-black: #09090b;
+  --sl-color-bg-nav: rgb(9 9 11 / 94%);
+  --sl-color-bg-sidebar: #0f0f12;
+}
+
+:root[data-theme='light'] {
+  --sl-color-accent-low: #ede9fe;
+  --sl-color-accent: #7c3aed;
+  --sl-color-accent-high: #4c1d95;
+  --sl-color-white: #18181b;
+  --sl-color-gray-1: #27272a;
+  --sl-color-gray-2: #52525b;
+  --sl-color-gray-3: #71717a;
+  --sl-color-gray-4: #a1a1aa;
+  --sl-color-gray-5: #d4d4d8;
+  --sl-color-gray-6: #f4f4f5;
+  --sl-color-black: #fafafa;
+  --sl-color-bg-nav: rgb(232 232 236 / 95%);
+  --sl-color-bg-sidebar: #f4f4f5;
+}
+
+header.header {
+  border-bottom: 1px solid var(--sl-color-gray-5);
+  background: var(--sl-color-bg-nav);
+  box-shadow: none;
+  backdrop-filter: blur(16px);
+}
+
+.site-title img {
+  width: 2rem;
+  height: 2rem;
 }
 
 .hero .tagline {
   max-width: 48rem;
 }
+
+.hero img {
+  filter: drop-shadow(0 1.25rem 2.5rem rgb(76 29 149 / 22%));
+}
+
+@media (min-width: 50rem) {
+  site-search button[data-open-modal] {
+    width: 13rem;
+    max-width: 13rem;
+    height: 2.25rem;
+    border-radius: 0.65rem;
+  }
+
+  site-search button[data-open-modal] > kbd {
+    display: none;
+  }
+}