docs: give headings breathing space (#5427)

cultureamp · Dec 23, 2024 · 16e7792 · 16e7792
1 parent fc8d809
commit 16e7792
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/.changeset/tiny-carrots-tie.md b/.changeset/tiny-carrots-tie.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/docs/.storybook/preview.css b/docs/.storybook/preview.css
@@ -28,6 +28,11 @@ pre code {
     font-size: var(--typography-heading-1-font-size);
     line-height: var(--typography-heading-1-line-height);
     letter-spacing: var(--typography-heading-1-letter-spacing);
+    margin-bottom: var(--spacing-20);
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
@@ -38,6 +43,15 @@ pre code {
     letter-spacing: var(--typography-heading-2-letter-spacing);
     border-bottom: 0;
     text-decoration: none;
+    margin-top: var(--spacing-32);
+
+    &:first-of-type {
+      margin-top: var(--spacing-32);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
@@ -46,6 +60,16 @@ pre code {
     font-size: var(--typography-heading-3-font-size);
     line-height: var(--typography-heading-3-line-height);
     letter-spacing: var(--typography-heading-3-letter-spacing);
+    margin-top: var(--spacing-24);
+    margin-bottom: var(--spacing-12);
+
+    &:first-of-type {
+      margin-top: var(--spacing-24);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
@@ -54,6 +78,16 @@ pre code {
     font-size: var(--typography-heading-4-font-size);
     line-height: var(--typography-heading-4-line-height);
     letter-spacing: var(--typography-heading-4-letter-spacing);
+    margin-top: var(--spacing-24);
+    margin-bottom: var(--spacing-12);
+
+    &:first-of-type {
+      margin-top: var(--spacing-24);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(h5:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)) {
@@ -62,6 +96,15 @@ pre code {
     font-size: var(--typography-heading-5-font-size);
     line-height: var(--typography-heading-5-line-height);
     letter-spacing: var(--typography-heading-5-letter-spacing);
+    margin-top: var(--spacing-20);
+
+    &:first-of-type {
+      margin-top: var(--spacing-20);
+    }
+
+    > a {
+      float: unset;
+    }
   }
 
   :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {

diff --git a/docs/components/ResourceLinks/ResourceLinks.tsx b/docs/components/ResourceLinks/ResourceLinks.tsx
@@ -43,7 +43,7 @@ export const ResourceLinks = ({
   <Unstyled>
     <ul
       {...attributes}
-      className={classNames('flex flex-wrap mt-16 mb-40 list-none m-0 p-0 gap-8', className)}
+      className={classNames('flex flex-wrap mt-24 mb-40 list-none m-0 p-0 gap-8', className)}
     >
       <ResourceLink href={sourceCode} text="Source Code" />
       {figma && <ResourceLink href={figma} text="Figma" />}