From 6f6c1b4f33e0f598f935b179113933289a0e7b40 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Thu, 27 Mar 2025 00:42:12 +0900
Subject: [PATCH 1/8] lock project image aspect ratio

---
 .../2019/11-03_utcode-lectures-04/index.mdx   |  6 ++--
 contents/projects/cobuilder/index.mdx         |  3 +-
 contents/projects/create-cpu/index.mdx        |  3 +-
 contents/projects/dull-meshi/index.mdx        |  5 +++-
 contents/projects/learn-braille/index.mdx     |  4 ++-
 contents/projects/nikochan/index.mdx          |  3 +-
 contents/projects/postput/index.mdx           |  3 +-
 contents/projects/syllabus/index.mdx          |  3 +-
 contents/projects/th-beat/index.mdx           |  3 +-
 contents/projects/translate-braille/index.mdx |  4 ++-
 contents/projects/utcode-learn/index.mdx      |  3 +-
 contents/projects/webcface/index.mdx          |  3 +-
 src/components/ArticleList.astro              | 14 ++++-----
 src/components/ProjectList.astro              | 21 ++++++++++---
 src/islands/svelte/hamburger-button.svelte    |  2 +-
 src/pages/articles/[...id].astro              | 30 +++++++++----------
 src/pages/index.astro                         |  5 +++-
 src/pages/members.astro                       |  4 +--
 src/pages/projects/[project].astro            | 10 +++----
 src/schema.ts                                 |  6 +++-
 20 files changed, 84 insertions(+), 51 deletions(-)

diff --git a/contents/articles/2019/11-03_utcode-lectures-04/index.mdx b/contents/articles/2019/11-03_utcode-lectures-04/index.mdx
index 88550468..2c13fe60 100644
--- a/contents/articles/2019/11-03_utcode-lectures-04/index.mdx
+++ b/contents/articles/2019/11-03_utcode-lectures-04/index.mdx
@@ -155,7 +155,9 @@ CSS セレクタは、ブラウザが CSS を適用する際、どの HTML 要
 
 疑似クラスを用いると、CSS を用いたインタラクティブな表現が簡単に実装できます。以下の文字列にカーソルを合わせてみてください。
 
-<div class="hover:text-red hover:text-lg" />
+<div class="hover:text-[red] hover:text-lg">
+Hello World!
+</div>
 
 これは、以下のようにして実装されています。
 
@@ -166,7 +168,7 @@ CSS セレクタは、ブラウザが CSS を適用する際、どの HTML 要
 ```
 #message:hover {
   color: red;
-  font-size: 30px;
+  font-size: 18px;
 }
 ```
 
diff --git a/contents/projects/cobuilder/index.mdx b/contents/projects/cobuilder/index.mdx
index 4b74d51c..694c0ac6 100644
--- a/contents/projects/cobuilder/index.mdx
+++ b/contents/projects/cobuilder/index.mdx
@@ -3,7 +3,8 @@ title: cobuilder
 slug: cobuilder
 date: 2023-04-04
 description: 仮想空間を参加者全員で作り上げ、自分たちだけの世界を作るメタバースを作ります
