theme: apply ruins palette and typography

quartz.config.ts

@@ -8,7 +8,7 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "Quartz 4",
+    pageTitle: "The Ruins",
     pageTitleSuffix: "",
     enableSPA: true,
     enablePopovers: true,
@@ -23,32 +23,34 @@ const config: QuartzConfig = {
       fontOrigin: "googleFonts",
       cdnCaching: true,
       typography: {
-        header: "Schibsted Grotesk",
-        body: "Source Sans Pro",
-        code: "IBM Plex Mono",
+        title: "Playfair Display",
+        header: "Crimson Text",
+        body: "Karla",
+        meta: "Caveat",
+        code: "JetBrains Mono",
       },
       colors: {
         lightMode: {
-          light: "#faf8f8",
-          lightgray: "#e5e5e5",
-          gray: "#b8b8b8",
-          darkgray: "#4e4e4e",
-          dark: "#2b2b2b",
-          secondary: "#284b63",
-          tertiary: "#84a59d",
+          light: "#E0E1DA",
+          lightgray: "#afb0a9",
+          gray: "#80817a",
+          darkgray: "#353630",
+          dark: "#171717",
+          secondary: "#2F3026",
+          tertiary: "#91a29c",
           highlight: "rgba(143, 159, 169, 0.15)",
           textHighlight: "#fff23688",
         },
         darkMode: {
-          light: "#161618",
-          lightgray: "#393639",
-          gray: "#646464",
-          darkgray: "#d4d4d4",
-          dark: "#ebebec",
-          secondary: "#7b97aa",
-          tertiary: "#84a59d",
-          highlight: "rgba(143, 159, 169, 0.15)",
-          textHighlight: "#b3aa0288",
+          light: "#1B1B1B",
+          lightgray: "#7E7E7E",
+          gray: "#7D7D7D",
+          darkgray: "#CACACA",
+          dark: "#D0D0D0",
+          secondary: "#fff",
+          tertiary: "#CACACA",
+          highlight: "#313B4A",
+          textHighlight: "#313B4A",
         },
       },
     },

quartz/util/theme.ts

@@ -29,6 +29,7 @@ export interface Theme {
     header: FontSpecification
     body: FontSpecification
     code: FontSpecification
+    meta?: FontSpecification
   }
   cdnCaching: boolean
   colors: Colors
@@ -50,7 +51,7 @@ export function getFontSpecificationName(spec: FontSpecification): string {
 }
 
 function formatFontSpecification(
-  type: "title" | "header" | "body" | "code",
+  type: "title" | "header" | "body" | "code" | "meta",
   spec: FontSpecification,
 ) {
   if (typeof spec === "string") {
@@ -86,12 +87,13 @@ function formatFontSpecification(
 }
 
 export function googleFontHref(theme: Theme) {
-  const { header, body, code } = theme.typography
+  const { header, body, code, meta } = theme.typography
   const headerFont = formatFontSpecification("header", header)
   const bodyFont = formatFontSpecification("body", body)
   const codeFont = formatFontSpecification("code", code)
+  const metaFont = formatFontSpecification("meta", meta ?? body)
 
-  return `https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&display=swap`
+  return `https://fonts.googleapis.com/css2?family=${headerFont}&family=${bodyFont}&family=${codeFont}&family=${metaFont}&display=swap`
 }
 
 export function googleFontSubsetHref(theme: Theme, text: string) {
@@ -159,6 +161,7 @@ ${stylesheet.join("\n\n")}
   --headerFont: "${getFontSpecificationName(theme.typography.header)}", ${DEFAULT_SANS_SERIF};
   --bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF};
   --codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO};
+  --metaFont: "${getFontSpecificationName(theme.typography.meta || theme.typography.body)}", ${DEFAULT_SANS_SERIF};
 }
 
 :root[saved-theme="dark"] {