Spacing: Add margin variables throughout

Attempt to match figma spacing with headings
Add variables for ol and ul colours

Author: nginx-jack

assets/css/v2/style.css

@@ -154,22 +154,65 @@ textarea:not([rows]) {
   --color-background: 1 0 0;
   --color-foreground: 0 0 0;
   --color-shadow: 0.86 0 0;
+
+  --color-footer-text: 0 0 0 / 65%;
+  --color-product-title: 0.64 0 0;
+  --color-tabs-inactive-border: 0 0 0 / 20%;
+
+  /* Typography */
+  --margin-content-h1: 2.5rem 0 0 0;
+  --margin-content-h2: 2.5rem 0 0 0;
+  --margin-content-h3: 1.5rem 0 0 0;
+  --margin-content-h4: 1rem 0 0 0;
+
+  /* Lists */
+  --margin-list: 0.5rem 0 0.5rem 1.15rem;
+  --margin-list-item: 0.5rem 0 0.5rem 0;
+  --color-list-bullet: var(--color-codeblock-border);
+  --color-list-char: var(--color-codeblock-border);
+
+  /* Codeblock */
+
+  --margin-codeblock: 1.5rem -1rem;
   --color-inline_codeblock-border: 0.85 0 0;
   --color-inline_codeblock-background: 0.98 0 0;
   --color-codeblock-border: 0.63 0 0;
   --color-codeblock-background: 1 0 0;
   --color-codeblock-highlight: 0.99 0.0479 105.97;
-  --color-footer-text: 0 0 0 / 65%;
-  --color-product-title: 0.64 0 0;
-  --color-tabs-inactive-border: 0 0 0 / 20%;
+  --codeblock-comment-diff: 2rem;
+  --codeblock-comment-space-between: 10px;
+  --codeblock-horizontal-line-length: 2rem;
+  --codeblock-horizontal-line-overflow: 0.25rem;
+  --codeblock-horizontal-padding: 1rem;
+  --codeblock-border-thickness: 1px;
+  --codeblock-code-section-padding-left: 1rem;
+  --codeblock-line-box-side-length: 4px;
+
+  /* Callout */
+  --margin-callout: 1rem -1rem;
   --color-callout-warning: 0.65 0.188 24;
   --color-callout-warning-shadow: 0.65 0.188 24 / 20%;
   --color-callout-caution: 0.8 0.1613 71.21;
   --color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%;
   --color-callout-important: 0.36 0 0;
   --color-callout-important-shadow: 0.23 0 0 / 7.06%;
+
   --color-divider: 0.85 0 0;
 
+  /* Table */
+  --margin-table: 2rem 0;
+  --table-top-bottom-spacing: 2rem;
+  --table-row-space-between: 1.5rem;
+  --table-min-column-spacing-narrow: 1.5rem;
+  --table-min-column-spacing-wide: 0.75rem;
+  --table-header-bottom-spacing: 1rem;
+  --table-line-height: 1px;
+
+  /* Details */
+  --details-margin: 0.5rem 0rem;
+
+  --overflow-gutter-extension: 1rem;
+
   /* vars for the primary grid setup */
   --grid-sidebar: 24rem;
   --grid-sidebar-gutter: 3rem;
@@ -178,32 +221,6 @@ textarea:not([rows]) {
   --grid-side-callout: minmax(18rem, 26rem);
   --grid-column-gutter: 3.5rem;
 
-  --code-copy-icon-height: 1rem;
-  --code-copy-icon-width: 1rem;
-  --breadcrumb-max-height: 54px;
-  --sidebar-margin: 1.5rem;
-  --sidebar-line-box-side-length: 8px;
-  --sidebar-line-box-top: 6px;
-  --sidebar-line-box-left: 12px;
-  --sidebar-line-width: 11.5px;
-  --sidebar-mobile-top-displacement: 5rem;
-  --side-gutter-width: 20rem;
-  --table-top-bottom-spacing: 1rem;
-  --table-row-space-between: 1.5rem;
-  --table-min-column-spacing-narrow: 1.5rem;
-  --table-min-column-spacing-wide: 0.75rem;
-  --table-header-bottom-spacing: 1rem;
-  --table-line-height: 1px;
-  --codeblock-comment-diff: 2rem;
-  --codeblock-comment-space-between: 10px;
-  --codeblock-horizontal-line-length: 2rem;
-  --codeblock-horizontal-line-overflow: 0.25rem;
-  --codeblock-horizontal-padding: 1rem;
-  --codeblock-border-thickness: 1px;
-  --codeblock-code-section-padding-left: 1rem;
-  --codeblock-line-box-side-length: 4px;
-  --overflow-gutter-extension: 1rem;
-
   --flow-gap: 1rem;
 
   /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
@@ -323,12 +340,20 @@ p {
 ul,
 ol {
   padding: 0;
-  margin: 0.5rem 0 0.5rem 1rem;
+  margin: var(--margin-list);
 }
 
 ul li,
 ol li {
-  margin: 0.5rem 0 0.5rem 0;
+  margin: var(--margin-list-item);
+}
+
+ul li::marker {
+  color: oklch(var(--color-list-bullet));
+}
+
+ol li::marker {
+  color: oklch(var(--color-list-char));
 }
 
 ul ul,
@@ -865,7 +890,7 @@ nav {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     /* These gaps determine the spacing between all content. Be careful!! */
-    gap: var(--space-m) var(--space-m);
+    gap: var(--flow-gap) var(--space-m);
 
     /* Handles some strangeness where single-line codeblocks caused
    horizon */
@@ -1289,6 +1314,7 @@ nav.sidebar.sidebar__mobile-open {
 
 /* Details/Summary */
 details summary {
+  margin: var(--details-margin);
   color: oklch(var(--color-brand));
   transition: text-decoration-color 0.15s ease-in-out;
   text-decoration: underline;
@@ -1362,13 +1388,24 @@ a:hover {
 */
 
 h1 {
+  margin: var(--margin-content-h1);
   font-size: var(--font-step-3);
 }
 
 h2 {
+  margin: var(--margin-content-h2);
   font-size: var(--font-step-2);
 }
 
+h3 {
+  margin: var(--margin-content-h3);
+  font-size: var(--font-step-1);
+}
+
+h4 {
+  margin: var(--margin-content-h4);
+}
+
 p {
   font-size: var(--font-step-0);
 }
@@ -1605,6 +1642,10 @@ table {
   }
 }
 
+.table {
+  margin: var(--margin-table);
+}
+
 .md-table-scroll-x {
   overflow-x: auto;
   width: 100%;
@@ -1647,7 +1688,7 @@ table hr {
 blockquote {
   border: 1px solid oklch(var(--color-foreground));
   padding: 1rem;
-  margin: 0 -1rem;
+  margin: var(--margin-callout);
 
   /* solid 3px drop shadow */
   box-shadow: 3px 3px 0px oklch(var(--color-shadow));
@@ -1924,6 +1965,7 @@ a:has(code:not(pre code)) {
 
 .code-block {
   position: relative;
+  margin: var(--margin-codeblock);
 
   tr::after {
     display: none;
@@ -2018,7 +2060,7 @@ ul .code-block {
   }
 }
 
-/* MARK: Banner 
+/* MARK: Banner
 */
 
 .banner {

layouts/partials/table.html

@@ -2,6 +2,6 @@
     {{ errorf "Invalid variant supplied to <table> shortcode: Received %s. Wanted: 'narrow', 'wide'" .variant }}
 {{ end }}
 
-<div class="md-table-scroll-x {{ .variant }}">
+<div class="table md-table-scroll-x {{ .variant }}">
     {{ .content | markdownify}}
-</div>
+</div>