From f62673d6a7eeaa72d0292c40dd15741749f9e4a5 Mon Sep 17 00:00:00 2001
From: Michal Vanko <mklakakilli@gmail.com>
Date: Thu, 26 Sep 2024 14:59:18 +0200
Subject: [PATCH] yutube and instagram

---
 axum_server/styles/input.css               | 11 +++++++++++
 axum_server/styles/output.css              | 11 +++++++++++
 axum_server/templates/sections/social.html |  4 ++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/axum_server/styles/input.css b/axum_server/styles/input.css
index cf2b895..08181dd 100644
--- a/axum_server/styles/input.css
+++ b/axum_server/styles/input.css
@@ -179,6 +179,17 @@ article a {
   transition-delay: 75ms;
 }
 
+.social-card-youtube:hover {
+  @apply rounded-none;
+  transform: scale(1.02);
+  transition-delay: 100ms;
+}
+
+.social-card-instagram:hover {
+  filter: brightness(84%);
+  transition-delay: 100ms;
+}
+
 .social-card-tiktok {
   position: relative;
 
diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css
index 4abe02f..555786a 100644
--- a/axum_server/styles/output.css
+++ b/axum_server/styles/output.css
@@ -1777,6 +1777,17 @@ article a:visited {
   transition-delay: 75ms;
 }
 
+.social-card-youtube:hover {
+  border-radius: 0px;
+  transform: scale(1.02);
+  transition-delay: 100ms;
+}
+
+.social-card-instagram:hover {
+  filter: brightness(84%);
+  transition-delay: 100ms;
+}
+
 .social-card-tiktok {
   position: relative;
   &:hover {
diff --git a/axum_server/templates/sections/social.html b/axum_server/templates/sections/social.html
index e4c3b60..43abcf9 100644
--- a/axum_server/templates/sections/social.html
+++ b/axum_server/templates/sections/social.html
@@ -5,10 +5,10 @@
 
 {% call sc::social_card_start("tiktok", "https://www.tiktok.com/@michalvankodev","Highlights can be found on <em>TikTok</em>", "images/social/tiktok_wo.png", "social-card-tiktok") %}
 
-{% call sc::social_card_start("youtube", "https://www.youtube.com/@michalvankodev", "Videos and vlogs posted on <em>YouTube</em>", "images/social/youtube_wo.png", "") %}
+{% call sc::social_card_start("youtube", "https://www.youtube.com/@michalvankodev", "Videos and vlogs posted on <em>YouTube</em>", "images/social/youtube_wo.png", "social-card-youtube") %}
 
 <div class="lg:hidden xl:block">
-{% call sc::social_card_start("instagram", "https://www.instagram.com/michalvankodev/", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png", "") %}
+{% call sc::social_card_start("instagram", "https://www.instagram.com/michalvankodev/", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png", "social-card-instagram") %}
 </div>
 
 </section>