src/css/main.css

@@ -47,13 +47,6 @@
     @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,11 +27,4 @@
   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,9 +448,15 @@
   .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);
   }
@@ -496,12 +502,18 @@
   .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);
   }
@@ -668,6 +680,12 @@
       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;
@@ -779,6 +797,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .object-scale-down {
+    object-fit: scale-down;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -809,6 +830,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-20 {
+    padding-inline: calc(var(--spacing) * 20);
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -1275,15 +1299,6 @@
       }
     }
   }
-  .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) {
@@ -1707,13 +1722,6 @@
   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 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 }}";'>
+      <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 }}";'>
 
           <!-- Image -->
           {% if resized %}