feat: brand-new header design

Former-commit-id: 5b4275c78ee9330a48868fc67e0c1e6c9d8b1bc2

9 files changed, 46 insertions, 53 deletions

diff --git a/layouts/_partials/components/logo.html b/layouts/_partials/components/logo.html
index 226cb557..eff37b6a 100644
--- a/layouts/_partials/components/logo.html
+++ b/layouts/_partials/components/logo.html
@@ -9,6 +9,6 @@
     <img src="{{ $src }}" alt="Logo"
         class="dark:invert title-image {{ $imageClass }}"
         style="view-transition-name: title-image"
-        width="160px" height="154px"
+        width="80px" height="77px"
     />
 </a>
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 814fe992..085bbb2f 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,11 +1,8 @@
-<header class="pagefind-exclude">
+<header class="pagefind-exclude
+    md:flex md:justify-between mb-4">
   <!-- Logo & Title -->
-  <div class="flex flex-col items-center gap-2">
-    {{ if .IsHome }}
-        {{ partial "header/hoverable-logo" . }}
-    {{ else }}
-        {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
-    {{ end }}
+  <div class="flex flex-col items-center md:items-start gap-2">
+    {{ partial "components/logo" }}
     <a class="text-8 font-900 text-center tracking-widest
         xerox hover:no-underline"
         href="{{ .Site.LanguagePrefix }}/"
@@ -13,9 +10,9 @@
     >
   </div>
   <!-- Navigation -->
-  {{ $navOffset := "pl-6" }}
-  <div class="flex justify-center items-center gap-3 text-size-sm md:text-size-base {{ $navOffset }}">
+  <div class="flex md:flex-col justify-center md:justify-start items-center md:items-end gap-3
+      text-size-sm md:text-size-base pl-6 md:pl-6">
       {{ partial "header/navigation" . }}
-      {{ partial "header/language-switch" . }}
+      {{ partial "header/other-navigation" . }}
   </div>
 </header>
diff --git a/layouts/_partials/header/hoverable-logo.html b/layouts/_partials/header/hoverable-logo.html
deleted file mode 100644
index d04ae6ac..00000000
--- a/layouts/_partials/header/hoverable-logo.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="group relative w-full flex flex-col items-center">
-  <div class="group-hover:opacity-30 transition-opacity duration-500">
-      {{ partial "components/logo" (dict "imageClass" "w-[10rem]") }}
-  </div>
-  <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500
-      w-[20rem] absolute top-0 bottom-0
-      flex flex-col items-center justify-center markdown-body">
-      <p class="text-center text-xl font-extrabold font-italic">
-          {{ T "homePageQuote.content" . | markdownify }}
-      </p>
-      <p class="w-full m-0 text-right text-sm text-secondary">
-          {{ T "homePageQuote.source" . | markdownify }}
-      </p>
-  </div>
-</div>
diff --git a/layouts/_partials/header/language-switch.html b/layouts/_partials/header/language-switch.html
deleted file mode 100644
index 9f0a9c20..00000000
--- a/layouts/_partials/header/language-switch.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{{ $langButtonSize := "w-4 h-4" }}
-
-{{- $lang := .Site.Language.Lang -}}
-{{- $switch := dict
-  "en" (dict "url" "/zh/" "label" "ZH" "title" "查看中文博客")
-  "zh" (dict "url" "/en/" "label" "EN" "title" "View English Blog") -}}
-{{- $entry := index $switch $lang -}}
-<a
-    href="{{ $entry.url }}"
-    class="rounded-full text-center hover:no-underline {{ $langButtonSize }}
-      bg-neutral/10 border-1 border-[var(--text-color)] border-solid
-      bg-[var(--block-background-color)]
-      flex items-center justify-center"
-    title="{{ $entry.title }}"
->
-  <span class="text-size-[0.5rem] font-extrabold">{{ $entry.label }}</span>
-</a>
diff --git a/layouts/_partials/header/navigation.html b/layouts/_partials/header/navigation.html
index 0883206a..ec05f2a3 100644
--- a/layouts/_partials/header/navigation.html
+++ b/layouts/_partials/header/navigation.html
@@ -1,4 +1,4 @@
-<nav class="my-4 flex justify-center items-center w-fit rounded-4 overflow-hidden">
+<nav class="my-6 flex justify-center items-center w-fit rounded-4 overflow-hidden">
   {{ range .Site.Params.nav }}
   <a class="inline-block py-1 px-[0.35rem] md:px-2 first:pl-3 last:pr-3
       block hover:no-underline text-nowrap
diff --git a/layouts/_partials/header/other-navigation.html b/layouts/_partials/header/other-navigation.html
new file mode 100644
index 00000000..c40860c1
--- /dev/null
+++ b/layouts/_partials/header/other-navigation.html
@@ -0,0 +1,35 @@
+{{ $langButtonSize := "w-4 h-4" }}
+
+<div class="flex gap-2 pr-2">
+    {{ if eq .Site.Language.Lang "zh" }}
+    <!-- insight (/stats) page link -->
+    <a
+        href="/stats"
+        class="rounded-full text-center hover:no-underline {{ $langButtonSize }}
+          bg-neutral/10 border-1 border-[var(--text-color)] border-solid
+          bg-[var(--block-background-color)]
+          items-center justify-center
+          hidden md:flex"
+        title="洞察"
+    >
+      <span class="text-size-[0.5rem] font-extrabold">i</span>
+    </a>
+    {{ end }}
+
+    <!-- language switch -->
+    {{- $lang := .Site.Language.Lang -}}
+    {{- $switch := dict
+      "en" (dict "url" "/zh/" "label" "ZH" "title" "查看中文博客")
+      "zh" (dict "url" "/en/" "label" "EN" "title" "View English Blog") -}}
+    {{- $entry := index $switch $lang -}}
+    <a
+        href="{{ $entry.url }}"
+        class="rounded-full text-center hover:no-underline {{ $langButtonSize }}
+          bg-neutral/10 border-1 border-[var(--text-color)] border-solid
+          bg-[var(--block-background-color)]
+          flex items-center justify-center"
+        title="{{ $entry.title }}"
+    >
+      <span class="text-size-[0.5rem] font-extrabold">{{ $entry.label }}</span>
+    </a>
+</div>
diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html
index fd637ff9..99d6f737 100644
--- a/layouts/_partials/home/home-nav.html
+++ b/layouts/_partials/home/home-nav.html
@@ -20,12 +20,5 @@
                 (strings.HasPrefix $.Page.RelPermalink "/tags/"))
         ) }}
     {{ end }}
