style: wip to #25

Author: TotalLag

src/routes/projects/Projects.svelte

@@ -29,33 +29,33 @@
 </svelte:head>
 
 <div class="mx-auto min-w-fit sm:w-5/6">
-  <div class="my-6 bg-white rounded shadow-md min-w-fit">
-    <table class="w-full table-auto">
+  <div class="my-6 bg-white rounded shadow-md min-w-fit snap-x">
+    <table class="w-full">
       <thead class="border">
         <tr class="text-center uppercase bg-gray-100">
-          <th class="px-2 py-3 sm:w-32">Project</th>
-          <th class="px-2 py-3">What</th>
-          <th class="px-2 py-3">Why</th>
-          <th class="px-2 py-3 sm:w-60">Tech</th>
+          <th class="px-2 py-3 shrink">Project</th>
+          <th class="px-2 py-3 shrink">What</th>
+          <th class="px-2 py-3 min-w-[24rem] grow snap-center">Why</th>
+          <th class="px-2 py-3 shrink">Tech</th>
         </tr>
       </thead>
       <tbody class="text-sm font-light">
         {#each data.projects as project}
-          <tr>
-            <td class="px-2 py-3 text-center whitespace-nowrap">
-              <div class="flex items-center justify-center">
+          <tr class="hover:bg-gray-50">
+            <td class="px-2 py-3 text-center">
+              <div class="flex items-center justify-center shrink sm:whitespace-nowrap">
                 <a href={project.link}>
                   <span class="font-medium">{project.name}</span>
                 </a>
               </div>
             </td>
-            <td class="px-2 py-3 text-center">
-              <div class="flex items-center justify-center">
+            <td class="px-2 py-3 text-left">
+              <div class="flex items-center justify-center shrink">
                 <span>{project.what}</span>
               </div>
             </td>
-            <td class="px-2 py-3 text-center">
-              <div class="flex items-center justify-center">
+            <td class="px-2 py-3 text-left">
+              <div class="flex items-center justify-center grow snap-center">
                 <span>{project.why}</span>
               </div>
             </td>