completely redo the header flexbox fiasco

components/contact/ContactForm.module.css

@@ -31,11 +31,6 @@ textarea.input {
   line-height: 1.75;
 }
 
-.markdown_tip a {
-  background: none;
-  padding-bottom: 0;
-}
-
 .markdown_tip a:first-of-type {
   font-weight: 500;
 }
@@ -59,6 +54,7 @@ textarea.input {
   border-radius: 0.3em;
   cursor: pointer;
   user-select: none;
+  font-weight: 500;
   color: var(--text);
   background-color: var(--kinda-light);
 }

components/page-header/Header.module.css

@@ -10,16 +10,156 @@
 }
 
 .nav {
-  width: 100%;
-  max-width: 865px;
-  margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
+  max-width: 865px;
+  margin: 0 auto;
+}
+
+.nav > div {
+  line-height: 0;
+}
+
+/*** left side: photo/name ***/
+
+.left {
+  flex: 1;
+}
+
+.name {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+}
+
+.name .selfie {
+  width: 50px;
+  height: 50px;
+  line-height: 0;
+  padding: 0;
+}
+
+.name .selfie img {
+  border: 1px solid var(--light) !important;
+  border-radius: 50%;
+}
+
+.name:hover {
+  color: var(--link);
+}
+
+.name:hover .selfie {
+  opacity: 0.9;
+}
+
+.name span:last-of-type {
+  margin: 0 0.6em;
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+/*** right side: menu ***/
+
+.menu {
+  display: inline-flex;
+  padding: 0;
+  margin: 0;
+}
+
+.menu li {
+  list-style: none;
+  display: inline-flex;
+  margin-left: 1.8em;
+}
+
+.menu li .link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+}
+
+.menu li .link:hover {
+  color: var(--link);
+}
+
+.menu li .icon {
+  width: 1.6em;
+  height: 1.6em;
+}
+
+.menu li span {
+  font-size: 0.95em;
+  font-weight: 500;
+  margin-left: 0.8em;
+  line-height: 1;
+}
+
+.menu li.theme_toggle {
+  margin-left: 1.25em;
 }
 
 @media screen and (max-width: 768px) {
   .header {
     padding: 0.75em 1.25em;
   }
+
+  .left {
+    flex: 0;
+  }
+
+  .name .selfie {
+    width: 70px;
+    height: 70px;
+  }
+
+  .name span:last-of-type {
+    display: none;
+  }
+
+  .right {
+    flex: 1;
+    max-width: 325px;
+    margin-left: 2.5em;
+  }
+
+  .menu {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .menu li {
+    margin-left: 0;
+  }
+
+  .menu li .icon {
+    width: 1.8em;
+    height: 1.8em;
+  }
+
+  /* hide text next to emojis on mobile */
+  .menu li span {
+    display: none;
+  }
+
+  .menu li.theme_toggle {
+    margin-left: -0.3em;
+  }
+}
+
+/* the home icon is redundant when space is SUPER tight */
+@media screen and (max-width: 380px) {
+  .right {
+    max-width: 225px;
+    margin-left: 1.6em;
+  }
+
+  .menu li:first-of-type {
+    display: none;
+  }
 }

components/page-header/Header.tsx

@@ -1,14 +1,77 @@
 import { memo } from "react";
-import Name from "./Name";
+import dynamic from "next/dynamic";
-import Menu from "./Menu";
+import Link from "next/link";
+import Image from "next/image";
+import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
+
+import meJpg from "../../public/static/images/me.jpg";
 
 import styles from "./Header.module.css";
 
+// ensure the theme toggle isn't evaluated server-side
+const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
+
+const links = [
+  {
+    icon: <HomeIcon className={`icon ${styles.icon}`} />,
+    text: "Home",
+    href: "/",
+  },
+  {
+    icon: <NotesIcon className={`icon ${styles.icon}`} />,
+    text: "Notes",
+    href: "/notes/",
+  },
+  {
+    icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
+    text: "Projects",
+    href: "/projects/",
+  },
+  {
+    icon: <ContactIcon className={`icon ${styles.icon}`} />,
+    text: "Contact",
+    href: "/contact/",
+  },
+];
+
 const Header = () => (
   <header className={styles.header}>
     <nav className={styles.nav}>
-      <Name />
+      <div className={styles.left}>
-      <Menu />
+        <Link href="/">
+          <a className={styles.name}>
+            <div className={styles.selfie}>
+              <Image
+                src={meJpg}
+                alt="Photo of Jake Jarvis"
+                width={70}
+                height={70}
+                quality={60}
+                layout="intrinsic"
+                priority
+              />
+            </div>
+            <span>Jake Jarvis</span>
+          </a>
+        </Link>
+      </div>
+
+      <div className={styles.right}>
+        <ul className={styles.menu}>
+          {links.map((link, index) => (
+            <li key={index}>
+              <Link href={link.href} prefetch={false}>
+                <a className={styles.link}>
+                  {link.icon} <span>{link.text}</span>
+                </a>
+              </Link>
+            </li>
+          ))}
+          <li className={styles.theme_toggle}>
+            <ThemeToggle className={styles.icon} />
+          </li>
+        </ul>
+      </div>
     </nav>
   </header>
 );

components/page-header/Menu.module.css

@@ -1,67 +0,0 @@
-.menu {
-  list-style: none;
-  display: flex;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-}
-
-.item {
-  margin-left: 1.8em;
-  display: inline-flex;
-}
-
-.item .link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
-}
-
-.item .link:hover {
-  color: var(--link);
-}
-
-.item .icon {
-  width: 1.6em;
-  height: 1.6em;
-}
-
-.item .text {
-  font-size: 0.95em;
-  font-weight: 500;
-  margin-top: 0.125em;
-  margin-left: 0.75em;
-}
-
-.theme_toggle {
-  margin-left: 1.25em;
-}
-
-@media screen and (max-width: 768px) {
-  .menu {
-    max-width: 320px;
-    margin-left: 20px;
-    justify-content: space-between;
-    flex-grow: 1;
-  }
-
-  .item {
-    margin-left: 0;
-  }
-
-  .item .icon {
-    width: 1.8em;
-    height: 1.8em;
-  }
-
-  /* hide text next to emojis on mobile */
-  .item .text {
-    display: none;
-  }
-
-  .theme_toggle {
-    margin-left: -0.3em;
-  }
-}

