twitch and tiktok hover effects

axum_server/styles/input.css

@@ -153,6 +153,13 @@ strong {
     @apply px-4 my-2 text-slate-950 mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
   }
 
+  ul {
+    @apply list-disc;
+  }
+  ol {
+    @apply list-decimal;
+  }
+
   iframe {
     @apply rounded shadow-md mx-auto lg:max-w-image;
   }
@@ -165,3 +172,104 @@ article a {
 .video-embed {
   @apply m-4 mx-auto max-w-image aspect-video;
 }
+
+.social-card-twitch:hover {
+  transform: translate3d(0.6rem, -0.6rem, 0px);
+  box-shadow: -3px 3px 0px 3px #6441a5;
+  transition-delay: 75ms;
+}
+
+.social-card-tiktok {
+  position: relative;
+
+  &:hover {
+    animation: tiktok-glitch 1.5s infinite;
+    animation-delay: 200ms;
+  }
+}
+
+@keyframes tiktok-glitch {
+  0% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0) skew(0deg, 0deg);
+  }
+
+  10% {
+    box-shadow:
+      -3px -3px 0 rgba(0, 255, 255, 0.8),
+      3px 3px 0 rgba(255, 0, 255, 0.8);
+    transform: translate(-1px, -1px) skew(-0.5deg, -0.5deg);
+  }
+
+  15% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.6),
+      -2px 2px 0 rgba(255, 0, 255, 0.6);
+    transform: translate(2px, -2px) skew(0.5deg, 0.5deg);
+  }
+
+  20% {
+    box-shadow:
+      -1px 1px 0 rgba(0, 255, 255, 0.4),
+      1px -1px 0 rgba(255, 0, 255, 0.4);
+    transform: translate(1px, 1px) scale(1.01);
+  }
+
+  25% {
+    box-shadow:
+      -4px 4px 0 rgba(0, 255, 255, 1),
+      4px -4px 0 rgba(255, 0, 255, 1);
+    transform: translate(-2px, 2px) skew(-0.5deg, -0.5deg);
+  }
+
+  30% {
+    box-shadow:
+      3px -3px 0 rgba(0, 255, 255, 0.5),
+      -3px 3px 0 rgba(255, 0, 255, 0.5);
+    transform: translate(3px, -3px) scale(0.99);
+  }
+
+  40% {
+    box-shadow:
+      -2px 2px 0 rgba(0, 255, 255, 0.9),
+      2px -2px 0 rgba(255, 0, 255, 0.9);
+    transform: translate(-1px, 1px) skew(0.5deg, 0.5deg);
+  }
+
+  50% {
+    box-shadow:
+      -1px -2px 0 rgba(0, 255, 255, 0.7),
+      2px -1px 0 rgba(255, 0, 255, 0.7);
+    transform: translate(1px, -1px) skew(-0.3deg, 0.3deg);
+  }
+
+  60% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.3),
+      -2px 2px 0 rgba(255, 0, 255, 0.3);
+    transform: translate(2px, -2px) scale(1.02);
+  }
+
+  75% {
+    box-shadow:
+      -3px 3px 0 rgba(0, 255, 255, 1),
+      3px -3px 0 rgba(255, 0, 255, 1);
+    transform: translate(-3px, 3px) skew(0.5deg, -0.5deg);
+  }
+
+  85% {
+    box-shadow:
+      -2px -2px 0 rgba(0, 255, 255, 0.2),
+      2px 2px 0 rgba(255, 0, 255, 0.2);
+    transform: translate(-2px, -2px) scale(0.98);
+  }
+
+  100% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0) skew(0deg, 0deg);
+  }
+}

axum_server/styles/output.css

@@ -658,18 +658,10 @@ video {
   float: inline-start;
 }
 
-.clear-left {
-  clear: left;
-}
-
 .clear-both {
   clear: both;
 }
 
-.m-0 {
-  margin: 0px;
-}
-
 .m-1 {
   margin: 0.25rem;
 }
