update logo

src/app.css

@@ -9,7 +9,8 @@
   --text-1: light-dark(#222, #eee);
   --text-2: light-dark(#282828, #d8d8d8);
 
-  --primary: light-dark(oklch(.7503 0.117 181.6), oklch(.8549 0.1149 182.77));
+  --primary: light-dark(oklch(.7503 0.117 181.6deg), oklch(.8549 0.1149 182.77deg));
+  --secondary: oklch(from var(--primary) l c calc(h - 180));
 
   --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));
   --fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3));

src/routes/(editor).tsx

@@ -54,7 +54,13 @@ export default function Editor(props: ParentProps) {
 
         <main class={css.layout} inert={commandPalette()?.open()}>
             <nav class={css.menu}>
-                <A class={css.logo} href="/"><BsTranslate /></A>
+                <A class={css.logo} href="/">
+                    <picture>
+                        <source srcset="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
+                        <source srcset="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />
+                        <img src="/images/favicon.dark.svg" alt="Calque logo" />
+                    </picture>
+                </A>
 
                 <Menu.Mount />
 

src/routes/editor.module.css

@@ -32,15 +32,19 @@
         & > .logo {
             inline-size: 3em;
             block-size: 3em;
-            padding: .75em;
+            padding: .5em;
             margin-block-end: -1em;
             background-color: inherit;
             color: inherit;
             border-radius: .25em;
 
-            & > svg {
-                inline-size: 100%;
-                block-size: 100%;
+            & > picture {
+                display: contents;
+
+                & > img {
+                    inline-size: 100%;
+                    block-size: 100%;
+                }
             }
         }