更换首页头像照片和首页主题配色

Author: CatCodeMe

src/assets/home.png

@@ -34,5 +34,9 @@ export function calculateSiteAge(startDate: string): string {
  * Get default highlight color using theme primary color
  */
 export function getHighlightColor(): string {
-  return 'hsl(var(--primary) / var(--un-text-opacity, 1))'
+  return '#f6eac5'
+  // 之前的代码使用 hsl(var(--primary) / var(--un-text-opacity, 1))
+  // 这是使用 CSS 变量获取主题主色，并通过除法运算控制透明度
+  // var(--un-text-opacity, 1) 是 UnoCSS 的透明度变量，默认值为 1（完全不透明）
+  // 除法运算用于将 HSL 颜色值与透明度值结合，实现颜色透明度的动态控制
 }

src/components/home/utils.ts

@@ -6,7 +6,7 @@ import PageLayout from '@/layouts/BaseLayout.astro'
 import { getBlogCollection } from 'astro-pure/server'
 import { getCurrentReading, getLatestPosts, getTotalWords } from '@/components/shelf/utils'
 import { calculateSiteAge, getHighlightColor } from '@/components/home/utils'
-import avatarImage from '@/assets/avatar_2.png'
+import avatarImage from '@/assets/home.png'
 import config from '@/site-config'
 
 const MAX_POSTS = 6
@@ -33,9 +33,9 @@ const highlightColor = getHighlightColor()
           {/* 左侧：头像 - 大尺寸 */}
           <div class='flex justify-center md:justify-start'>
             <div
-              class='w-32 h-32 md:w-48 md:h-48 lg:w-56 lg:h-56 border border-border overflow-hidden bg-card rounded-lg shadow-lg'
+              class='w-32 h-32 md:w-48 md:h-48 lg:w-56 lg:h-56 overflow-hidden rounded-lg'
             >
-              <Image src={avatarImage} alt='Avatar' class='w-full h-full object-cover block' />
+              <Image src={avatarImage} alt='Avatar' class='w-full h-full object-contain block' />
             </div>
           </div>