-
-    <a href="{{ .Site.LanguagePrefix }}/stats"
-        class="absolute right-0 dark:invert
-        block opacity-50 transition-opacity duration-300 hover:opacity-100
-        {{ if eq "/stats/" $.Page.RelPermalink }} opacity-100 font-bolder{{ end }}">
-            <img src="/img/graph.svg" class="opacity-50 h-8 w-8" alt="Cthulu-style monster with an eye." />
-    </a>
 </nav>
 {{ end }}
diff --git a/layouts/library/section.html b/layouts/library/section.html
index 7ac5ef6c..cd95b8e8 100644
--- a/layouts/library/section.html
+++ b/layouts/library/section.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
-  {{ partial "header.html" . }}
   <article class="pagefind-exclude">
+    {{ partial "header.html" . }}
     <div>
         <h2>{{ now.Year }} 年读的书</h2>
         <div class="grid grid-cols-4 md:grid-cols-6 items-center gap-4 my-4">
diff --git a/layouts/page.html b/layouts/page.html
index db5fa837..431d1a52 100644
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -1,6 +1,6 @@
 {{ define "main" }}
-    {{ partial "header.html" . }}
     <article>
+      {{ partial "header.html" . }}
       <div id="post-content" class="post-content markdown-body text-size-lg md:text-size-xl leading-loose"
           style="view-transition-name: post-content-{{ .File.UniqueID }}">
         {{ partial "posts/toc" . }}