better styling

static/css/main.css

@@ -463,6 +463,9 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -594,12 +597,24 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-content-center {
+    place-content: center;
+  }
+  .place-content-end {
+    place-content: end;
+  }
   .content-center {
     align-content: center;
   }
+  .content-end {
+    align-content: flex-end;
+  }
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -761,6 +776,9 @@
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
+  .bg-gray-600 {
+    background-color: var(--color-gray-600);
+  }
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
@@ -782,6 +800,12 @@
   .fill-current {
     fill: currentcolor;
   }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1005,6 +1029,13 @@
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
+  .outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+  .outline-blue-600 {
+    outline-color: var(--color-blue-600);
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1177,6 +1208,13 @@
       }
     }
   }
+  .hover\:\!bg-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-500) !important;
+      }
+    }
+  }
   .hover\:bg-blue-900 {
     &:hover {
       @media (hover: hover) {
@@ -1276,6 +1314,13 @@
       }
     }
   }
+  .hover\:\!outline-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        outline-color: var(--color-blue-500) !important;
+      }
+    }
+  }
   .hover\:file\:ring-2 {
     &:hover {
       @media (hover: hover) {
@@ -1632,6 +1677,16 @@
       color: var(--color-white);
     }
   }
+  .dark\:outline-blue-500 {
+    @media (prefers-color-scheme: dark) {
+      outline-color: var(--color-blue-500);
+    }
+  }
+  .dark\:outline-blue-800 {
+    @media (prefers-color-scheme: dark) {
+      outline-color: var(--color-blue-800);
+    }
+  }
   .dark\:hover\:\!bg-blue-700 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1641,6 +1696,15 @@
       }
     }
   }
+  .dark\:hover\:\!bg-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-700) !important;
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-gray-600 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1659,6 +1723,15 @@
       }
     }
   }
+  .dark\:hover\:\!outline-blue-700 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          outline-color: var(--color-blue-700) !important;
+        }
+      }
+    }
+  }
   .\[\&\>\*\]\:py-4 {
     &>* {
       padding-block: calc(var(--spacing) * 4);
@@ -1840,6 +1913,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1935,6 +2013,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;