Theme site with castle logo and earthy palette

Swap the default Quartz palette for warm parchment/terracotta/moss in
light mode and mossy-charcoal/cream in dark mode, picked to harmonize
with the castle logo. Replace icon.png and og-image.png with the
castle artwork (favicon + social previews). Extend PageTitle to render
the logo next to the site title in the sidebar via flex layout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

quartz.config.ts

@@ -27,26 +27,26 @@ const config: QuartzConfig = {
       },
       colors: {
         lightMode: {
-          light: "#faf8f8",
+          light: "#f5ecd9",
-          lightgray: "#e5e5e5",
+          lightgray: "#d9cdb4",
-          gray: "#b8b8b8",
+          gray: "#a8997b",
-          darkgray: "#4e4e4e",
+          darkgray: "#4a3e2a",
-          dark: "#2b2b2b",
+          dark: "#2b2316",
-          secondary: "#284b63",
+          secondary: "#b8552e",
-          tertiary: "#84a59d",
+          tertiary: "#6b8048",
-          highlight: "rgba(143, 159, 169, 0.15)",
+          highlight: "rgba(107, 128, 72, 0.15)",
-          textHighlight: "#fff23688",
+          textHighlight: "#e8b54066",
         },
         darkMode: {
-          light: "#161618",
+          light: "#1c1f1a",
-          lightgray: "#393639",
+          lightgray: "#3a3d33",
-          gray: "#646464",
+          gray: "#7a7361",
-          darkgray: "#d4d4d4",
+          darkgray: "#e0d4b8",
-          dark: "#ebebec",
+          dark: "#f4ead2",
-          secondary: "#7b97aa",
+          secondary: "#d97a55",
-          tertiary: "#84a59d",
+          tertiary: "#9bb87a",
-          highlight: "rgba(143, 159, 169, 0.15)",
+          highlight: "rgba(155, 184, 122, 0.15)",
-          textHighlight: "#b3aa0288",
+          textHighlight: "#e8b54066",
         },
       },
     },

quartz/components/PageTitle.tsx

@@ -1,4 +1,4 @@
-import { pathToRoot } from "../util/path"
+import { joinSegments, pathToRoot } from "../util/path"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 import { i18n } from "../i18n"
@@ -6,9 +6,13 @@ import { i18n } from "../i18n"
 const PageTitle: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
   const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
   const baseDir = pathToRoot(fileData.slug!)
+  const logoPath = joinSegments(baseDir, "static/icon.png")
   return (
     <h2 class={classNames(displayClass, "page-title")}>
-      <a href={baseDir}>{title}</a>
+      <a href={baseDir} class="page-title-link">
+        <img src={logoPath} alt="" class="page-title-logo" />
+        <span class="page-title-text">{title}</span>
+      </a>
     </h2>
   )
 }
@@ -19,6 +23,21 @@ PageTitle.css = `
   margin: 0;
   font-family: var(--titleFont);
 }
+.page-title-link {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  text-decoration: none;
+}
+.page-title-logo {
+  width: 2.4rem;
+  height: 2.4rem;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+.page-title-text {
+  line-height: 1.1;
+}
 `
 
 export default (() => PageTitle) satisfies QuartzComponentConstructor