Switch hero image order with description and reduce h2 spacing

primer · Dec 16, 2023 · 6f21970 · 6f21970
1 parent c00addb
commit 6f21970
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/.changeset/nasty-bikes-report.md b/.changeset/nasty-bikes-report.md
@@ -0,0 +1,5 @@
+---
+'@primer/doctocat-nextjs': patch
+---
+
+Switch hero image order with description and reduce `h2` block start margin
diff --git a/packages/theme/components/layout/root-layout/Theme.tsx b/packages/theme/components/layout/root-layout/Theme.tsx
@@ -135,16 +135,16 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                                         {frontMatter.title}
                                       </Heading>
                                     )}
-                                    {frontMatter.image && (
-                                      <Box paddingBlockEnd={16}>
-                                        <Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
-                                      </Box>
-                                    )}
                                     {frontMatter.description && (
                                       <Text as="p" variant="muted" size="300">
                                         {frontMatter.description}
                                       </Text>
                                     )}
+                                    {frontMatter.image && (
+                                      <Box paddingBlockStart={16}>
+                                        <Hero.Image src={frontMatter.image} alt={frontMatter['image-alt']} />
+                                      </Box>
+                                    )}
                                     {frontMatter['action-1-text'] && (
                                       <Box paddingBlockStart={16}>
                                         <ButtonGroup>

diff --git a/packages/theme/css/prose.module.css b/packages/theme/css/prose.module.css
@@ -129,15 +129,12 @@
   letter-spacing: var(--brand-heading-letterSpacing-300);
 }
 
-.Prose :is(h1, h2, h3) {
-  --spacing: var(--base-size-64);
-}
-
 .Prose :is(h1) {
+  --spacing: var(--base-size-64);
   margin-block-end: var(--spacing);
 }
 
-.Prose :is(h1, h2, h3) + * {
+.Prose :is(h2, h3) + * {
   --spacing: var(--base-size-40);
 }