Use Space-N css variables in showcase

AgnosticUI · Sep 16, 2020 · ef56b3a · ef56b3a
1 parent d8636c5
commit ef56b3a
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 19 deletions.
diff --git a/agnosticui-svelte/src/stories/Header.svelte b/agnosticui-svelte/src/stories/Header.svelte
@@ -99,6 +99,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;

diff --git a/agnosticui-vue/src/stories/Header.vue b/agnosticui-vue/src/stories/Header.vue
@@ -84,6 +84,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;

diff --git a/showcase/public/highlightjs.css b/showcase/public/highlightjs.css
@@ -45,7 +45,8 @@ base:   var(--gray-light-warm)
   font-size: var(--hljs-font-size);
   display: block;
   overflow-x: auto;
-  padding: 8px 32px; /* appears to be auto-vertical gutters so only 8px added */
+  padding: var(--Space-8) var(--Space-32); /* appears to be auto-vertical gutters so only 8px added */
+  /* padding: 8px 32px; appears to be auto-vertical gutters so only 8px added */
   color: var(--hljs-accent-1);
   background: var(--gray-light-warm);
 }

diff --git a/showcase/src/partials/Colors.vue b/showcase/src/partials/Colors.vue
@@ -135,16 +135,16 @@ the override naming convention of removing the `-default` part: */
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
-  margin-bottom: 32px;
+  margin-bottom: var(--Space-32);
 }
 .body {
   flex: 1;
 }
 .footer {
   background-color: var(--gray-light-warm);
-  flex: 0 0 72px;
+  flex: 0 0 var(--Space-72);
   font-family: monospace;
-  font-size: 12px;
+  font-size: var(--Space-12);
   text-transform: lowercase;
   display: flex;
   align-items: center;
@@ -189,7 +189,7 @@ the override naming convention of removing the `-default` part: */
 
 .component {
   composes: component from "./partials.module.css";
-  margin-top: 80px;
+  margin-top: var(--Space-80);
 }
 .hotips {
   composes: hotips from "./partials.module.css";

diff --git a/showcase/src/partials/Typography.vue b/showcase/src/partials/Typography.vue
@@ -67,17 +67,17 @@
   composes: tipcontent from "./partials.module.css";
 }
 .ul {
-  margin-top: 16px;
+  margin-top: var(--Space-16);
 }
 .li {
   list-style-type: circle;
-  margin-left: 40px;
+  margin-left: var(--Space-40);
 }
 .tip {
   composes: tip from "./partials.module.css";
 }
 .customize {
-  margin-top: 56px;
-  margin-bottom: 8;
+  margin-top: var(--Space-56);
+  margin-bottom: var(--Space-8);
 }
 </style>
diff --git a/showcase/src/partials/partials.module.css b/showcase/src/partials/partials.module.css
@@ -8,7 +8,7 @@
 .tip {
   width: 29%;
   margin: 0;
-  padding: 24px;
+  padding: var(--Space-24);
   background-color: rgba(217, 216, 217, 0.1);
   display: inline-flex;
   justify-content: center;
@@ -20,7 +20,7 @@
 .tipcontent {
   display: inline-block;
   width: 69%;
-  padding: 24px 16px 24px 32px;
+  padding: var(--Space-24) var(--Space-16) var(--Space-24) var(--Space-32);
 }
 
 .tipcontent p {

diff --git a/showcase/src/views/AppFooter.vue b/showcase/src/views/AppFooter.vue
@@ -16,7 +16,7 @@ export default {
 <style scoped>
 footer {
   display: flex;
-  flex: 0 0 48px;
+  flex: 0 0 var(--Space-48);
 }
 footer > .wrap {
   width: var(--app-width-initial);
@@ -26,7 +26,7 @@ footer > .wrap {
   justify-content: center;
 }
 .copyright {
-  font-size: 14px;
+  font-size: var(--Space-14);
   color: var(--gray-dark);
 }
 </style>
diff --git a/showcase/src/views/AppHeader.vue b/showcase/src/views/AppHeader.vue
@@ -53,7 +53,7 @@ export default {
 
 <style>
 .HeaderNavOverrides .pre-pipe {
-  margin-right: 32px;
+  margin-right: var(--Space-32);
 }
 .HeaderNavOverrides .pipe {
   display: inline;

diff --git a/showcase/src/views/views.module.css b/showcase/src/views/views.module.css
@@ -10,15 +10,15 @@
 }
 
 .cards > div:not(:last-child) {
-  margin-right: 24px;
+  margin-right: var(--Space-24);
 }
 .cards > div {
-  margin-bottom: 24px;
+  margin-bottom: var(--Space-24);
 }
 
 .types {
-  margin-bottom: 24px;
-  margin-top: 80px;
+  margin-bottom: var(--Space-24);
+  margin-top: var(--Space-80);
 }
 
 .cardbody,
@@ -28,7 +28,7 @@
 .cardheader {
   background-color: var(--gray-light-warm);
   border: 1px solid var(--gray-mid);
-  padding: 8px 0;
+  padding: var(--Space-8) 0;
   text-align: center;
 }
 .cardheader > h6 {