@@ -722,11 +714,6 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -747,34 +734,14 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.mt-3 {
-  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;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -799,10 +766,6 @@ video {
   display: none;
 }
 
-.aspect-video {
-  aspect-ratio: 16 / 9;
-}
-
 .h-12 {
   height: 3rem;
 }
@@ -811,10 +774,6 @@ video {
   height: 1.5rem;
 }
 
-.h-64 {
-  height: 16rem;
-}
-
 .h-7 {
   height: 1.75rem;
 }
@@ -827,10 +786,6 @@ video {
   height: auto;
 }
 
-.h-\[236px\] {
-  height: 236px;
-}
-
 .max-h-\[236px\] {
   max-height: 236px;
 }
@@ -855,15 +810,14 @@ video {
   width: 180px;
 }
 
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .max-w-\[32rem\] {
   max-width: 32rem;
 }
 
+.max-w-\[392px\] {
+  max-width: 392px;
+}
+
 .max-w-maxindex {
   max-width: 100rem;
 }
@@ -876,22 +830,6 @@ video {
   max-width: 36rem;
 }
 
-.max-w-\[440px\] {
-  max-width: 440px;
-}
-
-.max-w-\[444px\] {
-  max-width: 444px;
-}
-
-.max-w-\[392px\] {
-  max-width: 392px;
-}
-
-.flex-1 {
-  flex: 1 1 0%;
-}
-
 .flex-grow {
   flex-grow: 1;
 }
@@ -910,18 +848,6 @@ video {
   grid-auto-flow: row;
 }
 
-.grid-flow-col {
-  grid-auto-flow: column;
-}
-
-.grid-cols-\[max-content_1fr\] {
-  grid-template-columns: max-content 1fr;
-}
-
-.grid-rows-\[max-content_1fr_max-content\] {
-  grid-template-rows: max-content 1fr max-content;
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -934,10 +860,6 @@ video {
   place-content: center;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .content-end {
   align-content: flex-end;
 }
@@ -946,10 +868,6 @@ video {
   align-items: center;
 }
 
-.items-stretch {
-  align-items: stretch;
-}
-
 .justify-end {
   justify-content: flex-end;
 }
@@ -966,10 +884,6 @@ video {
   gap: 0.5rem;
 }
 
-.gap-4 {
-  gap: 1rem;
-}
-
 .self-start {
   align-self: flex-start;
 }
@@ -978,10 +892,6 @@ video {
   align-self: center;
 }
 
-.overflow-hidden {
-  overflow: hidden;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1049,10 +959,6 @@ video {
   fill: #0b2746;
 }
 
-.p-0 {
-  padding: 0px;
-}
-
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -1828,6 +1734,12 @@ strong {
       font-weight: 400;
     }
   }
+  ul {
+    list-style-type: disc;
+  }
+  ol {
+    list-style-type: decimal;
+  }
   iframe {
     margin-left: auto;
     margin-right: auto;
@@ -1859,6 +1771,110 @@ article a:visited {
   max-width: min(70rem, 95vw);
 }
 
+.social-card-twitch:hover {
+  transform: translate3d(0.6rem, -0.6rem, 0px);
+  box-shadow: -3px 3px 0px 3px #6441a5;
+  transition-delay: 75ms;
+}
+
+.social-card-tiktok {
+  position: relative;
+  &:hover {
+    animation: tiktok-glitch 1.5s infinite;
+    animation-delay: 200ms;
+  }
+}
+
+@keyframes tiktok-glitch {
+  0% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0) skew(0deg, 0deg);
+  }
+
+  10% {
+    box-shadow:
+      -3px -3px 0 rgba(0, 255, 255, 0.8),
+      3px 3px 0 rgba(255, 0, 255, 0.8);
+    transform: translate(-1px, -1px) skew(-0.5deg, -0.5deg);
+  }
+
+  15% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.6),
+      -2px 2px 0 rgba(255, 0, 255, 0.6);
+    transform: translate(2px, -2px) skew(0.5deg, 0.5deg);
+  }
+
+  20% {
+    box-shadow:
+      -1px 1px 0 rgba(0, 255, 255, 0.4),
+      1px -1px 0 rgba(255, 0, 255, 0.4);
+    transform: translate(1px, 1px) scale(1.01);
+  }
+
+  25% {
+    box-shadow:
+      -4px 4px 0 rgba(0, 255, 255, 1),
+      4px -4px 0 rgba(255, 0, 255, 1);
+    transform: translate(-2px, 2px) skew(-0.5deg, -0.5deg);
+  }
+
+  30% {
+    box-shadow:
+      3px -3px 0 rgba(0, 255, 255, 0.5),
+      -3px 3px 0 rgba(255, 0, 255, 0.5);
+    transform: translate(3px, -3px) scale(0.99);
+  }
+
+  40% {
+    box-shadow:
+      -2px 2px 0 rgba(0, 255, 255, 0.9),
+      2px -2px 0 rgba(255, 0, 255, 0.9);
+    transform: translate(-1px, 1px) skew(0.5deg, 0.5deg);
+  }
+
+  50% {
+    box-shadow:
+      -1px -2px 0 rgba(0, 255, 255, 0.7),
+      2px -1px 0 rgba(255, 0, 255, 0.7);
+    transform: translate(1px, -1px) skew(-0.3deg, 0.3deg);
+  }
+
+  60% {
+    box-shadow:
+      2px -2px 0 rgba(0, 255, 255, 0.3),
+      -2px 2px 0 rgba(255, 0, 255, 0.3);
+    transform: translate(2px, -2px) scale(1.02);
+  }
+
+  75% {
+    box-shadow:
+      -3px 3px 0 rgba(0, 255, 255, 1),
+      3px -3px 0 rgba(255, 0, 255, 1);
+    transform: translate(-3px, 3px) skew(0.5deg, -0.5deg);
+  }
+
+  85% {
+    box-shadow:
+      -2px -2px 0 rgba(0, 255, 255, 0.2),
+      2px 2px 0 rgba(255, 0, 255, 0.2);
+    transform: translate(-2px, -2px) scale(0.98);
+  }
+
+  100% {
+    box-shadow:
+      0px 0px 0 rgba(0, 255, 255, 0),
+      0px 0px 0 rgba(255, 0, 255, 0);
+    transform: translate(0, 0) skew(0deg, 0deg);
+  }
+}
+
+.visited\:text-blue-950:visited {
+  color: rgb(11 39 70 );
+}
+
 .visited\:text-purple-700:visited {
   color: rgb(68 30 115 );
 }
