Socials tiktok and twitch
This commit is contained in:
parent
eed3644356
commit
b3134c249e
@ -570,6 +570,10 @@ video {
|
||||
margin: 1.25rem;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.mx-0 {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
@ -610,16 +614,16 @@ video {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.my-6 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.my-5 {
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.my-6 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@ -636,6 +640,10 @@ video {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@ -672,10 +680,34 @@ video {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-7 {
|
||||
height: 1.75rem;
|
||||
}
|
||||
|
||||
.h-64 {
|
||||
height: 16rem;
|
||||
}
|
||||
|
||||
.min-h-full {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.min-h-8 {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
.min-h-80 {
|
||||
min-height: 20rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
@ -684,42 +716,30 @@ video {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.auto-cols-auto {
|
||||
grid-auto-columns: auto;
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-7 {
|
||||
width: 1.75rem;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.grid-flow-col {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
|
||||
grid-template-columns: minmax(0,1fr) auto;
|
||||
}
|
||||
|
||||
.grid-cols-\[1fr\2c 2fx\] {
|
||||
grid-template-columns: 1fr 2fx;
|
||||
}
|
||||
|
||||
.grid-cols-\[1fr_2fx\] {
|
||||
grid-template-columns: 1fr 2fx;
|
||||
}
|
||||
|
||||
.grid-cols-\[1fr_2fr\] {
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
|
||||
.grid-rows-3 {
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
@ -752,6 +772,14 @@ video {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
@ -760,6 +788,10 @@ video {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
@ -793,11 +825,26 @@ video {
|
||||
background-color: rgb(30 64 175 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(244 114 182 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-pink-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 231 243 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.fill-blue-950 {
|
||||
fill: #172554;
|
||||
}
|
||||
@ -814,6 +861,10 @@ video {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
@ -833,6 +884,10 @@ video {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
@ -867,6 +922,10 @@ video {
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-extrabold {
|
||||
font-weight: 800;
|
||||
}
|
||||
@ -879,10 +938,6 @@ video {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
16
axum_server/templates/components/social_card.html
Normal file
16
axum_server/templates/components/social_card.html
Normal file
@ -0,0 +1,16 @@
|
||||
{% macro social_card_start(svg, heading) %}
|
||||
|
||||
<section class="border rounded-md bg-pink-200 m-4 p-4">
|
||||
<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>
|
||||
|
||||
{% endmacro %}
|
||||
|
||||
{% macro social_card_end() %}
|
||||
</section>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
@ -1,4 +1,5 @@
|
||||
{%- import "components/talent_card.html" as tc -%}
|
||||
{%- import "components/social_card.html" as sc -%}
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Introduction{% endblock %}
|
||||
@ -39,7 +40,7 @@
|
||||
|
||||
<section id="blog">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5">Blog</h2>
|
||||
<section id="tags">
|
||||
<section id="blog-tags">
|
||||
<ul class="mx-5">
|
||||
{% for tag in blog_tags %}
|
||||
<li class="inline-block mx-0.5 p-0.5">
|
||||
@ -60,21 +61,56 @@
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="socials">
|
||||
<h2 class="text-blue-950 font-semibold text-2xl m-5">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 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", "Highlight can be found on <em>TikTok</em>") %}
|
||||
<!-- STYLES needed to overwrite tiktok embed css -->
|
||||
<blockquote
|
||||
class="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>
|
||||
|
||||
<section class="twitch-stream-promo">
|
||||
<h2>Follow my twitch stream</h2>
|
||||
<div class="twitch-embed">
|
||||
<div class="twitch-video">
|
||||
<iframe
|
||||
title="My twitch channel"
|
||||
src="https://player.twitch.tv/?channel=michalvankodev&parent=michalvanko.dev&parent=localhost&autoplay=false"
|
||||
loading="lazy"
|
||||
frameborder="0"
|
||||
scrolling="no"
|
||||
allowfullscreen
|
||||
height="100%"
|
||||
width="100%"
|
||||
class="embed"
|
||||
/>
|
||||
<!-- <iframe -->
|
||||
<!-- title="My twitch channel" -->
|
||||
<!-- src="https://player.twitch.tv/?channel=michalvankodev&parent=michalvanko.dev&parent=localhost&autoplay=false" -->
|
||||
<!-- loading="lazy" -->
|
||||
<!-- frameborder="0" -->
|
||||
<!-- scrolling="no" -->
|
||||
<!-- allowfullscreen -->
|
||||
<!-- height="100%" -->
|
||||
<!-- width="100%" -->
|
||||
<!-- class="embed" -->
|
||||
<!-- /> -->
|
||||
</div>
|
||||
<aside>
|
||||
Come hang out and chat with me <strong>every Tuesday and Thursday</strong>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user