yes yes yes

axum_server/styles/output.css

@@ -880,6 +880,14 @@ video {
   max-width: 440px;
 }
 
+.max-w-\[444px\] {
+  max-width: 444px;
+}
+
+.max-w-\[392px\] {
+  max-width: 392px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -986,6 +994,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
 .border {
   border-width: 1px;
 }

axum_server/templates/components/social_card.html

@@ -1,6 +1,6 @@
 {% macro social_card_start(svg, heading, img) %}
 
-<section class="border rounded-md bg-pink-200 m-4 p-4 max-w-[440px]">
+<section class="border rounded-md bg-pink-200 m-4 p-4 max-w-[392px]">
 	<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}}" />
@@ -9,7 +9,7 @@
 	</header>
 	{% let alt_text = format!("{svg} thumbnail") %}
 
-	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 394, 160, alt_text, Some("h-auto mx-auto"), true).unwrap_or("thumbnail not found".to_string())|safe }}
+	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 360, 128, alt_text, Some("h-auto mx-auto rounded-sm"), true).unwrap_or("thumbnail not found".to_string())|safe }}
 
 </section>
 {% endmacro %}

axum_server/templates/sections/social.html

@@ -1,11 +1,11 @@
 <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
 
 <section class="grid grid-flow-row justify-center">
-{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/instagram_plain.png") %}
+{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/twitch_wo.png") %}
 
-{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>", "images/social/instagram_plain.png") %}
+{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>", "images/social/tiktok_wo.png") %}
 
-{% 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("youtube", "Videos and vlogs posted on <em>YouTube</em>", "images/social/youtube_wo.png") %}
 
 <div class="lg:hidden xl:block">
 {% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png") %}