restore image captions in markdown with a "clever" (messy) css hack

components/Figure/Figure.module.css

@@ -1,11 +0,0 @@
-.figure {
-  margin: 1em auto;
-  text-align: center;
-}
-
-.caption {
-  font-size: 0.9em;
-  line-height: 1.5;
-  color: var(--colors-medium);
-  margin-top: -0.4em;
-}

components/Figure/Figure.tsx

@@ -1,22 +0,0 @@
-import innerText from "react-innertext";
-import clsx from "clsx";
-import Image from "../Image";
-import type { PropsWithChildren, ComponentPropsWithoutRef } from "react";
-
-import styles from "./Figure.module.css";
-
-export type FigureProps = Omit<ComponentPropsWithoutRef<typeof Image>, "alt"> &
-  PropsWithChildren<{
-    alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
-  }>;
-
-const Figure = ({ children, alt, className, ...imageProps }: FigureProps) => {
-  return (
-    <figure className={clsx(styles.figure, className)}>
-      <Image alt={alt || innerText(children)} {...imageProps} />
-      <figcaption className={styles.caption}>{children}</figcaption>
-    </figure>
-  );
-};
-
-export default Figure;

components/Figure/index.ts

@@ -1,2 +0,0 @@
-export * from "./Figure";
-export { default } from "./Figure";

components/Image/Image.module.css

@@ -4,3 +4,14 @@
   max-width: 100%;
   height: auto;
 }
+
+/* weird hack to enable image captions in markdown */
+.image + em {
+  display: block;
+  text-align: center;
+  margin-top: -0.4em;
+  font-style: normal;
+  font-size: 0.95em;
+  line-height: 1.5;
+  color: var(--colors-medium);
+}

components/MenuItem/MenuItem.module.css

@@ -1,7 +1,7 @@
 .link {
   display: inline-block;
   color: var(--colors-medium-dark) !important;
-  padding: 0.6em;
+  padding: 0.6em !important;
 }
 
 /* indicate active page/section */

components/PageTitle/PageTitle.module.css

@@ -3,6 +3,7 @@
   margin-bottom: 0.6em;
   font-size: 2em;
   font-weight: 500;
+  text-align: left;
   text-transform: lowercase;
 }