Update Prose to use flexbox, reduce overhead with docs styles (#41934)

* Update Prose to use flexbox, reduce overhead with docs styles

* Fix up some table styles

diff --git a/scss/content/_prose.scss b/scss/content/_prose.scss
index 40480d5e4b69f34ee57f3f2e64d5cbe060760064..9120d93832071665cff05b1dca58b317293e4933 100644 (file)
--- a/scss/content/_prose.scss
+++ b/scss/content/_prose.scss
@@ -3,15 +3,23 @@
 
 @layer content {
   .prose {
-    --#{$prefix}content-font-size: 16px;
-    --#{$prefix}content-gap: 24px;
+    --#{$prefix}content-font-size: var(--#{$prefix}font-size-sm);
+    --#{$prefix}content-gap: 20px;
     --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));
 
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--#{$prefix}content-gap);
     max-width: 1000px;
     margin-inline: auto;
     font-size: var(--#{$prefix}content-font-size);
-    line-height: var(--#{$prefix}content-gap);
+    line-height: 1.5;
+
+    @media (width >= 1024px) {
+      --#{$prefix}content-font-size: var(--#{$prefix}font-size-md);
+      --#{$prefix}content-gap: 24px;
+    }
 
     p,
     ul,
@@ -20,7 +28,7 @@
     pre,
     table,
     blockquote {
-      margin-bottom: var(--#{$prefix}content-gap);
+      margin-block: 0;
     }
 
     li:not(:last-child) {
@@ -44,12 +52,15 @@
     h4,
     h5,
     h6 {
-      --bs-heading-color: var(--bs-emphasis-color);
-
       margin-top: 0;
-      margin-bottom: calc(var(--#{$prefix}content-gap) / 2);
+      margin-bottom: calc(var(--#{$prefix}content-gap) / -2);
       font-weight: 500;
       line-height: 1.25;
+
+      code {
+        font-weight: 600;
+        color: inherit;
+      }
     }
 
     h1,
@@ -117,14 +128,15 @@
       border-collapse: collapse;
     }
 
-    td,
-    th {
-      padding: 6px 12px;
-      text-align: inherit;
-      border: 1px solid var(--#{$prefix}border-color);
+    :where(table:not([class])) {
+      td,
+      th {
+        padding: 6px 12px;
+        text-align: inherit;
+        border: 1px solid var(--#{$prefix}border-color);
+      }
     }
 
-
     dt {
       font-weight: 500;
     }

diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 2f806c5d78750036a2df7ef0a4deecaad1765c30..edad987693a9d469a0d425095067c00166fddd54 100644 (file)
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -214,25 +214,19 @@ if (currentPageIndex < allPages.length - 1) {
 
         {
           frontmatter.reference && (
-            <div class="mb-5">
-              <ReferenceTable reference={frontmatter.reference} />
-            </div>
+            <ReferenceTable reference={frontmatter.reference} />
           )
         }
 
         {
           frontmatter.utility && (
-            <div class="mb-5">
-              <UtilityReferenceTable utility={frontmatter.utility} />
-            </div>
+            <UtilityReferenceTable utility={frontmatter.utility} />
           )
         }
 
         {
           frontmatter.classes && (
-            <div class="mb-5">
-              <HelperReferenceTable classes={frontmatter.classes} />
-            </div>
+            <HelperReferenceTable classes={frontmatter.classes} />
           )
         }
 

diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index d35e4e881921fd46b92938706dc9bb63d4f52b45..67eb7f243b784c90aa2e13f78a6c1b58ba069480 100644 (file)
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -24,7 +24,7 @@
     --bd-example-padding: 1.25rem;
     --bd-example-inner-radius: calc(var(--bs-border-radius) - 1px);
 
-    margin: 0 ($bd-gutter-x * -.5) 1rem;
+    margin: 0 ($bd-gutter-x * -.5);
     font-size: var(--#{$prefix}font-size-sm);
     background-color: var(--bd-pre-bg);
     border: solid var(--bs-border-color);

diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index b93876234366aef77c15e666f85636311b41dea6..7c82a248a7cbed7f2b3d171d99519af15337a322 100644 (file)
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -15,30 +15,6 @@
       font-size: var(--#{$prefix}font-size-md);
     }
 
-    > p {
-      margin-bottom: 1.25rem;
-    }
-
-    > h2,
-    > h3,
-    > h4 {
-      --bs-heading-color: var(--bs-fg);
-    }
-
-    // Offset content from fixed navbar when jumping to headings
-    > h2:not(:first-child) {
-      margin-top: 3rem;
-    }
-
-    > h3 {
-      margin-top: 2rem;
-
-      code {
-        font-weight: 600;
-        color: inherit;
-      }
-    }
-
     > ul li,
     > ol li {
       margin-bottom: .25rem;