holy shit the responsiveness

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -19,9 +19,15 @@ pub fn generate_picture_markup(
     width: u32,
     height: u32,
     alt_text: &str,
+    class_name: Option<&str>,
     generate_image: bool,
 ) -> Result<String, anyhow::Error> {
     let exported_formats = get_export_formats(orig_img_path);
+    let class_attr = if let Some(class) = class_name {
+        format!(r#"class="{class}""#)
+    } else {
+        "".to_string()
+    };
 
     if exported_formats.is_empty() {
         return Ok(formatdoc!(
@@ -29,6 +35,7 @@ pub fn generate_picture_markup(
             src="{orig_img_path}"
             width="{width}"
             height="{height}"
+            {class_attr}
             alt="{alt_text}"
         >"#
         ));
@@ -99,6 +106,7 @@ pub fn generate_picture_markup(
             width="{width}"
             height="{height}"
             alt="{alt_text}"
+            {class_attr}
         >"#
     );
 
@@ -307,7 +315,14 @@ fn test_generate_picture_markup() {
         </picture>"#,
     };
     assert_eq!(
-        generate_picture_markup(orig_img_path, width, height, "Testing image alt", false)
+        generate_picture_markup(
+            orig_img_path,
+            width,
+            height,
+            "Testing image alt",
+            None,
+            false
+        )
         .expect("picture markup has to be generated"),
         result
     );

axum_server/src/post_utils/post_parser.rs

@@ -125,8 +125,14 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
             );
 
             // Place image into the content with scaled reso to a boundary
-            let picture_markup =
+            let picture_markup = generate_picture_markup(
-                generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
+                &dest_url,
+                max_width,
+                max_height,
+                &title,
+                None,
+                generate_images,
+            )
             .unwrap_or(formatdoc!(
                 r#"
                         <img

axum_server/styles/input.css

@@ -70,20 +70,12 @@
 
 a {
   @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
-
-  /* &:hover { */
-  /* @apply transition text-blue-500; */
-  /* } */
 }
 
 strong {
   @apply font-medium;
 }
 
-img[height] {
-  height: revert-layer;
-}
-
 .article-body {
   h1 {
     @apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;

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
 */
 
 /*
@@ -654,6 +654,18 @@ video {
   grid-row: span 3 / span 3;
 }
 
+.float-start {
+  float: inline-start;
+}
+
+.clear-left {
+  clear: left;
+}
+
+.clear-both {
+  clear: both;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -710,11 +722,6 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -739,6 +746,30 @@ video {
   margin-top: 0.75rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -787,6 +818,18 @@ video {
   height: 240px;
 }
 
+.h-auto {
+  height: auto;
+}
+
+.h-\[236px\] {
+  height: 236px;
+}
+
+.max-h-\[236px\] {
+  max-height: 236px;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -807,6 +850,15 @@ video {
   width: 180px;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.max-w-\[32rem\] {
+  max-width: 32rem;
+}
+
 .max-w-maxindex {
   max-width: 100rem;
 }
@@ -815,20 +867,8 @@ video {
   max-width: 64rem;
 }
 
-.max-w-96 {
+.max-w-xl {
-  max-width: 24rem;
+  max-width: 36rem;
-}
-
-.max-w-\[64rem\] {
-  max-width: 64rem;
-}
-
-.max-w-\[48rem\] {
-  max-width: 48rem;
-}
-
-.max-w-\[32rem\] {
-  max-width: 32rem;
 }
 
 .flex-grow {
@@ -861,6 +901,10 @@ video {
   flex-direction: row;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .place-content-center {
   place-content: center;
 }
@@ -960,14 +1004,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 +1043,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.py-5 {
-  padding-top: 1.25rem;
-  padding-bottom: 1.25rem;
-}
-
 .pr-3 {
   padding-right: 0.75rem;
 }
@@ -1123,11 +1162,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,20 +1189,10 @@ a:hover {
   transition-duration: 150ms;
 }
 
-a {
-  /* &:hover { */
-  /* @apply transition text-blue-500; */
-  /* } */
-}
-
 strong {
   font-weight: 500;
 }
 
-img[height] {
-  height: revert-layer;
-}
-
 .article-body {
   h1 {
     margin-left: auto;
@@ -1811,17 +1835,52 @@ article a:visited {
   fill: #42a6f0;
 }
 
-.hover\:text-blue-400:hover {
+@media (min-width: 640px) {
-  --tw-text-opacity: 1;
+  .sm\:float-none {
-  color: rgb(66 166 240 / var(--tw-text-opacity));
+    float: none;
+  }
+
+  .sm\:clear-none {
+    clear: none;
   }
 
-@media (min-width: 640px) {
   .sm\:my-4 {
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
 
+  .sm\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .sm\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:grid {
+    display: grid;
+  }
+
+  .sm\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .sm\:grid-cols-\[max-content_1fr\] {
+    grid-template-columns: max-content 1fr;
+  }
+
+  .sm\:grid-rows-\[max-content_1fr_max-content\] {
+    grid-template-rows: max-content 1fr max-content;
+  }
+
+  .sm\:gap-4 {
+    gap: 1rem;
+  }
+
   .sm\:py-4 {
     padding-top: 1rem;
     padding-bottom: 1rem;

axum_server/templates/components/blog_post_preview.html

@@ -1,8 +1,8 @@
-<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8 break-inside-avoid">
+<article class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none">
-	<aside class="row-span-3 self-center">
+	<aside class="row-span-3 self-center float-start sm:float-none mr-3 mb-3 sm:ml-0 sm:mb-0">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
-		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
+		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", None, true).unwrap_or("thumbnail not found".to_string())|safe }}
 		{% when None %}
 		<div> 
 			{% include "components/blog_post_default_thumbnail.html" %}
@@ -15,7 +15,7 @@
 		</h3>
 	</header>
 	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
-	<footer class="text-sm md:text-base lg:text-lg">
+	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0">
     <ul class="inline-block">
      {% for tag in post.metadata.tags %}
       <li class="inline-block">

axum_server/templates/components/project_preview_card.html

@@ -18,7 +18,7 @@
 
   {% match project.metadata.cover_image %}
   {% when Some with (source) %}
-  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", true).unwrap_or("cover not found".to_string()) %}
+  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", Some("max-h-[236px]"), true).unwrap_or("cover not found".to_string()) %}
   <figure class="mx-4 my-2 flex justify-center">
       {% match project.metadata.link %}
       {% when Some with (href) %}

axum_server/templates/components/social_card.html

@@ -1,15 +1,15 @@
-{% macro social_card_start(svg, heading) %}
+{% macro social_card_start(svg, heading, img) %}
 
-<section class="border rounded-md bg-pink-200 m-4 p-4">
+<section class="border rounded-md bg-pink-200 m-4 p-4 w-fit">
 	<header class="flex text-center justify-center items-center gap-2 mb-2">
 		 <svg aria-hidden="true" class="h-7 w-7 fill-blue-950">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
 	  </svg>
 		<h3 class="text-lg font-medium mb-1">{{heading|safe}}</h3>
 	</header>
+	{% let alt_text = format!("{svg} thumbnail") %}
 
-{% endmacro %}
+	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 420, 200, alt_text, Some("h-auto"), true).unwrap_or("thumbnail not found".to_string())|safe }}
 
-{% macro social_card_end() %}
 </section>
 {% endmacro %}

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.") %}

axum_server/templates/sections/social.html

@@ -1,52 +1,12 @@
 <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
-{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
-<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
-<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
-<!-- <script type="text/javascript"> -->
-<!-- var options = { -->
-<!-- width: "100%", -->
-<!-- height: "100%", -->
-<!-- channel: "michalvankodev", -->
-<!-- parent: ["localhost"] -->
-<!-- }; -->
-<!-- var player = new Twitch.Player("twitch-player", options); -->
-<!-- player.setVolume(0.5); -->
-</script>
-{% call sc::social_card_end() %}
 
-{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
+<section class="flex flex-col items-center">
-<!-- STYLES needed to overwrite tiktok embed css -->
+{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/instagram_plain.png") %}
-<!-- <blockquote -->
-<!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
-<!-- cite="https://www.tiktok.com/@michalvankodev" -->
-<!-- data-unique-id="michalvankodev" -->
-<!-- data-embed-from="embed_page" -->
-<!-- data-embed-type="creator" -->
-<!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
-<!-- > -->
-<!-- <section> -->
-<!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
-<!-- </section> -->
-<!-- </blockquote> -->
-<!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
-{% call sc::social_card_end() %}
 
-{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
+{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>", "images/social/instagram_plain.png") %}
-<!-- TODO create our own youtube widget which will populate this window on build -->
-<!-- <iframe -->
-<!-- class="h-64 aspect-video" -->
-<!-- id="ytplayer" -->
-<!-- type="text/html" -->
-<!-- width="100%" -->
-<!-- height="100%" -->
-<!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
-<!-- frameborder="0" -->
-<!-- allowfullscreen -->
-<!-- ></iframe> -->
-{% call sc::social_card_end() %}
 
+{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>", "images/social/instagram_plain.png") %}
 
-{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
+{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png") %}
-<!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
-{% call sc::social_card_end() %}
 
+</section>