Changelog page design

src/components/Changelog/ChangelogItem.astro

@@ -15,23 +15,23 @@ const formattedDate = DateTime.fromISO(frontmatter.date).toFormat(
 );
 ---
 
-<div class='relative'>
+<div class='relative mb-6'>
   <span
     class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
   ></span>
 
-  <div class='mb-3 flex items-center gap-2'>
+  <div class='mb-3 flex flex-col sm:flex-row items-start sm:items-center gap-0.5 sm:gap-2'>
     <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
       {formattedDate}
     </span>
-    <span class='truncate text-base font-medium'>
+    <span class='truncate text-base font-medium text-balance'>
       {changelog.frontmatter.title}
     </span>
   </div>
 
   <div class='rounded-xl border bg-white p-6'>
     {frontmatter.images && (
-      <div class='mb-5 -mx-6'>
+      <div class='mb-5 hidden sm:block -mx-6'>
         <ChangelogImages images={frontmatter.images} client:load />
       </div>
     )}

src/components/ChangelogImages.tsx

@@ -65,7 +65,7 @@ const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
             />
             <span className="absolute group-hover:opacity-0 inset-0 bg-gradient-to-b from-transparent to-black/40" />
 
-            <div className="absolute font-medium inset-x-0 top-full group-hover:inset-y-0 flex items-center justify-center px-2 text-center text-xs bg-black/50 text-white py-0.5 opacity-0 group-hover:opacity-100">
+            <div className="absolute font-medium inset-x-0 top-full group-hover:inset-y-0 flex items-center justify-center px-2 text-center text-xs bg-black/50 text-white py-0.5 opacity-0 group-hover:opacity-100 cursor-pointer">
               <span className='bg-black py-0.5 rounded px-1'>{title}</span>
             </div>
           </div>

src/pages/changelog.astro

@@ -14,26 +14,30 @@ const allChangelogs = await getAllChangelogs();
   noIndex={true}
 >
   <div class='bg-gray-100 px-4'>
-    <div class='border-b bg-white text-left -mx-4'>
-      <div class='mx-auto max-w-[500px] py-5 sm:pb-10 sm:pt-12 text-left px-4 sm:text-center'>
-        <h1 class='mb-0.5 sm:mb-3 text-2xl sm:text-4xl font-semibold'>Changelog</h1>
-        <p>We are constantly improving and updating roadmap.sh</p>
+    <div class='-mx-4 border-b bg-white text-left'>
+      <div
+        class='mx-auto max-w-[500px] px-4 py-5 text-left sm:pb-10 sm:pt-12 sm:text-center'
+      >
+        <h1 class='mb-0.5 text-2xl font-semibold sm:mb-3 sm:text-4xl'>
+          Changelog
+        </h1>
+        <p class='text-balance text-sm sm:text-base'>
+          We are constantly improving and updating roadmap.sh
+        </p>
       </div>
     </div>
 
-    <div class='relative mx-auto max-w-[600px] pb-8 pt-4'>
-      <div class='space-y-6'>
-        <div
-          class='absolute sm:block hidden inset-y-0 -left-5 w-px -translate-x-[0.5px] bg-gray-300'
-        >
-        </div>
-
-        {
-          allChangelogs.map((changelog) => (
-            <ChangelogItem changelog={changelog} />
-          ))
-        }
+    <div class='relative mx-auto max-w-[600px] pb-8 pt-8'>
+      <div
+        class='absolute inset-y-0 -left-5 hidden w-px -translate-x-[0.5px] bg-gray-300 sm:block'
+      >
       </div>
+
+      {
+        allChangelogs.map((changelog) => (
+          <ChangelogItem changelog={changelog} />
+        ))
+      }
     </div>
   </div>
 </BaseLayout>