components/page-header/Menu.tsx

@@ -1,50 +0,0 @@
-import dynamic from "next/dynamic";
-import Link from "next/link";
-import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
-
-import styles from "./Menu.module.css";
-
-// ensure the theme toggle isn't evaluated server-side
-const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
-
-const links = [
-  {
-    icon: <HomeIcon className={`icon ${styles.icon}`} />,
-    text: "Home",
-    href: "/",
-  },
-  {
-    icon: <NotesIcon className={`icon ${styles.icon}`} />,
-    text: "Notes",
-    href: "/notes/",
-  },
-  {
-    icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
-    text: "Projects",
-    href: "/projects/",
-  },
-  {
-    icon: <ContactIcon className={`icon ${styles.icon}`} />,
-    text: "Contact",
-    href: "/contact/",
-  },
-];
-
-const Menu = () => (
-  <ul className={styles.menu}>
-    {links.map((link, index) => (
-      <li key={index} className={styles.item}>
-        <Link href={link.href} prefetch={false}>
-          <a className={styles.link}>
-            {link.icon} <span className={styles.text}>{link.text}</span>
-          </a>
-        </Link>
-      </li>
-    ))}
-    <li className={`${styles.item} ${styles.theme_toggle}`}>
-      <ThemeToggle className={styles.icon} />
-    </li>
-  </ul>
-);
-
-export default Menu;

components/page-header/Name.module.css

@@ -1,42 +0,0 @@
-.title {
-  display: flex;
-  align-items: center;
-  color: var(--medium-dark);
-  background: none;
-  padding-bottom: 0;
-}
-
-.title:hover {
-  color: var(--link);
-}
-
-.selfie {
-  width: 50px;
-  height: 50px;
-}
-
-.selfie img {
-  border: 1px solid var(--light) !important;
-  border-radius: 50%;
-}
-
-.title:hover .selfie {
-  opacity: 0.9;
-}
-
-.name {
-  margin: 0 0.6em;
-  font-size: 1.2em;
-  font-weight: 500;
-}
-
-@media screen and (max-width: 768px) {
-  .selfie {
-    width: 70px;
-    height: 70px;
-  }
-
-  .name {
-    display: none;
-  }
-}

components/page-header/Name.tsx

@@ -1,19 +0,0 @@
-import Link from "next/link";
-import Image from "next/image";
-
-import meJpg from "../../public/static/images/me.jpg";
-
-import styles from "./Name.module.css";
-
-const Name = () => (
-  <Link href="/">
-    <a className={styles.title}>
-      <span className={styles.selfie}>
-        <Image src={meJpg} alt="Photo of Jake Jarvis" width={75} height={75} quality={60} layout="intrinsic" priority />
-      </span>
-      <span className={styles.name}>Jake Jarvis</span>
-    </a>
-  </Link>
-);
-
-export default Name;

styles/index.css

@@ -21,9 +21,10 @@ a:hover {
 }
 
 /* set an anchor's class to `no-underline` to disable all of the above */
-.no-underline {
+a.no-underline {
   background: none !important;
   padding-bottom: 0;
+  transition: none;
 }
 
 /*