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

2025-09-18 13:25:32 -04:00 · 2025-04-18 12:11:16 -04:00
parent eec8f5e1c2
commit 98ea88dae9
25 changed files with 221 additions and 184 deletions
--- a/app/birthday/page.tsx
+++ b/app/birthday/page.tsx
@@ -15,6 +15,14 @@ export const metadata = addMetadata({
  alternates: {
    canonical: "/birthday",
  },
+  openGraph: {
+    videos: [
+      {
+        url: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+        type: "video/webm",
+      },
+    ],
+  },
 });

 const Page = () => {
--- a/app/contact/form.module.css
+++ b/app/contact/form.module.css
@@ -37,7 +37,8 @@
 }

 .submitButton {
-  flex-shrink: 0;
+  display: flex;
+  align-items: center;
  height: 3.25em;
  padding: 1em 1.25em;
  margin-right: 1.5em;
@@ -56,9 +57,16 @@
  background-color: var(--colors-link);
 }

+.submitIcon {
+  width: 1.3em;
+  height: 1.3em;
+  margin-right: 0.5em;
+}
+
 .result {
+  display: flex;
+  align-items: center;
  font-weight: 600;
-  line-height: 1.5;
 }

 .result.success {
@@ -70,8 +78,7 @@
 }

 .resultIcon {
-  display: inline;
  width: 1.3em;
  height: 1.3em;
-  vertical-align: -0.3em;
+  margin-right: 0.25em;
 }
--- a/app/contact/form.tsx
+++ b/app/contact/form.tsx
@@ -5,7 +5,7 @@ import { useActionState, useState } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import Turnstile from "react-turnstile";
 import clsx from "clsx";
-import { CheckIcon, XIcon } from "lucide-react";
+import { SendIcon, LoaderIcon, CheckIcon, XIcon } from "lucide-react";
 import Link from "../../components/Link";

 import { send, type ContactState, type ContactInput } from "./action";
