From 86f1c62eedaee2857f7e3c166f739ca66366a38c Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 14 Apr 2025 14:33:06 +0200
Subject: [PATCH 1/4] fix: :adhesive_bandage: text-align when type or text
 line-wraps

---
 src/components/traits.webc | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/traits.webc b/src/components/traits.webc
index 4944398..1f955a7 100644
--- a/src/components/traits.webc
+++ b/src/components/traits.webc
@@ -64,12 +64,14 @@
     & .type {
       font-size: 0.625em;
       color: var(--clr-heading-data);
+      text-align: left;
       text-transform: uppercase;
       grid-area: type;
     }
 
     & .text {
       font-size: 0.75em;
+      text-align: left;
       margin-block: 0;
       margin-inline: 0;
       color: var(--clr-text);

From 262ed4d526e1ae7d4401d27b677f773f06f07070 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 14 Apr 2025 14:34:40 +0200
Subject: [PATCH 2/4] refactor: :recycle: use grid areas and fix no-image
 Safari alignment bug

---
 src/components/abilities.webc | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/abilities.webc b/src/components/abilities.webc
index d7cae6d..8635535 100644
--- a/src/components/abilities.webc
+++ b/src/components/abilities.webc
@@ -8,7 +8,7 @@
     sizes="(min-width: 64em) 500px, 250px"
   ></eleventy-image
   ><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
-  <figcaption class="info">
+  <figcaption class="caption">
     <p class="title" @text="ability.name"></p>
     <p class="description" @text="ability.description"></p>
   </figcaption>
@@ -17,21 +17,26 @@
 <style>
   .ability {
     display: grid;
-    grid-template-columns: 1fr;
-    justify-items: center;
-    align-items: center;
+    grid-template:
+      'image' 15em
+      'caption' 1fr / 1fr;
+    place-items: center;
     gap: 1.5em;
 
     margin-block: 1.5em;
     margin-inline: 0;
 
     @media (min-width: 45em) {
-      grid-template-columns: auto 1fr;
+      grid-template: 'image caption' 1fr / 15em 1fr;
     }
 
     & .image,
     & .no-image {
-      max-width: 15em;
+      grid-area: image;
+      display: grid;
+      place-items: center;
+      width: 15em;
+      height: 15em;
     }
 
     & .image {
@@ -41,13 +46,14 @@
     }
 
     & .no-image {
-      align-content: center;
       text-align: center;
 
       border: 0.125em dashed var(--clr-box-border);
       padding: 1em;
+    }
 
-      aspect-ratio: 1/1;
+    & .caption {
+      grid-area: caption;
     }
 
     & .title {

From e99d6a2eafd4043c36d62afb0d3558918e3c75fe Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 14 Apr 2025 14:35:42 +0200
Subject: [PATCH 3/4] refactor: :recycle: make better use of css grid and add
 responsiveness

---
 src/components/colors.webc | 68 +++++++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/components/colors.webc b/src/components/colors.webc
index 094e32f..e2cbe73 100644
--- a/src/components/colors.webc
+++ b/src/components/colors.webc
@@ -1,63 +1,85 @@
 <ul class="character-colors">
   <li class="color" webc:for="color of colors">
     <div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
-    <div class="content">
-      <p class="heading" @text="color.name"></p>
-      <p class="text" @text="color.value"></p>
-    </div>
+    <p class="heading" @text="color.name"></p>
+    <p class="value" @text="color.value"></p>
   </li>
 </ul>
 
 <style>
   .character-colors {
-    --color-box-size: 5.5em;
+    --columns: repeat(auto-fit, minmax(15em, 1fr));
+    --clearance: 0.25rem;
+    --color-box-size: calc(var(--clearance) * 14);
 
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
-    gap: 1em;
+    grid-template-columns: var(--columns);
+    gap: 0.75em;
 
     margin-block: 2em;
     padding: 0;
 
+    @media (min-width: 35em) {
+      --color-box-size: 5em;
+      --columns: repeat(auto-fit, minmax(8em, 1fr));
+    }
+
     & .color {
+      --areas: 'color heading' 'color value';
+      --rows: repeat(2, 1fr);
+      --columns: var(--color-box-size) 1fr;
+
       display: grid;
-      grid-template-columns: subgrid;
-      grid-template-rows: 1.5fr 1fr;
+      grid-template-areas: var(--areas);
+      grid-template-rows: var(--rows);
+      grid-template-columns: var(--columns);
 
       background-color: var(--clr-color-box-background);
 
       border: var(--border-thin) solid var(--clr-box-border);
       border-radius: 0.5em;
 
-      overflow: hidden;
+      overflow: clip;
+
+      @media (min-width: 35em) {
+        --areas: 'color' 'heading' 'value';
+        --rows: var(--color-box-size) 1fr auto;
+        --columns: 1fr;
+      }
     }
 
-    & .content {
-      display: flex;
-      flex-flow: column nowrap;
-      justify-content: space-between;
-      gap: 0.25em;
+    & .color-box {
+      grid-area: color;
+      width: 100%;
       height: 100%;
-      padding: 0.5em;
     }
 
-    & p {
-      margin-block: 0;
+    & .heading,
+    & .value {
+      text-align: left;
+      margin: 0;
+      padding-block: calc(var(--clearance) * 2);
+      padding-inline: calc(var(--clearance) * 2);
     }
 
     & .heading {
-      flex: 1 0 auto;
+      grid-area: heading;
+      align-self: start;
+
       font-size: 0.625em;
       line-height: 1.2;
       color: var(--clr-heading-data);
       text-transform: uppercase;
-      text-align: left;
+
     }
 
-    & .text {
-      flex: 0 0 auto;
+    & .value {
+      grid-area: value;
+      align-self: end;
+
       font-size: 0.75em;
-      margin-inline: 0;
+
+      padding-block: 0 calc(var(--clearance) * 2);
     }
   }
 </style>

From 54b3304f2f61131a9cea0abb81101ae06ba2472d Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 16 Apr 2025 16:14:22 +0200
Subject: [PATCH 4/4] fix: :adhesive_bandage: update artist url

---
 src/sebin/clothing.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sebin/clothing.md b/src/sebin/clothing.md
index 8e74fe9..bbb8386 100644
--- a/src/sebin/clothing.md
+++ b/src/sebin/clothing.md
@@ -11,7 +11,7 @@ gallery: [
   {
     alt: Sebin's cold weather outfit,
     artist: Lara Belém,
-    href: https://x.com/la_scarabie
+    href: https://bsky.app/profile/la-scarabie.bsky.social
   },
   {
     alt: Sebin's workout attire,