quartz
Code Issues

theme: apply ruins palette and typography

Browse Source
This commit is contained in:
ruinivist
2026-03-29 02:01:11 +00:00
parent 59b5807601
commit 0b174b6fbc
2 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quartz.config.ts
+22 -20
View File
@@ -8,7 +8,7 @@ import * as Plugin from "./quartz/plugins"
*/ */
const config: QuartzConfig = { const config: QuartzConfig = {
configuration: { configuration: {
pageTitle: "Quartz 4", pageTitle: "The Ruins",
pageTitleSuffix: "", pageTitleSuffix: "",
enableSPA: true, enableSPA: true,
enablePopovers: true, enablePopovers: true,
@@ -23,32 +23,34 @@ const config: QuartzConfig = {
fontOrigin: "googleFonts", fontOrigin: "googleFonts",
cdnCaching: true, cdnCaching: true,
typography: { typography: {
header: "Schibsted Grotesk", title: "Playfair Display",
body: "Source Sans Pro", header: "Crimson Text",
code: "IBM Plex Mono", body: "Karla",
meta: "Caveat",
code: "JetBrains Mono",
}, },
colors: { colors: {
lightMode: { lightMode: {
light: "#faf8f8", light: "#E0E1DA",
lightgray: "#e5e5e5", lightgray: "#afb0a9",
gray: "#b8b8b8", gray: "#80817a",
darkgray: "#4e4e4e", darkgray: "#353630",
dark: "#2b2b2b", dark: "#171717",
secondary: "#284b63", secondary: "#2F3026",
tertiary: "#84a59d", tertiary: "#91a29c",
highlight: "rgba(143, 159, 169, 0.15)", highlight: "rgba(143, 159, 169, 0.15)",
textHighlight: "#fff23688", textHighlight: "#fff23688",
}, },
darkMode: { darkMode: {
light: "#161618", light: "#1B1B1B",
lightgray: "#393639", lightgray: "#7E7E7E",
gray: "#646464", gray: "#7D7D7D",
darkgray: "#d4d4d4", darkgray: "#CACACA",
dark: "#ebebec", dark: "#D0D0D0",
secondary: "#7b97aa", secondary: "#fff",
tertiary: "#84a59d", tertiary: "#CACACA",
highlight: "rgba(143, 159, 169, 0.15)", highlight: "#313B4A",
textHighlight: "#b3aa0288", textHighlight: "#313B4A",
}, },
}, },
}, },
quartz/util/theme.ts
+6 -3
View File
@@ -29,6 +29,7 @@ export interface Theme {
header: FontSpecification header: FontSpecification
body: FontSpecification body: FontSpecification
code: FontSpecification code: FontSpecification
meta?: FontSpecification
} }
cdnCaching: boolean cdnCaching: boolean
colors: Colors colors: Colors
@@ -50,7 +51,7 @@ export function getFontSpecificationName(spec: FontSpecification): string {
} }
function formatFontSpecification( function formatFontSpecification(
type: "title" | "header" | "body" | "code", type: "title" | "header" | "body" | "code" | "meta",
spec: FontSpecification, spec: FontSpecification,
) { ) {
if (typeof spec === "string") { if (typeof spec === "string") {
@@ -86,12 +87,13 @@ function formatFontSpecification(
} }
export function googleFontHref(theme: Theme) { export function googleFontHref(theme: Theme) {
const { header, body, code } = theme.typography const { header, body, code, meta } = theme.typography
const headerFont = formatFontSpecification("header", header) const headerFont = formatFontSpecification("header", header)
const bodyFont = formatFontSpecification("body", body) const bodyFont = formatFontSpecification("body", body)
const codeFont = formatFontSpecification("code", code) 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) { export function googleFontSubsetHref(theme: Theme, text: string) {
@@ -159,6 +161,7 @@ ${stylesheet.join("\n\n")}
--headerFont: "${getFontSpecificationName(theme.typography.header)}", ${DEFAULT_SANS_SERIF}; --headerFont: "${getFontSpecificationName(theme.typography.header)}", ${DEFAULT_SANS_SERIF};
--bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF}; --bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF};
--codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO}; --codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO};
--metaFont: "${getFontSpecificationName(theme.typography.meta || theme.typography.body)}", ${DEFAULT_SANS_SERIF};
} }
:root[saved-theme="dark"] { :root[saved-theme="dark"] {