PERF: Only apply CSS classes to relevant pages

classes/label.css

@@ -0,0 +1,3 @@
+label {
+  font-weight: bold;
+}

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 {
 

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;

pages/About/About.css

@@ -1,3 +1,6 @@
+@import 'blockquote.css';
+@import 'caption.css';
+
 blockquote p {
   margin-inline-start: 1em;
   text-indent:         -1em;

pages/Component/Component.css

@@ -1,3 +1,7 @@
+@import 'code.css';
+@import 'construction/construction.css';
+@import 'inline-example.css';
+
 .component-page {
 
   & h1 {

pages/Components/Components.css

@@ -1,3 +1,7 @@
+@import 'construction/construction.css';
+@import 'label.css';
+@import 'pre.css';
+
 .components-page {
   p {
     text-align: center;

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>
 

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 {