refactor: ♻️ migrate character page layout to css grid

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

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;

src/layouts/character.webc

@@ -27,10 +27,16 @@ layout: base.webc
   main {
     --inbox-margin: 1rem;
 
-    display: flex;
+    display: grid;
-    flex-flow: column nowrap;
+    justify-content: center;
-    align-items: 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;
+      grid-auto-columns: revert;
-      justify-content: center;
+      grid-template-columns: 18em minmax(0, 65ch);
-      align-items: start;
+      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>