round elements

src/static/tailwind.css

@@ -521,6 +521,9 @@
   }
 }
 @layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -578,12 +581,33 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -608,12 +632,18 @@
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
   }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .resize {
+    resize: both;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -629,19 +659,38 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-b-lg {
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
   .bg-\[\#faebeb\] {
     background-color: #faebeb;
   }
   .bg-gray-400 {
     background-color: var(--color-gray-400);
   }
+  .bg-orange-600 {
+    background-color: var(--color-orange-600);
+  }
+  .bg-orange-800 {
+    background-color: var(--color-orange-800);
+  }
+  .bg-orange-800\/50 {
+    background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent);
+  }
   .bg-orange-950 {
     background-color: var(--color-orange-950);
   }
@@ -651,6 +700,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -677,6 +729,10 @@
   .opacity-30 {
     opacity: 30%;
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -818,3 +874,13 @@
   inherits: false;
   initial-value: skewY(0);
 }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}

src/templates/index.tsx

@@ -25,7 +25,7 @@ export default function Index(props: {
         <Header path={props.path} />
         <div className="container mx-auto py-4 px-4 sm:px-8">
           <div>
-            <p className="text-4xl ">Images</p>
+            <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
             <div
               id="index_images"
               className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
@@ -35,7 +35,7 @@ export default function Index(props: {
                   <a
                     data-type="index__placeholder__image"
                     key={`index__placeholder__image-${num}`}
-                    className={`relative aspect-square min-w-48 sm:min-w-auto ${
+                    className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
                       idx >= 5 ? "hidden xl:block" : ""
                     }`}
                   >
@@ -48,7 +48,7 @@ export default function Index(props: {
               })}
               <a
                 href="/images/"
-                className="text-[#f9ebeb] hover:bg-orange-600 transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"
+                className="text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"
               >
                 <span className="material-symbols--arrow-forward-rounded w-16 h-16"></span>
                 <p className="text-xl">All Images</p>