update ui

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;
 }
 ```
 

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
 ---

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

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]

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]

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]

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]

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]

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]

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]

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]

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]

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 && "data-truncate",
     props.class,
   ]}
 >
@@ -62,20 +62,18 @@ 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 (
         <li class="contents">
           <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,
             ]}
           >
@@ -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">
@@ -109,7 +107,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",
                 ]}
               >
@@ -124,8 +122,13 @@ const articlesWithExcerpts = await Promise.all(
 </ul>
 
 <style>
-  @container (width > 64rem) {
-    .minify.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;
     }
   }

src/components/Header.astro

@@ -20,15 +20,15 @@ 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 && (
       <div
         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>

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) + "..."}
@@ -47,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;
     }

src/islands/svelte/hamburger-button.svelte

@@ -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 backdrop-blur-lg transition-opacity duration-300 lg:hidden"
     >
       <ul>
         {#each links as link}
-          <li class="hover:bg-gray-200">
+          <li class="hover:bg-gray-100">
             <a
               href={link.href}
               class="block px-4 py-2"

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>