From 4d66d688ff1f40c75a302c99d1646f43141130c7 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 9 Apr 2025 18:57:21 +0200
Subject: [PATCH] refactor: :recycle: migrate profile sidebar to css grid

---
 src/components/profile.webc | 97 ++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 55 deletions(-)

diff --git a/src/components/profile.webc b/src/components/profile.webc
index 2acf23d..5912a62 100644
--- a/src/components/profile.webc
+++ b/src/components/profile.webc
@@ -1,32 +1,31 @@
 <aside class="profile">
-  <div class="main">
-    <div class="avatar">
-      <slot name="avatar"></slot>
-    </div>
-    <div class="text">
-      <p class="name"><slot name="name"></slot></p>
-      <p class="species"><slot name="species"></slot></p>
-    </div>
-  </div>
-  <div class="data">
-    <slot></slot>
+  <div class="avatar">
+    <slot name="avatar"></slot>
   </div>
+  <p class="name">
+    <slot name="name"></slot>
+  </p>
+  <p class="species">
+    <slot name="species"></slot>
+  </p>
+  <slot></slot>
 </aside>
 
 <style>
   .profile {
     --sidebar-position: static;
     --sidebar-padding: 1rem;
-    --sidebar-top-flex: 1 1 auto;
-    --sidebar-top-flow: row nowrap;
-    --sidebar-top-text-align: left;
+    --sidebar-grid-columns: auto 1fr;
+    --sidebar-grid-areas: 'avatar name' 'avatar species' 'traits traits';
+    --sidebar-top-text-align: start;
     --sidebar-avatar-size: 5em;
 
     position: var(--sidebar-position);
     top: var(--page-spacing);
 
-    display: flex;
-    flex-flow: column nowrap;
+    display: grid;
+    grid-template-columns: var(--sidebar-grid-columns);
+    grid-template-areas: var(--sidebar-grid-areas);
     gap: 0.75em;
 
     width: 100%;
@@ -41,62 +40,50 @@
     @media (min-width: 64em) {
       --sidebar-position: sticky;
       --sidebar-padding: 1.5rem;
-      --sidebar-top-flex: 0 0 auto;
-      --sidebar-top-flow: column nowrap;
+      --sidebar-grid-columns: 1fr;
+      --sidebar-grid-areas: 'avatar' 'name' 'species' 'traits';
       --sidebar-top-text-align: center;
       --sidebar-avatar-size: 10em;
     }
 
-    & .main {
-      flex: var(--sidebar-top-flex);
-      display: flex;
-      flex-flow: var(--sidebar-top-flow);
-      align-items: center;
-      gap: 1em;
+    & .avatar {
+      grid-area: avatar;
+      justify-self: center;
 
-      & p {
-        margin-block: 0;
-
-        & + p {
-          margin-block: 0.75em 0;
-        }
+      & img {
+        width: var(--sidebar-avatar-size);
+        height: var(--sidebar-avatar-size);
+        aspect-ratio: 1/1;
+        border-radius: 1em;
+        object-fit: cover;
       }
     }
 
-    & .avatar {
-      flex: 0 1 var(--sidebar-avatar-size);
-    }
-
-    & .data {
-      border-block-start: var(--border-thin) solid var(--clr-box-border);
-      padding-block: 0.75em 0;
-    }
-
-    & picture {
-      display: block;
-      width: var(--sidebar-avatar-size);
-      height: var(--sidebar-avatar-size);
-    }
-
-    & img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      border-radius: 1em;
+    & .name,
+    & .species {
+      font-family: var(--font-family-headings);
+      text-align: var(--sidebar-top-text-align);
     }
 
     & .name {
-      font-family: var(--font-family-headings);
+      grid-area: name;
+      align-self: end;
       font-size: 1.375em;
       font-weight: bold;
-      text-align: var(--sidebar-top-text-align);
+      margin: 0;
     }
 
     & .species {
-      font-family: var(--font-family-headings);
+      grid-area: species;
+      align-self: start;
       font-size: 0.75em;
-      text-align: var(--sidebar-top-text-align);
-      background-color: var(--clr-tag-background);
+      margin: 0;
+    }
+
+    & > :last-child {
+      grid-area: traits;
+      border-block-start: var(--border-thin) solid var(--clr-box-border);
+      padding-block: 0.75em 0;
     }
   }
 </style>