Add new global nav & dedicated pages

Add new global nav & dedicated pages

Show colour picker in mobile menu

WIP new pages, mobile menu updates

Correct header/layout spacing

Adjust layout

Add dedicated showcase page

Add new Why Enhance page

Don't be silly eslint

Whoops 😅

Cleanup

Link h1 and Axol

Cleanup

Moar cleanup hoo boy I better squash these

Yup definitely squashing after this

app/docs/nav-data.mjs

@@ -12,18 +12,6 @@ export const data = [
     label: 'Learn',
     slug: 'learn',
     items: [
-      {
-        type: TYPE.link,
-        slug: 'why-enhance',
-        label: 'Why Enhance?',
-        description: 'Our core philosophy',
-      },
-      {
-        type: TYPE.link,
-        slug: 'showcase',
-        label: 'Showcase',
-        description: 'Built with Enhance',
-      },
       {
         type: TYPE.category,
         slug: 'get-started',

app/elements/docs/layout.mjs

@@ -37,7 +37,6 @@ export default function DocsLayout({ html, state }) {
       /* single col */
       :host {
         display: grid;
-        grid-template-rows: minmax(auto, 8rem) auto;
         grid-template-areas:
           'header'
           'content';
@@ -67,7 +66,7 @@ export default function DocsLayout({ html, state }) {
           overflow: auto;
           height: 100vh;
 
-          grid-template-columns: 16rem 1fr;
+          grid-template-columns: var(--docs-nav-width) 1fr;
           grid-template-rows: minmax(auto, 4.5rem) auto;
           grid-template-areas:
             'header   header'
@@ -94,12 +93,10 @@ export default function DocsLayout({ html, state }) {
       @media (min-width: 72em) {
         /* 3-col */
         :host {
-          position: fixed;
           overflow: auto;
           height: 100vh;
-          width: 100vw;
 
-          grid-template-columns: 16rem 4fr 16rem;
+          grid-template-columns: var(--docs-nav-width) 1fr var(--docs-nav-width);
           grid-template-areas:
             'header  header   header'
             'sidebar content outline'
@@ -113,11 +110,12 @@ export default function DocsLayout({ html, state }) {
 
     <docs-symbols></docs-symbols>
 
-    <docs-header id="header" class="pb0 pie1 pis-1"></docs-header>
+    <enhance-header id="header"></enhance-header>
 
-    <nav id="sidebar" class="pbs1-lg overflow-y-auto-lg" aria-label="sidebar">
-      <docs-nav></docs-nav>
-    </nav>
+    <docs-nav
+      id="sidebar"
+      class="overflow-y-auto-lg"
+      aria-label="sidebar"></docs-nav>
 
     <doc-content id="content" class="overflow-y-auto-lg p1-lg pbe2">
       <article slot="doc" class="block leading3">

app/elements/docs/nav.mjs

@@ -1,6 +1,6 @@
 function List(items, classes = []) {
   return `
-<ul role="list" class="${['list-none pis-1', ...classes].join(' ')}">
+<ul role="list" class="${['list-none pis-2', ...classes].join(' ')}">
   ${items
     .map((item) => {
       return `

app/elements/docs/theme-toggle.mjs

@@ -8,16 +8,16 @@ export default function DocsThemeToggle({ html }) {
         width: ${size}px;
       }
       input + svg {
-        opacity: 0.3;
         padding-bottom: 2px;
+        color: var(--purple-princess);
       }
       input:hover + svg,
       input:checked + svg {
         opacity: 1;
-        color: var(--black-princess);
+        color: var(--rift-white);
       }
       input:checked + svg {
-        border-bottom: 2px solid var(--black-princess);
+        border-bottom: 2px solid var(--rift-white);
       }
     </style>
 

app/elements/editorial-header.mjs

@@ -0,0 +1,10 @@
+export default function EditorialHeader({ html }) {
+  return html`
+    <style>
+      enhance-header {
+        inline-size: var(--editorial-width);
+      }
+    </style>
+    <enhance-header class="block mi-auto font-medium"></enhance-header>
+  `
+}