refactor font loaders/declarations

components/Code/Code.module.css

@@ -1,3 +1,18 @@
+.inline,
+.highlighted {
+  font-family: var(--fonts-mono);
+  font-variant-ligatures: none; /* i hate them. fwiw. */
+}
+
+.inline {
+  padding: 0.2em 0.3em;
+  font-size: 0.925em;
+  page-break-inside: avoid;
+  background-color: var(--colors-background-outer);
+  border: 1px solid var(--colors-kinda-light);
+  border-radius: 0.6em;
+}
+
 figure:has(.highlighted) {
   margin: 1em auto;
   position: relative;
@@ -15,14 +30,14 @@ figure:has(.highlighted) {
   border-radius: 0.6em;
 }
 
-.highlighted span {
+.highlighted [style*="--shiki"] {
   color: var(--shiki-light);
   font-style: var(--shiki-light-font-style);
   font-weight: var(--shiki-light-font-weight);
   text-decoration: var(--shiki-light-text-decoration);
 }
 
-[data-theme="dark"] .highlighted span {
+[data-theme="dark"] .highlighted [style*="--shiki"] {
   color: var(--shiki-dark);
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);
@@ -58,15 +73,6 @@ figure:has(.highlighted) {
   width: 1.75rem;
 }
 
-.inline {
-  padding: 0.2em 0.3em;
-  font-size: 0.925em;
-  page-break-inside: avoid;
-  background-color: var(--colors-background-outer);
-  border: 1px solid var(--colors-kinda-light);
-  border-radius: 0.6em;
-}
-
 .copyButton {
   position: absolute;
   top: 0;

components/Footer/Footer.module.css

@@ -47,29 +47,34 @@
 .heart {
   display: inline-block;
   color: var(--colors-error);
-  animation: pulse 10s ease 7.5s infinite;
 }
 
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-  }
-  2% {
-    transform: scale(1.25);
-  }
-  4% {
-    transform: scale(1);
-  }
-  6% {
-    transform: scale(1.2);
-  }
-  8% {
-    transform: scale(1);
+@media (prefers-reduced-motion: no-preference) {
+  .heart {
+    animation: pulse 10s ease 7.5s infinite;
   }
 
-  /* pause for ~9 out of 10 seconds */
-  100% {
-    transform: scale(1);
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+    }
+    2% {
+      transform: scale(1.25);
+    }
+    4% {
+      transform: scale(1);
+    }
+    6% {
+      transform: scale(1.2);
+    }
+    8% {
+      transform: scale(1);
+    }
+
+    /* pause for ~9 out of 10 seconds */
+    100% {
+      transform: scale(1);
+    }
   }
 }
 

components/Link/Link.module.css

@@ -17,6 +17,12 @@
 }
 
 .link.plain {
-  background: none !important;
-  transition: none !important;
+  background: none;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .link {
+    transition: none !important;
+  }
 }

components/Tweet/Tweet.tsx

@@ -29,9 +29,9 @@ const Tweet = async ({ id, className, ...rest }: TweetProps) => {
             components={{
               // https://react-tweet.vercel.app/twitter-theme/api-reference#custom-tweet-components
               // eslint-disable-next-line jsx-a11y/alt-text
-              AvatarImg: (props) => <Image {...props} />,
+              AvatarImg: (props) => <Image {...props} unoptimized />,
               // eslint-disable-next-line jsx-a11y/alt-text
-              MediaImg: (props) => <Image {...props} fill sizes="640w" />,
+              MediaImg: (props) => <Image {...props} fill unoptimized />,
             }}
             {...rest}
           />