fix: layout shift

This commit is contained in:
Cory Dransfeldt 2024-05-01 20:26:46 -07:00
parent 45ec3aaeb2
commit 56fbb38c9d
No known key found for this signature in database
9 changed files with 24 additions and 24 deletions

View file

@ -30,7 +30,7 @@ package = "/plugins/fetch-scrobbles"
[[headers]]
for = "/media/*"
[headers.values]
Cache-Control = "public, max-age=604800, must-revalidate"
Cache-Control = "public, max-age=15552000, must-revalidate"
[[headers]]
for = "/feeds/posts"
@ -92,10 +92,10 @@ for = "/blogroll.opml"
Content-Disposition = "attachment; filename=cory-dransfeldt-blogroll.opml"
[[headers]]
for = "/*"
[headers.values]
Content-Security-Policy = "upgrade-insecure-requests; block-all-mixed-content;"
X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
Referrer-Policy = "strict-origin-when-cross-origin, no-referrer-when-downgrade"
Permissions-Policy = "autoplay=(), camera=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), publickey-credentials-get=()"
for = "/*"
[headers.values]
Content-Security-Policy = "upgrade-insecure-requests; block-all-mixed-content;"
X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
Referrer-Policy = "strict-origin-when-cross-origin, no-referrer-when-downgrade"
Permissions-Policy = "autoplay=(), camera=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), publickey-credentials-get=()"

View file

@ -22,9 +22,9 @@
{%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
{%- endcapture -%}
{% if shape == 'square' %}
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=65" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=65" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
{% else %}
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=65" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=65" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
{% endif %}
</div>
</a>

View file

@ -4,7 +4,7 @@
{% capture alt %}{{ item.track | escape }} by {{ item.artist }}{% endcapture %}
<div class="item">
<div class="meta">
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=64&h=64&fm=webp&q=65" class="image-banner" alt="{{ alt }}" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=64&h=64&fm=webp&q=65" class="image-banner" alt="{{ alt }}" loading="lazy" decoding="async" width="64" height="64" />
<div class="meta-text">
<div class="title">{{ item.track }}</div>
<div class="subtext">

View file

@ -1,26 +1,26 @@
<div class="badge-grid">
<a href="https://11ty.dev">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fm=webp&q=65" alt="Made with 11ty" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/eleventy.png&fm=webp&q=65" alt="Made with 11ty" loading="lazy" decoding="async" width="88" height="31" />
</a>
<a href="https://social.lol/@cory">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fm=webp&q=65" alt="Follow me on Mastodon" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/mastodon.png&fm=webp&q=65" alt="Follow me on Mastodon" loading="lazy" decoding="async" width="88" height="31" />
</a>
<a href="https://github.com/ai-robots-txt/ai.robots.txt">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fm=webp&q=65" alt="Not a robot" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/notarobot.png&fm=webp&q=65" alt="Not a robot" loading="lazy" decoding="async" width="88" height="31" />
</a>
<a href="https://github.com/cdransf">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fm=webp&q=65" alt="Check out my GitHub" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/github.png&fm=webp&q=65" alt="Check out my GitHub" loading="lazy" decoding="async" width="88" height="31" />
</a>
<a href="https://www.last.fm/user/coryd_">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/lastfm.png&fm=webp&q=65" alt="Follow me on Last.fm" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/lastfm.png&fm=webp&q=65" alt="Follow me on Last.fm" loading="lazy" decoding="async" width="88" height="31" />
</a>
<a href="https://www.buymeacoffee.com/cory">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fm=webp&q=65" alt="Buy Me a Coffee" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/buymeacoffee.png&fm=webp&q=65" alt="Buy Me a Coffee" loading="lazy" decoding="async" width="88" height="31" />
</a>
<a href="https://validator.w3.org">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fm=webp&q=65" alt="Valid HTML5" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validhtml5.png&fm=webp&q=65" alt="Valid HTML5" loading="lazy" decoding="async" width="88" height="31" />
</a>
<a href="https://coryd.dev/feeds">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fm=webp&q=65" alt="Valid RSS" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/badges/validrss.png&fm=webp&q=65" alt="Valid RSS" loading="lazy" decoding="async" width="88" height="31" />
</a>
</div>

View file

@ -1,6 +1,6 @@
<div class="webring__wrapper">
<div class="webring__centered flex-centered">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fm=webp&q=65" alt="The Claw Webring" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/webrings/theclaw.png&fm=webp&q=65" alt="The Claw Webring" loading="lazy" decoding="async" width="200" height="169" />
</div>
<h3 class="text-centered">The Claw Webring</h3>
<div class="webring__centered flex-centered">

View file

@ -13,7 +13,7 @@ permalink: "/books/index.html"
{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
<article class="book-entry">
<a href="{{ book.url }}">
<img src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fm=webp&q=65&w=137&h=209&fit=cover" alt="{{ alt }}" loading="eager" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url={{ book.image }}&fm=webp&q=65&w=137&h=209&fit=cover" alt="{{ alt }}" loading="eager" decoding="async" width="137" height="209" />
</a>
<div class="book-meta">
<a href="{{ book.url }}">

View file

@ -5,7 +5,7 @@ permalink: /404.html
image: /assets/img/404.jpg
---
<div class="four-oh-four-wrapper">
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fm=webp&q=65&w=1000" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=/assets/img/404.jpg&fm=webp&q=65&w=1000" alt="{{ alt }}" class="image-banner" loading="eager" decoding="async" width="1200" height="765" />
<div class="text-centered">
<h2 class="page-header">{{ title }}</h2>
What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>

View file

@ -203,7 +203,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity.
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&w=1000&fm=webp&q=65" class="image-banner" alt="Albums and artists" loading="lazy" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/albums-artists.jpg&w=1000&fm=webp&q=65" class="image-banner" alt="Albums and artists" loading="lazy" decoding="async" width="1000" height="1132" />
[^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here.
[^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file.

View file

@ -6,7 +6,7 @@ tags: ['music']
---
I saw this carved into a table in Austin once and it — like many songs — has been stuck in my head ever since. I'll get hooked on a song and circle back to that roughly carved message.<!-- excerpt -->
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fm=webp&q=65&w=1000" alt="What song is in your head?" class="image-banner" loading="eager" decoding="async" />
<img src="https://coryd.dev/.netlify/images/?url=https://coryd.dev/media/blog/what-song.png&fm=webp&q=65&w=1000" alt="What song is in your head?" class="image-banner" loading="eager" decoding="async" width="1000" height="333" />
I've had songs and albums stuck in my head dating back to my childhood, primarily tracks from [*The Traveling Wilburys Vol. 1*](https://en.wikipedia.org/wiki/Traveling_Wilburys_Vol._1) — Tweeter and the Monkey Man, Handle With Care — they all take turns getting stuck in my head.