diff --git a/quartz.config.ts b/quartz.config.ts index 13c67ee6f..f2689fe1f 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -21,32 +21,34 @@ const config: QuartzConfig = { theme: { cdnCaching: true, typography: { - header: "Exo 2", - body: "Hind Madurai", + header: "Departure Mono", + body: "Roboto Mono", code: "Ubuntu Mono", }, colors: { lightMode: { - light: "#faf8f8", - lightgray: "#e5e5e5", - gray: "#b8b8b8", + light: "#E2E2E2", + lightgray: "#D3D3D3", //code, graph, outline + gray: "#4e4e4e", // graph links darkgray: "#4e4e4e", - dark: "#2b2b2b", + dark: "#4E4E4E", secondary: "#4e4e4e", - tertiary: "#FF5A7E", - customCallout: "#db424210", + tertiary: "#C0FFE1", + customCallout: "rgba(183, 255, 236, 0.35)", highlight: "rgba(128, 128, 128, 0.15)", + searchBackground: "#D3D3D3", }, darkMode: { - light: "#161618", + light: "#191919", lightgray: "#393639", gray: "#646464", - darkgray: "#d4d4d4", + darkgray: "#E2E2E2", dark: "#ebebec", secondary: "#7C7C7C", - tertiary: "#09FEF8", + tertiary: "#C0FFE1", highlight: "rgba(125, 125, 125, 0.15)", customCallout: "#00b8d410", + searchBackground: "#252525", }, }, }, diff --git a/quartz/cfg.ts b/quartz/cfg.ts index 059fd2a08..a4a0743fc 100644 --- a/quartz/cfg.ts +++ b/quartz/cfg.ts @@ -73,3 +73,16 @@ export interface FullPageLayout { export type PageLayout = Pick export type SharedLayout = Pick + +export interface ColorScheme { + light: string + lightgray: string + gray: string + darkgray: string + dark: string + secondary: string + tertiary: string + highlight: string + customCallout: string + searchBackground: string +} diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index 8a9ec6714..49bc6d118 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -6,7 +6,7 @@ flex-grow: 0.3; & > #search-icon { - background-color: var(--lightgray); + background-color: var(--searchBackground); border-radius: 4px; height: 2rem; display: flex; @@ -66,7 +66,7 @@ & > * { width: 100%; border-radius: 7px; - background: var(--light); + background: var(--searchBackground); box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), 0 10px 30px rgba(27, 33, 48, 0.16); diff --git a/quartz/static/DepartureMono-Regular.otf b/quartz/static/DepartureMono-Regular.otf new file mode 100644 index 000000000..6b3667165 Binary files /dev/null and b/quartz/static/DepartureMono-Regular.otf differ diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 96589b76b..43a915a86 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -513,3 +513,11 @@ ol.overflow { padding-left: 1rem; } } + +input { + background-color: var(--light); + color: var(--dark); + border: 1px solid var(--lightgray); + border-radius: 5px; + padding: 0.5rem; +} diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss index 1568205f1..61cf0b75c 100644 --- a/quartz/styles/custom.scss +++ b/quartz/styles/custom.scss @@ -1,6 +1,10 @@ @use "./base.scss"; // put your custom CSS here! +@font-face { + font-family: "Departure Mono"; + src: url("../static/DepartureMono-Regular.otf"); +} // captions! img + em { @@ -37,8 +41,8 @@ iframe { .callout { &[data-callout="custom"] { - --color: var(--tertiary); - --border:var(--tertiary); + --color: var(--darkgray); + --border: var(--tertiary); --bg: var(--customCallout); --callout-icon: var(--callout-icon-tip); } @@ -65,3 +69,31 @@ iframe { /* } */ /* } */ /* } */ + +.explorer { + font-size: 0.85rem; + + .folder, .file { + a { + font-size: 0.85rem; + font-weight: 200 !important; + } + } +} + +.toc { + font-size: 0.85rem; + + a { + font-size: 0.85rem; + font-weight: 600 !important; + } +} + +body { + font-size: 0.95rem; +} + +input[type="search"] { + background-color: var(--searchBackground); +} diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts index 637489aab..801eb3267 100644 --- a/quartz/util/theme.ts +++ b/quartz/util/theme.ts @@ -8,6 +8,7 @@ export interface ColorScheme { tertiary: string highlight: string customCallout: string + searchBackground: string } interface Colors { @@ -50,6 +51,7 @@ ${stylesheet.join("\n\n")} --tertiary: ${theme.colors.lightMode.tertiary}; --highlight: ${theme.colors.lightMode.highlight}; --customCallout: ${theme.colors.lightMode.customCallout}; + --searchBackground: ${theme.colors.lightMode.searchBackground}; --headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF}; --bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF}; @@ -66,6 +68,7 @@ ${stylesheet.join("\n\n")} --tertiary: ${theme.colors.darkMode.tertiary}; --highlight: ${theme.colors.darkMode.highlight}; --customCallout: ${theme.colors.darkMode.customCallout}; + --searchBackground: ${theme.colors.darkMode.searchBackground}; } ` }