michalvankodev/michalvankodev-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

twitch and tiktok hover effects
Some checks failed
test / cargo test (push) Failing after 1m5s
Details

Browse Source
This commit is contained in:
Michal Vanko
2024-09-26 14:12:55 +02:00
parent dc1a01c352
commit 221d5cef23
4 changed files with 238 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
axum_server/templates/components/social_card.html
View File

@ -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 }}
</section>
</a>
{% endmacro %}

8
axum_server/templates/sections/social.html
View File

@ -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>