refactor: replace _header.scss with UnoCSS and remove post-page-header

Former-commit-id: b503a34ad842ca85919c36fa1b985dc465c74b72

1 files changed, 15 insertions, 8 deletions

diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 1804ca0f..98d6109e 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,18 +1,25 @@
 <header id="site-header">
   <!-- Header Title -->
-  <div class="header-title">
-    {{ partial "components/logo" }}
-    <a class="title-link" href="{{ .Site.LanguagePrefix }}/"
+  <div class="flex flex-col items-center gap-[0.5rem]">
+    {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
+    <a class="text-[2rem] font-900 text-center tracking-[.15rem]
+        xerox underline-offset-10 underline-3"
+        href="{{ .Site.LanguagePrefix }}/"
       >{{ .Site.Title }}</a
     >
   </div>
   <!-- Navigation -->
-  <div id="navigation-bar">
-      <nav class="navigation">
+  <div class="flex justify-center items-center gap-[0.75rem] pl-[1rem]">
+      <nav class="my-[1rem] flex justify-center items-center w-fit rounded-[1rem] overflow-hidden">
         {{ range .Site.Params.nav }}
-        <div class="navigation-item {{ if strings.Contains $.Page.RelPermalink .link }}active{{ end }}">
-          <a href="{{ .link }}" target="{{ .target }}" data-umami-event="💊 Click header navigation">{{ .name }}</a>
-        </div>
+        <a class="inline-block py-[0.25rem] px-[0.5rem] first:pl-[0.75rem] last:pr-[0.75rem]
+            block hover:no-underline
+            {{ if strings.Contains $.Page.RelPermalink .link }}
+            text-[var(--text-color)] bg-[var(--block-background-color)]
+            {{ else }}
+            text-[var(--background-color)] bg-[var(--text-color)]
+            {{ end }}"
+        href="{{ .link }}" target="{{ .target }}" data-umami-event="💊 Click header navigation">{{ .name }}</a>
         {{ end }}
       </nav>