few style

axum_server/styles/input.css

@@ -70,10 +70,6 @@
 
 a {
   @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
-
-  /* &:hover { */
-  /* @apply transition text-blue-500; */
-  /* } */
 }
 
 strong {

axum_server/styles/output.css

@@ -107,7 +107,7 @@
 }
 
 /*
-! tailwindcss v3.4.12 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -710,9 +710,9 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-6 {
+.my-4 {
-  margin-top: 1.5rem;
+  margin-top: 1rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .mb-1 {
@@ -807,6 +807,10 @@ video {
   width: 180px;
 }
 
+.max-w-\[32rem\] {
+  max-width: 32rem;
+}
+
 .max-w-maxindex {
   max-width: 100rem;
 }
@@ -815,20 +819,24 @@ video {
   max-width: 64rem;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
 .max-w-96 {
   max-width: 24rem;
 }
 
-.max-w-\[64rem\] {
+.max-w-\[30rem\] {
-  max-width: 64rem;
+  max-width: 30rem;
 }
 
-.max-w-\[48rem\] {
+.max-w-md {
-  max-width: 48rem;
+  max-width: 28rem;
 }
 
-.max-w-\[32rem\] {
+.max-w-xl {
-  max-width: 32rem;
+  max-width: 36rem;
 }
 
 .flex-grow {
@@ -861,6 +869,10 @@ video {
   flex-direction: row;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .place-content-center {
   place-content: center;
 }
@@ -960,14 +972,14 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.fill-blue-950 {
-  fill: #0b2746;
-}
-
 .fill-blue-900 {
   fill: #103e6a;
 }
 
+.fill-blue-950 {
+  fill: #0b2746;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -999,11 +1011,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-}
-
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -1123,11 +1130,6 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
-.text-blue-800 {
-  --tw-text-opacity: 1;
-  color: rgb(12 73 128 / var(--tw-text-opacity));
-}
-
 .no-underline {
   text-decoration-line: none;
 }
@@ -1155,12 +1157,6 @@ a:hover {
   transition-duration: 150ms;
 }
 
-a {
-  /* &:hover { */
-  /* @apply transition text-blue-500; */
-  /* } */
-}
-
 strong {
   font-weight: 500;
 }
@@ -1811,17 +1807,17 @@ article a:visited {
   fill: #42a6f0;
 }
 
-.hover\:text-blue-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(66 166 240 / var(--tw-text-opacity));
-}
-
 @media (min-width: 640px) {
   .sm\:my-4 {
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
 
+  .sm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .sm\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -1834,6 +1830,11 @@ article a:visited {
     margin-bottom: 2rem;
   }
 
+  .md\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   .md\:grid {
     display: grid;
   }

axum_server/templates/components/talent_card.html

@@ -1,6 +1,6 @@
 {% macro talent_card(svg, heading, description) %}
 
-<section class="flex border rounded bg-white m-4 p-3">
+<section class="flex border rounded bg-white m-4 p-3 max-w-xl">
 	<aside class="flex justify-center items-center pr-3">
 	  <svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />

axum_server/templates/index.html

@@ -33,7 +33,7 @@
       <em> <a href="https://en.wikipedia.org/wiki/Programmer">programmer</a> </em>
       . I am developing software for more than half of my life and <strong>I love it!</strong> Sometimes I stream working on my side projects and building a <a href="https://discord.gg/2cGg7kwZEh">community of like minded people</a>. Here you can find blogs of my thoughts and journeys, as well as links to my socials where you can see other content.</p>
 
-    <section id="talent-cards">
+    <section id="talent-cards" class="flex flex-col items-center">
       {% call tc::talent_card("code", "Web development", "Extensive expertise in creating performant, live web applications and websites") %}
       {% call tc::talent_card("gamepad", "Game development", "Extensive expertise in creating performant, live web applications and websites") %}
       {% call tc::talent_card("person-chalkboard", "Mentoring & Consulting", "I offer consulting sessions to assist you in developing <strong>higher-quality software</strong> and share insights from crafting robust, professional web applications. <a href=\"https://calendly.com/michalvankosk/30min\">Schedule a session with me</a> and elevate your projects together.") %}