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

move stuff to shortcodes

Browse source
This commit is contained in:
a 2021-12-30 02:50:22 -06:00
parent ea37011f7f
commit c421a6c5e7
15 changed files with 167 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scss/components/button.scss
View file

@ -51,7 +51,7 @@
} }
&:hover { &:hover {
background: var(--primary-accent-transparent);
} }
&:active { &:active {

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

@ -23,6 +23,7 @@
background: white; background: white;
padding: 2px; padding: 2px;
border: 2px solid var(--color); border: 2px solid var(--color);
img {width: 100%; height: 100%; border-radius: 100em;}
} }
.name { .name {
grid-area: n; grid-area: n;

9
assets/scss/content/work/go-fed.scss
View file

@ -78,6 +78,9 @@
font-weight: 700; font-weight: 700;
} }
} }
picture {
display: contents;
}
img { img {
width: 3em; width: 3em;
height: 3em; height: 3em;
@ -122,6 +125,10 @@
#hugo { #hugo {
background: $hugo-bg; background: $hugo-bg;
color: $hugo-text; color: $hugo-text;
.quote {
background: $go-bg;
color: $hugo-text;
}
.quote:before, .quote:after {color: $go-gopher}
} }
} }

6
assets/scss/content/work/mastodon.scss
View file

@ -326,7 +326,8 @@
margin-bottom: 1em; margin-bottom: 1em;
} }
img { img {
width: 41em; width: 100%;
height: 100%;
margin: 0 auto; margin: 0 auto;
max-width: 100%; max-width: 100%;
} }
@ -347,6 +348,9 @@
background: transparent; background: transparent;
border: 2px solid white; border: 2px solid white;
color: white; color: white;
&:hover {
background: rgba(255,255,255,0.2);
}
} }
&.email { &.email {
} }

205
content/work/go-fed/index.html
View file

