From 788d7025783fe9ead66336ec66c98d1fb31993ff Mon Sep 17 00:00:00 2001
From: KazooTTT <work@kazoottt.top>
Date: Fri, 11 Oct 2024 12:19:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Header.astro | 13 +++++++++++--
 src/styles/app.css                 |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index b1cd99e..1b56bd9 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -1,5 +1,6 @@
 ---
-
+import kazootttAvatar from '../../assets/kazoottt-avatar.jpeg'
+import { Image } from 'astro:assets'
 ---
 
 <header class='mb-12 flex w-full flex-wrap pb-3 text-sm sm:flex-nowrap sm:justify-start'>
@@ -7,7 +8,15 @@
 		class='relative mx-auto flex w-full items-center justify-between sm:flex sm:items-center'
 		aria-label='global'
 	>
-		<a class='flex-none text-xl font-semibold' href='/' aria-label='Brand'>KazooTTT</a>
+		<a class='flex items-center' href='/'>
+			<Image
+				src={kazootttAvatar}
+				alt='profile photo'
+				class='mr-2 h-8 w-auto rounded-full sm:hidden'
+				loading='eager'
+			/>
+			<div class='hidden flex-none text-xl font-semibold sm:block' aria-label='Brand'>KazooTTT</div>
+		</a>
 
 		<div class='flex flex-row items-center justify-center gap-x-5 sm:gap-x-7'>
 			<a
diff --git a/src/styles/app.css b/src/styles/app.css
index 6276471..6278b73 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -15,7 +15,7 @@
 		--secondary: 240 4.8% 95.9%;
 		--secondary-foreground: 240 5.9% 10%;
 		--muted: 240 4.8% 95.9%;
-		--muted-foreground: 240 3.8% 46.1%;
+		--muted-foreground: 240 3.8% 25%;
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
 		--destructive: 0 72.22% 50.59%;