From fdfa69c4b443c21d2ab6658f7b85372026ad85db Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Wed, 7 Aug 2024 19:21:29 +0200
Subject: [PATCH] few styling

---
 axum_server/styles/output.css                 | 32 +++++++++++--------
 axum_server/tailwind.config.js                | 12 +++----
 .../components/project_preview_card.html      |  6 ++--
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css
index 9b34ebc..e936769 100644
--- a/axum_server/styles/output.css
+++ b/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;
 }
diff --git a/axum_server/tailwind.config.js b/axum_server/tailwind.config.js
index 4a01be0..e67c242 100644
--- a/axum_server/tailwind.config.js
+++ b/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: [],
+};
diff --git a/axum_server/templates/components/project_preview_card.html b/axum_server/templates/components/project_preview_card.html
index 40d7f86..b8cda5b 100644
--- a/axum_server/templates/components/project_preview_card.html
+++ b/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 %}