fix: multi-color issue on dark/light mode

marpme · Oct 30, 2023 · 30b2d37 · 30b2d37
1 parent ff72602
commit 30b2d37
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 35 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -5,11 +5,8 @@ import Logo from "./Logo.astro";
 ---
 
 <header>
-  <div class="logo">
-    <HeaderLink href="/">
-      <Logo />
-    </HeaderLink>
-  </div>
+  <Logo />
+
   <nav>
     <section class="text-text-bold">
       <ul class="unset flex gap-4 [&>li]:p-0">
@@ -53,12 +50,5 @@ import Logo from "./Logo.astro";
         minmax(0, max-content) minmax(0, 1fr)
         minmax(0, max-content) minmax(0, max-content);
     }
-
-    .logo {
-      display: flex;
-      align-content: center;
-      justify-content: center;
-      margin-inline-end: 1rem;
-    }
   </style>
 </header>
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
@@ -1,25 +1,31 @@
 ---
+import HeaderLink from "./HeaderLink.astro";
 ---
 
-<svg
-  width="32"
-  height="32"
-  viewBox="0 0 100 100"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <style>
-    path {
-      stroke-width: 5px;
-      stroke: #f3f3f3;
-    }
-  </style>
-  <g>
-    <path d="M10,10 L90,10 L90,90 L10,90 Z" fill="none"></path>
-    <path d="M20,55 L30,35 L40,55 L50,35 L60,55 L70,35 L80,55" fill="none"
-    ></path>
-    <path d="M20,65 Q30,55 40,65 Q50,75 60,65 Q70,55 80,65" fill="none"></path>
-  </g>
-</svg>
+<div class="logo">
+  <HeaderLink href="/">
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <style>
+        path {
+          stroke-width: 5px;
+          stroke: #f3f3f3;
+        }
+      </style>
+      <g>
+        <path d="M10,10 L90,10 L90,90 L10,90 Z" fill="none"></path>
+        <path d="M20,55 L30,35 L40,55 L50,35 L60,55 L70,35 L80,55" fill="none"
+        ></path>
+        <path d="M20,65 Q30,55 40,65 Q50,75 60,65 Q70,55 80,65" fill="none"
+        ></path>
+      </g>
+    </svg>
+  </HeaderLink>
+</div>
 <style>
   @keyframes grow {
     0% {
@@ -49,18 +55,25 @@
     }
   }
 
-  html .logo path {
-    stroke: #303030;
+  .logo {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    margin-inline-end: 1rem;
   }
 
-  html.dark .logo path {
-    stroke: #f3f3f3;
+  html .logo path {
+    stroke: #303030;
   }
 
   html.light .logo path {
     stroke: #303030;
   }
 
+  html.dark .logo path {
+    stroke: #f3f3f3;
+  }
+
   svg path {
     stroke-width: 5px;
     stroke-dashoffset: 1px;