@ -28,7 +28,9 @@ cover: "/images/cover/go-fed.png"
<!--iframe src="https://mastodon.technology/@cj/105345893037769051/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe--> <!--iframe src="https://mastodon.technology/@cj/105345893037769051/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe-->
<article style="padding: 1em; background: #122e43; color: #fff;"> <article style="padding: 1em; background: #122e43; color: #fff;">
<a target="_blank" href="https://mastodon.technology/@cj" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;"> <a target="_blank" href="https://mastodon.technology/@cj" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
<img src="/images/people/cj.jpg" width=48 height=48 alt="cj's avatar" style="border-radius: 4px; margin-right: 10px; width: 48px; height: 48px;"> <div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
{{< people/cj >}}
</div>
<div style="line-height: 1.5"> <div style="line-height: 1.5">
<div style="font-weight: 500;">cj🇺🇸🇨🇭</div> <div style="font-weight: 500;">cj🇺🇸🇨🇭</div>
<div>@cj@mastodon.technology</div> <div>@cj@mastodon.technology</div>
@ -66,48 +68,54 @@ cover: "/images/cover/go-fed.png"
<h2 class="title">analyzing the old design</h2> <h2 class="title">analyzing the old design</h2>
<blockquote class="quote">[The current] design is "yep, it has color".</blockquote> <blockquote class="quote">[The current] design is "yep, it has color".</blockquote>
<div class="attribution"> <div class="attribution">
<img src="/images/people/cj.jpg" alt="CJ's avatar" width=32 height=32> {{< people/cj >}}
<cite><em>CJ Slep</em><br>Go-Fed<br>author</cite> <cite><em>CJ Slep</em><br>Go-Fed<br>author</cite>
</div> </div>
<div class="mobile device-gallery pswp-gallery"> <div class="mobile device-gallery pswp-gallery">
<figure> {{< device
<a class="smartphone" href="old-320-home.png" data-size="320x480"> frame="smartphone"
<img src="old-320-home.png" alt="The old homepage layout at mobile widths"> src="old-320-home.png"
</a> size="320x480"
<figcaption>Padding and margins were not well-defined, as can be seen by the title and the navigation menu.</figcaption> alt="The old homepage layout at mobile widths"
</figure> caption="Padding and margins were not well-defined, as can be seen by the title and the navigation menu."
<figure> >}}
<a class="smartphone" href="old-320-margins.png" data-size="320x480"> {{< device
<img src="old-320-margins.png" alt="A narrow column of content with too-wide margins"> frame="smartphone"
</a> src="old-320-margins.png"
<figcaption>Percentage widths meant that there was too little space used on mobile by actual content.</figcaption> size="320x480"
</figure> alt="A narrow column of content with too-wide margins"
<figure> caption="Percentage widths meant that there was too little space used on mobile by actual content."
<a class="smartphone" href="old-320-overflow.png" data-size="320x480"> >}}
<img src="old-320-overflow.png" alt="An overflowing footer and video player"> {{< device
</a> frame="smartphone"
<figcaption>Many elements would overflow out of their containers, such as the video player and the footer text.</figcaption> src="old-320-overflow.png"
</figure> size="320x480"
alt="An overflowing footer and video player"
caption="Many elements would overflow out of their containers, such as the video player and the footer text."
>}}
</div> </div>
<div class="desktop device-gallery pswp-gallery"> <div class="desktop device-gallery pswp-gallery">
<figure> {{< device
<a class="laptop" href="old-1280-home.png" data-size="1280x720"> frame="laptop"
<img src="old-1280-home.png" alt=""> src="old-1280-home.png"
</a> size="1280x720"
<figcaption>The </figcaption> alt=""
</figure> caption=""
<figure> >}}
<a class="laptop" href="old-1280-lineheight.png" data-size="1280x720"> {{< device
<img src="old-1280-lineheight.png" alt=""> frame="laptop"
</a> src="old-1280-lineheight.png"
<figcaption>Line height was set too tightly, causing lines with padding to overlap each other.</figcaption> size="1280x720"
</figure> alt=""
<figure> caption="Line height was set too tightly, causing lines with padding to overlap each other."
<a class="laptop" href="old-1280-nosidebar.png" data-size="1280x720"> >}}
<img src="old-1280-nosidebar.png" alt=""> {{< device
</a> frame="laptop"
<figcaption>Even though there is extra width to work with, the layout uses only one column.</figcaption> src="old-1280-nosidebar.png"
</figure> size="1280x720"
alt=""
caption="Even though there is extra width to work with, the layout uses only one column."
>}}
</div> </div>
</div> </div>
</section> </section>
@ -115,66 +123,75 @@ cover: "/images/cover/go-fed.png"
<div class="container"> <div class="container">
<h2 class="title">after the redesign</h2> <h2 class="title">after the redesign</h2>
<div class="mobile device-gallery pswp-gallery"> <div class="mobile device-gallery pswp-gallery">
<figure> {{< device
<a class="smartphone" href="new-320-backtotop.png" data-size="320x480"> frame="smartphone"
<img src="new-320-backtotop.png" alt=""> src="new-320-backtotop.png"
</a> size="320x480"
<figcaption></figcaption> alt=""
</figure> caption=""
<figure> >}}
<a class="smartphone" href="new-320-fluid.png" data-size="320x480"> {{< device
<img src="new-320-fluid.png" alt=""> frame="smartphone"
</a> src="new-320-fluid.png"
<figcaption></figcaption> size="320x480"
</figure> alt=""
<figure> caption=""
<a class="smartphone" href="new-320-footer.png" data-size="320x480"> >}}
<img src="new-320-footer.png" alt=""> {{< device
</a> frame="smartphone"
<figcaption></figcaption> src="new-320-footer.png"
</figure> size="320x480"
alt=""
caption=""
>}}
</div> </div>
<div class="desktop device-gallery pswp-gallery"> <div class="desktop device-gallery pswp-gallery">
<figure> {{< device
<a class="laptop" href="new-1280-home1.png" data-size="1280x720"> frame="laptop"
<img src="new-1280-home1.png" alt=""> src="new-1280-home1.png"
</a> size="1280x720"
<figcaption>The new homepage immediately informs the visitor exactly what the project is and what they can do with it.</figcaption> alt=""
</figure> caption="The new homepage immediately informs the visitor exactly what the project is and what they can do with it."
<figure> >}}
<a class="laptop" href="new-1280-home2.png" data-size="1280x720"> {{< device
<img src="new-1280-home2.png" alt=""> frame="laptop"
</a> src="new-1280-home2.png"
<figcaption></figcaption> size="1280x720"
</figure> alt=""
<figure> caption=""
<a class="laptop" href="new-1280-home3.png" data-size="1280x720"> >}}
<img src="new-1280-home3.png" alt=""> {{< device
</a> frame="laptop"
<figcaption></figcaption> src="new-1280-home3.png"
</figure> size="1280x720"
<figure> alt=""
<a class="laptop" href="new-1280-home4.png" data-size="1280x720"> caption=""
<img src="new-1280-home4.png" alt=""> >}}
</a> {{< device
<figcaption></figcaption> frame="laptop"
</figure> src="new-1280-home4.png"
<figure> size="1280x720"
<a class="laptop" href="new-1280-page1.png" data-size="1280x720"> alt=""
<img src="new-1280-page1.png" alt=""> caption=""
</a> >}}
<figcaption></figcaption> {{< device
</figure> frame="laptop"
<figure> src="new-1280-page1.png"
<a class="laptop" href="new-1280-sidebar.png" data-size="1280x720"> size="1280x720"
<img src="new-1280-sidebar.png" alt=""> alt=""
</a> caption=""
<figcaption></figcaption> >}}
</figure> {{< device
frame="laptop"
src="new-1280-sidebar.png"
size="1280x720"
alt=""
caption=""
>}}
</div> </div>
<blockquote class="quote">Woo, looking super nice! :D Looks amazing! :D</blockquote> <blockquote class="quote">Woo, looking super nice! :D Looks amazing! :D</blockquote>
<div class="attribution"> <div class="attribution">
<img src="/images/people/cj.jpg" alt="CJ's avatar" width=32 height=32> {{< people/cj >}}
<cite><em>CJ Slep</em><br>Go-Fed<br>author</cite> <cite><em>CJ Slep</em><br>Go-Fed<br>author</cite>
</div> </div>
</div> </div>
@ -184,7 +201,7 @@ cover: "/images/cover/go-fed.png"
<h2 class="title">rebuilding on a more manageable tech stack</h2> <h2 class="title">rebuilding on a more manageable tech stack</h2>
<blockquote class="quote">The backend is similarly a gigantic single golang template, a nightmare.</blockquote> <blockquote class="quote">The backend is similarly a gigantic single golang template, a nightmare.</blockquote>
<div class="attribution"> <div class="attribution">
<img src="/images/people/cj.jpg" alt="CJ's avatar" width=32 height=32> {{< people/cj >}}
<cite><em>CJ Slep</em><br>Go-Fed<br>author</cite> <cite><em>CJ Slep</em><br>Go-Fed<br>author</cite>
</div> </div>
</div> </div>

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

