switch monospace font to Source Code Pro

components/Code/Code.tsx

@@ -1,7 +1,6 @@
 import { styled, theme } from "../../lib/styles/stitches.config";
 
 const Code = styled("code", {
-  fontSize: "0.925em",
   backgroundColor: theme.colors.codeBackground,
   border: `1px solid ${theme.colors.kindaLight}`,
   borderRadius: theme.radii.corner,

components/CodeBlock/CodeBlock.tsx

@@ -13,6 +13,7 @@ const Block = styled("div", {
     display: "block",
     overflowX: "auto",
     padding: "1em",
+    fontSize: "0.925em",
     tabSize: 2,
 
     // optional line numbers added at time of prism compilation

components/CodeInline/CodeInline.tsx

@@ -2,7 +2,8 @@ import Code from "../Code";
 import { styled } from "../../lib/styles/stitches.config";
 
 const CodeInline = styled(Code, {
-  padding: "0.2em 0.3em",
+  padding: "0.175em 0.3em",
+  fontSize: "0.975em",
   pageBreakInside: "avoid",
 });
 

lib/styles/stitches.config.ts

@@ -6,7 +6,7 @@ import hexToRgba from "./utils/hex-to-rgba";
 import normalizeStyles from "./utils/normalize";
 
 // web fonts
-import { Inter, RobotoMono } from "./utils/fonts";
+import { Inter, SourceCodePro } from "./utils/fonts";
 
 // https://stitches.dev/docs/typescript#type-a-css-object
 export type CSS = Stitches.CSS<typeof stitchesConfig>;
@@ -24,7 +24,7 @@ export const {
   theme: {
     fonts: {
       sans: `${Inter.style.fontFamily}, sans-serif`,
-      mono: `${RobotoMono.style.fontFamily}, monospace`,
+      mono: `${SourceCodePro.style.fontFamily}, monospace`,
     },
 
     colors: {

lib/styles/utils/fonts.ts

@@ -1,6 +1,6 @@
 import {
   Inter as InterLoader,
-  Roboto_Mono as RobotoMonoLoader,
+  Source_Code_Pro as SourceCodeProLoader,
   Comic_Neue as ComicNeueLoader,
 } from "@next/font/google";
 
@@ -13,7 +13,7 @@ export const Inter = InterLoader({
   preload: true,
 });
 
-export const RobotoMono = RobotoMonoLoader({
+export const SourceCodePro = SourceCodeProLoader({
   weight: "variable",
   display: "fallback",
   preload: true,

pages/index.tsx

@@ -91,11 +91,13 @@ const Wave = styled("span", {
 
 const Sup = styled("sup", {
   margin: "0 0.15em",
-  fontSize: "0.65em",
+  fontSize: "0.6em",
 });
 
 const PGPKey = styled("code", {
   marginLeft: "0.15em",
+  fontSize: "1.1em",
+  fontWeight: 500,
   wordSpacing: "-0.4em",
 });