a bunch of cleanup, mostly of my messy css hacks over the years

components/Footer/Footer.module.css

@@ -37,15 +37,13 @@
 }
 
 .icon {
-  display: inline;
   width: 1.25em;
   height: 1.25em;
-  vertical-align: -0.25em;
   margin: 0 0.1em;
+  vertical-align: text-top;
 }
 
 .heart {
-  display: inline-block;
   color: var(--colors-error);
 }
 

components/Footer/Footer.tsx

@@ -26,11 +26,7 @@ const Footer = ({ className, ...rest }: FooterProps) => {
         </div>
 
         <div>
-          Made with{" "}
-          <span className={styles.heart} title="Love">
-            <HeartIcon size="1.25em" fill="currentColor" className={styles.icon} />
-          </span>{" "}
-          and{" "}
+          Made with <HeartIcon size="1.25em" fill="currentColor" className={clsx(styles.icon, styles.heart)} /> and{" "}
           <Link
             href="https://nextjs.org/"
             title="Powered by Next.js"
@@ -44,8 +40,8 @@ const Footer = ({ className, ...rest }: FooterProps) => {
               stroke="currentColor"
               strokeWidth="0"
               viewBox="0 0 24 24"
-              height="1.25em"
               width="1.25em"
+              height="1.25em"
               className={styles.icon}
             >
               <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />

components/Header/Header.module.css

@@ -22,7 +22,7 @@
 }
 
 .home {
-  display: inline-flex;
+  display: flex;
   flex-shrink: 0;
   align-items: center;
   color: var(--colors-medium-dark) !important;

components/Menu/Menu.module.css

@@ -1,11 +1,13 @@
 .menu {
-  display: inline-flex;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   padding: 0;
   margin: 0;
 }
 
 .item {
-  display: inline-block;
+  display: block;
   margin-left: 1em;
   list-style: none;
 }

components/Menu/Menu.tsx

@@ -27,7 +27,13 @@ const Menu = ({ className, ...rest }: MenuProps) => {
         );
       })}
 
-      <li className={styles.item}>
+      <li
+        className={styles.item}
+        style={{
+          // manually align the theme toggle with the rest of the menu icons
+          paddingTop: "0.2em",
+        }}
+      >
         <MenuItem
           // @ts-expect-error
           icon={ThemeToggle}

components/MenuItem/MenuItem.module.css

@@ -1,6 +1,8 @@
 .link {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 0.6em;
+  margin-top: 0.2em;
   color: var(--colors-medium-dark) !important;
 }
 
@@ -17,17 +19,16 @@
 }
 
 .icon {
-  display: inline-block;
+  display: block;
   width: 1.25em;
   height: 1.25em;
-  vertical-align: -0.3em;
 }
 
 .label {
+  margin-left: 0.7em;
   font-size: 0.925em;
   font-weight: 500;
   letter-spacing: 0.025em;
-  margin-left: 0.7em;
 }
 
 @media (max-width: 768px) {

components/ThemeToggle/ThemeToggle.module.css

@@ -1,4 +1,5 @@
 .toggle {
+  display: block;
   border: 0;
   padding: 0.6em;
   margin-right: -0.6em;
@@ -15,7 +16,7 @@
 /* hacky way to avoid flashing icon for a few milliseconds on initial render */
 .toggle > .sun,
 [data-theme="dark"] .toggle > .moon {
-  display: inline-block;
+  display: inherit;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */