Spacing 👾

assets/css/v2/style.css

@@ -154,22 +154,68 @@ 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;
+
+  /* Tab Group */
+  --magrin-tab-group: 1rem 0 0 0;
+
+  --overflow-gutter-extension: 1rem;
+
   /* vars for the primary grid setup */
   --grid-sidebar: 24rem;
   --grid-sidebar-gutter: 3rem;
@@ -178,32 +224,7 @@ 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;
-
+  /* Used for standard grid gap, and internal component flows */
   --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 +344,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 +894,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 +1318,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 +1392,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 +1646,10 @@ table {
   }
 }
 
+.table {
+  margin: var(--margin-table);
+}
+
 .md-table-scroll-x {
   overflow-x: auto;
   width: 100%;
@@ -1647,7 +1692,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));
@@ -1681,8 +1726,8 @@ blockquote.note:before {
   z-index: 999;
 }
 
-blockquote p:first-child {
-  margin: 0 auto 1rem auto;
+blockquote p {
+  margin: 0 auto var(--flow-gap) auto;
 }
 
 blockquote p:last-child {
@@ -1735,7 +1780,7 @@ blockquote.caution {
     background-color: oklch(var(--color-callout-caution-shadow));
     border-bottom: 1px solid oklch(var(--color-callout-caution));
   }
-  .call-out-type .feather {
+  .call-out-type .lucide {
     color: oklch(var(--color-callout-caution));
   }
 }
@@ -1748,7 +1793,7 @@ blockquote.warning {
     background-color: oklch(var(--color-callout-warning-shadow));
     border-bottom: 1px solid oklch(var(--color-callout-warning));
   }
-  .call-out-type .feather {
+  .call-out-type .lucide {
     color: oklch(var(--color-callout-warning));
   }
 }
@@ -1778,6 +1823,7 @@ li:has(> div > blockquote) {
 .tabs-container {
   width: calc(100% + 2rem);
   margin-inline-start: -1rem;
+  margin: var(--margin-tab-group);
 
   input[type="radio"] {
     display: none;
@@ -1843,6 +1889,8 @@ li:has(> div > blockquote) {
       width: 100%;
       padding: 1rem;
 
+      --flow-gap: 2rem;
+
       & > * {
         margin: 0 0 var(--flow-gap) 0;
       }
@@ -1924,6 +1972,7 @@ a:has(code:not(pre code)) {
 
 .code-block {
   position: relative;
+  margin: var(--margin-codeblock);
 
   tr::after {
     display: none;
@@ -2018,7 +2067,7 @@ ul .code-block {
   }
 }
 
-/* MARK: Banner 
+/* MARK: Banner
 */
 
 .banner {
@@ -2055,7 +2104,7 @@ hr {
   border: 1px solid oklch(var(--color-divider));
 }
 
-.feather {
+.lucide {
   width: 1.8ch;
   height: 1.8ch;
   stroke: currentColor;
@@ -2067,18 +2116,6 @@ hr {
   margin: 0;
 }
 
-.lucide {
-  width: 1.5rem;
-  height: 1.5rem;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2;
-  stroke-linecap: square;
-  stroke-linejoin: square;
-  vertical-align: sub;
-  margin: 0;
-}
-
 /* MARK: Accessibility
 */
 

exampleSite/content/test-product/call-out/all-callouts.md

@@ -57,6 +57,13 @@ This callout especially should be used **VERY** judiciously.
 
 {{<warning>}}
 This is a Warning callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<warning>` shortcode. It has no custom title.
+
+This callout has another line.
+
+And another line.
+
+And a final line.
+
 {{</warning>}}
 
 

exampleSite/content/test-product/tab-group/tab-group.md

@@ -15,7 +15,13 @@ This is a callout with an icon.
 {{</call-out>}}
 
 {{<caution>}}
+
 This is a Caution callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `<caution>` shortcode. It has no custom title.
+
+This is on a new line.
+
+This is on a new line
+
 {{</caution>}}
 
 {{<call-out "" "Custom title">}}

layouts/partials/callout.html

@@ -23,13 +23,12 @@
 {{ $type := (index (split $class " ") 0) | strings.FirstUpper }}
 {{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }}
 {{ $specialTitleIcons := dict
-  "Caution"    "alert-triangle"
-  "Warning"    "alert-octagon"
-  "Deprecated" "alert-octagon"
-  "Important"  "arrow-right-circle"
+  "Caution"    "triangle-alert"
+  "Warning"    "octagon-alert"
+  "Deprecated" "octagon-alert"
+  "Important"  "circle-arrow-right"
 }}
 {{ $icon := index $specialTitleIcons $type | default "" }}
-
 {{ $isSpecialTitle := in $specialTitles $type }}
 {{ if $isSpecialTitle }}
 {{/*  Loud callouts  */}}

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>