From 221d5cef23167db076c3373c773b5842a5376113 Mon Sep 17 00:00:00 2001 From: Michal Vanko Date: Thu, 26 Sep 2024 14:12:55 +0200 Subject: [PATCH] twitch and tiktok hover effects --- axum_server/styles/input.css | 108 ++++++++ axum_server/styles/output.css | 232 +++++++++--------- .../templates/components/social_card.html | 9 +- axum_server/templates/sections/social.html | 8 +- 4 files changed, 238 insertions(+), 119 deletions(-) diff --git a/axum_server/styles/input.css b/axum_server/styles/input.css index 74d6e25..cf2b895 100644 --- a/axum_server/styles/input.css +++ b/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); + } +} diff --git a/axum_server/styles/output.css b/axum_server/styles/output.css index f00d7a0..4abe02f 100644 --- a/axum_server/styles/output.css +++ b/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; } diff --git a/axum_server/templates/components/social_card.html b/axum_server/templates/components/social_card.html index 91f0be3..fd0d8fa 100644 --- a/axum_server/templates/components/social_card.html +++ b/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) %} -
+
-

{{heading|safe}}

+

{{heading|safe}}

{% 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 }} - -
+ {% endmacro %} diff --git a/axum_server/templates/sections/social.html b/axum_server/templates/sections/social.html index 5ffdf7e..e4c3b60 100644 --- a/axum_server/templates/sections/social.html +++ b/axum_server/templates/sections/social.html @@ -1,14 +1,14 @@

Socials

-{% call sc::social_card_start("twitch", "I stream (almost) regularly on twitch.tv", "images/social/twitch_wo.png") %} +{% call sc::social_card_start("twitch", "https://twitch.tv/michalvankodev", "I stream (almost) regularly on twitch.tv", "images/social/twitch_wo.png", "social-card-twitch") %} -{% call sc::social_card_start("tiktok", "Highlights can be found on TikTok", "images/social/tiktok_wo.png") %} +{% call sc::social_card_start("tiktok", "https://www.tiktok.com/@michalvankodev","Highlights can be found on TikTok", "images/social/tiktok_wo.png", "social-card-tiktok") %} -{% call sc::social_card_start("youtube", "Videos and vlogs posted on YouTube", "images/social/youtube_wo.png") %} +{% call sc::social_card_start("youtube", "https://www.youtube.com/@michalvankodev", "Videos and vlogs posted on YouTube", "images/social/youtube_wo.png", "") %}
-{% call sc::social_card_start("instagram", "Photos and stories shared on Instagram", "images/social/instagram_plain.png") %} +{% call sc::social_card_start("instagram", "https://www.instagram.com/michalvankodev/", "Photos and stories shared on Instagram", "images/social/instagram_plain.png", "") %}