default styling on all images

This reverts commit ad05122914.

src/css/main.css

@@ -47,6 +47,13 @@
     @apply text-neutral-600;
     @apply dark:text-neutral-400;
   }
+
+  img {
+      @apply py-0;
+      @apply rounded-lg;
+      @apply shadow-xl;
+      @apply object-cover;
+  }
 }
 
 /* Global default styles */

static/css/base.css

@@ -27,4 +27,11 @@
   li::marker {
       color: var(--color-gray-600);
   }
+
+  img {
+      @apply py-0;
+      @apply rounded-lg;
+      @apply shadow-xl;
+      @apply object-cover;
+  }
 }

static/css/main.css

@@ -448,15 +448,9 @@
   .h-9 {
     height: calc(var(--spacing) * 9);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-15 {
-    height: calc(var(--spacing) * 15);
-  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
@@ -502,18 +496,12 @@
   .w-9 {
     width: calc(var(--spacing) * 9);
   }
-  .w-10 {
-    width: calc(var(--spacing) * 10);
-  }
   .w-11\/12 {
     width: calc(11/12 * 100%);
   }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
-  .w-15 {
-    width: calc(var(--spacing) * 15);
-  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -680,12 +668,6 @@
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
-  .place-self-center {
-    place-self: center;
-  }
-  .self-center {
-    align-self: center;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -797,9 +779,6 @@
   .object-cover {
     object-fit: cover;
   }
-  .object-scale-down {
-    object-fit: scale-down;
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -830,9 +809,6 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-20 {
-    padding-inline: calc(var(--spacing) * 20);
-  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -1299,6 +1275,15 @@
       }
     }
   }
+  .hover\:shadow-xl\/30 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow-alpha: 30%;
+        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 30%)), 0 8px 10px -6px var(--tw-shadow-color, oklab(from rgb(0 0 0 / 0.1) l a b / 30%));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .hover\:shadow-xl {
     &:hover {
       @media (hover: hover) {
@@ -1722,6 +1707,13 @@
   li::marker {
     color: var(--color-gray-600);
   }
+  img {
+    padding-block: calc(var(--spacing) * 0);
+    border-radius: var(--radius-lg);
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    object-fit: cover;
+  }
 }
 @property --tw-translate-x {
   syntax: "*";

templates/section.html

@@ -36,7 +36,7 @@
       {% else %}
       {% set resized = "" %}
       {% endif %}
-      <div class="flex flex-wrap space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl p-5 shadow-xl transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 place-content-center cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
+      <div class="flex flex-wrap space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl p-5 shadow-xl hover:shadow-xl/30 transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 place-content-center cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
 
           <!-- Image -->
           {% if resized %}