lock project image aspect ratio

aster-void · aster-void · commit 6f6c1b4f33e0 · 2025-03-27T14:46:27.000+09:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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(),
