Finished ross content, added skill matrix, li, and ul, and improved many existing components, created and refactored to unified layouts and grid, visual improvements with proper column to row collapsing

2025-12-06 00:08:52 -08:00
parent 4b5f65bfdd
commit 87224a6dbb
29 changed files with 770 additions and 358 deletions
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -4,6 +4,7 @@ import "@styles/global.css";
 import Footer from "@components/Footer.astro";
 import H1 from "@components/H1.astro";
 import Navbar from "@components/Navbar.astro";
+import PageGroup from "@components/PageGroup.astro";

 import { pathToMetadata } from "@data/site-layout.ts";

@@ -39,28 +40,32 @@ const pageEnabled = pathToMetadata(Astro.url.pathname).enabled ?? true;
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{pageEnabled ? pageTitle : "Corwin Perren"}</title>
  </head>
-  <body class="flex h-dvh w-full max-w-full flex-col bg-black text-white">
+  <body
+    class="grid h-dvh w-full max-w-full grid-cols-1 gap-0 bg-black text-white"
+  >
    <div
      id="content-body-scrolling"
      class="grow overflow-x-hidden overflow-y-scroll"
    >
      <Navbar />
-      <main class="mx-6 my-6">
-        <div class="mb-2 md:mb-6">
-          {
-            title && showTitle && pageEnabled && (
-              <H1 bottomMargin={!subTitles}>{title}</H1>
-            )
-          }
-          {
-            showTitle &&
-              pageEnabled &&
-              subTitles?.map((subTitle) => (
-                <p class="text-sm font-bold md:text-xl">{subTitle}</p>
-              ))
-          }
-        </div>
-        <div>
+      <main class="mx-6 my-2">
+        {
+          showTitle && pageEnabled && (
+            <PageGroup>
+              <Fragment slot="header">
+                <div class="leading-3">
+                  <H1>{title}</H1>
+                  {subTitles?.map((subTitle) => (
+                    <p class="md:text-md text-sm font-bold italic">
+                      {subTitle}
+                    </p>
+                  ))}
+                </div>
+              </Fragment>
+            </PageGroup>
+          )
+        }
+        <div class="grid grid-cols-1 gap-4">
          {pageEnabled ? <slot /> : <H1>Under Construction</H1>}
        </div>
      </main>