feat(ui): smooth image transition

aster-void · aster-void · commit 5dd6c56d3135 · 2025-03-11T18:13:41.000+09:00
diff --git a/src/components/ActionButton.astro b/src/components/ActionButton.astro
@@ -15,22 +15,27 @@ const { to, variant = "dark" } = props;
   href={to}
   {...!to.startsWith("/") ? { target: "_blank", rel: "noreferrer" } : {}}
   class:list={[
-    "not-prose relative flex w-max items-center gap-4 rounded-full bg-white px-6 py-3 font-bold text-black hover:brightness-95 active:top-0.25",
+    "not-prose relative flex w-max items-center gap-4 rounded-full bg-gray-50 px-6 py-3 font-bold text-black hover:brightness-95 active:top-0.25",
     variant === "dark" && "border border-black",
     !props["no-motion"] && "motion",
     Astro.props.class,
   ]}
 >
   <slot />
-  <Icon id="icon" name="feather:arrow-right" class="relative h-8 w-8" />
+  <Icon
+    id="icon"
+    name="feather:arrow-right"
+    class="relative h-8 w-8 motion-reduce:left-1"
+  />
 </a>
 <style>
-  /* TODO: @media not(prefers-reduced-motion) */
-  #icon {
-    left: -2px;
-    transition: left 0.15s ease-out;
-  }
-  a:hover.motion #icon {
-    left: 6px;
+  @media not (prefers-reduced-motion) {
+    #icon {
+      left: -2px;
+      transition: left 0.15s ease-out;
+    }
+    a:hover.motion #icon {
+      left: 6px;
+    }
   }
 </style>
