fix(dialog.liquid + header.liquid): add missing aria-label attribute to open and close buttons; fix header image dimensions

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",

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": {

src/assets/styles/components/header.css

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

src/includes/blocks/dialog.liquid

@@ -6,11 +6,11 @@
   {%- endif -%}
 {%- endcapture -%}
 {% assign dialogId = id | default:"dialog-controls" %}
-<button class="dialog-open client-side" data-dialog-trigger="{{ dialogId }}" data-dialog-button>
+<button class="dialog-open client-side" aria-label="{{ label }}" data-dialog-trigger="{{ dialogId }}" data-dialog-button>
   {{ labelContent }}
 </button>
 <dialog id="dialog-{{ dialogId }}" class="client-side">
-  <button class="dialog-close" data-dialog-button>
+  <button class="dialog-close" aria-label="Close dialog" data-dialog-button>
     {% tablericon "circle-x" %}
   </button>
   {{ content }}

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 }}"

src/includes/home/recent-activity.liquid

@@ -18,6 +18,7 @@
             {% assign notes = item.notes | prepend: "### Notes\n" | markdown %}
             {% render "blocks/dialog.liquid",
               icon:"info-circle",
+              label:"View info about this concert"
               content:notes,
               id:item.content_date
             %}

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">

src/pages/media/music/concerts.html

@@ -37,6 +37,7 @@ permalink: "/music/concerts/{% if pagination.pageNumber > 0 %}{{ pagination.page
           {% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
           {% render "blocks/dialog.liquid",
             icon:"info-circle",
+            label:"View info about this concert"
             content:notes,
             id:concert.id
           %}