fix: 🩹 update artist url

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 {

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>

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);

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,