refactor old components

dbushell · Nov 8, 2024 · 8230afc · 8230afc
1 parent 84023d9
commit 8230afc
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 269 deletions.
diff --git a/components/pw-header.html b/components/pw-header.html
@@ -1,26 +1,20 @@
-<patchwork-header>
-  <header class="Grid | Header">
-    <div class="Header__main">
-      <ssr-slot name="primary">
-        <a class="Header__logo" href="/">
-          <span class="Header__name">{{heading}}</span>
-          <ssr-if condition="tag">
-            <span class="Header__tag">{{tag}}</span>
-          </ssr-if>
-        </a>
-      </ssr-slot>
-      <ssr-slot name="secondary">
-        <ssr-if condition="menu.length">
-          <pw-button icon label="Toggle Menu" classes="{{['Hamburger']}}" popovertarget="nav" popovertargetaction="toggle">
-            <ssr-fragment slot="icon"><icon-menu /></ssr-fragment>
-          </pw-button>
-          <pw-nav menu="{{menu}}" />
+<header class="Grid | Header">
+  <div class="Header__main">
+    <ssr-slot name="primary">
+      <a class="Header__logo" href="/">
+        <span class="Header__name">{{heading}}</span>
+        <ssr-if condition="tag">
+          <span class="Header__tag">{{tag}}</span>
         </ssr-if>
-      </ssr-slot>
-    </div>
-  </header>
-</patchwork-header>
-
-<ssr-fragment portal="head">
-  <script type="module" src="/scripts/patchwork-header.js?v={{deployHash}}"></script>
-</ssr-fragment>
+      </a>
+    </ssr-slot>
+    <ssr-slot name="secondary">
+      <ssr-if condition="menu.length">
+        <pw-button icon label="Toggle Menu" classes="{{['Hamburger']}}" popovertarget="nav" popovertargetaction="toggle">
+          <ssr-fragment slot="icon"><icon-menu /></ssr-fragment>
+        </pw-button>
+        <pw-nav menu="{{menu}}" />
+      </ssr-if>
+    </ssr-slot>
+  </div>
+</header>
diff --git a/components/pw-hero.html b/components/pw-hero.html
@@ -1,21 +1,15 @@
-<patchwork-hero>
-  <div class="Grid | Hero">
-    <div class="Hero__main">
-      <ssr-slot name="image" />
-      <ssr-slot name="main">
-        <ssr-slot name="heading">
-          <h1 class="Hero__heading">{{heading}}</h1>
-        </slot>
-        <ssr-slot name="intro">
-          <div class="Hero__intro">
-            <p>{{description}}</p>
-          </div>
-        </ssr-slot>
+<div class="Grid | Hero">
+  <div class="Hero__main">
+    <ssr-slot name="image" />
+    <ssr-slot name="main">
+      <ssr-slot name="heading">
+        <h1 class="Hero__heading">{{heading}}</h1>
+      </slot>
+      <ssr-slot name="intro">
+        <div class="Hero__intro">
+          <p>{{description}}</p>
+        </div>
       </ssr-slot>
-    </div>
+    </ssr-slot>
   </div>
-</patchwork-hero>
-
-<ssr-fragment portal="head">
-  <script type="module" src="/scripts/patchwork-hero.js?v={{deployHash}}"></script>
-</ssr-fragment>
+</div>
diff --git a/components/pw-nav.html b/components/pw-nav.html
@@ -13,15 +13,17 @@
   </nav>
 </patchwork-nav>
 
-<template id="settings-template">
-  <div id="settings" popover>
-    <div class="Button-group jc-end">
-      <p class="small space-xs mi-end">Theme</p>
-      <pw-button disabled id="settings-light" label="Light" />
-      <pw-button disabled id="settings-dark" label="Dark" />
+<ssr-fragment portal="foot">
+  <template id="settings-template">
+    <div id="settings" popover>
+      <div class="Button-group jc-end">
+        <p class="small space-xs mi-end">Theme</p>
+        <pw-button disabled id="settings-light" label="Light" />
+        <pw-button disabled id="settings-dark" label="Dark" />
+      </div>
     </div>
-  </div>
-</template>
+  </template>
+</ssr-fragment>
 
 <ssr-fragment portal="head">
   <script type="module" src="/scripts/patchwork-nav.js?v={{deployHash}}"></script>

diff --git a/static/app.min.css b/static/app.min.css
diff --git a/static/css/base/core.css b/static/css/base/core.css
@@ -45,8 +45,6 @@ patchwork-body {
 }
 
 patchwork-dialog,
-patchwork-header,
-patchwork-hero,
 patchwork-nav {
   display: contents;
 }
diff --git a/static/css/base/typography.css b/static/css/base/typography.css
@@ -76,22 +76,22 @@ h6 {
 
 h1 {
   --font-size: var(--font-size-5);
-  line-height: 1;
+  --line-height: 1;
 }
 
 h2 {
   --font-size: var(--font-size-4);
-  line-height: 1.1;
+  --line-height: 1.1;
 }
 
 h3 {
   --font-size: var(--font-size-3);
-  line-height: 1.2;
+  --line-height: 1.2;
 }
 
 h4 {
   --font-size: var(--font-size-2);
-  line-height: 1.3;
+  --line-height: 1.3;
 }
 
 h5 {

diff --git a/static/css/components/button.css b/static/css/components/button.css
@@ -1,4 +1,4 @@
-body {
+:root {
   --button-height: calc(
     (var(--font-size-0) * 1.5) + (var(--size-2) * 2) +
       (var(--border-size-1) * 2)

diff --git a/static/css/components/header.css b/static/css/components/header.css
@@ -1,4 +1,4 @@
-body {
+:root {
   --header-space: var(--size-5);
   --header-height: calc((var(--header-space) * 2) + var(--button-height));
 }