From 04518d2eeeaa0067751e1d19e55f29c131fad995 Mon Sep 17 00:00:00 2001
From: "Daniel W. Hieber" <dwhieb@gmail.com>
Date: Thu, 6 Jun 2024 16:08:56 -0500
Subject: [PATCH] PERF: Only apply CSS classes to relevant pages

---
 classes/label.css               |  3 +++
 layouts/main/main.css           | 17 -----------------
 layouts/prose/prose.css         |  7 +++++++
 pages/About/About.css           |  3 +++
 pages/Component/Component.css   |  4 ++++
 pages/Components/Components.css |  4 ++++
 pages/Components/Components.hbs | 19 ++++++++++++++++++-
 pages/Grammar/Grammar.css       |  5 +++++
 8 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 classes/label.css

diff --git a/classes/label.css b/classes/label.css
new file mode 100644
index 00000000..5e598df5
--- /dev/null
+++ b/classes/label.css
@@ -0,0 +1,3 @@
+label {
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/layouts/main/main.css b/layouts/main/main.css
index da11aaab..4e4d0ea6 100644
--- a/layouts/main/main.css
+++ b/layouts/main/main.css
@@ -13,27 +13,10 @@
 @import 'components/skip-link/skip-link.css';
 
 /* Global Classes */
-@import 'abbreviation.css';
-@import 'blockquote.css';
-@import 'caption.css';
-@import 'code.css';
-@import 'cite.css';
-@import 'definition.css';
 @import 'emphasis.css';
 @import 'external-link.css';
-@import 'figure.css';
-@import 'gloss.css';
-@import 'inline-example.css';
 @import 'headings.css';
 @import 'link.css';
-@import 'lists.css';
-@import 'pre.css';
-@import 'references-list.css';
-@import 'table.css';
-
-/* Global Components */
-@import 'backlink/backlink.css';
-@import 'construction/construction.css';
 
 body {
 
diff --git a/layouts/prose/prose.css b/layouts/prose/prose.css
index 9df91f2e..c1f1c5d7 100644
--- a/layouts/prose/prose.css
+++ b/layouts/prose/prose.css
@@ -1,3 +1,10 @@
+@import 'abbreviation.css';
+@import 'backlink/backlink.css';
+@import 'cite.css';
+@import 'lists.css';
+@import 'references-list.css';
+@import 'table.css';
+
 .figure {
 
   counter-increment: figures;
diff --git a/pages/About/About.css b/pages/About/About.css
index c29a4311..affcab20 100644
--- a/pages/About/About.css
+++ b/pages/About/About.css
@@ -1,3 +1,6 @@
+@import 'blockquote.css';
+@import 'caption.css';
+
 blockquote p {
   margin-inline-start: 1em;
   text-indent:         -1em;
diff --git a/pages/Component/Component.css b/pages/Component/Component.css
index d7f70760..bd48a523 100644
--- a/pages/Component/Component.css
+++ b/pages/Component/Component.css
@@ -1,3 +1,7 @@
+@import 'code.css';
+@import 'construction/construction.css';
+@import 'inline-example.css';
+
 .component-page {
 
   & h1 {
diff --git a/pages/Components/Components.css b/pages/Components/Components.css
index 5835ad56..de7b910d 100644
--- a/pages/Components/Components.css
+++ b/pages/Components/Components.css
@@ -1,3 +1,7 @@
+@import 'construction/construction.css';
+@import 'label.css';
+@import 'pre.css';
+
 .components-page {
   p {
     text-align: center;
diff --git a/pages/Components/Components.hbs b/pages/Components/Components.hbs
index fbaf662f..5bb82020 100644
--- a/pages/Components/Components.hbs
+++ b/pages/Components/Components.hbs
@@ -1,6 +1,23 @@
 <main class=components-page id=main>
 
-  <h1>Search the Database</h1>
+  <search>
+    <form method=post>
+      <label for=search-box>Quick Search</label>
+      <input
+        autocomplete=on
+        autocorrect=off
+        enterkeyhint=search
+        id=search-box
+        inputmode=search
+        name=q
+        placeholder='e.g. "atimw-" or "dog"'
+        spellcheck=false
+        type=search
+      >
+      <button type=submit>Search</button>
+      <span>Quickly search for a component (in any orthography) or definition.</span>
+    </form>
+  </search>
 
 </main>
 
diff --git a/pages/Grammar/Grammar.css b/pages/Grammar/Grammar.css
index dc3bafce..b530ecd6 100644
--- a/pages/Grammar/Grammar.css
+++ b/pages/Grammar/Grammar.css
@@ -1,7 +1,12 @@
+@import 'caption.css';
+@import 'definition.css';
 @import 'ex-header.css';
 @import 'ex-source.css';
 @import 'example.css';
 @import 'examples.css';
+@import 'figure.css';
+@import 'gloss.css';
+@import 'inline-example.css';
 @import 'interlinear.css';
 
 :root {