-image: ./image.png
+image:
+  src: ./image.png
 tags: [C#, Unity]
 github: https://github.com/ut-code/cobuilder
 ---
diff --git a/contents/projects/create-cpu/index.mdx b/contents/projects/create-cpu/index.mdx
index 1bff9871..fa824010 100644
--- a/contents/projects/create-cpu/index.mdx
+++ b/contents/projects/create-cpu/index.mdx
@@ -2,7 +2,8 @@
 title: CreateCPU
 slug: create-cpu
 date: 2023-04-01
-image: ./image.png
+image:
+  src: ./image.png
 description: 現代コンピュータの頭脳である CPU は、単純な論理回路を大量に組み合わせた巨大なシステムです。CreateCPU を使うと、最も単純な回路素子をつなぎ合わせて自分だけの CPU を作り上げることができます。
 tags: [TypeScript, React]
 github: https://github.com/ut-code/create-cpu
diff --git a/contents/projects/dull-meshi/index.mdx b/contents/projects/dull-meshi/index.mdx
index 0cd81d39..578a5b82 100644
--- a/contents/projects/dull-meshi/index.mdx
+++ b/contents/projects/dull-meshi/index.mdx
@@ -1,7 +1,10 @@
 ---
 title: だるめし
 slug: dull-meshi
-image: ./dull-meshi.jpg
+image:
+  src: ./dull-meshi.jpg
+  fit: contain
+  bg: "#E6E0DB"
 date: 2023-04-05
 description: 質問に答えていくだけで献立を提案してくれるアプリ
 tags: [TypeScript, React]
diff --git a/contents/projects/learn-braille/index.mdx b/contents/projects/learn-braille/index.mdx
index 8f38d69f..d2ab8b53 100644
--- a/contents/projects/learn-braille/index.mdx
+++ b/contents/projects/learn-braille/index.mdx
@@ -1,7 +1,9 @@
 ---
 title: Dot Tutor Learn
 slug: dot-tutor-learn
-image: ./image.png
+image:
+  src: ./image.png
+  fit: contain
 date: 2023-01-28
 description: 体験型点字学習サイト Dot Tutor Learn です。
 tags: [TypeScript, React]
diff --git a/contents/projects/nikochan/index.mdx b/contents/projects/nikochan/index.mdx
index e6776b82..c1bef5ed 100644
--- a/contents/projects/nikochan/index.mdx
+++ b/contents/projects/nikochan/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: Falling Nikochan
 slug: nikochan
-image: ./image.jpg
+image:
+  src: ./image.jpg
 date: 2024-09-24
 description: シンプルでかわいい音ゲーです。誰でも譜面を作ってシェアできます。
 tags: [JavaScript, TypeScript, React, Next.js, Hono, MongoDB]
diff --git a/contents/projects/postput/index.mdx b/contents/projects/postput/index.mdx
index 8a45afd7..68eeba82 100644
--- a/contents/projects/postput/index.mdx
+++ b/contents/projects/postput/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: PostPut
 slug: postput
-image: ./image.png
+image:
+  src: ./image.png
 date: 2023-04-03
 description: 送信したメッセージに後からタグ付けできるチャットツール
 tags: [JavaScript, React, Node.js, Express, Passport.js, Prisma, WebSocket]
diff --git a/contents/projects/syllabus/index.mdx b/contents/projects/syllabus/index.mdx
index b9f772a9..cfa476ae 100644
--- a/contents/projects/syllabus/index.mdx
+++ b/contents/projects/syllabus/index.mdx
@@ -2,7 +2,8 @@
 title: シ楽バス
 slug: syllabus
 order: 2
-image: ./image.jpg
+image:
+  src: ./image.jpg
 date: 2023-10-02
 description: 前期課程に特化した時間割サービス
 tags: [JavaScript]
diff --git a/contents/projects/th-beat/index.mdx b/contents/projects/th-beat/index.mdx
index 783ba570..2def2394 100644
--- a/contents/projects/th-beat/index.mdx
+++ b/contents/projects/th-beat/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: 東方競争曲
 slug: touhoubeat
-image: ./image.png
+image:
+  src: ./image.png
 date: 2023-12-19
 description: 東方Projectのアレンジ曲で遊べるリズムゲーム
 tags: [C#, Unity, AWS, Go, TypeScript, React]
diff --git a/contents/projects/translate-braille/index.mdx b/contents/projects/translate-braille/index.mdx
index 12a8aa03..5e8754ef 100644
--- a/contents/projects/translate-braille/index.mdx
+++ b/contents/projects/translate-braille/index.mdx
@@ -1,7 +1,9 @@
 ---
 title: Dot Tutor Translate
 slug: dot-tutor-translate
-image: ./image.png
+image:
+  src: ./image.png
+  fit: contain
 date: 2023-01-28
 description: 点字翻訳サイト Dot Tutor Translate です。
 tags: [TypeScript, React, Python, FastAPI]
diff --git a/contents/projects/utcode-learn/index.mdx b/contents/projects/utcode-learn/index.mdx
index 9b9c43c9..4020cdac 100644
--- a/contents/projects/utcode-learn/index.mdx
+++ b/contents/projects/utcode-learn/index.mdx
@@ -2,7 +2,8 @@
 title: ut.code(); Learn
 slug: utcode-learn
 order: 1
-image: ./image.jpg
+image:
+  src: ./image.jpg
 date: 2022-04-01
 description: ut.code(); 公式の学習カリキュラムです。ut.code(); 外部の方でもご利用いただけます。
 tags: [JavaScript, TypeScript, React, Node.js, Docusaurus]
diff --git a/contents/projects/webcface/index.mdx b/contents/projects/webcface/index.mdx
index 480366f4..61b62510 100644
--- a/contents/projects/webcface/index.mdx
+++ b/contents/projects/webcface/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: WebCFace
 slug: webcface
-image: ./image.png
+image:
+  src: ./image.png
 date: 2023-09-28
 description: プロセス間通信 & GUIを提供するライブラリ
 tags: [C++, Python, JavaScript, TypeScript, WebSocket, MessagePack, React]
diff --git a/src/components/ArticleList.astro b/src/components/ArticleList.astro
index f72be3e5..4bb43816 100644
--- a/src/components/ArticleList.astro
+++ b/src/components/ArticleList.astro
@@ -7,7 +7,7 @@ import { markdownToTxt } from "markdown-to-txt";
 interface Props {
   articles: { id: string; data: Article; body?: string }[];
   enlarge?: boolean; // 11 記事ごとに大きくする
-  minify?: boolean; // (index.astro 用) 画面幅に合わせて短くする
+  truncate?: boolean; // (index.astro 用) 画面幅に合わせて短くする
   "max-cols"?: number | `${number}`;
   loading?: "eager" | "lazy";
   class?: string;
@@ -16,7 +16,7 @@ const props = Astro.props;
 const {
   articles,
   enlarge = false,
-  minify = false,
+  truncate = false,
   "max-cols": _maxCols = 4,
   loading = "lazy",
 } = props;
@@ -41,11 +41,11 @@ const articlesWithExcerpts = await Promise.all(
 
 <ul
   class:list={[
-    "grid grid-flow-dense gap-9",
+    "grid grid-flow-dense gap-5",
     maxCols >= 2 && "md:grid-cols-2",
     maxCols >= 3 && "lg:grid-cols-3",
     maxCols >= 4 && "xl:grid-cols-4",
-    minify && "minify",
+    truncate && "truncate",
     props.class,
   ]}
 >
@@ -75,7 +75,7 @@ const articlesWithExcerpts = await Promise.all(
           <a
             href={`/articles/${article.id}`}
             class:list={[
-              "relative rounded-xl bg-gray-50 hover:brightness-110 active:top-0.5",
+              "relative rounded-xl bg-gray-50 p-2 hover:brightness-95",
               additionalProps.cellClassName,
             ]}
           >
@@ -109,7 +109,7 @@ const articlesWithExcerpts = await Promise.all(
               <h3 class="text-lg font-bold">{article.data.title}</h3>
               <p
                 class:list={[
-                  "prose mt-2 line-clamp-3 max-w-none",
+                  "prose mt-2 line-clamp-3 max-w-none text-gray-500",
                   isFeatured && "md:line-clamp-6",
                 ]}
               >
@@ -125,7 +125,7 @@ const articlesWithExcerpts = await Promise.all(
 
 <style>
   @container (width > 64rem) {
-    .minify.variant-compact :nth-child(n + 3) a {
+    .truncate.variant-compact :nth-child(n + 3) a {
       display: none;
     }
   }
diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro
index af00bddb..6c84dd10 100644
--- a/src/components/ProjectList.astro
+++ b/src/components/ProjectList.astro
@@ -21,20 +21,33 @@ const { projects, variant = "full" } = props;
         ]}
       >
         <a
-          class="relative top-0 overflow-clip rounded-xl border border-gray-200 bg-gray-50 hover:brightness-95 active:top-0.25"
+          class="relative top-0 overflow-clip rounded-xl border border-gray-200 hover:brightness-95"
           href={`/projects/${project.id}`}
         >
           <Picture
             loading={i < 6 && variant === "full" ? "eager" : "lazy"}
             alt="プロジェクトのイメージ画像"
-            src={project.data.image}
-            class="skeleton max-h-[24rem] w-full object-contain"
+            src={project.data.image.src}
+            width="600"
+            height={(600 * 3) / 5}
+            class:list={[
+              "aspect-5/3 w-full",
+              !project.data.image.bg && "skeleton",
+            ]}
+            style={{
+              "object-fit": project.data.image.fit,
+              ...(project.data.image.bg
+                ? {
+                    "background-color": project.data.image.bg,
+                  }
+                : {}),
+            }}
           />
           <div class="p-4">
             <h3 class="text-xl font-bold text-gray-800">
               {project.data.title}
             </h3>
-            <p class="prose mt-2">
+            <p class="prose mt-2 text-gray-500">
               {project.data.description.length < 120
                 ? project.data.description
                 : project.data.description.slice(0, 120) + "..."}
diff --git a/src/islands/svelte/hamburger-button.svelte b/src/islands/svelte/hamburger-button.svelte
index 35c9f543..6a5925b5 100644
--- a/src/islands/svelte/hamburger-button.svelte
+++ b/src/islands/svelte/hamburger-button.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Popover.Root>
-  <Popover.Trigger class="h-16 w-16 hover:bg-gray-100 lg:hidden">
+  <Popover.Trigger class="h-16 w-16 hover:bg-gray-200 lg:hidden">
     <div class="mx-auto my-auto h-6 w-6 text-gray-600">
       <img src="/icons/menu.svg" alt="open menu" />
     </div>
diff --git a/src/pages/articles/[...id].astro b/src/pages/articles/[...id].astro
index b82993d0..3760c8fe 100644
--- a/src/pages/articles/[...id].astro
+++ b/src/pages/articles/[...id].astro
@@ -39,7 +39,7 @@ if (article.data.author && !author)
           height="800"
           quality="80"
           formats={["avif", "webp"]}
-          class="skeleton mx-auto md:max-w-xl md:rounded-2xl"
+          class="skeleton mx-auto rounded-none md:max-w-3xl md:rounded-2xl"
           alt="イメージ画像"
           src={article.data.image}
         />
@@ -56,19 +56,17 @@ if (article.data.author && !author)
           href={`/members/${author.id}`}
           class="flex max-w-sm min-w-75 items-center gap-4 rounded-lg px-4 py-2 hover:bg-gray-200"
         >
-          <div class="h-14 w-14 overflow-clip rounded-full bg-gray-200">
-            <Picture
-              alt="著者"
-              formats={["avif", "webp"]}
-              width="56"
-              height="56"
-              src={author.data.faceImage}
-              class="h-full w-full"
-            />
-          </div>
+          <Picture
+            alt="著者"
+            formats={["avif", "webp"]}
+            width="64"
+            height="64"
+            src={author.data.faceImage}
+            class="overflow-clip rounded-full bg-gray-200"
+          />
           <div class="flex-1">
-            <div class="text-lg">{author.data.nameJa}</div>
-            <div class="text-sm text-gray-800">{author.data.description}</div>
+            <div class="text-lg text-gray-800">{author.data.nameJa}</div>
+            <div class="text-sm text-gray-500">{author.data.description}</div>
           </div>
         </a>
       )
@@ -77,11 +75,11 @@ if (article.data.author && !author)
       {format(article.data.date, "yyyy-MM-dd")}
     </time>
   </div>
-  <main class="mx-auto">
-    <h1 class="mx-auto my-8 max-w-2xl px-8 text-center text-2xl lg:text-3xl">
+  <main class="mx-auto max-w-xl px-4 2xl:max-w-4xl">
+    <h1 class="my-8 w-full text-center text-2xl lg:text-3xl">
       {article.data.title}
     </h1>
-    <article class="prose mx-auto max-w-xl px-8">
+    <article class="prose w-full max-w-none">
       <Content />
     </article>
   </main>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f72ce2fc..08eeec3e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -209,7 +209,7 @@ articles.splice(3);
   <section class="bg-gray-50">
     <div class="container mx-auto px-4 py-12">
       <SectionHeader title="News" subtitle="最新情報" />
-      <ArticleList minify {articles} max-cols="3" class="mt-10" />
+      <ArticleList truncate {articles} max-cols="3" class="mt-10" />
       <ActionButton to="/articles" class="mt-8 ml-auto">
         すべての記事
       </ActionButton>
@@ -276,6 +276,9 @@ articles.splice(3);
     #text-future-software {
       text-decoration: underline white;
       text-underline-offset: 12px;
+      @media (max-width: 40rem) {
+        text-underline-offset: 6px;
+      }
       --bg-left: 0%;
       background: linear-gradient(white 0 0) bottom left/var(--bg-left, 0%) 100%
         no-repeat;
diff --git a/src/pages/members.astro b/src/pages/members.astro
index 4c158ad0..72f90bcb 100644
--- a/src/pages/members.astro
+++ b/src/pages/members.astro
@@ -39,7 +39,7 @@ const members = (await getCollection("members")).sort(
           <li>
             <a
               href={`/members/${member.id}`}
-              class="relative block w-fit drop-shadow-lg transition-colors duration-150 hover:brightness-110 active:top-0.5"
+              class="relative block w-fit drop-shadow-lg transition-colors duration-150"
               data-astro-prefetch="hover"
             >
               <Picture
@@ -51,7 +51,7 @@ const members = (await getCollection("members")).sort(
                 height="400"
                 class="skeleton rounded-none"
               />
-              <div class="absolute bottom-0 w-full min-w-45 bg-gradient-to-b from-transparent to-black px-6 pt-12 pb-6 text-white">
+              <div class="absolute bottom-0 w-full min-w-45 bg-gradient-to-b from-transparent to-black px-6 pt-12 pb-6 text-white transition-all">
                 <h2 class="text-3xl">{member.data.nameJa}</h2>
                 <p class="text-md">{member.data.nameEn}</p>
                 <p class="mt-2 text-xs leading-normal">
diff --git a/src/pages/projects/[project].astro b/src/pages/projects/[project].astro
index 8a062e0b..d0428674 100644
--- a/src/pages/projects/[project].astro
+++ b/src/pages/projects/[project].astro
@@ -24,7 +24,7 @@ const { Content } = await render(project);
   title={project.data.title}
   description={project.data.description}
   focus={Focus.projects}
-  image={project.data.image}
+  image={project.data.image.src}
 >
   <main class="mt-36">
     <div
@@ -33,11 +33,9 @@ const { Content } = await render(project);
       <Picture
         loading="eager"
         formats={["avif", "webp"]}
-        width="1200"
-        height="600"
-        class="skeleton w-full lg:w-150 lg:rounded-2xl"
+        class="skeleton w-full object-cover lg:w-150 lg:rounded-2xl"
         alt="プロジェクト画像"
-        src={project.data.image}
+        src={project.data.image.src}
       />
       <div class="container mx-auto mt-8 px-4 lg:mx-0 lg:flex-1">
         <p class="flex items-center gap-1 text-gray-600">
@@ -77,7 +75,7 @@ const { Content } = await render(project);
                   <a
                     href={link.href}
                     target="_blank"
-                    class="-m-1 mt-6 rounded-xl p-1 hover:bg-gray-100"
+                    class="-m-1 mt-6 rounded-xl p-1 hover:brightness-95"
                     rel="noreferrer"
                     aria-label={`${link.label}を見る`}
                   >
diff --git a/src/schema.ts b/src/schema.ts
index 40d354a1..d275575b 100644
--- a/src/schema.ts
+++ b/src/schema.ts
@@ -38,7 +38,11 @@ export const CreateProjectSchema = ({ image }: { image: ImageFunction }) =>
     title: z.string(),
     order: z.number().optional(),
     date: z.date(),
-    image: image(),
+    image: z.object({
+      src: image(),
+      fit: z.enum(["cover", "contain", "fill"]).optional().default("cover"),
+      bg: z.string().optional().default("whitesmoke"),
+    }),
     description: z.string(),
     tags: z.array(z.string()),
     github: z.string().url().optional(),

From 9cf31116e24bb309d9aae7795db8cbfe348d8027 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Thu, 27 Mar 2025 15:03:58 +0900
Subject: [PATCH 2/8] fix projectlist

---
 src/components/ArticleList.astro | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/ArticleList.astro b/src/components/ArticleList.astro
index 4bb43816..952e0cb3 100644
--- a/src/components/ArticleList.astro
+++ b/src/components/ArticleList.astro
@@ -45,7 +45,7 @@ const articlesWithExcerpts = await Promise.all(
     maxCols >= 2 && "md:grid-cols-2",
     maxCols >= 3 && "lg:grid-cols-3",
     maxCols >= 4 && "xl:grid-cols-4",
-    truncate && "truncate",
+    truncate && "data-truncate",
     props.class,
   ]}
 >
@@ -62,12 +62,10 @@ const articlesWithExcerpts = await Promise.all(
       const additionalProps = isFeatured
         ? {
             cellClassName: "md:col-span-2 md:row-span-2",
-            imageClassName: "max-h-[32rem] md:max-h-[48rem]",
             excerpt: text.slice(0, 300),
           }
         : {
             cellClassName: "",
-            imageClassName: "max-h-[24rem]",
             excerpt: text.slice(0, 80),
           };
       return (
@@ -91,16 +89,16 @@ const articlesWithExcerpts = await Promise.all(
               class:list={[
                 "min-h-0 w-full rounded-xl",
                 !article.data["bg_color"] && "skeleton",
-                additionalProps.imageClassName,
               ]}
-              style={`
-              aspect-ratio: 5 / 3;
-              object-fit: ${article.data.fit};
-              ${
-                article.data.bg_color
-                  ? `background-color: ${article.data.bg_color}`
-                  : ""
-              }`}
+              style={{
+                "aspect-ratio": "5 / 3",
+                "object-fit": article.data.fit,
+                ...(article.data.bg_color
+                  ? {
+                      "background-color": article.data.bg_color,
+                    }
+                  : {}),
+              }}
             />
             <div class="mt-4 p-1">
               <time class="block text-sm text-gray-500">
@@ -124,8 +122,13 @@ const articlesWithExcerpts = await Promise.all(
 </ul>
 
 <style>
-  @container (width > 64rem) {
-    .truncate.variant-compact :nth-child(n + 3) a {
+  @media (width < 48rem) {
+    .data-truncate > li:nth-child(n + 2) {
+      display: none;
+    }
+  }
+  @media (width < 64rem) {
+    .data-truncate > li:nth-child(n + 3) {
       display: none;
     }
   }

From 415b011ee3e81251d460ad252a58df2d690cdd47 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Thu, 27 Mar 2025 15:05:18 +0900
Subject: [PATCH 3/8] fix background image moving

---
 src/pages/index.astro   | 2 +-
 src/pages/members.astro | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 08eeec3e..3eaeaacf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,7 +36,7 @@ articles.splice(3);
     formats={["avif", "webp"]}
     alt=""
     loading="lazy"
-    class="skeleton fixed bottom-0 -z-10 h-[100lvh] max-w-full object-cover object-center select-none"
+    class="skeleton fixed top-0 -z-10 h-[100lvh] max-w-full object-cover object-center select-none"
     src={Hero}
   />
   <div class="absolute top-[40%] left-10 mr-10 max-w-lg bg-gray-50 p-8 pb-24">
diff --git a/src/pages/members.astro b/src/pages/members.astro
index 72f90bcb..822d1ffa 100644
--- a/src/pages/members.astro
+++ b/src/pages/members.astro
@@ -21,7 +21,7 @@ const members = (await getCollection("members")).sort(
     loading="eager"
     alt=""
     src={Header}
-    class="fixed bottom-0 -z-100 h-[100vh] bg-neutral-400 object-cover"
+    class="fixed top-0 -z-100 h-[100lvh] bg-neutral-400 object-cover"
     style="object-position: 75% 20%;"
     aria-hidden
   />

From 468c2eabf64465ba652ae31d27134ca3842aa4c7 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Thu, 27 Mar 2025 15:08:36 +0900
Subject: [PATCH 4/8] blured header

---
 src/components/Header.astro | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 21aa5639..eb93ad89 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -20,7 +20,7 @@ interface Props {
 const { focus } = Astro.props;
 ---
 
-<header class="sticky top-0 z-20 w-full bg-gray-50">
+<header class="sticky top-0 z-20 w-full">
   <!-- <ClientRouter transition:animate={fade({ duration: 30 })} /> -->
   {
     banner.shown && (
@@ -28,7 +28,7 @@ const { focus } = Astro.props;
         id="banner"
         class:list={[
           "flex items-center justify-center gap-4 px-1 py-2",
-          banner.kind === "error" ? "bg-red-300" : "bg-green-300",
+          banner.kind === "error" ? "bg-red-300/70" : "bg-green-300",
         ]}
       >
         <span class="hidden md:inline">{banner.long}</span>
@@ -51,7 +51,7 @@ const { focus } = Astro.props;
       </div>
     )
   }
-  <div class="flex h-16">
+  <div class="flex h-16 bg-gray-50/70 backdrop-blur-lg">
     <a href="/" class="flex items-center px-4" data-astro-prefetch="viewport">
       <Logo class="w-36 sm:ml-8" variant="default" />
     </a>

From eaa9ed78263bd1c8dcc4323ddf9fbc18b04f4f35 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Thu, 27 Mar 2025 15:25:03 +0900
Subject: [PATCH 5/8] fix project list

---
 src/components/ProjectList.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro
index 6c84dd10..e55376d7 100644
--- a/src/components/ProjectList.astro
+++ b/src/components/ProjectList.astro
@@ -60,7 +60,7 @@ const { projects, variant = "full" } = props;
 </ul>
 
 <style>
-  @media (max-width: 64rem) {
+  @media (max-width: 48rem) {
     li.variant-short:nth-child(n + 3) {
       display: none;
     }

From fb60e8d1ab5c61118bb5ecb9abe2cc241da0062e Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Thu, 27 Mar 2025 15:29:26 +0900
Subject: [PATCH 6/8] make navigation popup transparent

---
 src/islands/svelte/hamburger-button.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/islands/svelte/hamburger-button.svelte b/src/islands/svelte/hamburger-button.svelte
index 6a5925b5..271fc5f3 100644
--- a/src/islands/svelte/hamburger-button.svelte
+++ b/src/islands/svelte/hamburger-button.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Popover.Root>
-  <Popover.Trigger class="h-16 w-16 hover:bg-gray-200 lg:hidden">
+  <Popover.Trigger class="h-16 w-16 hover:bg-gray-200/90 lg:hidden">
     <div class="mx-auto my-auto h-6 w-6 text-gray-600">
       <img src="/icons/menu.svg" alt="open menu" />
     </div>
@@ -15,11 +15,11 @@
   <Popover.Content align="end" side="bottom" strategy="fixed">
     <div
       transition:fade|global={{ duration: 70 }}
-      class="w-[100vw] bg-gray-50 transition-opacity duration-300 lg:hidden"
+      class="w-[100vw] bg-gray-50/70 transition-opacity duration-300 lg:hidden"
     >
       <ul>
         {#each links as link}
-          <li class="hover:bg-gray-200">
+          <li class="hover:bg-gray-200/90">
             <a
               href={link.href}
               class="block px-4 py-2"

From 56eff3e3171dc062c355cf95dbfa410fdc12115a Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Thu, 27 Mar 2025 17:14:09 +0900
Subject: [PATCH 7/8] change hamburger button style

---
 src/islands/svelte/hamburger-button.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/islands/svelte/hamburger-button.svelte b/src/islands/svelte/hamburger-button.svelte
index 271fc5f3..4cf857f5 100644
--- a/src/islands/svelte/hamburger-button.svelte
+++ b/src/islands/svelte/hamburger-button.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Popover.Root>
-  <Popover.Trigger class="h-16 w-16 hover:bg-gray-200/90 lg:hidden">
+  <Popover.Trigger class="h-16 w-16 hover:bg-gray-100 lg:hidden">
     <div class="mx-auto my-auto h-6 w-6 text-gray-600">
       <img src="/icons/menu.svg" alt="open menu" />
     </div>
@@ -15,11 +15,11 @@
   <Popover.Content align="end" side="bottom" strategy="fixed">
     <div
       transition:fade|global={{ duration: 70 }}
-      class="w-[100vw] bg-gray-50/70 transition-opacity duration-300 lg:hidden"
+      class="w-[100vw] bg-gray-50/70 backdrop-blur-lg transition-opacity duration-300 lg:hidden"
     >
       <ul>
         {#each links as link}
-          <li class="hover:bg-gray-200/90">
+          <li class="hover:bg-gray-100">
             <a
               href={link.href}
               class="block px-4 py-2"

From 173a9f216a3441d6ad60c344b5863c8f8d5c9b25 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Fri, 28 Mar 2025 14:58:38 +0900
Subject: [PATCH 8/8] fix: popover not blurred in chromium

---
 src/components/Header.astro                |  1 +
 src/islands/svelte/hamburger-button.svelte | 38 ++++++++++++----------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index eb93ad89..90bb2c0a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -77,6 +77,7 @@ const { focus } = Astro.props;
       <HamburgerButton client:visible {links} />
     </div>
   </div>
+  <div id="menu-popover-slot" class="absolute w-full"></div>
 </header>
 
 <style>
diff --git a/src/islands/svelte/hamburger-button.svelte b/src/islands/svelte/hamburger-button.svelte
index 4cf857f5..0a63d1a4 100644
--- a/src/islands/svelte/hamburger-button.svelte
+++ b/src/islands/svelte/hamburger-button.svelte
@@ -13,23 +13,25 @@
   </Popover.Trigger>
 
   <Popover.Content align="end" side="bottom" strategy="fixed">
-    <div
-      transition:fade|global={{ duration: 70 }}
-      class="w-[100vw] bg-gray-50/70 backdrop-blur-lg transition-opacity duration-300 lg:hidden"
-    >
-      <ul>
-        {#each links as link}
-          <li class="hover:bg-gray-100">
-            <a
-              href={link.href}
-              class="block px-4 py-2"
-              data-astro-prefetch="viewport"
-            >
-              {link.title}
-            </a>
-          </li>
-        {/each}
-      </ul>
-    </div>
+    <Popover.Portal to="#menu-popover-slot">
+      <div
+        transition:fade|global={{ duration: 70 }}
+        class="w-full bg-gray-50/70 backdrop-blur-md lg:hidden"
+      >
+        <ul>
+          {#each links as link}
+            <li class="hover:bg-gray-100">
+              <a
+                href={link.href}
+                class="block px-4 py-2"
+                data-astro-prefetch="viewport"
+              >
+                {link.title}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </Popover.Portal>
   </Popover.Content>
 </Popover.Root>