From 210282db83b001fc792b5b67982ded4b29772027 Mon Sep 17 00:00:00 2001
From: zhangmo8 <wegi866@gmail.com>
Date: Fri, 11 Oct 2024 19:49:35 +0800
Subject: [PATCH] style: optimize header

---
 playground/src/components/Header.vue | 48 +++++++++++++++-------------
 playground/uno.config.ts             |  1 +
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/playground/src/components/Header.vue b/playground/src/components/Header.vue
index baf5d49..893be7a 100644
--- a/playground/src/components/Header.vue
+++ b/playground/src/components/Header.vue
@@ -1,27 +1,29 @@
 <template>
-  <header fcc py-4 pr>
-    <h1 text-4xl fw-600 text-transparent bg-clip-text bg-gradient-to-r from-purple to-red fcc gap-2>
-      <img inline-block w-10 src="/logo.svg" alt="logo">
-      <span>
-        Magic Color
-      </span>
-    </h1>
+  <header pt-2 sticky fcc top-0 z-1>
+    <hgroup w="85%" nav-bg fcc py-6>
+      <h1 text-4xl fw-600 text-transparent bg-clip-text bg-gradient-to-r from-purple to-red fcc gap-2>
+        <img inline-block w-10 src="/logo.svg" alt="logo">
+        <span>
+          Magic Color
+        </span>
+      </h1>
 
-    <div pa right-10 fcc gap-2>
-      <button i-carbon-switch-layer-2 icon-btn title="Built-In Colors" @click="togglePanel()" />
-      <button
-        i-carbon-light
-        dark:i-carbon-moon
-        icon-btn
-        title="Toggle Color Mode"
-        @click="toggleDark()"
-      />
-      <a
-        i-carbon-logo-github icon-btn
-        href="https://github.com/zyyv/magic-color"
-        target="_blank"
-        title="GitHub"
-      />
-    </div>
+      <div pa right-10 fcc gap-6>
+        <button i-carbon-switch-layer-2 icon-btn title="Built-In Colors" @click="togglePanel()" />
+        <button
+          i-carbon-light
+          dark:i-carbon-moon
+          icon-btn
+          title="Toggle Color Mode"
+          @click="toggleDark()"
+        />
+        <a
+          i-carbon-logo-github icon-btn
+          href="https://github.com/zyyv/magic-color"
+          target="_blank"
+          title="GitHub"
+        />
+      </div>
+    </hgroup>
   </header>
 </template>
diff --git a/playground/uno.config.ts b/playground/uno.config.ts
index a3b7869..f2e847d 100644
--- a/playground/uno.config.ts
+++ b/playground/uno.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
     'btn': 'inline-flex items-center justify-center w-full h-12 rd-md',
     'btn-outline': 'btn b bg-transparent',
     'btn-ghost': 'btn bg-transparent transition',
+    'nav-bg': 'backdrop-blur-12 rd-2 shadow-xl bg-primary-bg/45',
   },
   presets: [
     presetUseful({