Social embeds - need rework
This commit is contained in:
parent
b3134c249e
commit
65bb29f36b
@ -1,5 +1,5 @@
|
||||
/*
|
||||
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
|
||||
! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
|
||||
*/
|
||||
|
||||
/*
|
||||
@ -558,6 +558,10 @@ video {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
@ -570,15 +574,6 @@ video {
|
||||
margin: 1.25rem;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.mx-0 {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx-0\.5 {
|
||||
margin-left: 0.125rem;
|
||||
margin-right: 0.125rem;
|
||||
@ -628,6 +623,10 @@ video {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
@ -640,10 +639,6 @@ video {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@ -668,6 +663,10 @@ video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aspect-video {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0px;
|
||||
}
|
||||
@ -680,34 +679,18 @@ video {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-4 {
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
.h-64 {
|
||||
height: 16rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -716,14 +699,6 @@ video {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.w-4 {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-7 {
|
||||
width: 1.75rem;
|
||||
}
|
||||
@ -768,14 +743,14 @@ video {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -825,24 +800,14 @@ 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 {
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(252 231 243 / var(--tw-bg-opacity));
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.fill-blue-950 {
|
||||
|
||||
@ -12,5 +12,4 @@
|
||||
|
||||
{% macro social_card_end() %}
|
||||
</section>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
<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>
|
||||
<div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div>
|
||||
<script type="text/javascript">
|
||||
var options = {
|
||||
width: "100%",
|
||||
@ -78,10 +78,10 @@
|
||||
</script>
|
||||
{% call sc::social_card_end() %}
|
||||
|
||||
{% call sc::social_card_start("tiktok", "Highlight can be found on <em>TikTok</em>") %}
|
||||
{% call sc::social_card_start("tiktok", "Highlights 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"
|
||||
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"
|
||||
@ -94,6 +94,26 @@
|
||||
</blockquote>
|
||||
<script async src="https://www.tiktok.com/embed.js"></script>
|
||||
{% call sc::social_card_end() %}
|
||||
|
||||
{% 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("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() %}
|
||||
|
||||
</section>
|
||||
|
||||
<section class="twitch-stream-promo">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user