responsive style adjustments

components/home/Home.module.scss

@@ -1,6 +1,4 @@
 .home {
-  font-size: 1em;
-
   h1 {
     margin: 0 0 0.3em -0.03em; // TODO: why is this indented slightly?
     font-size: 1.8em;
@@ -35,10 +33,10 @@
     }
   }
 
-  sup {
-    letter-spacing: normal;
-    position: relative;
-    margin-left: 0.2em;
+  .pgp_key {
+    margin: 0 0.15em;
+    font-size: 0.65em;
+    word-spacing: -0.3em;
 
     a {
       background: none;
@@ -46,13 +44,7 @@
     }
   }
 
-  .pgp {
-    font-size: 0.875em;
-    word-spacing: -0.3em;
-    margin-right: 0.075em;
-  }
-
-  .light {
+  .quiet {
     color: var(--medium-light);
   }
 

components/home/Home.tsx

@@ -133,7 +133,7 @@ export default function Home() {
         >
           the Tooth Fairy
         </Link>
-        . <span className={styles.light}>I've improved a bit since then, I think...</span>
+        . <span className={styles.quiet}>I've improved a bit since then, I think...</span>
       </p>
 
       <p>
@@ -220,11 +220,9 @@ export default function Home() {
         <Link href="/contact/" title="Send an email" lightColor="#de0c0c" darkColor="#ff5050">
           email
         </Link>{" "}
-        <sup className="monospace">
+        <sup className={`monospace ${styles.pgp_key}`}>
           <Link href="/pubkey.asc" title="My Public Key" lightColor="#757575" darkColor="#959595" external={true}>
-            <span className={styles.pgp}>
-              <LockIcon alt="PGP Key" /> 2B0C 9CF2 51E6 9A39
-            </span>
+            <LockIcon className="icon" /> 2B0C 9CF2 51E6 9A39
           </Link>
         </sup>
         ,{" "}

components/notes/Meta.module.scss

@@ -23,14 +23,8 @@
   }
 }
 
-.meta_icon {
+.icon {
   margin-right: 0.6em;
-  user-select: none;
-
-  .icon_svg {
-    vertical-align: -0.2em;
-    cursor: inherit;
-  }
 }
 
 .date,

components/notes/Meta.tsx

@@ -18,15 +18,17 @@ export default function Meta({ title, date, slug, tags = [] }: Props) {
     <>
       <div className={styles.meta}>
         <div className={styles.date}>
-          <span className={styles.meta_icon}>
-            <DateIcon className={`icon ${styles.icon_svg}`} />
+          <span>
+            <DateIcon className={`icon ${styles.icon}`} />
+          </span>
+          <span title={format(parseISO(date), "PPppp")}>
+            <Link href={`/notes/${slug}/`}>{format(parseISO(date), "MMMM d, yyyy")}</Link>
           </span>
-          <span title={format(parseISO(date), "PPppp")}>{format(parseISO(date), "MMMM d, yyyy")}</span>
         </div>
         {tags.length > 0 && (
           <div className={styles.tags}>
-            <span className={styles.meta_icon}>
-              <TagIcon className={`icon ${styles.icon_svg}`} />
+            <span>
+              <TagIcon className={`icon ${styles.icon}`} />
             </span>
             {tags.map((tag) => (
               <span key={tag} className={styles.tag}>
@@ -36,8 +38,8 @@ export default function Meta({ title, date, slug, tags = [] }: Props) {
           </div>
         )}
         <div>
-          <span className={styles.meta_icon}>
-            <EditIcon className={`icon ${styles.icon_svg}`} />
+          <span>
+            <EditIcon className={`icon ${styles.icon}`} />
           </span>
           <span>
             <a
@@ -51,8 +53,8 @@ export default function Meta({ title, date, slug, tags = [] }: Props) {
           </span>
         </div>
         <div>
-          <span className={styles.meta_icon}>
-            <ViewsIcon className={`icon ${styles.icon_svg}`} />
+          <span>
+            <ViewsIcon className={`icon ${styles.icon}`} />
           </span>
           <Hits slug={`notes/${slug}`} />
         </div>

components/page-header/Menu.module.scss

@@ -12,10 +12,30 @@
   align-items: center;
   line-height: 1;
 
-  svg {
+  .link {
+    display: inline-flex;
+    align-items: center;
+    color: var(--medium-dark);
+    background: none;
+    padding-bottom: 0;
+
+    &:hover {
+      color: var(--link);
+    }
+  }
+
+  .icon {
     width: 1.6em;
     height: 1.6em;
   }
+
+  .text {
+    font-size: 0.95em;
+    font-weight: 500;
+    margin-top: 0.125em;
+    margin-left: 0.75em;
+    line-height: 1;
+  }
 }
 
 .theme_toggle {
@@ -24,15 +44,20 @@
 
 @media screen and (max-width: 800px) {
   .item {
-    margin-left: 2em;
+    margin-left: 1.75em;
 
-    svg {
+    .icon {
       width: 1.75em;
       height: 1.75em;
     }
+
+    // hide text next to emojis on mobile
+    .text {
+      display: none;
+    }
   }
 
   .theme_toggle {
-    margin-left: 1.6em;
+    margin-left: 1.4em;
   }
 }

components/page-header/Menu.tsx

@@ -1,27 +1,27 @@
 import dynamic from "next/dynamic";
-import MenuItem from "./MenuItem";
+import Link from "next/link";
 import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
 
 import styles from "./Menu.module.scss";
 
 const menuItems = [
   {
-    icon: <HomeIcon />,
+    icon: <HomeIcon className={`icon ${styles.icon}`} />,
     text: "Home",
     href: "/",
   },
   {
-    icon: <NotesIcon />,
+    icon: <NotesIcon className={`icon ${styles.icon}`} />,
     text: "Notes",
     href: "/notes/",
   },
   {
-    icon: <ProjectsIcon />,
+    icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
     text: "Projects",
     href: "/projects/",
   },
   {
-    icon: <ContactIcon />,
+    icon: <ContactIcon className={`icon ${styles.icon}`} />,
     text: "Contact",
     href: "/contact/",
   },
@@ -35,11 +35,15 @@ export default function Menu() {
     <ul className={styles.menu}>
       {menuItems.map((item, index) => (
         <li key={index} className={styles.item}>
-          <MenuItem {...item} />
+          <Link href={item.href} prefetch={false}>
+            <a className={styles.link}>
+              {item.icon} <span className={styles.text}>{item.text}</span>
+            </a>
+          </Link>
         </li>
       ))}
       <li className={`${styles.item} ${styles.theme_toggle}`}>
-        <ThemeToggle />
+        <ThemeToggle className={styles.icon} />
       </li>
     </ul>
   );

components/page-header/MenuItem.module.scss

@@ -1,30 +0,0 @@
-.item_link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
-
-  &:hover {
-    color: var(--link);
-  }
-}
-
-.item_icon {
-  user-select: none;
-}
-
-.item_text {
-  font-size: 0.95em;
-  font-weight: 500;
-  margin-top: 0.05em;
-  margin-left: 0.75em;
-  line-height: 1;
-}
-
-@media screen and (max-width: 800px) {
-  // hide text next to emojis on mobile
-  .item_text {
-    display: none;
-  }
-}

components/page-header/MenuItem.tsx

@@ -1,20 +0,0 @@
-import Link from "next/link";
-
-import styles from "./MenuItem.module.scss";
-
-type Props = {
-  href: URL | string;
-  icon: any;
-  text: string;
-};
-
-export default function MenuItem({ href, icon, text }: Props) {
-  return (
-    <Link href={href} prefetch={false}>
-      <a className={styles.item_link}>
-        <span className={styles.item_icon}>{icon}</span>
-        <span className={styles.item_text}>{text}</span>
-      </a>
-    </Link>
-  );
-}

components/page-header/ThemeToggle.tsx

@@ -8,19 +8,20 @@ const storageKey = "dark_mode";
 export const getDarkPref = () => localStorage.getItem(storageKey);
 export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
 
-// use the `<html class="...">` as a hint to what the theme was set to outside of the button component
-// there's probably (definitely) a cleaner way to do this..?
+// use the `<html data-theme="...">` as a hint to what the theme was set to outside of the button component
+// TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
 export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
 
-// sets appropriate `<html data-theme="...">` CSS property
+// sets appropriate `<html data-theme="...">` and color-scheme CSS properties
 export const updateDOM = (dark: boolean) => {
   const root = document.documentElement;
+  const theme = dark ? "dark" : "light";
 
-  // set `<html data-theme="...">`
-  root.setAttribute("data-theme", dark ? "dark" : "light");
+  root.setAttribute("data-theme", theme);
+  root.style.colorScheme = theme;
 };
 
-export default function ThemeToggle() {
+export default function ThemeToggle({ className = "" }) {
   // sync button up with theme and preference states after initialization
   const [dark, setDark] = useState(isDark());
   const [saved, setSaved] = useState(!!getDarkPref());
@@ -61,7 +62,7 @@ export default function ThemeToggle() {
       title={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
       aria-label={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
     >
-      {dark ? <BulbOffIcon /> : <BulbOnIcon />}
+      {dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
     </button>
   );
 }

components/projects/RepositoryGrid.tsx

@@ -10,6 +10,7 @@ export default function RepositoryGrid({ repos }) {
           <RepositoryCard key={repo.name} {...repo} />
         ))}
       </div>
+
       <p className={styles.view_more}>
         <a href="https://github.com/jakejarvis?tab=repositories" target="_blank" rel="noopener noreferrer">
           View more on GitHub...

components/video/FullPageVideo.tsx

@@ -3,7 +3,7 @@ import type { ReactPlayerProps } from "react-player";
 
 import styles from "./FullPageVideo.module.scss";
 
-export default function Video(props: ReactPlayerProps) {
+export default function FullPageVideo(props: ReactPlayerProps) {
   return (
     <div className={styles.wrapper}>
       <ReactPlayer className={styles.react_player} width="100%" height="100%" {...props} />

next.config.js

@@ -31,6 +31,7 @@ module.exports = withBundleAnalyzer({
         {
           loader: "@svgr/webpack",
           options: {
+            icon: true,
             typescript: true,
             svgProps: {
               className: "icon",

styles/index.scss

@@ -1,7 +1,7 @@
 @use "reset";
 @use "typography";
-@use "colors";
 @use "syntax";
+@use "colors";
 
 // Global Styles
 body {
@@ -89,10 +89,7 @@ a {
   display: inline-block;
   height: 1.2em;
   width: 1.2em;
-  margin: 0 0.05em;
-  vertical-align: -0.22em;
-  border: 0;
-  cursor: inherit;
+  vertical-align: -0.2em;
 }
 
 // all code