This commit is contained in:
parent
dc1a01c352
commit
221d5cef23
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user