update

src/lib/component/PointerDiv.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <div
-	class="h-fit w-fit"
+	{...$$props}
 	on:mouseenter={handleMouseEnter}
 	on:mouseleave={handleMouseLeave}
 	role="presentation"

src/lib/component/layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { color as c, isMainColor } from '$lib/store/color';
-	import Footer from '$lib/component/footer.svelte';
 	import { onDestroy } from 'svelte';
+	import Footer from '$lib/component/footer.svelte';
 	import clsx from 'clsx';
 
 	export let cover: boolean = false;

src/lib/component/nav.svelte

@@ -10,6 +10,7 @@
 	import cardsPlayingOutline from '@mdi/svg/svg/cards-playing-outline.svg?raw';
 	import clsx from 'clsx';
 	import PointerDiv from '$lib/component/PointerDiv.svelte';
+	import { isClose } from '$lib/store/header';
 
 	const links = [
 		{
@@ -58,8 +59,8 @@
 		)}
 	>
 		{#each links as link}
-			<PointerDiv>
-				<li class="mt-6">
+			<li class="mt-6">
+				<PointerDiv>
 					<a
 						href={link.href}
 						class={clsx(
@@ -68,6 +69,9 @@
 								? 'after:border-onPrimary md:after:border-outlineVariant'
 								: 'after:border-white'
 						)}
+						on:click={() => {
+							isClose.set(true);
+						}}
 					>
 						<div class="hidden w-max md:block">
 							<Icon
@@ -87,8 +91,8 @@
 							>{link.text}</span
 						>
 					</a>
-				</li>
-			</PointerDiv>
+				</PointerDiv>
+			</li>
 		{/each}
 	</ul>
 </nav>

src/lib/config.ts

@@ -1,8 +1,9 @@
 import { dev } from '$app/environment';
 
-import springFestival2024 from '../assets/images/spring-festival-2024.jpg?enhanced';
-import bird from '../assets/images/bird.webp?enhanced';
+import springFestival2024 from '../assets/covers/spring-festival-2024.jpg?enhanced';
+import bird from '../assets/covers/bird.webp?enhanced';
 import ucl from '../assets/images/ucl.jpg?enhanced';
+import neom from '../assets/images/neom.avif?enhanced';
 
 // 基本设置
 export const title: string = "ICEKYLIN'S BLOG";
@@ -37,7 +38,8 @@ export const url: string = dev
 export const images = {
 	springFestival2024,
 	bird,
-	ucl
+	ucl,
+	neom
 };
 
 // 首页设置

src/lib/home/Post.svelte

@@ -13,17 +13,15 @@
 <li
 	class={clsx(
 		'w-full border-b border-dotted border-b-outlineVariant py-3',
-		wide
-			? 'md:flex-[5_0_calc(100%_/_2_+_6%)]'
-			: 'md:flex-[1_0_calc(100%_/_3_+_1%)]'
+		wide ? 'md:flex-[1_0_calc(100%_/_2)]' : 'md:flex-[1_0_calc(100%_/_3)]'
 	)}
 >
 	<div
-		class="flex h-full gap-2 border-l border-dotted border-l-outlineVariant px-6"
+		class="flex h-full gap-2 border-l border-dotted border-l-outlineVariant px-6 lg:gap-3"
 	>
 		<div class="flex h-full shrink flex-col gap-2">
 			<a class="font-bold" href={post.slug}>{post.title}</a>
-			<p class="line-clamp-3 text-xs text-onSurfaceVariant">
+			<p class="line-clamp-5 text-xs text-onSurfaceVariant">
 				{post.description}
 			</p>
 			<div
@@ -39,10 +37,10 @@
 			</div>
 		</div>
 		{#if post.img}
-			<div class="h-16 w-16 shrink-0 md:h-32 md:w-32">
+			<div class="h-32 w-32 shrink-0">
 				<enhanced:img
 					alt={title}
-					class="h-16 w-16 object-cover md:h-32 md:w-32"
+					class="h-32 w-32 object-cover"
 					src={config.images[post.img]}
 				/>
 			</div>

src/lib/home/Posts.svelte

@@ -8,7 +8,7 @@
 	<ul class="relative -left-6 right-6 flex w-[calc(100%+48px)] flex-wrap">
 		<slot />
 	</ul>
-	<PointerDiv>
+	<PointerDiv class="w-fit">
 		<a href="/">
 			<div
 				class="flex items-center gap-3 bg-onBackground px-3 py-2 text-xs font-bold text-background"

src/posts/hello.md

@@ -4,6 +4,7 @@ description: 这是迁移到 SvelteKit 的第一篇文章。测试了 Tailwind C
 date: '2024-2-5'
 categories: [学术]
 tags: [SvelteKit, Svelte, Tailwind]
+img: 'neom'
 published: true
 ---