Adds the sticky header to showcase and tweaks some verbiage etc.

agnosticui-css/header.css

@@ -83,6 +83,22 @@
   flex-wrap: wrap;
 }
 
+/**
+ * If you make your header sticky, you should likely consider that jump links
+ * e.g. <h1 id="Jump-Here">... will tuck underneath the header! Here's a recommendation
+ * for how to circumnavigate this issue via scroll-margin-top:
+  h1[id],
+  h2[id],
+  h3[id],
+  h4[id],
+  h5[id],
+  h6[id] {
+    scroll-margin-top: 80px;
+  }
+ * In this case I have a 64px tall header so I've added 16px for clearance -- you'll need
+ * to curate your own use case, but scroll-margin-top is super useful for this use case.
+ */
+
 .header-sticky {
   position: sticky;
   top: 0;

showcase/public/index.html

@@ -122,6 +122,17 @@
       text-transform: uppercase;
     }
 
+    /* Headers with ID attributes (for jump links) */
+    h1[id],
+    h2[id],
+    h3[id],
+    h4[id],
+    h5[id],
+    h6[id] {
+      /* Header is 64px tall so this adds another 16px clearance */
+      scroll-margin-top: 80px;
+    }
+
     /* We're mainly using the <pre> for code snippets */
     p,
     pre {

showcase/src/partials/Colors.vue

@@ -83,7 +83,8 @@
     <pre v-highlightjs><code class="css">
 /**
 * You should override these by simply defining them in your top-level stylesheet.
-* Please do so for primary and secondary at minimum!
+* Simply use the same name you see below less the `-default`. For example, to
+* override `--agnostic-default-primary` define `--agnostic-primary`.
 *
 * Under the hood, when AgnosticUI applies one of these it does something like:
 * margin-left: var(--agnostic-primary, var(--agnostic-default-primary));
@@ -103,7 +104,8 @@
   --agnostic-default-light: #ffffff;
 }
 
-/* You will override these by defining them in your top-level stylesheet: */
+/* You will override these by defining them in your top-level stylesheet, using
+the override naming convention of removing the `-default` part: */
 
 :root {
   --my-even-more-gaudy-primary: hotpink;

showcase/src/partials/Spacing.vue

@@ -9,14 +9,6 @@
       >8pt system</a> which is conveniently
       relative to the base 16px (1rem) unit used on the web. Spacing is done via CSS custom property tokens.
     </h3>
-    <div :class="$style.hotips">
-      <p :class="$style.tip">
-        <span class="quoted">Why do we use CSS custom properties you ask?</span>
-      </p>
-      <div :class="$style.tipcontent">
-        <p></p>
-      </div>
-    </div>
     <pre v-highlightjs><code class="css">
 /**
  * agnostic-default- is not used here since these are, essentially, literals for

showcase/src/views/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <Header css="HeaderOverrides">
+  <Header css="HeaderOverrides" isSticky="{true}">
     <template v-slot:logoleft>
       <a class="logo" href="/">
         <svg