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="caption">
+  <figcaption class="info">
     <p class="title" @text="ability.name"></p>
     <p class="description" @text="ability.description"></p>
   </figcaption>
@@ -17,26 +17,21 @@
 <style>
   .ability {
     display: grid;
-    grid-template:
-      'image' 15em
-      'caption' 1fr / 1fr;
-    place-items: center;
+    grid-template-columns: 1fr;
+    justify-items: center;
+    align-items: center;
     gap: 1.5em;
 
     margin-block: 1.5em;
     margin-inline: 0;
 
     @media (min-width: 45em) {
-      grid-template: 'image caption' 1fr / 15em 1fr;
+      grid-template-columns: auto 1fr;
     }
 
     & .image,
     & .no-image {
-      grid-area: image;
-      display: grid;
-      place-items: center;
-      width: 15em;
-      height: 15em;
+      max-width: 15em;
     }
 
     & .image {
@@ -46,14 +41,13 @@
     }
 
     & .no-image {
+      align-content: center;
       text-align: center;
 
       border: 0.125em dashed var(--clr-box-border);
       padding: 1em;
-    }
 
-    & .caption {
-      grid-area: caption;
+      aspect-ratio: 1/1;
     }
 
     & .title {

src/components/colors.webc

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

src/components/traits.webc

@@ -64,14 +64,12 @@
     & .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://bsky.app/profile/la-scarabie.bsky.social
+    href: https://x.com/la_scarabie
   },
   {
     alt: Sebin's workout attire,