From bda440fcbbbadb5a62d86bfd85f9dde44a560524 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 7 Apr 2025 03:45:14 +0200
Subject: [PATCH] refactor: :recycle: migrate character page layout to css grid

---
 src/components/page-content.webc |  1 -
 src/components/profile.webc      |  3 ---
 src/layouts/character.webc       | 30 ++++++++++++++++++++++++------
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/components/page-content.webc b/src/components/page-content.webc
index b09aa1c..d6995c1 100644
--- a/src/components/page-content.webc
+++ b/src/components/page-content.webc
@@ -7,7 +7,6 @@
 <style>
   .page-content {
     width: 100%;
-    max-width: 65ch;
 
     background-color: var(--clr-box-background);
     border: var(--border-thin) solid var(--clr-box-border);
diff --git a/src/components/profile.webc b/src/components/profile.webc
index 6868c37..2acf23d 100644
--- a/src/components/profile.webc
+++ b/src/components/profile.webc
@@ -16,7 +16,6 @@
 <style>
   .profile {
     --sidebar-position: static;
-    --sidebar-size: 65ch;
     --sidebar-padding: 1rem;
     --sidebar-top-flex: 1 1 auto;
     --sidebar-top-flow: row nowrap;
@@ -31,7 +30,6 @@
     gap: 0.75em;
 
     width: 100%;
-    max-width: var(--sidebar-size);
 
     background-color: var(--clr-box-background);
 
@@ -42,7 +40,6 @@
 
     @media (min-width: 64em) {
       --sidebar-position: sticky;
-      --sidebar-size: 18em;
       --sidebar-padding: 1.5rem;
       --sidebar-top-flex: 0 0 auto;
       --sidebar-top-flow: column nowrap;
diff --git a/src/layouts/character.webc b/src/layouts/character.webc
index 24aab3a..1131ef2 100644
--- a/src/layouts/character.webc
+++ b/src/layouts/character.webc
@@ -27,10 +27,16 @@ layout: base.webc
   main {
     --inbox-margin: 1rem;
 
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: center;
+    display: grid;
+    justify-content: center;
+    justify-items: center;
+    align-items: start;
     gap: 1em;
+    grid-auto-columns: 100%;
+    grid-template-areas:
+      'info'
+      'content'
+      'footer';
 
     margin-block: var(--container-spacing-top-safe) var(--container-spacing-bottom-safe);
     margin-inline: var(--container-spacing-left-safe) var(--container-spacing-right-safe);
@@ -40,9 +46,11 @@ layout: base.webc
     @media (min-width: 64em) {
       --inbox-margin: 1.5rem;
 
-      flex-flow: row nowrap;
-      justify-content: center;
-      align-items: start;
+      grid-auto-columns: revert;
+      grid-template-columns: 18em minmax(0, 65ch);
+      grid-template-areas:
+        'info content'
+        '. footer';
     }
   }
 
@@ -53,9 +61,19 @@ layout: base.webc
   article {
     margin-block: var(--inbox-margin);
     margin-inline: var(--inbox-margin);
+    hyphens: auto;
+  }
+
+  aside {
+    grid-area: info;
+  }
+
+  section {
+    grid-area: content;
   }
 
   footer {
     text-align: end;
+    grid-area: footer;
   }
 </style>