Switch to grid-cols layout, keeps title to the right when wrapped, ce…

…nters date div when title wrapped
AVGVSTVS96 · Jan 15, 2024 · 17aeae8 · 17aeae8
1 parent 99d4260
commit 17aeae8
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/components/BlogIndex.astro b/src/components/BlogIndex.astro
@@ -14,14 +14,14 @@ interface Props {
 <ul class={`list-none pl-0 ${className}`}>
   {
     displayPosts.map((post) => (
-      <li class="flex flex-col justify-between border-b-[0.5px] p-2.5 sm:flex-row dark:border-slate-400/20">
-        <div class="mb-2 text-slate-600/75 sm:mb-0 dark:text-slate-200/60">
+      <li class="grid grid-cols-1 border-b-[0.5px] p-2.5 sm:grid-cols-3 dark:border-slate-400/20">
+        <div class="col-span-1 self-center text-slate-600/75 dark:text-slate-200/60">
           {post.frontmatter.pubDate}
         </div>
-        <div>
+        <div class="col-span-2 sm:text-right">
           <a
             href={post.url}
-            class="text-xl font-[600] text-slate-700 underline decoration-sky-500 decoration-2 underline-offset-[5px] hover:text-slate-600/80 hover:decoration-sky-300 dark:text-slate-200 dark:decoration-sky-500 dark:hover:text-slate-200/75 dark:hover:underline dark:hover:decoration-sky-600/80">
+            class="block text-xl font-[600] text-slate-700 underline decoration-sky-500 decoration-2 underline-offset-[5px] hover:text-slate-600/80 hover:decoration-sky-300 dark:text-slate-200 dark:decoration-sky-500 dark:hover:text-slate-200/75 dark:hover:underline dark:hover:decoration-sky-600/80">
             {post.frontmatter.title}
           </a>
         </div>