Prototype site: some appearance tweaks (#1264)

* Deduplicate & optimise logo; set in config

* Remove component overrides

* Use Nix brand colours, and tweak banner

Author: trespaul

site/astro.config.mjs

@@ -9,6 +9,8 @@ export default defineConfig({
     starlight({
       title: "Documentation",
       logo: { src: "./src/assets/nixos-logo.svg", alt: "NixOS" },
+      favicon: "./src/assets/nixos-logo.svg",
+      customCss: [ "./src/styles/style.css" ],
       social: [
         {
           icon: "github",
@@ -23,8 +25,6 @@ export default defineConfig({
       ],
       components: {
         Banner: "./src/components/Banner.astro",
-        SocialIcons: "./src/components/SocialIcons.astro",
-        Sidebar: "./src/components/Sidebar.astro",
       },
       plugins: [
         starlightSidebarTopics([

site/public/favicon.svg

@@ -3,7 +3,7 @@ const message = "Prototype. Expect breaking changes. Contribute on ";
 ---
 
 <div class="sl-banner global-banner" data-pagefind-ignore>
-  <span aria-hidden="true">🚧</span>
+  <span aria-hidden="true">🚧 </span>
   <strong>{message}</strong><a
     href="https://github.com/nixos/nix.dev"
     target="_blank"
@@ -16,14 +16,16 @@ const message = "Prototype. Expect breaking changes. Contribute on ";
   @layer starlight.core {
     .sl-banner.global-banner {
       padding: 1rem var(--sl-nav-pad-x);
-      background-color: #d21c1c;
+      margin: 1rem var(--sl-content-pad-x);
+      background-color: #b71205;
       color: #fff;
       font-size: var(--sl-text-lg);
       font-weight: 700;
       line-height: var(--sl-line-height-headings);
       text-align: center;
       text-wrap: balance;
       box-shadow: var(--sl-shadow-sm);
+      border-radius: 999rem;
     }
     .sl-banner.global-banner :global(a) {
       color: #fff;

site/src/assets/nixos-logo.svg

@@ -0,0 +1,39 @@
+/* Dark mode colors (default) */
+:root {
+  /* Nix brand colours */
+  --sl-color-accent-low: #28395f; /* L35 */
+  --sl-color-accent: #87adfa; /* L75 */
+  --sl-color-accent-high: #b7cefd; /* L85 */
+  --sl-color-white: #ffffff;
+  --sl-color-gray-1: #eeeeee; /* L95 */
+  --sl-color-gray-2: #cecece; /* L85 */
+  --sl-color-gray-3: #8f8f8f; /* L65 */
+  --sl-color-gray-4: #555555; /* L45 */
+  --sl-color-gray-5: #3a3a3a; /* L35 */
+  --sl-color-gray-6: #0b0b0b; /* L25 */
+  --sl-color-black: #0b0b0b; /* L15 */
+  --sl-hue-orange: 24;
+  --sl-hue-green: 138;
+  --sl-hue-blue: 220;
+  --sl-hue-purple: 246;
+  --sl-hue-red: 356;
+
+  /* Remove borders */
+  --sl-color-hairline: transparent;
+  --sl-color-hairline-shade: transparent;
+}
+/* Light mode colors */
+:root[data-theme='light'] {
+  --sl-color-accent-low: #87adfa; /* L75 */
+  --sl-color-accent: #506fb2; /* L55 */
+  --sl-color-accent-high: #28395f; /* L35 */
+  --sl-color-white: #0b0b0b; /* L15 */
+  --sl-color-gray-1: #222222; /* L25 */
+  --sl-color-gray-2: #3a3a3a; /* L35 */
+  --sl-color-gray-3: #555555; /* L45 */
+  --sl-color-gray-4: #8f8f8f; /* L65 */
+  --sl-color-gray-5: #aeaeae; /* L75 */
+  --sl-color-gray-6: #cecece; /* L85 */
+  --sl-color-gray-7: #ffffff;
+  --sl-color-black: #ffffff;
+}