WIP new pages, mobile menu updates

enhance-dev · Oct 5, 2023 · a92533e · a92533e
1 parent 816720c
commit a92533e
Show file tree

Hide file tree

Showing 11 changed files with 165 additions and 345 deletions.
diff --git a/app/docs/nav-data.mjs b/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',

diff --git a/app/elements/docs/header.mjs b/app/elements/docs/header.mjs
diff --git a/app/elements/docs/layout.mjs b/app/elements/docs/layout.mjs
@@ -112,11 +112,11 @@ export default function DocsLayout({ html, state }) {
 
     <docs-symbols></docs-symbols>
 
-    <docs-header-v2 id="header"></docs-header-v2>
+    <enhance-header id="header"></enhance-header>
 
     <docs-nav
       id="sidebar"
-      class="pbs1-lg overflow-y-auto-lg"
+      class="overflow-y-auto-lg"
       aria-label="sidebar"></docs-nav>
 
     <doc-content id="content" class="overflow-y-auto-lg p1-lg pbe2">

diff --git a/app/elements/docs/nav.mjs b/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 `
@@ -85,7 +85,6 @@ export default function DocsNav({ html, state }) {
       }
     </style>
 
-    <docs-theme-toggle class="block hidden-lg mbe0 pis-1"></docs-theme-toggle>
     <nav>${List(activeTab.items)}</nav>
   `
 }
diff --git a/app/elements/docs/theme-toggle.mjs b/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>
 

diff --git a/app/elements/editorial-header.mjs b/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>
+  `
+}