From c71a7f38a80656d4821e0f14dafff50ce2ffa362 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 7 Mar 2026 15:46:43 +0100
Subject: [PATCH] fix: prevent FOUC for images and SVG icons on first paint

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
---
 _includes/components/h-card.njk        |  2 ++
 _includes/components/sections/hero.njk |  2 ++
 _includes/layouts/home.njk             | 12 +++++++-----
 css/critical.css                       |  4 ++++
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/_includes/components/h-card.njk b/_includes/components/h-card.njk
index 8e1dc83..2d39416 100644
--- a/_includes/components/h-card.njk
+++ b/_includes/components/h-card.njk
@@ -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"
diff --git a/_includes/components/sections/hero.njk b/_includes/components/sections/hero.njk
index 0366965..055c13f 100644
--- a/_includes/components/sections/hero.njk
+++ b/_includes/components/sections/hero.njk
@@ -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"
     >
diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk
index 0f26556..0932dbb 100644
--- a/_includes/layouts/home.njk
+++ b/_includes/layouts/home.njk
@@ -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"/>
diff --git a/css/critical.css b/css/critical.css
index d662e18..b1bb641 100644
--- a/css/critical.css
+++ b/css/critical.css
@@ -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}