next-mdx-remote v4 (#737)

components/Content/Content.module.css

@@ -0,0 +1,118 @@
+.content {
+  font-size: 0.9em;
+  line-height: 1.7;
+}
+
+.content blockquote {
+  margin-left: 0;
+  padding-left: 1.5em;
+  border-left: 3px solid var(--link);
+  color: var(--medium-dark);
+}
+
+.content h2,
+.content h3,
+.content h4 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+
+  /* offset (approximately) with sticky header so jumped-to content isn't hiding behind it */
+  scroll-margin-top: 4em;
+}
+
+/* special bottom border for <h2>s */
+.content h2 {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--kinda-light);
+}
+
+.content h3,
+.content h4 {
+  scroll-margin-top: 5em;
+}
+
+.content ul,
+.content ol {
+  margin-left: 1.5em;
+  padding-left: 0;
+}
+
+.content ul li,
+.content ol li {
+  padding-left: 0.25em;
+}
+
+.content hr {
+  margin: 1.5em auto;
+  height: 2px;
+  border: 0;
+  background-color: var(--light);
+}
+
+.content :global(.image_wrapper) {
+  line-height: 0;
+}
+
+/* default to centering all images */
+.content :global(.image_wrapper),
+.content figure {
+  margin: 1em auto;
+  text-align: center;
+}
+
+.content figure :global(.image_wrapper) {
+  margin-bottom: 0;
+}
+
+.content figure figcaption {
+  margin-top: 0.75em;
+  font-size: 0.9em;
+  line-height: 1.5;
+  color: var(--medium);
+}
+
+/* some figcaptions contain paragraphs, some don't, so reset all of them */
+.content figure figcaption p {
+  margin: 0;
+}
+
+/* sub-heading anchor styles */
+.content :global(.h-anchor) {
+  margin: 0 0.25em;
+  padding: 0 0.25em;
+  color: var(--medium-light);
+  background: none;
+  font-weight: 300;
+  opacity: 0; /* overridden on hover */
+  user-select: none;
+}
+.content :global(.h-anchor::before) {
+  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
+}
+.content :global(.h-anchor:hover) {
+  color: var(--link);
+}
+
+/* make anchor `#` link show up on hover over the corresponding heading */
+.content h2:hover :global(.h-anchor),
+.content h3:hover :global(.h-anchor),
+.content h4:hover :global(.h-anchor) {
+  opacity: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .content {
+    font-size: 0.925em;
+    line-height: 1.85;
+  }
+
+  .content h2 {
+    scroll-margin-top: 5em;
+  }
+
+  .content h3,
+  .content h4 {
+    scroll-margin-top: 6em;
+  }
+}

components/Content/Content.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+import styles from "./Content.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+const Content = ({ children }: Props) => <div className={styles.content}>{children}</div>;
+
+export default Content;