added a link to mtg.hobbs.zone. changed layout to grid instead of flexboxes

css/output.css

@@ -717,6 +717,10 @@ video {
   margin: 1rem;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .mb-36 {
   margin-bottom: 9rem;
 }
@@ -725,10 +729,26 @@ video {
   margin-bottom: 1rem;
 }
 
+.mr-auto {
+  margin-right: auto;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
 
+.mb-auto {
+  margin-bottom: auto;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -1307,6 +1327,18 @@ video {
   grid-auto-flow: column dense;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1491,6 +1523,10 @@ video {
   justify-items: stretch;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -2261,6 +2297,11 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
 .text-slate-500 {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity));
@@ -2281,11 +2322,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-slate-400 {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -2737,6 +2773,12 @@ video {
   }
 }
 
+@media (min-width: 768px) {
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:w-1\/2 {
     width: 50%;
@@ -2746,6 +2788,14 @@ video {
     width: 100%;
   }
 
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .lg\:flex-row {
     flex-direction: row;
   }
@@ -2755,6 +2805,12 @@ video {
   }
 }
 
+@media (min-width: 1280px) {
+  .xl\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   @media (min-width: 1024px) {
     .dark\:lg\:hover\:\[paint-order\:markers\]:hover {

landing.html

@@ -15,62 +15,80 @@
         </h1>
       </a>
     </div>
-    <div class="flex flex-wrap">
+    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 m-4">
-      <a href="./henry.html">
+      <a
-        <div
+        href="./henry.html"
-          class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
-        >
+      >
-          <div class="flex flex-row">
+        <div class="flex flex-row">
-            <img
+          <img
-              class="w-24 rounded-full aspect-square"
+            class="w-24 rounded-full aspect-square mb-auto mt-auto"
-              src="./img/henry.jpg"
+            src="./img/henry.jpg"
-              alt="zuzu"
+            alt="zuzu"
-            />
+          />
-            <div class="flex flex-col p-4">
+          <div class="flex flex-col p-4">
-              <h1 class="text-4xl">Henry</h1>
+            <h1 class="text-4xl">Henry</h1>
-              <p>About me</p>
+            <p>About me</p>
-            </div>
           </div>
         </div>
       </a>
-      <a href="https://git.hobbs.zone/henry">
+      <a
-        <div
+        href="https://git.hobbs.zone/henry"
-          class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
-        >
+      >
-          <div class="flex flex-row">
+        <div class="flex flex-row">
-            <img
+          <img
-              class="w-24 rounded-full aspect-square"
+            class="w-24 rounded-full aspect-square mb-auto mt-auto"
-              src="./img/gitea.svg"
+            src="./img/gitea.svg"
-              alt="gitea"
+            alt="gitea"
-            />
+          />
-            <div class="flex flex-col p-4">
+          <div class="flex flex-col p-4">
-              <h1 class="text-4xl">Gitea</h1>
+            <h1 class="text-4xl">Gitea</h1>
-              <p>Source code for my projects</p>
+            <p>Source code for my projects</p>
-            </div>
+          </div>
+        </div>
+      </a>
+      <a
+        href="https://mtg.hobbs.zone/"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
+      >
+        <div class="flex flex-row">
+          <img
+            class="w-24 rounded-full aspect-square mb-auto mt-auto"
+            src="./img/mtg.png"
+            alt="mtg"
+          />
+          <div class="flex flex-col p-4">
+            <h1 class="text-4xl">MTG Visual Serach</h1>
+            <p>AI-powered art search for Magic: The Gathering cards</p>
           </div>
         </div>
       </a>
       <div
-        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
-      ></div>
+      >
+        <h1 class="text-4xl">More</h1>
+      </div>
       <div
-        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
-      ></div>
+      >
+        <h1 class="text-4xl">sites</h1>
+      </div>
       <div
-        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
-      ></div>
+      >
+        <h1 class="text-4xl">coming</h1>
+      </div>
       <div
-        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
-      ></div>
+      >
+        <h1 class="text-4xl">soon</h1>
+      </div>
       <div
-        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+        class="bg-slate-900 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40"
-      ></div>
+      >
-      <div
+        <h1 class="text-4xl">probably</h1>
-        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
+      </div>
-      ></div>
-      <div
-        class="bg-slate-400 shadow-2xl p-4 rounded-md hover:scale-105 transition-transform min-h-32 min-w-40 m-2 flex-1"
-      ></div>
     </div>
     <div
       class="bottom-2 flex justify-center w-max bg-slate-200 p-2 rounded-md shadow-md fixed px-24"