@@ -80,13 +80,12 @@ const ContactForm = () => {
          stroke="currentColor"
          strokeWidth="0"
          viewBox="0 0 24 24"
-          height="1.25em"
          width="1.25em"
+          height="1.25em"
          style={{
-            display: "inline",
            width: "1.25em",
            height: "1.25em",
-            verticalAlign: "-0.25em",
+            verticalAlign: "text-top",
            marginRight: "0.25em",
          }}
          xmlns="http://www.w3.org/2000/svg"
@@ -115,19 +114,12 @@ const ContactForm = () => {
        {!formState.success && (
          <button type="submit" disabled={pending} className={styles.submitButton}>
            {pending ? (
-              <span>Sending...</span>
+              <>
+                <LoaderIcon size="1.3em" className={styles.submitIcon} /> <span>Sending...</span>
+              </>
            ) : (
              <>
-                <span
-                  style={{
-                    fontSize: "1.3em",
-                    marginRight: "0.3em",
-                    lineHeight: "1",
-                  }}
-                >
-                  📤
-                </span>{" "}
-                <span>Send</span>
+                <SendIcon size="1.3em" className={styles.submitIcon} /> <span>Send</span>
              </>
            )}
          </button>
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,3 +1,4 @@
+import { LockIcon } from "lucide-react";
 import PageTitle from "../../components/PageTitle";
 import Link from "../../components/Link";
 import { addMetadata } from "../../lib/helpers/metadata";
@@ -28,7 +29,15 @@ const Page = () => {
        <Link href="https://fediverse.jarv.is/@jake">direct message on Mastodon</Link>.
      </p>
      <p>
-        🔐 You can grab my public key here:{" "}
+        <LockIcon
+          size="0.975em"
+          style={{
+            marginRight: "0.15em",
+            stroke: "var(--colors-warning)",
+            verticalAlign: "middle",
+          }}
+        />{" "}
+        You can grab my public key here:{" "}
        <Link href="https://jrvs.io/pgp" title="My Public Key">
          <code
            style={{
--- a/app/hillary/page.tsx
+++ b/app/hillary/page.tsx
@@ -17,6 +17,14 @@ export const metadata = addMetadata({
  alternates: {
    canonical: "/hillary",
  },
+  openGraph: {
+    videos: [
+      {
+        url: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+        type: "video/webm",
+      },
+    ],
+  },
 });

 const Page = () => {
--- a/app/layout.module.css
+++ b/app/layout.module.css
@@ -13,7 +13,6 @@
 }

 .container {
-  display: block;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
--- a/app/leo/page.tsx
+++ b/app/leo/page.tsx
@@ -17,6 +17,14 @@ export const metadata = addMetadata({
  alternates: {
    canonical: "/leo",
  },
+  openGraph: {
+    videos: [
+      {
+        url: `${env.NEXT_PUBLIC_BASE_URL}${webm}`,
+        type: "video/webm",
+      },
+    ],
+  },
 });

 const Page = () => {
--- a/app/notes/[slug]/page.module.css
+++ b/app/notes/[slug]/page.module.css
@@ -1,5 +1,6 @@
 .meta {
-  display: inline-flex;
+  display: flex;
+  justify-items: flex-start;
  flex-wrap: wrap;
  font-size: 0.925em;
  line-height: 2.3;
@@ -8,6 +9,8 @@
 }

 .meta .metaItem {
+  display: inline-flex;
+  align-items: center;
  margin-right: 1.6em;
  white-space: nowrap;
 }
@@ -17,17 +20,16 @@
 }

 .meta .metaIcon {
-  display: inline-block;
-  width: 1.2em;
-  height: 1.2em;
-  vertical-align: -0.225em;
+  width: 1.25em;
+  height: 1.25em;
  margin-right: 0.6em;
+  flex-shrink: 0;
 }

 .meta .metaTags {
-  white-space: normal;
  display: inline-flex;
  flex-wrap: wrap;
+  white-space: normal;
 }

 .meta .metaTag {
--- a/app/notes/[slug]/page.tsx
+++ b/app/notes/[slug]/page.tsx
@@ -1,7 +1,8 @@
 import { env } from "../../../lib/env";
 import { Suspense } from "react";
 import { JsonLd } from "react-schemaorg";
-import { CalendarIcon, TagIcon, SquarePenIcon, EyeIcon } from "lucide-react";
+import clsx from "clsx";
+import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon } from "lucide-react";
 import Link from "../../../components/Link";
 import Time from "../../../components/Time";
 import Comments from "../../../components/Comments";
@@ -89,16 +90,14 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
      />

      <div className={styles.meta}>
-        <div className={styles.metaItem}>
-          <Link href={`/${POSTS_DIR}/${frontmatter!.slug}`} plain className={styles.metaLink}>
-            <CalendarIcon size="1.2em" className={styles.metaIcon} />
-            <Time date={frontmatter!.date} format="MMMM d, y" />
-          </Link>
-        </div>
+        <Link href={`/${POSTS_DIR}/${frontmatter!.slug}`} plain className={clsx(styles.metaItem, styles.metaLink)}>
+          <CalendarDaysIcon size="1.25em" className={styles.metaIcon} />
+          <Time date={frontmatter!.date} format="MMMM d, y" />
+        </Link>

        {frontmatter!.tags && (
          <div className={styles.metaItem}>
-            <TagIcon size="1.2em" className={styles.metaIcon} />
+            <TagIcon size="1.25em" className={styles.metaIcon} />
            <span className={styles.metaTags}>
              {frontmatter!.tags.map((tag) => (
                <span key={tag} title={tag} className={styles.metaTag} aria-label={`Tagged with ${tag}`}>
@@ -109,17 +108,15 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
          </div>
        )}

-        <div className={styles.metaItem}>
-          <Link
-            href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
-            title={`Edit "${frontmatter!.title}" on GitHub`}
-            plain
-            className={styles.metaLink}
-          >
-            <SquarePenIcon size="1.2em" className={styles.metaIcon} />
-            <span>Improve This Post</span>
-          </Link>
-        </div>
+        <Link
+          href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}/blob/main/${POSTS_DIR}/${frontmatter!.slug}/index.mdx`}
+          title={`Edit "${frontmatter!.title}" on GitHub`}
+          plain
+          className={clsx(styles.metaItem, styles.metaLink)}
+        >
+          <SquarePenIcon size="1.25em" className={styles.metaIcon} />
+          <span>Improve This Post</span>
+        </Link>

        <div
          className={styles.metaItem}
@@ -129,7 +126,7 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
            marginRight: 0,
          }}
        >
-          <EyeIcon size="1.2em" className={styles.metaIcon} />
+          <EyeIcon size="1.25em" className={styles.metaIcon} />
          <Suspense
            // when this loads, the component will count up from zero to the actual number of hits, so we can simply
            // show a zero here as a "loading indicator"
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -28,7 +28,6 @@
 }

 .wave {
-  display: inline-block;
  margin-left: 0.1em;
  font-size: 1.2em;
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -275,7 +275,7 @@ const Page = () => {
            darkColor="#959595"
            plain
          >
-            <LockIcon size="1.25em" style={{ verticalAlign: "-0.25em" }} />{" "}
+            <LockIcon size="1.25em" style={{ verticalAlign: "text-top" }} />{" "}
            <code
              style={{
                margin: "0 0.15em",
--- a/app/previously/page.mdx
+++ b/app/previously/page.mdx
@@ -58,13 +58,12 @@ export const WindowsLogo = () => (
    stroke="currentColor"
    strokeWidth="0"
    viewBox="0 0 24 24"
-    height="1.2em"
-    width="1.2em"
+    width="1.25em"
+    height="1.25em"
    style={{
-      display: "inline",
-      width: "1.2em",
-      height: "1.2em",
-      verticalAlign: "-0.15em",
+      width: "1.25em",
+      height: "1.25em",
+      verticalAlign: "text-bottom",
      marginRight: "0.1em",
    }}
  >
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -174,20 +174,19 @@ const Page = async () => {
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
-            height="1.2em"
            width="1.2em"
+            height="1.2em"
            style={{
-              display: "inline",
              width: "1.2em",
              height: "1.2em",
-              verticalAlign: "-0.2em",
-              margin: "0 0.15em",
+              verticalAlign: "text-top",
+              margin: "0 0.1em 0 0.25em",
              fill: "var(--colors-text)",
            }}
          >
            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
          </svg>{" "}
-          GitHub...
+          GitHub.
        </Link>
      </p>
    </>