less corny header and note meta icons (#746)

* less corny header and note meta icons

* swap out more twemojis

* indicate active page in nav bar

* update favicons

* extract `<MenuLink />` into its own component

* change hover effect to an underline

* cropped header photo

components/MenuLink/MenuLink.module.css

@@ -0,0 +1,35 @@
+.link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  line-height: 1;
+  padding: 0.6em;
+}
+
+.link:hover,
+.link.current {
+  border-bottom: 3px solid;
+  margin-bottom: -3px;
+}
+
+.link:hover {
+  border-color: var(--kinda-light);
+}
+
+.link.current {
+  border-color: var(--link-underline);
+}
+
+.label {
+  font-size: 0.95em;
+  font-weight: 500;
+  margin-top: 0.1em;
+  margin-left: 0.8em;
+}
+
+@media screen and (max-width: 768px) {
+  /* hide text next to emojis on mobile */
+  .label {
+    display: none;
+  }
+}

components/MenuLink/MenuLink.tsx

@@ -0,0 +1,24 @@
+import classNames from "classnames/bind";
+import Link from "next/link";
+import { ReactNode } from "react";
+
+import styles from "./MenuLink.module.css";
+const cx = classNames.bind(styles);
+
+type Props = {
+  href: string;
+  icon: ReactNode;
+  text: string;
+  current?: boolean;
+  className?: string;
+};
+
+const MenuLink = ({ href, icon, text, current, className }: Props) => (
+  <Link href={href} prefetch={false}>
+    <a className={cx(styles.link, { current: !!current }, className)}>
+      {icon} <span className={styles.label}>{text}</span>
+    </a>
+  </Link>
+);
+
+export default MenuLink;