restyle PostListItem

docs/todo3.md

@@ -219,4 +219,5 @@ move vertical padding to correct layout
 refactor Post layout
 remove config folder for code theme
 rename header to navigation
+open components to pass class: className
 ```

src/components/PostListItem.astro

@@ -4,7 +4,6 @@ import { Image } from 'astro:assets';
 import PostMeta from '@/components/PostMeta.astro';
 import TagList from '@/components/TagList.astro';
 import { ROUTES } from '@/constants/routes';
-import { cn } from '@/utils/styles';
 
 import type { Post } from '@/types/post';
 
@@ -26,39 +25,35 @@ const {
   description,
 } = data;
 
-// prepare all data for render
-
 const postMetaProps = { readingTime, publishDate };
 ---
 
 <article
-  class="flex flex-col md:flex-row gap-4 py-4 lg:py-6 lg:gap-6 not-last:border-b border-base-300"
+  class="max-w-lg md:max-w-3xl flex flex-col md:flex-row gap-4 py-4 lg:py-6 lg:gap-6 not-last:border-b border-base-300"
 >
   {/* left column */}
-
-  {/* image */}
   {
     heroImage && (
-      <div class="md:basis-1/3">
+      <div class="md:basis-1/3 md:shrink-0">
         <Image
           src={heroImage}
           alt={heroAlt}
-          widths={[320, 540, 720]}
-          sizes="(max-width: 475px) 320px, (max-width: 720px) 540px, 720px"
+          widths={[320, 540]}
+          sizes="(max-width: 475px) 320px, 540px"
           itemprop="image"
-          class="w-full max-h-48 min-h-40 md:max-h-none md:h-full md:w-auto object-cover rounded-box"
+          class="w-full h-40 md:h-full object-cover rounded-box"
           transition:name={`hero-${heroImage.src}`}
         />
       </div>
     )
   }
 
   {/* right column */}
-  <div class="flex flex-col md:basis-2/3">
-    <PostMeta {...postMetaProps} class="text-sm text-captions" />
+  <div class="flex flex-col md:basis-2/3 md:shrink">
+    <PostMeta {...postMetaProps} class="text-sm text-captions leading-none mb-1" />
 
     {/* title */}
-    <h2 class="text-2xl font-bold break-words line-clamp-2 mt-0 mb-2">
+    <h2 class="text-2xl font-bold break-words md:line-clamp-2 mt-0 mb-2">
       <a href={`${ROUTES.BLOG}${slug}`} class="link-heading">
         {title}
         {draft && <sup class="text-sm text-red-400">(draft)</sup>}
@@ -67,13 +62,10 @@ const postMetaProps = { readingTime, publishDate };
 
     {
       description && (
-        <p class={cn('text-base mb-3', title?.length <= 48 ? 'line-clamp-2' : 'line-clamp-1')}>
-          {description}
-        </p>
+        <p class="text-base mb-1 line-clamp-2 md:line-clamp-1 md:leading-tight">{description}</p>
       )
     }
 
-    {/* tags */}
     <TagList tags={tags} class="mt-auto" />
   </div>
 </article>

src/components/ProjectList.astro

@@ -10,6 +10,6 @@ export interface Props {
 const { projects } = Astro.props;
 ---
 
-<div class="grid auto-cols-fr grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 md:grid-cols-3">
+<div class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 md:grid-cols-3">
   {projects.map((project) => <ProjectListItem {project} />)}
 </div>

src/components/Tag.astro

@@ -8,7 +8,7 @@ const { class: className, ...props } = Astro.props;
 
 <a
   class={cn(
-    'text-base',
+    'text-sm',
     'inline-block px-2 py-0.5 lowercase no-underline rounded-tag',
     'bg-base-200 hover:bg-base-300',
     className

src/pages/blog/[...page].astro

@@ -28,7 +28,7 @@ const paginationProps = pickPaginationPropsFromPage(page);
 const metadata: Metadata = {
   title: 'Blog',
   description:
-    'Mostly just whatever seems important in the moment about JavaScript, frontend development, and life surrounding me.',
+    'Est aliquip reprehenderit eu esse duis laboris cillum adipisicing reprehenderitvoluptate ex aute voluptate.',
 };
 
 const layoutProps = { metadata, paginationProps };