style(docs-site): remove solid backgrounds from logos and add transparent favicon

MasuRii · MasuRii · commit 6555bee0c574 · 2026-03-21T13:16:56.000+08:00
Update site branding assets for better appearance on varied backgrounds.

- Remove solid background rectangles from light and dark logo SVGs
- Add transparent theme-aware favicon with prefers-color-scheme media
- Update Head.astro to reference /favicon.svg for browser tab icon

The favicon now adapts its stroke and fill colors for light and dark
system preferences, eliminating the need for separate favicon variants.
diff --git a/docs-site/public/favicon.svg b/docs-site/public/favicon.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
+  <style>
+    .ring-muted {
+      stroke: #C5C7C9;
+    }
+
+    .ring-mid {
+      stroke: #8A8D8F;
+    }
+
+    .ring-strong {
+      stroke: #1A1A1C;
+    }
+
+    .arrow {
+      fill: #1A1A1C;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .ring-muted {
+        stroke: #4F5254;
+      }
+
+      .ring-mid {
+        stroke: #898C8E;
+      }
+
+      .ring-strong {
+        stroke: #F0F1EA;
+      }
+
+      .arrow {
+        fill: #F0F1EA;
+      }
+    }
+  </style>
+
+  <g fill="none" stroke-linecap="round">
+    <path class="ring-muted" d="M 391 82 A 220 220 0 1 0 391 418" stroke-width="2.5" stroke-dasharray="14 18" />
+    <path class="ring-muted" d="M 372 104 A 190 190 0 1 0 372 396" stroke-width="2.5" stroke-dasharray="10 14" />
+    <path class="ring-mid" d="M 356 124 A 165 165 0 1 0 356 376" stroke-width="2" />
+    <path class="ring-strong" d="M 343 139 A 145 145 0 1 0 343 361" stroke-width="5" />
+    <path class="ring-strong" d="M 333 150 A 130 130 0 1 0 333 350" stroke-width="3" stroke-dasharray="8 10" />
+    <path class="ring-strong" d="M 324 162 A 115 115 0 1 0 324 338" stroke-width="4.5" />
+    <path class="ring-strong" d="M 314 173 A 100 100 0 1 0 314 327" stroke-width="2" />
+  </g>
+
+  <g transform="translate(0, -15) rotate(-15 280 250)">
+    <polygon class="arrow" points="220,190 350,250 220,310 260,250" />
+  </g>
+</svg>
diff --git a/docs-site/src/assets/recursor-logo-dark.svg b/docs-site/src/assets/recursor-logo-dark.svg
@@ -1,6 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
-  <rect width="500" height="500" fill="#151618"/>
-
   <g fill="none" stroke-linecap="round">
     
     <path d="M 391 82 A 220 220 0 1 0 391 418" stroke="#4F5254" stroke-width="2.5" stroke-dasharray="14 18" />
diff --git a/docs-site/src/assets/recursor-logo-light.svg b/docs-site/src/assets/recursor-logo-light.svg
@@ -1,6 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
-  <rect width="500" height="500" fill="#F7F7F5"/>
-
   <g fill="none" stroke-linecap="round">
     
     <path d="M 391 82 A 220 220 0 1 0 391 418" stroke="#C5C7C9" stroke-width="2.5" stroke-dasharray="14 18" />
diff --git a/docs-site/src/components/Head.astro b/docs-site/src/components/Head.astro
@@ -1,7 +1,5 @@
 ---
 import Default from '@astrojs/starlight/components/Head.astro';
-import favicon from '../assets/recursor-logo-light.svg?url';
-
 interface Props {
   title?: string;
   description?: string;
@@ -19,7 +17,7 @@ interface Props {
 />
 
 <!-- Favicon and theme color -->
-<link rel="icon" type="image/svg+xml" href={favicon} />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="theme-color" content="#0f1115" media="(prefers-color-scheme: dark)" />
 <meta name="theme-color" content="#FDFCF8" media="(prefers-color-scheme: light)" />
 
