From 1a347ba6528a0580ccea38711f9b3db8568faa32 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Tue, 22 Apr 2025 07:43:25 -0700
Subject: [PATCH] =?UTF-8?q?fix(header.liquid):=20add=20srcset=20and=20fixe?=
 =?UTF-8?q?d=20dimensions=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                       |  4 ++--
 package.json                            |  2 +-
 src/assets/styles/components/header.css |  1 +
 src/includes/blocks/hero.liquid         |  2 +-
 src/includes/layout/header.liquid       | 12 +++++++++++-
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 53f6e75..3f581ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "2.1.3",
+      "version": "2.1.4",
       "license": "MIT",
       "dependencies": {
         "html-minifier-terser": "7.2.0",
diff --git a/package.json b/package.json
index bdd1f52..8538385 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
diff --git a/src/assets/styles/components/header.css b/src/assets/styles/components/header.css
index 19e411b..448875d 100644
--- a/src/assets/styles/components/header.css
+++ b/src/assets/styles/components/header.css
@@ -19,6 +19,7 @@
 
     img {
       max-width: calc(var(--sizing-3xl) * 1.25);
+      height: auto;
     }
 
     span {
diff --git a/src/includes/blocks/hero.liquid b/src/includes/blocks/hero.liquid
index 19fb82b..7518632 100644
--- a/src/includes/blocks/hero.liquid
+++ b/src/includes/blocks/hero.liquid
@@ -5,7 +5,7 @@
     {{ globals.cdn_url }}{{ image }}?class=bannerbase&type=webp 1024w
   "
   sizes="(max-width: 450px) 256px,
-    (max-width: 850px) 512px
+    (max-width: 850px) 512px,
     1024px"
   src="{{ globals.cdn_url }}{{ image }}?class=bannersm&type=webp"
   alt="{{ alt | replaceQuotes }}"
diff --git a/src/includes/layout/header.liquid b/src/includes/layout/header.liquid
index 8e68154..a7955a3 100644
--- a/src/includes/layout/header.liquid
+++ b/src/includes/layout/header.liquid
@@ -1,5 +1,15 @@
 {%- capture headerContent -%}
-  <img class="icon" src="{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w200&v={% appVersion %}" alt="{{ globals.site_name }}" />
+  <img
+    srcset="
+      {{ globals.cdn_url }}{{ globals.avatar_header }}?class=w100&v={% appVersion %} 100w,
+      {{ globals.cdn_url }}{{ globals.avatar_header }}?class=w200&v={% appVersion %} 200w
+    "
+    sizes="(max-width: 450px) 100px, 200px"
+    class="icon" src="{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w100&v={% appVersion %}"
+    alt="{{ globals.site_name }}"
+    width="100"
+    height="145"
+  />
   <span>Cory</span> <span>Dransfeldt</span>
 {%- endcapture -%}
 <section class="main-title">