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

View file

@ -22,9 +22,9 @@
{%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%} {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
{%- endcapture -%} {%- endcapture -%}
{% if shape == 'square' %} {% 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 %} {% 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 %} {% endif %}
</div> </div>
</a> </a>

View file

@ -4,7 +4,7 @@
{% capture alt %}{{ item.track | escape }} by {{ item.artist }}{% endcapture %} {% capture alt %}{{ item.track | escape }} by {{ item.artist }}{% endcapture %}
<div class="item"> <div class="item">
<div class="meta"> <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="meta-text">
<div class="title">{{ item.track }}</div> <div class="title">{{ item.track }}</div>
<div class="subtext"> <div class="subtext">

View file

@ -1,26 +1,26 @@
<div class="badge-grid"> <div class="badge-grid">
<a href="https://11ty.dev"> <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>
<a href="https://social.lol/@cory"> <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>
<a href="https://github.com/ai-robots-txt/ai.robots.txt"> <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>
<a href="https://github.com/cdransf"> <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>
<a href="https://www.last.fm/user/coryd_"> <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>
<a href="https://www.buymeacoffee.com/cory"> <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>
<a href="https://validator.w3.org"> <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>
<a href="https://coryd.dev/feeds"> <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> </a>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="webring__wrapper"> <div class="webring__wrapper">
<div class="webring__centered flex-centered"> <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> </div>
<h3 class="text-centered">The Claw Webring</h3> <h3 class="text-centered">The Claw Webring</h3>
<div class="webring__centered flex-centered"> <div class="webring__centered flex-centered">

View file

@ -13,7 +13,7 @@ permalink: "/books/index.html"
{% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %} {% capture alt %}{{ book.title }} by {{ book.authors }}{% endcapture %}
<article class="book-entry"> <article class="book-entry">
<a href="{{ book.url }}"> <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> </a>
<div class="book-meta"> <div class="book-meta">
<a href="{{ book.url }}"> <a href="{{ book.url }}">

View file

@ -5,7 +5,7 @@ permalink: /404.html
image: /assets/img/404.jpg image: /assets/img/404.jpg
--- ---
<div class="four-oh-four-wrapper"> <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"> <div class="text-centered">
<h2 class="page-header">{{ title }}</h2> <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> 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. 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. [^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. [^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 --> 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. 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.