|
29 | 29 | </svelte:head>
|
30 | 30 |
|
31 | 31 | <div class="mx-auto min-w-fit sm:w-5/6">
|
32 |
| - <div class="my-6 bg-white rounded shadow-md min-w-fit"> |
33 |
| - <table class="w-full table-auto"> |
| 32 | + <div class="my-6 bg-white rounded shadow-md min-w-fit snap-x"> |
| 33 | + <table class="w-full"> |
34 | 34 | <thead class="border">
|
35 | 35 | <tr class="text-center uppercase bg-gray-100">
|
36 |
| - <th class="px-2 py-3 sm:w-32">Project</th> |
37 |
| - <th class="px-2 py-3">What</th> |
38 |
| - <th class="px-2 py-3">Why</th> |
39 |
| - <th class="px-2 py-3 sm:w-60">Tech</th> |
| 36 | + <th class="px-2 py-3 shrink">Project</th> |
| 37 | + <th class="px-2 py-3 shrink">What</th> |
| 38 | + <th class="px-2 py-3 min-w-[24rem] grow snap-center">Why</th> |
| 39 | + <th class="px-2 py-3 shrink">Tech</th> |
40 | 40 | </tr>
|
41 | 41 | </thead>
|
42 | 42 | <tbody class="text-sm font-light">
|
43 | 43 | {#each data.projects as project}
|
44 |
| - <tr> |
45 |
| - <td class="px-2 py-3 text-center whitespace-nowrap"> |
46 |
| - <div class="flex items-center justify-center"> |
| 44 | + <tr class="hover:bg-gray-50"> |
| 45 | + <td class="px-2 py-3 text-center"> |
| 46 | + <div class="flex items-center justify-center shrink sm:whitespace-nowrap"> |
47 | 47 | <a href={project.link}>
|
48 | 48 | <span class="font-medium">{project.name}</span>
|
49 | 49 | </a>
|
50 | 50 | </div>
|
51 | 51 | </td>
|
52 |
| - <td class="px-2 py-3 text-center"> |
53 |
| - <div class="flex items-center justify-center"> |
| 52 | + <td class="px-2 py-3 text-left"> |
| 53 | + <div class="flex items-center justify-center shrink"> |
54 | 54 | <span>{project.what}</span>
|
55 | 55 | </div>
|
56 | 56 | </td>
|
57 |
| - <td class="px-2 py-3 text-center"> |
58 |
| - <div class="flex items-center justify-center"> |
| 57 | + <td class="px-2 py-3 text-left"> |
| 58 | + <div class="flex items-center justify-center grow snap-center"> |
59 | 59 | <span>{project.why}</span>
|
60 | 60 | </div>
|
61 | 61 | </td>
|
|
0 commit comments