support 2 types of icons

4 files changed, 9 insertions, 5 deletions

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 1ec7cae..59da3ee 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -33,7 +33,11 @@
   {{ end }}
 
   <!-- Preload -->
-  <link rel="preload" as="image" href="{{ `theme.svg` | absURL }}" />
+  <link
+    rel="preload"
+    as="image"
+    href="{{ `theme.{{ if site.Params.monoDarkIcon }}svg{{ else }}png{{ end }}` | absURL }}"
+  />
 
   {{ $avatar_url := $.Scratch.Get "avatar_url" }}
   <!---->
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 2f84aad..03183e9 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -4,7 +4,7 @@
       >{{ site.Title }}</a
     >
     <a
-      class="btn-dark ml-7 h-[1.4rem] w-[1.4rem] shrink-0 cursor-pointer [background:url(./theme.svg)_left_center/cover_no-repeat] dark:invert dark:[background-position:right]"
+      class="btn-dark ml-6 h-6 w-6 shrink-0 cursor-pointer {{ if site.Params.monoDarkIcon }}[background:url(./theme.svg)_left_center/cover_no-repeat] dark:invert dark:[background-position:right]{{ else }}[background:url(./theme.png)_left_/_auto_theme('spacing.6')_no-repeat] [transition:_background-position_0.4s_steps(5)] dark:[background-position:right]{{ end }}"
     ></a>
   </div>
 
@@ -53,7 +53,7 @@
   >
     {{ $url := .RelPermalink }}<!---->
     {{ with site.Menus.main }}
-    <nav class="lg:ml-14 lg:flex lg:flex-row lg:items-center lg:space-x-7">
+    <nav class="lg:ml-12 lg:flex lg:flex-row lg:items-center lg:space-x-6">
       {{ range . }}
       <a
         class="block font-medium lg:font-normal text-center leading-[5rem] text-3xl lg:text-base {{ if eq .URL $url }}active{{ end }}"
@@ -66,7 +66,7 @@
 
     {{ with $.Scratch.Get "social_list" }}
     <nav
-      class="mt-12 flex justify-center space-x-10 dark:invert lg:mt-0 lg:ml-14 lg:items-center lg:space-x-7"
+      class="mt-12 flex justify-center space-x-10 dark:invert lg:mt-0 lg:ml-12 lg:items-center lg:space-x-6"
     >
       {{ range . }}<!---->
       <a
diff --git a/static/theme.png b/static/theme.png
new file mode 100644
index 0000000..265ac1f
--- /dev/null
+++ b/static/theme.png
diff --git a/static/theme.svg b/static/theme.svg
index 8f00446..14c5f31 100644
--- a/static/theme.svg
+++ b/static/theme.svg
@@ -1 +1 @@
-<svg width="64" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-12,0)"><path d="M9.3812 2.04327C7.76937 2.50154 6.2485 3.36519 4.97948 4.63421C1.00684 8.60687 1.00684 15.0478 4.97948 19.0205C8.95213 22.9932 15.3931 22.9932 19.3657 19.0205C20.6429 17.7433 21.5095 16.211 21.9654 14.5876M9.5384 2C8.6321 5.39377 9.51018 9.16492 12.1726 11.8274C14.8351 14.4899 18.6063 15.368 22 14.4617" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g><g transform="translate(12,0)"><path d="M17.5 17.5L19 19M20 12H22M6.5 6.5L5 5M17.5 6.5L19 5M6.5 17.5L5 19M2 12H4M12 2V4M12 20V22M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g></svg>
+<svg width="64" height="32" viewBox="-0.5 -0.5 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-12,0)"><path d="M9.3812 2.04327C7.76937 2.50154 6.2485 3.36519 4.97948 4.63421C1.00684 8.60687 1.00684 15.0478 4.97948 19.0205C8.95213 22.9932 15.3931 22.9932 19.3657 19.0205C20.6429 17.7433 21.5095 16.211 21.9654 14.5876M9.5384 2C8.6321 5.39377 9.51018 9.16492 12.1726 11.8274C14.8351 14.4899 18.6063 15.368 22 14.4617" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g><g transform="translate(12,0)"><path d="M17.5 17.5L19 19M20 12H22M6.5 6.5L5 5M17.5 6.5L19 5M6.5 17.5L5 19M2 12H4M12 2V4M12 20V22M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /></g></svg>