@@ -1886,14 +1902,14 @@ article a:visited {
     margin-bottom: 1rem;
   }
 
-  .sm\:ml-0 {
-    margin-left: 0px;
-  }
-
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
 
+  .sm\:ml-0 {
+    margin-left: 0px;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -1934,10 +1950,6 @@ article a:visited {
     display: grid;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:h-16 {
     height: 4rem;
   }

axum_server/templates/components/social_card.html

@@ -1,15 +1,14 @@
-{% macro social_card_start(svg, heading, img) %}
+{% macro social_card_start(svg, url, heading, img, class) %}
 
-<section class="border rounded-md bg-pink-200 m-4 p-4 max-w-[392px]">
+<a href="{{url}}" class="block no-underline border rounded-md bg-pink-200 m-4 p-4 max-w-[392px] {{class}}">
 	<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>
+		<h3 class="text-lg font-medium mb-1 text-blue-950 visited:text-blue-950">{{heading|safe}}</h3>
 	</header>
 	{% let alt_text = format!("{svg} thumbnail") %}
 
 	{{ 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 }}
-
+</a>
-</section>
 {% endmacro %}

axum_server/templates/sections/social.html

@@ -1,14 +1,14 @@
 <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/twitch_wo.png") %}
+{% call sc::social_card_start("twitch", "https://twitch.tv/michalvankodev", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/twitch_wo.png", "social-card-twitch") %}
 
-{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>", "images/social/tiktok_wo.png") %}
+{% 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", "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", "") %}
 
 <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") %}
+{% call sc::social_card_start("instagram", "https://www.instagram.com/michalvankodev/", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png", "") %}
 </div>
 
 </section>