sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

WIP: convert mastodon embeds to static html

Browse source
This commit is contained in:
a 2021-12-29 23:58:24 -06:00
parent 8143834ec5
commit 12391eb7f1
2 changed files with 56 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
assets/scss/components/praise.scss
View file

@ -1,4 +1,5 @@
#praise { #praise {
--color: green;
.testimonials { .testimonials {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -19,7 +20,9 @@
width: 4em; width: 4em;
height: 4em; height: 4em;
border-radius: 100em; border-radius: 100em;
background: #212121; background: white;
padding: 2px;
border: 2px solid var(--color);
} }
.name { .name {
grid-area: n; grid-area: n;
@ -27,7 +30,7 @@
} }
.bubble { .bubble {
grid-area: b; grid-area: b;
background: #212121; background: var(--color);
color: white; color: white;
padding: 0.5em; padding: 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
@ -47,7 +50,7 @@
width: 0; width: 0;
height: 0; height: 0;
border: 0.5em solid transparent; border: 0.5em solid transparent;
border-top-color: #212121; border-top-color: var(--color);
bottom: -1em; bottom: -1em;
left:2.5em; left:2.5em;
} }

51
content/work/mastodon/index.html
View file

@ -40,7 +40,7 @@ cover: "/images/cover/mastodocs.jpg"
and get this gig out of nowhere:</p> and get this gig out of nowhere:</p>
<div class="conversation"> <div class="conversation">
<!--
<iframe src="https://mastodon.social/@Gargron/102640868158739158/embed" class="mastodon-embed" <iframe src="https://mastodon.social/@Gargron/102640868158739158/embed" class="mastodon-embed"
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe> style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
<script src="https://mastodon.social/embed.js" async="async"></script> <script src="https://mastodon.social/embed.js" async="async"></script>
@ -52,6 +52,55 @@ cover: "/images/cover/mastodocs.jpg"
<iframe src="https://mastodon.social/@Gargron/102641022258942590/embed" class="mastodon-embed" <iframe src="https://mastodon.social/@Gargron/102641022258942590/embed" class="mastodon-embed"
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe> style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
<script src="https://mastodon.social/embed.js" async="async"></script> <script src="https://mastodon.social/embed.js" async="async"></script>
-->
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
<img src="/images/people/gargron.jpg" width=48 height=48 alt="Gargron's avatar" style="border-radius: 4px; margin-right: 10px; width: 48px; height: 48px;">
<div style="line-height: 1.5">
<div style="font-weight: 500;">Eugen</div>
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
</div>
</a>
<div style="font-size: 19px; line-height: 24px;">
<p style="margin-bottom: 25px;">
I really want the Mastodon documentation to have a good structure rather than just all information thrown together in a pile. I'm not sure how though.
</p>
<a target="_blank" href="https://mastodon.social/@Gargron/102640868158739158" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 7:42 PM</a>
</div>
</article>
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
<a target="_blank" href="https://mastodon.social/@trwnh" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
<img src="/images/people/avatar.png" width=48 height=48 alt="trwnh's avatar" style="border-radius: 4px; margin-right: 10px; width: 48px; height: 48px;">
<div style="line-height: 1.5">
<div style="font-weight: 500;">infinite love ⴳ</div>
<div style="color: #d9e1e8">@trwnh@mastodon.social</div>
</div>
</a>
<div style="font-size: 19px; line-height: 24px;">
<p style="margin-bottom: 25px;">
<a style="color: #d9e1e8" href="https://mastodon.social/@Gargron">@Gargron</a> i'd be willing to take a stab at it, having just cleaned up a lot of docs for pixelfed. it's still incomplete but it's much less messy than it used to be. i would need to sit down and try to map it out with you first, though.
</p>
<a target="_blank" href="https://mastodon.social/@trwnh/102640952580526770" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:04 PM</a>
</div>
</article>
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff;">
<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
<img src="/images/people/gargron.jpg" width=48 height=48 alt="Gargron's avatar" style="border-radius: 4px; margin-right: 10px; width: 48px; height: 48px;">
<div style="line-height: 1.5">
<div style="font-weight: 500;">Eugen</div>
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
</div>
</a>
<div style="font-size: 19px; line-height: 24px;">
<p style="margin-bottom: 25px;">
<a style="color: #d9e1e8" href="https://mastodon.social/@trwnh">@trwnh</a> Okay, let's do it. Paid, of course.
</p>
<a target="_blank" href="https://mastodon.social/@Gargron/102641022258942590" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:21 PM</a>
</div>
</article>
</div> </div>