From d8cc04add876dd1c78dc956a361861bf4e9eec53 Mon Sep 17 00:00:00 2001 From: ruinivist Date: Sun, 29 Mar 2026 02:32:14 +0000 Subject: [PATCH] docs: genericize custom labels and add notes --- quartz.config.ts | 54 ++++++++++++++--------------- quartz/components/RuinsDarkmode.tsx | 8 ++--- quartz/components/RuinsFooter.tsx | 2 +- quartz/i18n/locales/en-US.ts | 2 +- quartz/styles/custom.scss | 8 +++++ 5 files changed, 41 insertions(+), 33 deletions(-) diff --git a/quartz.config.ts b/quartz.config.ts index 12018f1..8ebd860 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -8,7 +8,7 @@ import * as Plugin from "./quartz/plugins" */ const config: QuartzConfig = { configuration: { - pageTitle: "Lest I Forget", + pageTitle: "TITLE", // Site title shown in the sidebar header and browser metadata pageTitleSuffix: "", enableSPA: true, enablePopovers: true, @@ -16,41 +16,41 @@ const config: QuartzConfig = { provider: "plausible", }, locale: "en-US", - baseUrl: "quartz.jzhao.xyz", + baseUrl: "YOUR-DOMAIN.com", // Canonical deployed domain used for OG images, RSS, and sitemap URLs ignorePatterns: ["private", "templates", ".obsidian"], defaultDateType: "modified", theme: { fontOrigin: "googleFonts", cdnCaching: true, typography: { - title: "Playfair Display", - header: "Anonymous Pro", - body: "JetBrains Mono", - meta: "Caveat", - code: "JetBrains Mono", + title: "Playfair Display", // Sidebar site title font + header: "Anonymous Pro", // Headings and explorer labels + body: "JetBrains Mono", // Main prose font + meta: "Caveat", // Metadata and small UI labels + code: "JetBrains Mono", // Inline code and code blocks }, colors: { lightMode: { - light: "#E0E1DA", - lightgray: "#afb0a9", - gray: "#80817a", - darkgray: "#353630", - dark: "#171717", - secondary: "#2F3026", - tertiary: "#91a29c", - highlight: "rgba(143, 159, 169, 0.15)", - textHighlight: "#fff23688", + light: "#E0E1DA", // Page background + lightgray: "#afb0a9", // Borders and separators + gray: "#80817a", // Muted UI text + darkgray: "#353630", // Body text + dark: "#171717", // Strong headings and icons + secondary: "#2F3026", // Primary link color + tertiary: "#91a29c", // Hover/active accent + highlight: "rgba(143, 159, 169, 0.15)", // Internal link and code-line highlight + textHighlight: "#fff23688", // ==highlighted text== }, darkMode: { - light: "#111516", - lightgray: "#7E7E7E", - gray: "#7D7D7D", - darkgray: "#CACACA", - dark: "#D0D0D0", - secondary: "#fff", - tertiary: "#CACACA", - highlight: "#313B4A", - textHighlight: "#313B4A", + light: "#111516", // Page background + lightgray: "#7E7E7E", // Borders and separators + gray: "#7D7D7D", // Muted UI text + darkgray: "#CACACA", // Body text + dark: "#D0D0D0", // Strong headings and icons + secondary: "#fff", // Primary link color + tertiary: "#CACACA", // Hover/active accent + highlight: "#313B4A", // Internal link and code-line highlight + textHighlight: "#313B4A", // ==highlighted text== }, }, }, @@ -91,9 +91,9 @@ const config: QuartzConfig = { Plugin.Static(), Plugin.Favicon(), Plugin.NotFoundPage(), - // Comment out CustomOgImages to speed up build time + // Comment out CustomOgImages to speed up build time. Plugin.CustomOgImages({ - colorScheme: "darkMode", + colorScheme: "darkMode", // Use the dark palette when generating social cards }), ], }, diff --git a/quartz/components/RuinsDarkmode.tsx b/quartz/components/RuinsDarkmode.tsx index f644218..caf3420 100644 --- a/quartz/components/RuinsDarkmode.tsx +++ b/quartz/components/RuinsDarkmode.tsx @@ -8,11 +8,11 @@ const RuinsDarkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentPr return ( @@ -28,8 +28,8 @@ RuinsDarkmode.css = ` border: none; margin: 0; text-align: inherit; - color: var(--gray); - font-family: var(--metaFont); + color: var(--gray); /* toggle label color */ + font-family: var(--metaFont); /* toggle label font */ font-size: 1.05rem; line-height: 1.2; } diff --git a/quartz/components/RuinsFooter.tsx b/quartz/components/RuinsFooter.tsx index 9056c67..8c35f2c 100644 --- a/quartz/components/RuinsFooter.tsx +++ b/quartz/components/RuinsFooter.tsx @@ -4,7 +4,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro export default (() => { const RuinsFooter: QuartzComponent = ({ displayClass }: QuartzComponentProps) => { - return + return } RuinsFooter.css = style diff --git a/quartz/i18n/locales/en-US.ts b/quartz/i18n/locales/en-US.ts index 0b8f343..19172c2 100644 --- a/quartz/i18n/locales/en-US.ts +++ b/quartz/i18n/locales/en-US.ts @@ -33,7 +33,7 @@ export default { title: "Reader mode", }, explorer: { - title: "Notes", + title: "TITLE", }, footer: { createdWith: "Created with", diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index 91cf85c..81348ee 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1,6 +1,7 @@ @use "./base.scss"; // put your custom CSS here! +// Sidebar site title styling. .page-title { font-size: 2.6rem; margin: 0; @@ -29,22 +30,26 @@ } } +// Article heading styling. .article-title { font-size: 2.2rem; margin: 2rem 0 1.2rem 0; } +// Date / reading-time metadata styling. .content-meta { font-family: var(--metaFont); font-size: 1.3rem; } +// Main article body typography. .center article { font-size: 0.93rem; text-align: justify; hyphens: none; } +// Dual-image floating media effect used by the custom float-image syntax. .floating-image { @media all and (max-width: 800px) { display: none; @@ -71,6 +76,7 @@ } } +// Float placement helpers used by the transformer output. .float-left { float: left; margin: 0 2rem 0 0; @@ -86,6 +92,7 @@ margin: 0 auto; } +// Minimal footer styling for the custom footer component. .footer { font-family: var(--metaFont); font-size: 1.3rem; @@ -93,6 +100,7 @@ margin-bottom: 2rem; } +// Small spacing tweak below the explorer header button. .explorer-toggle { margin-bottom: 0.8rem; }