@ -74,7 +74,9 @@ cover: "/images/cover/mastodocs.jpg"
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;"> <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;"> <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="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
{{< people/trwnh >}}
</div>
<div style="line-height: 1.5"> <div style="line-height: 1.5">
<div style="font-weight: 500;">infinite love ⴳ</div> <div style="font-weight: 500;">infinite love ⴳ</div>
<div style="color: #d9e1e8">@trwnh@mastodon.social</div> <div style="color: #d9e1e8">@trwnh@mastodon.social</div>
@ -449,11 +451,11 @@ cover: "/images/cover/mastodocs.jpg"
<section class="section" id="cta"> <section class="section" id="cta">
<div class="container"> <div class="container">
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2> <h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
<img src="/images/cover/mastodocs.jpg" alt="Mastodon documentation landing page"> <img src="/images/cover/mastodocs.jpg" alt="Mastodon documentation landing page" width=1280 height=720>
<div class="buttons"> <div class="buttons">
<a href="https://docs.joinmastodon.org" class="demo button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>Check out the live <a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>Check out the live
version</a> version</a>
<a href="mailto:a@trwnh.com" class="email button primary"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg>Email me a proposal</a> <a href="mailto:a@trwnh.com" class="email primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg>Email me a proposal</a>
</div> </div>
</div> </div>
</section> </section>

6
layouts/shortcodes/device.html Normal file
View file

