fix(header.liquid): add srcset and fixed dimensions

This commit is contained in:
Cory Dransfeldt 2025-04-22 07:43:25 -07:00 committed by Cory Dransfeldt
parent 42446b370e
commit cecdbad00d
5 changed files with 16 additions and 5 deletions

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.1.3", "version": "2.1.4",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.1.3", "version": "2.1.4",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"html-minifier-terser": "7.2.0", "html-minifier-terser": "7.2.0",

View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "2.1.3", "version": "2.1.4",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"engines": { "engines": {

View file

@ -19,6 +19,7 @@
img { img {
max-width: calc(var(--sizing-3xl) * 1.25); max-width: calc(var(--sizing-3xl) * 1.25);
height: auto;
} }
span { span {

View file

@ -5,7 +5,7 @@
{{ globals.cdn_url }}{{ image }}?class=bannerbase&type=webp 1024w {{ globals.cdn_url }}{{ image }}?class=bannerbase&type=webp 1024w
" "
sizes="(max-width: 450px) 256px, sizes="(max-width: 450px) 256px,
(max-width: 850px) 512px (max-width: 850px) 512px,
1024px" 1024px"
src="{{ globals.cdn_url }}{{ image }}?class=bannersm&type=webp" src="{{ globals.cdn_url }}{{ image }}?class=bannersm&type=webp"
alt="{{ alt | replaceQuotes }}" alt="{{ alt | replaceQuotes }}"

View file

@ -1,5 +1,15 @@
{%- capture headerContent -%} {%- 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> <span>Cory</span> <span>Dransfeldt</span>
{%- endcapture -%} {%- endcapture -%}
<section class="main-title"> <section class="main-title">