fix projectlist

Author: aster-void

src/components/ArticleList.astro

@@ -45,7 +45,7 @@ const articlesWithExcerpts = await Promise.all(
     maxCols >= 2 && "md:grid-cols-2",
     maxCols >= 3 && "lg:grid-cols-3",
     maxCols >= 4 && "xl:grid-cols-4",
-    truncate && "truncate",
+    truncate && "data-truncate",
     props.class,
   ]}
 >
@@ -62,12 +62,10 @@ 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 (
@@ -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">
@@ -124,8 +122,13 @@ const articlesWithExcerpts = await Promise.all(
 </ul>
 
 <style>
-  @container (width > 64rem) {
-    .truncate.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;
     }
   }