feat: better header on small screens

4 files changed, 11 insertions, 8 deletions

diff --git a/assets/css/utils/_variables.scss b/assets/css/utils/_variables.scss
index 0261d453..83159980 100644
--- a/assets/css/utils/_variables.scss
+++ b/assets/css/utils/_variables.scss
@@ -24,7 +24,10 @@
       serif;
 
     --page-width: 650px;
-    --page-margin-y: 5rem;
+    --page-margin-y: 3rem;
+    @media screen and (min-width: 768) {
+      --page-margin-y: 5rem;
+    }
 
     /* pagefind custom css */
     --pagefind-ui-primary: var(--text-color);
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index f67532be..1b249f1e 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,8 +1,9 @@
 <header class="pagefind-exclude
     md:flex md:justify-between mb-4">
   <!-- Logo & Title -->
-  <div class="flex flex-col items-center md:items-start gap-2">
-    {{ partial "components/logo" (dict "imageClass" "w-[160px] md:w-20 md:h-auto" "ctx" .) }}
+  <div class="flex items-center justify-center gap-5
+     md:flex-col md:items-start md:justify-start md:gap-2">
+    {{ partial "components/logo" (dict "imageClass" "w-12 md:w-20 h-auto" "ctx" .) }}
     <a class="text-8 font-900 text-center tracking-widest
         xerox hover:no-underline"
         href="{{ .Site.LanguagePrefix }}/"
@@ -19,8 +20,8 @@
     >
   </div>
   <!-- Navigation -->
-  <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">
+  <div class="flex justify-center items-center gap-3 text-size-base
+    md:flex-col md:items-end md:justify-start md:pl-6">
       {{ partial "header/navigation" . }}
       {{ partial "header/other-navigation" . }}
   </div>
diff --git a/layouts/_partials/header/other-navigation.html b/layouts/_partials/header/other-navigation.html
index c40860c1..232302a1 100644
--- a/layouts/_partials/header/other-navigation.html
+++ b/layouts/_partials/header/other-navigation.html
@@ -9,7 +9,7 @@
           bg-neutral/10 border-1 border-[var(--text-color)] border-solid
           bg-[var(--block-background-color)]
           items-center justify-center
-          hidden md:flex"
+          flex"
         title="洞察"
     >
       <span class="text-size-[0.5rem] font-extrabold">i</span>
diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html
index 628fc828..4c0de915 100644
--- a/layouts/_partials/home/home-nav.html
+++ b/layouts/_partials/home/home-nav.html
@@ -1,6 +1,5 @@
 {{ if eq .Site.Language.Lang "zh" }}
-<nav id="home-nav" class="relative w-full ps-0 flex list-none gap-4
-    text-size-sm md:text-size-base">
+<nav id="home-nav" class="relative w-full ps-0 flex list-none gap-4 text-size-sm">
     {{ range .Site.Params.homenav }}
         {{ partial "home/home-nav-item" (dict
             "text" .name