🎨 Add H5 and H6 styles (#390)

Co-authored-by: Rowan Cockett <[email protected]>
jupyter-book · Jun 5, 2024 · cf97680 · cf97680
1 parent e3ab7cd
commit cf97680
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/nasty-hotels-burn.md b/.changeset/nasty-hotels-burn.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/styles': patch
+---
+
+Add H5 and H6 styles
diff --git a/styles/index.js b/styles/index.js
@@ -85,6 +85,7 @@ const themeExtensions = {
         code: {
           fontWeight: '400',
         },
+        // These code before/after elements are hard coded to remove the backticks, "`", that are in by default.
         'code::before': {
           content: '',
         },
@@ -101,6 +102,11 @@ const themeExtensions = {
           marginTop: '0.25rem',
           marginBottom: '0.25rem',
         },
+        // Tailwind doesn't style h5 or h6 at all so this makes them look like headers
+        'h5, h6': {
+          color: 'var(--tw-prose-headings)',
+          fontWeight: '500',
+        },
       },
     },
     invert: {