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" />