design is perfect now

Author: aster-void

bun.lock

@@ -9,6 +9,7 @@
         "@tailwindcss/typography": "^0.5.16",
         "astro": "^5.4.2",
         "astro-icon": "^1.1.5",
+        "daisyui": "^5.0.4",
         "date-fns": "^4.1.0",
         "markdown-to-txt": "^2.0.1",
         "sharp": "^0.33.5",
@@ -464,6 +465,8 @@
 
     "csso": ["[email protected]", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="],
 
+    "daisyui": ["[email protected]", "", {}, "sha512-9X3oX/k9hPBCslAECk8kYfvwgrz6Grs0lN7VI0/ZTM/hUfq1uFREHxCcBCCq0QROpN183N19B1hTNRWGipO2Eg=="],
+
     "date-fns": ["[email protected]", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
 
     "debug": ["[email protected]", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],

package.json

@@ -26,6 +26,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "astro": "^5.4.2",
     "astro-icon": "^1.1.5",
+    "daisyui": "^5.0.4",
     "date-fns": "^4.1.0",
     "markdown-to-txt": "^2.0.1",
     "sharp": "^0.33.5"

src/components/ArticleList.astro

@@ -59,7 +59,7 @@ const articlesWithExcerpts = await Promise.all(
           <a
             href={`/articles/${article.id}`}
             class:list={[
-              "relative rounded-xl bg-gray-50 p-1 shadow-md hover:brightness-110 active:top-0.5",
+              "relative rounded-xl bg-gray-50 p-1 shadow-md grayscale-50 duration-300 hover:grayscale-0 active:top-0.5",
               additionalProps.cellClassName,
             ]}
           >
@@ -68,11 +68,9 @@ const articlesWithExcerpts = await Promise.all(
               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={[
-                "w-full rounded-xl object-center",
+                "min-h-0 w-full rounded-xl object-center",
                 additionalProps.imageClassName,
               ]}
             />
@@ -81,7 +79,14 @@ const articlesWithExcerpts = await Promise.all(
                 {format(article.data.date, "yyyy/MM/dd HH:mm")}
               </time>
               <h3 class="text-lg font-bold">{article.data.title}</h3>
-              <p class="prose mt-2 max-w-none">{additionalProps.excerpt}...</p>
+              <p
+                class:list={[
+                  "prose mt-2 line-clamp-3 max-w-none",
+                  isFeatured && "md:line-clamp-6",
+                ]}
+              >
+                {additionalProps.excerpt}...
+              </p>
             </div>
           </a>
         </li>

src/components/Header.astro

@@ -19,19 +19,22 @@ interface Props {
 const { focus } = Astro.props;
 ---
 
-<header class="fixed top-0 z-20 w-full bg-gray-50">
+<header class="sticky top-0 z-20 w-full bg-gray-50">
   <!-- <ClientRouter transition:animate={fade({ duration: 30 })} /> -->
   {
     banner.shown && (
       <div
         id="banner"
         class:list={[
-          "flex h-10 items-center justify-center gap-4 px-1 md:h-8",
+          "flex items-center justify-center gap-4 px-1 py-2",
           banner.kind === "error" ? "bg-red-300" : "bg-green-300",
         ]}
       >
         <span class="hidden md:inline">{banner.long}</span>
-        <span aria-hidden class="inline md:hidden">
+        <span
+          aria-hidden
+          class="sm:text-md inline text-center text-sm md:hidden"
+        >
           {banner.short}
         </span>
         <a
@@ -49,10 +52,10 @@ const { focus } = Astro.props;
   }
   <div class="flex h-16">
     <a href="/" class="flex items-center px-4" data-astro-prefetch="viewport">
-      <Logo class="ml-8 w-36" variant="default" />
+      <Logo class="w-36 sm:ml-8" variant="default" />
     </a>
-    <div aria-hidden="true" class="flex-grow"></div>
-    <ul class="hidden md:flex">
+    <div aria-hidden class="flex-1"></div>
+    <ul class="hidden lg:flex">
       {
         links.map((link) => (
           <li>
@@ -71,7 +74,7 @@ const { focus } = Astro.props;
     </ul>
     <button
       type="button"
-      class="flex h-full w-16 items-center justify-center hover:bg-gray-100 md:hidden"
+      class="flex h-full w-16 items-center justify-center hover:bg-gray-100 lg:hidden"
       popovertarget="navigation-panel"
       popovertargetaction="toggle"
     >
@@ -81,9 +84,9 @@ const { focus } = Astro.props;
   <div
     id="navigation-panel"
     popover
-    class="top-0 w-full transition-opacity duration-300 md:hidden"
+    class="absolute inset-auto top-0 w-full transition-opacity duration-300 lg:hidden"
   >
-    <ul class="">
+    <ul>
       {
         links.map((link) => (
           <li class="hover:brightness-75">
@@ -107,6 +110,7 @@ const { focus } = Astro.props;
     position: fixed;
   }
   /* https://stackoverflow.com/questions/77042256/css-transition-animation-not-working-for-popover-attribute */
+  /* https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#animating_popovers */
   [popover] {
     opacity: 0;
     &:popover-open {
@@ -115,9 +119,7 @@ const { focus } = Astro.props;
         opacity: 0;
       }
     }
-    transition:
-      opacity 0.3s,
-      display 0.3s;
+    transition: opacity 0.3s;
     transition-behavior: allow-discrete;
   }
 

src/components/LazyImage.astro

@@ -1,52 +1,22 @@
 ---
-import { getImage, Picture } from "astro:assets";
+import { Picture } from "astro:assets";
 interface Props {
-  size: "fullscreen" | "heading" | "small";
+  size?: "fullscreen" | "heading" | "small";
   src: ImageMetadata;
   alt: string;
-  width: number | `${number}`;
-  height: number | `${number}`;
+  width?: number | `${number}`;
+  height?: number | `${number}`;
   loading?: "eager" | "lazy";
   class?: string;
   "class:list"?: string[];
   style?: string;
+  layout?: "responsive" | "fixed";
 }
 
 const props = Astro.props;
-
-const size = { width: 5, height: 5 };
-// props.size === "fullscreen"
-//   ? {
-//       width: 192,
-//       height: 108,
-//     }
-//   : props.size === "heading"
-//     ? {
-//         width: 50,
-//         height: 50,
-//       }
-//     : props.size === "small"
-//       ? {
-//           width: 20,
-//           height: 20,
-//         }
-//       : (props.size satisfies never);
-
-const small = await getImage({
-  src: props.src,
-  format: "webp",
-  ...size,
-});
-console.log(small.src);
 ---
 
-<div
-  class="object-cover object-center"
-  class={props.class}
-  class:list={props["class:list"] ?? []}
-  style={`background-size: cover; background-image: url(${small.src});` +
-    props.style}
->
+<div class="skeleton">
   <Picture
     loading={props.loading || "lazy"}
     {...props}

src/components/ProjectList.astro

@@ -28,7 +28,7 @@ if (variant === "compact") {
       <li
         class:list={[
           "contents",
-          variant === "compact" ? "variant-short" : "variant-index",
+          variant === "compact" ? "variant-short" : "variant-full",
         ]}
       >
         <a
@@ -39,11 +39,9 @@ if (variant === "compact") {
             size="small"
             transition:name={`project:image:${project.id}`}
             loading={i < 6 ? "eager" : "lazy"}
-            width="800"
-            height="600"
             alt="プロジェクトのイメージ画像"
             src={project.data.image}
-            class="max-h-[24rem] w-full object-fill"
+            class="max-h-[24rem] w-full object-contain"
           />
           <div class="p-4">
             <h3 class="text-xl font-bold text-gray-800">

src/content/banner.ts

@@ -10,7 +10,7 @@ const banner: Banner = {
   shown: true,
   kind: "error",
   long: "開発中の Website V3 を見ています",
-  short: "ハッカソンを開催します",
+  short: "開発中の Website です",
   link: "https://utcode.net",
   linkText: "リリース版に戻る",
 };

src/global.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
+@plugin "daisyui";
 
 /* do we need this? */
 :root {

src/layouts/GlobalLayout.astro

@@ -13,7 +13,7 @@ interface Props {
 const { title, description, focus } = Astro.props;
 ---
 
-<html lang="ja" class="bg-gray-50 text-gray-800">
+<html lang="ja" class="bg-gray-50 text-gray-800" data-theme="light">
   <Meta {title} {description} />
   <body class="min-h-full w-full">
     <Header {focus} />

src/pages/articles/[article].astro

@@ -31,51 +31,56 @@ if (article.data.author && !author)
 >
   {
     article.data.image && (
-      <div class="mt-36 text-center lg:mt-48 lg:px-8">
+      <div class="text-center lg:px-8">
         <LazyImage
           size="heading"
           transition:name={`article:cover:${article.id}`}
-          width="1200"
-          height="600"
           loading="eager"
-          class="mr-auto ml-auto max-h-400 w-full max-w-screen-lg lg:rounded-2xl"
+          class="mx-auto max-h-400 max-w-md lg:rounded-2xl"
           alt="イメージ画像"
           src={article.data.image}
         />
       </div>
     )
   }
-  <time class="mt-12 block text-center text-gray-500 lg:mt-24">
-    {format(article.data.date, "yyyy-MM-dd HH:mm")}
-  </time>
-  {
-    author && (
-      <a
-        href={`/members/${author.id}`}
-        class="mx-auto mt-4 flex max-w-sm items-center gap-4 rounded-lg px-4 py-2 hover:bg-gray-100 lg:mt-8"
-      >
-        <div class="h-14 w-14 overflow-clip rounded-full bg-gray-200">
-          <LazyImage
-            size="small"
-            alt="著者の写真"
-            width="56"
-            height="56"
-            src={author.data.faceImage}
-            class="h-full w-full"
-          />
-        </div>
-        <div class="flex-1">
-          <div class="text-lg">{author.data.nameJa}</div>
-          <div class="text-sm text-gray-800">{author.data.description}</div>
-        </div>
-      </a>
-    )
-  }
-  <main class="prose mx-auto mt-6 mb-80 lg:mt-12">
-    <h1 class="not-prose text-4xl">
+  <div
+    id="meta"
+    class="mx-auto mt-4 flex max-w-xl flex-wrap justify-around px-4 align-middle sm:gap-8 lg:mt-24"
+  >
+    {
+      author && (
+        <a
+          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-100"
+        >
+          <div class="h-14 w-14 overflow-clip rounded-full bg-gray-200">
+            <LazyImage
+              size="small"
+              alt="著者"
+              width="56"
+              height="56"
+              src={author.data.faceImage}
+              class="h-full w-full"
+            />
+          </div>
+          <div class="flex-1">
+            <div class="text-lg">{author.data.nameJa}</div>
+            <div class="text-sm text-gray-800">{author.data.description}</div>
+          </div>
+        </a>
+      )
+    }
+    <time class="my-auto mt-4 text-gray-500">
+      {format(article.data.date, "yyyy-MM-dd")}
+    </time>
+  </div>
+  <main class="mx-auto lg:mt-12">
+    <h1 class="mx-auto my-8 max-w-2xl px-8 text-center text-2xl lg:text-3xl">
       {article.data.title}
     </h1>
-    <Content />
+    <article class="prose mx-auto max-w-xl px-8">
+      <Content />
+    </article>
   </main>
   <JoinUsCTA class="mt-24">
     ut.code(); に参加する準備はできましたか？