diff --git a/src/components/ArticleList.astro b/src/components/ArticleList.astro
@@ -46,31 +46,32 @@ const articlesWithExcerpts = await Promise.all(
       const additionalProps = isFeatured
         ? {
             cellClassName: "md:col-span-2 md:row-span-2",
-            imageClassName: "max-h-[350px] md:max-h-[450px]",
+            imageClassName: "max-h-[32rem] md:max-h-[48rem]",
             excerpt: text.slice(0, 300),
           }
         : {
             cellClassName: "",
-            imageClassName: "max-h-[200px]",
+            imageClassName: "max-h-[24rem]",
             excerpt: text.slice(0, 80),
           };
       return (
         <li class="contents">
           <a
             href={`/articles/${article.id}`}
             class:list={[
-              "relative rounded-xl p-1 shadow-md hover:brightness-110 active:top-0.5",
+              "relative rounded-xl bg-gray-50 p-1 shadow-md hover:brightness-110 active:top-0.5",
               additionalProps.cellClassName,
             ]}
           >
             <Image
+              transition:name={`article:cover:${article.id}`}
               loading={i < 5 ? "eager" : "lazy"}
               alt="カバー画像"
               height={48 * 4 * 4}
               width={48 * 4 * 4}
               src={article.data.image}
               class:list={[
-                "animate-move w-full rounded-xl object-contain object-top",
+                "animate-move w-full rounded-xl object-center",
                 additionalProps.imageClassName,
               ]}
             />
diff --git a/src/components/Footer/FooterSection.astro b/src/components/Footer/FooterSection.astro
@@ -14,7 +14,7 @@ const { title, links } = Astro.props;
         <li>
           <a
             href={link.to}
-            class="link relative active:top-0.25"
+            class="link relative active:top-0.25 motion-reduce:hover:underline"
             target={link.to.startsWith("/") ? "" : "_blank"}
             rel={link.to.startsWith("/") ? "" : "noreferrer"}
           >
@@ -26,16 +26,18 @@ const { title, links } = Astro.props;
   </ul>
 </div>
 <style>
-  .link {
-    background: linear-gradient(currentColor 0 0) bottom left/
-      var(--underline-width, 0%) 0.1em no-repeat;
-    text-decoration: none;
-    transition: background-size 0.1s linear;
-  }
-  .link:hover {
-    --underline-width: 100%;
-    @starting-style {
-      --underline-width: 0%;
+  @media not (prefers-reduced-motion) {
+    .link {
+      background: linear-gradient(currentColor 0 0) bottom left/
+        var(--underline-width, 0%) 0.1em no-repeat;
+      text-decoration: none;
+      transition: background-size 0.1s linear;
+    }
+    .link:hover {
+      --underline-width: 100%;
+      @starting-style {
+        --underline-width: 0%;
+      }
     }
   }
 </style>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -21,7 +21,7 @@ const { focus } = Astro.props;
 ---
 
 <ClientRouter />
-<header class="fixed top-0 z-20 w-full bg-white">
+<header class="fixed top-0 z-20 w-full bg-gray-50">
   {
     banner.shown && (
       <div
@@ -118,10 +118,9 @@ const { focus } = Astro.props;
   }
 
   .navigation-bar {
-    background: linear-gradient(currentColor 0 0) bottom left/
+    background: linear-gradient(black 0 0) bottom left/
       var(--underline-width, 0%) 0.1em no-repeat;
     text-decoration: none;
-    transition: background-size 0.5s;
   }
   .navigation-bar.current {
     background: linear-gradient(lawngreen 0 0) bottom left/
@@ -133,4 +132,9 @@ const { focus } = Astro.props;
       --underline-width: 0%;
     }
   }
+  @media not (prefers-reduced-motion) {
+    .navigation-bar {
+      transition: background-size 0.5s;
+    }
+  }
 </style>
diff --git a/src/components/JoinUsCTA.astro b/src/components/JoinUsCTA.astro
@@ -6,7 +6,7 @@ interface Props {
 const props = Astro.props;
 ---
 
-<section class:list={["bg-gray-100 py-12", props.class]}>
+<section class:list={["bg-gray-200 py-12", props.class]}>
   <div class="container mx-auto px-4 lg:max-w-screen-lg">
     <h2 class="text-2xl leading-normal"><slot /></h2>
     <p class="mt-4 text-gray-800">
diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro
@@ -32,19 +32,22 @@ if (variant === "compact") {
         ]}
       >
         <a
-          class="relative top-0 overflow-clip rounded-xl border border-gray-200 bg-white hover:brightness-95 active:top-0.25"
+          class="relative top-0 overflow-clip rounded-xl border border-gray-200 bg-gray-50 hover:brightness-95 active:top-0.25"
           href={`/projects/${project.data.slug}`}
         >
           <Image
+            transition:name={`project:image:${project.id}`}
             loading={i < 6 ? "eager" : "lazy"}
             width="800"
             height="600"
             alt="プロジェクトのイメージ画像"
             src={project.data.image}
-            class="h-[16rem] w-full object-cover"
+            class="max-h-[24rem] w-full object-fill"
           />
           <div class="p-4">
-            <h3 class="text-xl font-bold">{project.data.title}</h3>
+            <h3 class="text-xl font-bold text-gray-800">
+              {project.data.title}
+            </h3>
             <p class="prose mt-2">
               {project.data.description.length < 120
                 ? project.data.description
diff --git a/src/components/per-page/SectionHeader.astro b/src/components/per-page/SectionHeader.astro
@@ -7,5 +7,5 @@ interface Props {
 const { title, subtitle } = Astro.props;
 ---
 
-<h2 class="text-center text-4xl">{title}</h2>
-{subtitle && <h3 class="mt-2 text-center text-sm text-gray-500">{subtitle}</h3>}
+<h2 class="text-center text-4xl text-black">{title}</h2>
+{subtitle && <h3 class="mt-2 text-center text-sm text-gray-600">{subtitle}</h3>}
diff --git a/src/layouts/GlobalLayout.astro b/src/layouts/GlobalLayout.astro
@@ -14,7 +14,7 @@ interface Props {
 const { title, description, focus } = Astro.props;
 ---
 
-<html lang="ja">
+<html lang="ja" class="bg-gray-50 text-gray-800">
   <Meta {title} {description} />
   <body class="min-h-full w-full">
     <Header {focus} />
diff --git a/src/pages/articles/[article].astro b/src/pages/articles/[article].astro
@@ -34,10 +34,11 @@ if (article.data.author && !author)
 >
   {
     article.data.image && (
-      <div class="mt-6 text-center lg:mt-12 lg:px-8">
+      <div class="mt-36 text-center lg:mt-48 lg:px-8">
         <Image
+          transition:name={`article:cover:${article.id}`}
           loading="eager"
-          class="mr-auto ml-auto max-h-200 w-full max-w-screen-lg object-contain lg:isolate lg:overflow-clip lg:rounded-2xl"
+          class="mr-auto ml-auto max-h-400 w-full max-w-screen-lg lg:rounded-2xl"
           alt="イメージ画像"
           src={article.data.image}
         />
@@ -77,5 +78,3 @@ if (article.data.author && !author)
     ut.code(); に参加する準備はできましたか？
   </JoinUsCTA>
 </GlobalLayout>
-
-); }
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -23,16 +23,16 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
     height="1080"
     src={Hero}
   />
-  <div class="absolute top-[40%] left-10 max-w-lg bg-white/90 p-8 pb-24">
+  <div class="absolute top-[40%] left-10 max-w-lg bg-gray-50 p-8 pb-24">
     <h1 class="text-2xl md:text-3xl">
       <span class="inline-block">東京大学の</span><span class="inline-block"
         >ソフトウェア開発</span
       ><span class="inline-block">コミュニティ</span>
     </h1>
     <div class="prose mt-3">
       <p>
-        ut.code();
-        は、東京大学のソフトウェアエンジニアリングコミュニティ・プログラミングサークルです。
+        ut.code(); は、 2019
+        年に発足した東京大学のソフトウェアエンジニアリングコミュニティ・プログラミングサークルです。
         プログラミングの学習・教育から、実社会で役立つソフトウェア製作まで、幅広い活動を行っています。
       </p>
     </div>
@@ -42,7 +42,7 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
   >
     <div class="container mx-auto px-4 py-12">
       <SectionHeader title="Activities" subtitle="活動内容" />
-      <div class="mt-8 rounded-xl bg-white/100 p-8 shadow-2xl md:p-12">
+      <div class="mt-8 rounded-xl bg-gray-50 p-8 shadow-2xl md:p-12">
         <ul class="flex flex-col gap-12 lg:flex-row">
           {
             [
@@ -90,7 +90,7 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
       </div>
     </div>
   </section>
-  <section class="bg-white">
+  <section class="bg-gray-50">
     <div class="px-12 py-12 lg:px-36">
       <SectionHeader title="Projects" subtitle="実施中のプロジェクト" />
       <ProjectList variant="compact" class="mt-10" />
@@ -101,14 +101,14 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
   </section>
   <section class="bg-black py-80 text-white">
     <div
-      class="mx-auto block items-center gap-12 px-8 xl:flex xl:flex-row-reverse 2xl:mx-24"
+      class="mx-auto block items-center gap-12 px-8 xl:flex xl:flex-row-reverse 2xl:mx-16 2xl:gap-20"
     >
       <Image
         alt=""
         src={LabCafe}
         width="1000"
         height="800"
-        class="mr-6 ml-auto hidden h-full w-full max-w-2xl flex-1 overflow-clip rounded-3xl object-cover md:block xl:max-w-3xl"
+        class="mr-6 ml-auto hidden h-full w-full max-w-2xl flex-1 overflow-clip rounded-3xl object-cover md:block xl:mb-60 xl:max-w-3xl"
       />
       <article class="mt-12 self-center md:ml-12">
         <h1 class="max-w-2xl text-4xl leading-snug sm:text-5xl md:text-6xl">
@@ -121,7 +121,7 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
             >未来の<wbr />ソフトウェア</span
           >を<br /><span>デザインしよう</span>
         </h1>
-        <p class="text-md mt-3 max-w-xl leading-loose text-gray-400 sm:text-xl">
+        <p class="text-md mt-3 max-w-xl leading-loose text-gray-300 sm:text-xl">
           <span class="inline-block">
             ut.code(); で一緒にワクワクするソフトウェアを作りませんか？
             初心者から実務経験者、学年を問わずどなたでも大歓迎です。
@@ -188,7 +188,7 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
       </ul>
     </div>
   </section>
-  <section class="bg-white">
+  <section class="bg-gray-50">
     <div class="container mx-auto px-4 py-12">
       <SectionHeader title="News" subtitle="最新情報" />
       <ArticleList variant="compact" class="mt-10" />
@@ -197,7 +197,7 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
       </ActionButton>
     </div>
   </section>
-  <section class="w-full bg-white">
+  <section class="w-full bg-gray-50">
     <iframe
       title="ut.code(); 紹介動画"
       class="h-[300px] w-full sm:h-[400px] md:h-[500px] lg:h-[100vh]"
@@ -206,7 +206,7 @@ import LogoGMOMedia from "../images/logo-gmo-media.png";
       allow="picture-in-picture; web-share"
       allow-fullscreen></iframe>
   </section>
-  <section class="bg-white">
+  <section class="bg-gray-50">
     <div class="container mx-auto px-8 py-24">
       <SectionHeader title="協賛企業様" />
       <div class="mt-8 flex flex-wrap items-center justify-center gap-4">
diff --git a/src/pages/members.astro b/src/pages/members.astro
@@ -29,7 +29,7 @@ const members = (await getCollection("members")).sort(
   />
   <div class="mt-160">
     <h1
-      class="bg-opacity-80 relative mb-6 h-full w-max bg-black px-4 py-2 text-[6rem] text-white sm:text-[8rem] lg:pl-40"
+      class="relative mb-6 h-full w-max bg-gray-950 px-4 py-2 text-[6rem] text-white sm:text-[8rem] lg:pl-40"
     >
       メンバー
     </h1>
@@ -44,6 +44,8 @@ const members = (await getCollection("members")).sort(
               class="relative block drop-shadow-lg transition-colors duration-150 hover:brightness-110 active:top-0.5"
             >
               <Image
+                transition:animate="fade"
+                transition:name={`member:image:${member.id}`}
                 alt={`${member.data?.nameJa} の写真`}
                 src={member.data.upperBodyImage}
                 width="400"
diff --git a/src/pages/members/[member].astro b/src/pages/members/[member].astro
@@ -98,6 +98,7 @@ const { Content } = await render(member);
         </div>
         <div class="hidden h-full flex-none sm:block">
           <Image
+            transition:name={`member:image:${member.id}`}
             class="h-full w-100 object-contain lg:w-150"
             alt="メンバー写真"
             width="1000"
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
@@ -9,8 +9,10 @@ import { Focus } from "../schema";
   description="ut.code(); で開発を行っているプロジェクト一覧です。"
   focus={Focus.projects}
 >
-  <main class="container mx-auto px-4 py-24">
-    <h1 class="text-center text-4xl">プロジェクト</h1>
-    <ProjectList class="mt-16" variant="full" />
+  <main class="w-full px-4 py-24">
+    <article class="container mx-auto">
+      <h1 class="text-center text-4xl">プロジェクト</h1>
+      <ProjectList class="mt-16" variant="full" />
+    </article>
   </main>
 </GlobalLayout>
diff --git a/src/pages/projects/[project].astro b/src/pages/projects/[project].astro
@@ -27,12 +27,13 @@ const { Content } = await render(project);
   description={project.data.description}
   focus={Focus.projects}
 >
-  <main>
+  <main class="mt-36">
     <div
       class="lg:mx-auto lg:flex lg:max-w-screen-lg lg:flex-row-reverse lg:items-center lg:gap-4 lg:px-4 lg:py-12"
     >
       <Image
-        class="h-64 w-full md:h-96 lg:h-[400px] lg:w-[600px] lg:rounded-2xl"
+        transition:name={`project:image:${project.id}`}
+        class="w-full lg:rounded-2xl"
         alt="プロジェクト画像"
         src={project.data.image}
       />

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ const { focus } = Astro.props;`
`21`	`21`	`---`
`22`	`22`
`23`	`23`	`<ClientRouter />`
`24`		`-<header class="fixed top-0 z-20 w-full bg-white">`
	`24`	`+<header class="fixed top-0 z-20 w-full bg-gray-50">`
`25`	`25`	`{`
`26`	`26`	`banner.shown && (`
`27`	`27`	`<div`
`@@ -118,10 +118,9 @@ const { focus } = Astro.props;`
`118`	`118`	`}`
`119`	`119`
`120`	`120`	`.navigation-bar {`
`121`		`- background: linear-gradient(currentColor 0 0) bottom left/`
	`121`	`+ background: linear-gradient(black 0 0) bottom left/`
`122`	`122`	`var(--underline-width, 0%) 0.1em no-repeat;`
`123`	`123`	`text-decoration: none;`
`124`		`- transition: background-size 0.5s;`
`125`	`124`	`}`
`126`	`125`	`.navigation-bar.current {`
`127`	`126`	`background: linear-gradient(lawngreen 0 0) bottom left/`
`@@ -133,4 +132,9 @@ const { focus } = Astro.props;`
`133`	`132`	`--underline-width: 0%;`
`134`	`133`	`}`
`135`	`134`	`}`
	`135`	`+ @media not (prefers-reduced-motion) {`
	`136`	`+ .navigation-bar {`
	`137`	`+ transition: background-size 0.5s;`
	`138`	`+ }`
	`139`	`+ }`
`136`	`140`	`</style>`