json-ld improvements

components/Footer/Footer.module.css

@@ -9,9 +9,10 @@
 
 .row {
   display: flex;
-  width: 100%;
-  margin: 0 auto;
   justify-content: space-between;
+  width: 100%;
+  max-width: var(--max-width);
+  margin: 0 auto;
   font-size: 0.8em;
   line-height: 2.3;
 }

components/Footer/Footer.tsx

@@ -2,7 +2,6 @@ import clsx from "clsx";
 import { HeartIcon } from "lucide-react";
 import Link from "../Link";
 import * as config from "../../lib/config";
-import { MAX_WIDTH } from "../../lib/config/constants";
 import type { ComponentPropsWithoutRef } from "react";
 
 import styles from "./Footer.module.css";
@@ -12,7 +11,7 @@ export type FooterProps = ComponentPropsWithoutRef<"footer">;
 const Footer = ({ className, ...rest }: FooterProps) => {
   return (
     <footer className={clsx(styles.footer, className)} {...rest}>
-      <div className={styles.row} style={{ maxWidth: MAX_WIDTH }}>
+      <div className={styles.row}>
         <div>
           Content{" "}
           <Link href="/license" title={config.license} plain className={styles.link}>

components/Header/Header.module.css

@@ -46,6 +46,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  max-width: var(--max-width);
   margin: 0 auto;
 }
 

components/Header/Header.tsx

@@ -3,7 +3,6 @@ import clsx from "clsx";
 import Link from "../Link";
 import Menu from "../Menu";
 import * as config from "../../lib/config";
-import { MAX_WIDTH } from "../../lib/config/constants";
 import type { ComponentPropsWithoutRef } from "react";
 
 import styles from "./Header.module.css";
@@ -15,7 +14,7 @@ export type HeaderProps = ComponentPropsWithoutRef<"header">;
 const Header = ({ className, ...rest }: HeaderProps) => {
   return (
     <header className={clsx(styles.header, className)} {...rest}>
-      <nav className={styles.nav} style={{ maxWidth: MAX_WIDTH }}>
+      <nav className={styles.nav}>
         <Link href="/" rel="author" title={config.authorName} plain className={styles.homeLink}>
           <Image
             src={selfieJpg}

components/ThemeToggle/ThemeToggle.tsx

@@ -11,7 +11,7 @@ import styles from "./ThemeToggle.module.css";
 export type ThemeToggleProps = ComponentPropsWithoutRef<LucideIcon>;
 
 const ThemeToggle = ({ className, ...rest }: ThemeToggleProps) => {
-  const { theme, setTheme } = useTheme();
+  const [theme, setTheme] = useTheme();
 
   return (
     <button