few styling

axum_server/styles/output.css

@@ -624,16 +624,6 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -654,10 +644,6 @@ video {
   margin-top: 0.75rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .block {
   display: block;
 }
@@ -686,6 +672,10 @@ video {
   aspect-ratio: 16 / 9;
 }
 
+.aspect-\[4\/3\] {
+  aspect-ratio: 4/3;
+}
+
 .h-0 {
   height: 0px;
 }
@@ -722,6 +712,10 @@ video {
   width: 1.75rem;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -833,6 +827,16 @@ video {
   fill: #172554;
 }
 
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
 .p-0 {
   padding: 0px;
 }

axum_server/tailwind.config.js

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./templates/**/**.html'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
+	content: ["./templates/**/*.html"],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};

axum_server/templates/components/project_preview_card.html

@@ -18,11 +18,11 @@
 
   {% match project.metadata.cover_image %}
   {% when Some with (source) %}
-  <figure class="my-2">
+  <figure class="mx-4 my-2">
       {% match project.metadata.link %}
       {% when Some with (href) %}
       <a href="{{href}}">
-        <img src="{{source}}" />
+        <img src="{{source}}" class="object-contain w-full aspect-video"/>
       </a>
       {% when None %}
       <img src="{{source}}" />
@@ -39,7 +39,7 @@
     </h3>
     <ul class="inline-block">
      {% for tag in project.metadata.tags %}
-      <li class="inline-block text-blue-700 italic">
+      <li class="inline-block text-pink-950">
         {{tag}}
       </li>
       {% endfor %}