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

holy shit the responsiveness
Some checks failed
test / cargo test (push) Failing after 1m24s
Details

Browse Source
This commit is contained in:
Michal Vanko
2024-09-25 12:55:05 +02:00
parent fc26d77bfc
commit 1eb0f55264
9 changed files with 140 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
axum_server/templates/components/blog_post_preview.html
View File

@ -1,8 +1,8 @@
<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8 break-inside-avoid">
<aside class="row-span-3 self-center">
<article class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none">
<aside class="row-span-3 self-center float-start sm:float-none mr-3 mb-3 sm:ml-0 sm:mb-0">
{% match post.metadata.thumbnail %}
{% when Some with (orig_path) %}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", None, true).unwrap_or("thumbnail not found".to_string())|safe }}
{% when None %}
<div>
{% include "components/blog_post_default_thumbnail.html" %}
@ -15,7 +15,7 @@
</h3>
</header>
<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
<footer class="text-sm md:text-base lg:text-lg">
<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0">
<ul class="inline-block">
{% for tag in post.metadata.tags %}
<li class="inline-block">

2
axum_server/templates/components/project_preview_card.html
View File

@ -18,7 +18,7 @@
{% match project.metadata.cover_image %}
{% when Some with (source) %}
{% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", true).unwrap_or("cover not found".to_string()) %}
{% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", Some("max-h-[236px]"), true).unwrap_or("cover not found".to_string()) %}
<figure class="mx-4 my-2 flex justify-center">
{% match project.metadata.link %}
{% when Some with (href) %}

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

@ -1,15 +1,15 @@
{% macro social_card_start(svg, heading) %}
{% macro social_card_start(svg, heading, img) %}
<section class="border rounded-md bg-pink-200 m-4 p-4">
<section class="border rounded-md bg-pink-200 m-4 p-4 w-fit">
<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>
</header>
{% let alt_text = format!("{svg} thumbnail") %}
{% endmacro %}
{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 420, 200, alt_text, Some("h-auto"), true).unwrap_or("thumbnail not found".to_string())|safe }}
{% macro social_card_end() %}
</section>
</section>
{% endmacro %}

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

@ -1,52 +1,12 @@
<h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
<!-- <script type="text/javascript"> -->
<!-- var options = { -->
<!-- width: "100%", -->
<!-- height: "100%", -->
<!-- channel: "michalvankodev", -->
<!-- parent: ["localhost"] -->
<!-- }; -->
<!-- var player = new Twitch.Player("twitch-player", options); -->
<!-- player.setVolume(0.5); -->
</script>
{% call sc::social_card_end() %}
{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
<!-- STYLES needed to overwrite tiktok embed css -->
<!-- <blockquote -->
<!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
<!-- cite="https://www.tiktok.com/@michalvankodev" -->
<!-- data-unique-id="michalvankodev" -->
<!-- data-embed-from="embed_page" -->
<!-- data-embed-type="creator" -->
<!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
<!-- > -->
<!-- <section> -->
<!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
<!-- </section> -->
<!-- </blockquote> -->
<!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
{% call sc::social_card_end() %}
<section class="flex flex-col items-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("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
<!-- TODO create our own youtube widget which will populate this window on build -->
<!-- <iframe -->
<!-- class="h-64 aspect-video" -->
<!-- id="ytplayer" -->
<!-- type="text/html" -->
<!-- width="100%" -->
<!-- height="100%" -->
<!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
<!-- frameborder="0" -->
<!-- allowfullscreen -->
<!-- ></iframe> -->
{% call sc::social_card_end() %}
{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>", "images/social/instagram_plain.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("instagram", "Photos and stories shared on <em>Instagram</em>") %}
<!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
{% call sc::social_card_end() %}
{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png") %}
</section>