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 {
background: var(--primary-accent-transparent);
}
&:active {

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

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

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

@ -78,6 +78,9 @@
font-weight: 700;
}
}
picture {
display: contents;
}
img {
width: 3em;
height: 3em;
@ -122,6 +125,10 @@
#hugo {
background: $hugo-bg;
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;
}
img {
width: 41em;
width: 100%;
height: 100%;
margin: 0 auto;
max-width: 100%;
}
@ -347,6 +348,9 @@
background: transparent;
border: 2px solid white;
color: white;
&:hover {
background: rgba(255,255,255,0.2);
}
}
&.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-->
<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;">
<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="font-weight: 500;">cj🇺🇸🇨🇭</div>
<div>@cj@mastodon.technology</div>
@ -66,48 +68,54 @@ cover: "/images/cover/go-fed.png"
<h2 class="title">analyzing the old design</h2>
<blockquote class="quote">[The current] design is "yep, it has color".</blockquote>
<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>
</div>
<div class="mobile device-gallery pswp-gallery">
<figure>
<a class="smartphone" href="old-320-home.png" data-size="320x480">
<img src="old-320-home.png" alt="The old homepage layout at mobile widths">
</a>
<figcaption>Padding and margins were not well-defined, as can be seen by the title and the navigation menu.</figcaption>
</figure>
<figure>
<a class="smartphone" href="old-320-margins.png" data-size="320x480">
<img src="old-320-margins.png" alt="A narrow column of content with too-wide margins">
</a>
<figcaption>Percentage widths meant that there was too little space used on mobile by actual content.</figcaption>
</figure>
<figure>
<a class="smartphone" href="old-320-overflow.png" data-size="320x480">
<img src="old-320-overflow.png" alt="An overflowing footer and video player">
</a>
<figcaption>Many elements would overflow out of their containers, such as the video player and the footer text.</figcaption>
</figure>
{{< device
frame="smartphone"
src="old-320-home.png"
size="320x480"
alt="The old homepage layout at mobile widths"
caption="Padding and margins were not well-defined, as can be seen by the title and the navigation menu."
>}}
{{< device
frame="smartphone"
src="old-320-margins.png"
size="320x480"
alt="A narrow column of content with too-wide margins"
caption="Percentage widths meant that there was too little space used on mobile by actual content."
>}}
{{< device
frame="smartphone"
src="old-320-overflow.png"
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 class="desktop device-gallery pswp-gallery">
<figure>
<a class="laptop" href="old-1280-home.png" data-size="1280x720">
<img src="old-1280-home.png" alt="">
</a>
<figcaption>The </figcaption>
</figure>
<figure>
<a class="laptop" href="old-1280-lineheight.png" data-size="1280x720">
<img src="old-1280-lineheight.png" alt="">
</a>
<figcaption>Line height was set too tightly, causing lines with padding to overlap each other.</figcaption>
</figure>
<figure>
<a class="laptop" href="old-1280-nosidebar.png" data-size="1280x720">
<img src="old-1280-nosidebar.png" alt="">
</a>
<figcaption>Even though there is extra width to work with, the layout uses only one column.</figcaption>
</figure>
{{< device
frame="laptop"
src="old-1280-home.png"
size="1280x720"
alt=""
caption=""
>}}
{{< device
frame="laptop"
src="old-1280-lineheight.png"
size="1280x720"
alt=""
caption="Line height was set too tightly, causing lines with padding to overlap each other."
>}}
{{< device
frame="laptop"
src="old-1280-nosidebar.png"
size="1280x720"
alt=""
caption="Even though there is extra width to work with, the layout uses only one column."
>}}
</div>
</div>
</section>
@ -115,66 +123,75 @@ cover: "/images/cover/go-fed.png"
<div class="container">
<h2 class="title">after the redesign</h2>
<div class="mobile device-gallery pswp-gallery">
<figure>
<a class="smartphone" href="new-320-backtotop.png" data-size="320x480">
<img src="new-320-backtotop.png" alt="">
</a>
<figcaption></figcaption>
</figure>
<figure>
<a class="smartphone" href="new-320-fluid.png" data-size="320x480">
<img src="new-320-fluid.png" alt="">
</a>
<figcaption></figcaption>
</figure>
<figure>
<a class="smartphone" href="new-320-footer.png" data-size="320x480">
<img src="new-320-footer.png" alt="">
</a>
<figcaption></figcaption>
</figure>
{{< device
frame="smartphone"
src="new-320-backtotop.png"
size="320x480"
alt=""
caption=""
>}}
{{< device
frame="smartphone"
src="new-320-fluid.png"
size="320x480"
alt=""
caption=""
>}}
{{< device
frame="smartphone"
src="new-320-footer.png"
size="320x480"
alt=""
caption=""
>}}
</div>
<div class="desktop device-gallery pswp-gallery">
<figure>
<a class="laptop" href="new-1280-home1.png" data-size="1280x720">
<img src="new-1280-home1.png" alt="">
</a>
<figcaption>The new homepage immediately informs the visitor exactly what the project is and what they can do with it.</figcaption>
</figure>
<figure>
<a class="laptop" href="new-1280-home2.png" data-size="1280x720">
<img src="new-1280-home2.png" alt="">
</a>
<figcaption></figcaption>
</figure>
<figure>
<a class="laptop" href="new-1280-home3.png" data-size="1280x720">
<img src="new-1280-home3.png" alt="">
</a>
<figcaption></figcaption>
</figure>
<figure>
<a class="laptop" href="new-1280-home4.png" data-size="1280x720">
<img src="new-1280-home4.png" alt="">
</a>
<figcaption></figcaption>
</figure>
<figure>
<a class="laptop" href="new-1280-page1.png" data-size="1280x720">
<img src="new-1280-page1.png" alt="">
</a>
<figcaption></figcaption>
</figure>
<figure>
<a class="laptop" href="new-1280-sidebar.png" data-size="1280x720">
<img src="new-1280-sidebar.png" alt="">
</a>
<figcaption></figcaption>
</figure>
{{< device
frame="laptop"
src="new-1280-home1.png"
size="1280x720"
alt=""
caption="The new homepage immediately informs the visitor exactly what the project is and what they can do with it."
>}}
{{< device
frame="laptop"
src="new-1280-home2.png"
size="1280x720"
alt=""
caption=""
>}}
{{< device
frame="laptop"
src="new-1280-home3.png"
size="1280x720"
alt=""
caption=""
>}}
{{< device
frame="laptop"
src="new-1280-home4.png"
size="1280x720"
alt=""
caption=""
>}}
{{< device
frame="laptop"
src="new-1280-page1.png"
size="1280x720"
alt=""
caption=""
>}}
{{< device
frame="laptop"
src="new-1280-sidebar.png"
size="1280x720"
alt=""
caption=""
>}}
</div>
<blockquote class="quote">Woo, looking super nice! :D Looks amazing! :D</blockquote>
<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>
</div>
</div>
@ -184,7 +201,7 @@ cover: "/images/cover/go-fed.png"
<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>
<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>
</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;">
<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="font-weight: 500;">infinite love ⴳ</div>
<div style="color: #d9e1e8">@trwnh@mastodon.social</div>
@ -449,11 +451,11 @@ cover: "/images/cover/mastodocs.jpg"
<section class="section" id="cta">
<div class="container">
<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">
<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>
<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>
</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>
<source srcset="/images/people/gargron.avif" type="image/avif">
<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>

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>
<div class="testimonials">
<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>
<blockquote class="bubble">it's scary how much you know.</blockquote>
</div>
<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>
<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
</div>
<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>
<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
</div>