@ -0,0 +1,6 @@
<figure>
<a class='{{ .Get "frame" }}' href='{{ .Get "src" }}' data-size='{{ .Get "size" }}'>
<img src='{{ .Get "src" }}' alt='{{ .Get "alt" }}'>
</a>
<figcaption>{{ .Get "caption" }}</figcaption>
</figure>

5
layouts/shortcodes/people/cj.html Normal file
View file

@ -0,0 +1,5 @@
<picture>
<source srcset="/images/people/cj.avif" type="image/avif">
<source srcset="/images/people/cj.webp" type="image/webp">
<img src="/images/people/cj.jpg" alt="cj's avatar" width=48 height=48 class="avatar">
</picture>

5
layouts/shortcodes/people/dansup.html Normal file
View file

@ -0,0 +1,5 @@
<picture>
<source srcset="/images/people/dansup.avif" type="image/avif">
<source srcset="/images/people/dansup.webp" type="image/webp">
<img src="/images/people/dansup.jpg" alt="dansup's avatar" width=48 height=48 class="avatar">
</picture>

2
layouts/shortcodes/people/gargron.html
View file

@ -1,5 +1,5 @@
<picture> <picture>
<source srcset="/images/people/gargron.avif" type="image/avif"> <source srcset="/images/people/gargron.avif" type="image/avif">
<source srcset="/images/people/gargron.webp" type="image/webp"> <source srcset="/images/people/gargron.webp" type="image/webp">
<img src="/images/people/gargron.jpg" alt="Gargron's avatar" width=48 height=48> <img src="/images/people/gargron.jpg" alt="Gargron's avatar" width=48 height=48 class="avatar">
</picture> </picture>

5
layouts/shortcodes/people/khalil.html Normal file
View file

@ -0,0 +1,5 @@
<picture>
<source srcset="/images/people/khalil.avif" type="image/avif">
<source srcset="/images/people/khalil.webp" type="image/webp">
<img src="/images/people/khalil.jpg" alt="Khalil Saadiq's avatar" width=48 height=48 class="avatar">
</picture>

5
layouts/shortcodes/people/trwnh.html Normal file
View file

@ -0,0 +1,5 @@
<picture>
<source srcset="/images/people/avatar.avif" type="image/avif">
<source srcset="/images/people/avatar.webp" type="image/webp">
<img src="/images/people/avatar.png" alt="trwnh's avatar" width=48 height=48 class="avatar">
</picture>

5
layouts/shortcodes/picture.html Normal file
View file

@ -0,0 +1,5 @@
<picture>
<source srcset='{{ .Get "name" }}.avif' type="image/avif">
<source srcset='{{ .Get "name" }}.webp' type="image/webp">
<img src='{{ .Get "name" }}.{{ .Get "type"}}' alt='{{ .Get "alt" }}'>
</picture>

0
layouts/shortcodes/smartphone.html
View file

6
layouts/work/list.html
View file

@ -29,17 +29,17 @@
<h2 class="title"><a href="#praise">#</a>what others have said:</h2> <h2 class="title"><a href="#praise">#</a>what others have said:</h2>
<div class="testimonials"> <div class="testimonials">
<div class="testimonial"> <div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/people/khalil.jpg"> {{ template "shortcodes/people/khalil.html" . }}
<p class="name">Khalil Saadiq,<br>former classmate</p> <p class="name">Khalil Saadiq,<br>former classmate</p>
<blockquote class="bubble">it's scary how much you know.</blockquote> <blockquote class="bubble">it's scary how much you know.</blockquote>
</div> </div>
<div class="testimonial"> <div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/people/gargron.jpg"> {{ template "shortcodes/people/gargron.html" . }}
<p class="name">Eugen Rochko,<br>Mastodon developer</p> <p class="name">Eugen Rochko,<br>Mastodon developer</p>
<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote> <blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
</div> </div>
<div class="testimonial"> <div class="testimonial">
<img class="avatar" width=32 height=32 src="/images/people/dansup.jpg"> {{ template "shortcodes/people/dansup.html" . }}
<p class="name">Daniel Supernault,<br>Pixelfed developer</p> <p class="name">Daniel Supernault,<br>Pixelfed developer</p>
<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote> <blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
</div> </div>