giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

fix: prevent FOUC for images and SVG icons on first paint

Browse Source 
Add critical CSS rules to constrain images (max-width:100%) and inline
SVGs (default 1.25rem) before Tailwind loads. Add width/height HTML
attributes to avatar images in hero sections and h-card sidebar widget.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
This commit is contained in:
Ricardo
2026-03-07 15:46:43 +01:00
parent 2077b8d866
commit c71a7f38a8
4 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/components/h-card.njk
View File

@@ -29,6 +29,8 @@
<img
src="{{ authorAvatar }}"
alt="{{ authorName }}"
width="64"
height="64"
class="w-16 h-16 rounded-full object-cover"
loading="lazy"
itemprop="image"

2
_includes/components/sections/hero.njk
View File

@@ -19,6 +19,8 @@
<img
src="{{ authorAvatar }}"
alt="{{ authorName }}"
width="96"
height="96"
class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
loading="eager"
>

12
_includes/layouts/home.njk
View File

@@ -15,6 +15,8 @@ withSidebar: true
<img
src="{{ site.author.avatar }}"
alt="{{ site.author.name }}"
width="96"
height="96"
class="w-24 h-24 sm:w-32 sm:h-32 rounded-full object-cover shadow-lg flex-shrink-0"
loading="eager"
>
@@ -79,7 +81,7 @@ withSidebar: true
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Recent Posts</h2>
<div class="space-y-4">
{% for post in collections.posts | head(10) %}
<article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
<article class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors shadow-sm">
<h3 class="font-semibold text-surface-900 dark:text-surface-100 mb-1">
<a href="{{ post.url }}" class="hover:text-accent-600 dark:hover:text-accent-400">
{{ post.data.title or post.data.name or "Untitled" }}
@@ -93,7 +95,7 @@ withSidebar: true
{{ (post.data.published or post.date) | date("MMM d, yyyy") }}
</time>
{% if post.data.postType %}
<span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded">{{ post.data.postType }}</span>
<span class="px-2 py-0.5 bg-surface-100 dark:bg-surface-700 rounded-full">{{ post.data.postType }}</span>
{% endif %}
</div>
</article>
@@ -110,7 +112,7 @@ withSidebar: true
<section class="mb-8 sm:mb-12">
<h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4 sm:mb-6">Explore</h2>
<div class="grid gap-3 sm:grid-cols-3">
<a href="/blog/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center">
<a href="/blog/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
<div class="text-2xl mb-2">
<svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
@@ -119,7 +121,7 @@ withSidebar: true
<span class="font-semibold text-surface-900 dark:text-surface-100">Blog</span>
<p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Articles, notes, and photos</p>
</a>
<a href="/cv/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center">
<a href="/cv/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
<div class="text-2xl mb-2">
<svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
@@ -128,7 +130,7 @@ withSidebar: true
<span class="font-semibold text-surface-900 dark:text-surface-100">CV</span>
<p class="text-sm text-surface-600 dark:text-surface-400 mt-1">Experience and projects</p>
</a>
<a href="/about/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center">
<a href="/about/" class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors text-center shadow-sm">
<div class="text-2xl mb-2">
<svg class="w-8 h-8 mx-auto text-accent-600 dark:text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>

4
css/critical.css
View File

@@ -55,3 +55,7 @@ a{color:#b45309}
.site-nav{display:flex;align-items:center;gap:1rem}
.site-nav>a,.site-nav .nav-dropdown-trigger{color:#5c5750;text-decoration:none;padding-top:0.5rem;padding-bottom:0.5rem}
.dark .site-nav>a,.dark .site-nav .nav-dropdown-trigger{color:#a09a90}
/* Prevent FOUC — constrain images and SVG icons before Tailwind loads */
img{max-width:100%;height:auto}
svg:not(:root):not([width]){width:1.25rem;height:1.25rem}