Update series

get6 · Jan 21, 2024 · 64f2f53 · 64f2f53
1 parent 4138a0d
commit 64f2f53
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 14 deletions.
diff --git a/app/series/page.tsx b/app/series/page.tsx
@@ -22,9 +22,9 @@ export default function Series() {
 
   return (
     <PageScreen>
-      <div className="flex w-full max-w-[888px] flex-col gap-4">
+      <div className="flex w-full flex-col gap-4 lg:max-w-[888px]">
         <PageTitle>Series</PageTitle>
-        <div className="flex flex-col place-items-center gap-6">
+        <div className="flex w-full flex-col justify-center gap-6">
           {seriesArray.map((series, index) => (
             <SeriesCard key={index} series={series} />
           ))}

diff --git a/app/ui/series/SeriesCard.tsx b/app/ui/series/SeriesCard.tsx
@@ -31,10 +31,10 @@ export default function SeriesCard({ series }: Props) {
 
   return (
     <div
-      className="flex bg-white hover:cursor-pointer dark:bg-gray-900"
+      className="flex w-full bg-white hover:cursor-pointer dark:bg-gray-900"
       onClick={() => push(url)}
     >
-      <div className="flex h-[240px] w-[720px] border border-black dark:border-white">
+      <div className="flex w-full border border-black dark:border-white lg:h-[240px] ">
         <div className="relative h-full w-[192px] border-r border-black dark:border-white">
           <Image
             className="object-cover object-top"
@@ -45,12 +45,14 @@ export default function SeriesCard({ series }: Props) {
             sizes="(min-width: 1024px) 192px, (max-width: 1024px) 100vw"
           />
         </div>
-        <div className="flex flex-auto flex-col justify-center gap-4 px-6">
+        <div className="flex flex-auto flex-col justify-center gap-4 px-4 py-4 lg:px-6 lg:py-0">
           <div className="flex flex-col gap-2">
             <PostDate date={date} body={body.raw} />
-            <h2 className="text-xl font-semibold dark:text-white">{title}</h2>
+            <h2 className="text-lg font-semibold dark:text-white lg:text-xl">
+              {title}
+            </h2>
             <Title>{series[0].series_title}</Title>
-            <div className="self-stretch truncate text-base font-normal dark:text-white">
+            <div className="self-stretch truncate text-sm font-normal dark:text-white lg:text-base">
               {body.raw}
             </div>
             <div className="inline-flex items-start justify-start gap-2 py-2">

diff --git a/app/ui/series/SeriesStack.tsx b/app/ui/series/SeriesStack.tsx
@@ -1,11 +1,5 @@
 export default function SeriesStack() {
   return (
-    <div className="h-full w-2 border border-l-0 border-black" />
-
-    //    <div className="flex h-full w-10 items-end justify-center border border-black pb-1 transition duration-300 ease-in-out hover:scale-105">
-    //    <span className="flex h-6 w-6 justify-center rounded-full border border-black">
-    //      1
-    //    </span>
-    //  </div>
+    <div className="h-full w-2 border border-l-0 border-black dark:border-white" />
   )
 }