diff --git a/agnosticui-svelte/src/stories/Header.svelte b/agnosticui-svelte/src/stories/Header.svelte
index fee660b7a..6f4acec8f 100644
--- 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.
... 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
index 888132684..39afd38f6 100644
--- 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. ... 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
index 4a488727a..ef5af47bd 100644
--- 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
index d77193857..de4fb1199 100644
--- 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
index 99ceebdc2..715c0789f 100644
--- 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);
}
diff --git a/showcase/src/partials/partials.module.css b/showcase/src/partials/partials.module.css
index e14f47151..99b28663b 100644
--- 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
index a04436feb..059b19396 100644
--- a/showcase/src/views/AppFooter.vue
+++ b/showcase/src/views/AppFooter.vue
@@ -16,7 +16,7 @@ export default {
diff --git a/showcase/src/views/AppHeader.vue b/showcase/src/views/AppHeader.vue
index 4207ad458..23d747e0f 100644
--- a/showcase/src/views/AppHeader.vue
+++ b/showcase/src/views/AppHeader.vue
@@ -53,7 +53,7 @@ export default {