💬 Add style for pull-quotes (#328)

jupyter-book · Mar 13, 2024 · 5dea885 · 5dea885
1 parent 7cad84b
commit 5dea885
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/.changeset/odd-cycles-build.md b/.changeset/odd-cycles-build.md
@@ -0,0 +1,6 @@
+---
+'myst-to-react': minor
+'@myst-theme/styles': minor
+---
+
+Add support for pull-quotes, fix figure classes
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
@@ -214,10 +214,14 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
     );
   },
   container({ node }) {
+    const figureName = `fig-${node.kind}`;
     return (
       <figure
         id={node.html_id || node.identifier || node.key}
-        className={classNames({ subcontainer: node.subcontainer }, node.class)}
+        className={classNames(
+          { [figureName]: !!node.kind, subcontainer: node.subcontainer },
+          node.class,
+        )}
       >
         <MyST ast={node.children} />
       </figure>

diff --git a/styles/figures.css b/styles/figures.css
@@ -1,11 +1,14 @@
-figure.quote figcaption {
+figure.fig-quote figcaption {
   text-align: right;
 }
-figure.quote figcaption > p:before {
+figure.fig-quote figcaption > p:before {
   content: '—';
   padding-right: 0.5em;
 }
-figure.code > div {
+figure.fig-quote.pull-quote > blockquote { 
+  font-size: 1.4rem;
+}
+figure.fig-code > div {
   margin: 0;
 }
 figure.subcontainer {