clean up global styles

components/Content.module.css

@@ -16,31 +16,43 @@
   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 H2s */
+/* special bottom border for <h2>s */
 .content h2 {
   padding-bottom: 0.25em;
   border-bottom: 1px solid var(--kinda-light);
 }
 
-.content figure {
+.content h3,
+.content h4 {
+  scroll-margin-top: 5em;
+}
+
+/* default to centering all images */
+.content figure,
+.content :global(.image_wrapper) {
   margin: 1em auto;
   text-align: center;
 }
 
-.content figure img {
-  height: auto;
-  max-width: 100%;
+.content figure :global(.image_wrapper) {
+  margin-bottom: 0;
 }
 
 .content figure figcaption {
   font-size: 0.9em;
   line-height: 1.5;
-  margin-top: 0.3em;
   color: var(--medium);
 }
 
+.content figure figcaption p {
+  margin-top: 0.3em;
+}
+
 .content ul,
 .content ol {
   margin-left: 1.5em;
@@ -58,9 +70,42 @@
   background-color: var(--light);
 }
 
+/* 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/embeds/Code.tsx

@@ -1,28 +1,35 @@
 import dynamic from "next/dynamic";
 import type { ReactNode } from "react";
 
-type Props = {
+type CustomCodeProps = {
   className?: string;
   children: ReactNode;
 };
 
-const CustomCode = (props: Props) => {
+const CustomCode = (props: CustomCodeProps) => {
   if (props.className?.split(" ").includes("hljs")) {
     const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
 
     // full multi-line code blocks with highlight.js and copy-to-clipboard button
     return (
-      <div className="code_block">
+      <div>
         <CopyButton source={props.children} />
         <code {...props}>{props.children}</code>
 
         <style jsx>{`
-          .code_block {
+          div {
             position: relative;
             max-width: 100%;
             overflow-x: scroll;
             margin: 1em 0;
           }
+
+          div > code {
+            display: block;
+            overflow-x: auto;
+            padding: 1em;
+            tab-size: 2;
+          }
         `}</style>
 
         <style jsx global>{`

components/embeds/Image.tsx

@@ -1,14 +1,17 @@
 import Image from "next/image";
-
 import type { ImageProps } from "next/image";
+import type { CSSProperties } from "react";
 
 // TODO: infer ratio when given zero/one dimensions
 // TODO: fold figure/figcaption tags into this component
 
-const CustomImg = (props: ImageProps) => {
+type CustomImageProps = ImageProps & {
+  style?: CSSProperties;
+};
+
+const CustomImage = (props: CustomImageProps) => {
   return (
-    // the required height and width are part of the props, so they get automatically passed here with {...props}
-    <div style={{ margin: "1em auto", textAlign: "center" }}>
+    <div className="image_wrapper" style={props.style}>
       <Image
         src={props.src}
         layout="intrinsic"
@@ -23,4 +26,4 @@ const CustomImg = (props: ImageProps) => {
   );
 };
 
-export default CustomImg;
+export default CustomImage;

components/embeds/Link.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-
 import type { LinkProps } from "next/link";
 
 type CustomLinkProps = LinkProps & {
@@ -7,10 +6,12 @@ type CustomLinkProps = LinkProps & {
   rel?: string;
   className?: string;
   children?: unknown;
+  rest?: unknown;
 };
-const CustomLink = ({ href, target, rel, className, children }: CustomLinkProps) => (
+
+const CustomLink = ({ href, target, rel, className, children, ...rest }: CustomLinkProps) => (
   <Link href={href} passHref={true}>
-    <a className={className} target={target} rel={rel}>
+    <a className={className} target={target} rel={rel} {...rest}>
       {children}
     </a>
   </Link>

components/embeds/Video.tsx

@@ -1,4 +1,5 @@
-import ReactPlayer, { ReactPlayerProps } from "react-player/lazy";
+import ReactPlayer from "react-player/lazy";
+import type { ReactPlayerProps } from "react-player";
 
 const Video = (props: ReactPlayerProps) => (
   <div style={{ position: "relative", paddingTop: "56.25%" }}>

components/notes/List.module.css

@@ -39,7 +39,7 @@
 }
 
 @media screen and (max-width: 768px) {
-  .section .year {
+  .year {
     font-size: 2em;
   }
 }

components/projects/RepoCard.tsx

@@ -1,22 +1,10 @@
 import { intlFormat, formatDistanceToNowStrict } from "date-fns";
 import { StarOcticon, ForkOcticon } from "../icons/octicons";
+import { RepoType } from "../../types";
 
 import styles from "./RepoCard.module.css";
 
-type Props = {
-  name: string;
-  url: string;
-  description?: string;
-  language?: {
-    name: string;
-    color?: string;
-  };
-  stars?: number;
-  forks?: number;
-  updatedAt: string;
-};
-
-const RepoCard = (props: Props) => (
+const RepoCard = (props: RepoType) => (
   <div className={styles.card}>
     <a className={styles.name} href={props.url} target="_blank" rel="noopener noreferrer">
       {props.name}