diff --git a/quartz.config.ts b/quartz.config.ts index 13c67ee6f..7da99fd11 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: "#4e4e4e", //code, graph, outline + gray: "#4e4e4e", // graph nodes darkgray: "#4e4e4e", - dark: "#2b2b2b", + dark: "#4E4E4E", secondary: "#4e4e4e", - tertiary: "#FF5A7E", - customCallout: "#db424210", - highlight: "rgba(128, 128, 128, 0.15)", + tertiary: "#C0FFE1", + customCallout: "rgba(183, 255, 236, 0.35)", + highlight: "rgba(128, 128, 128, 0.35)", //code bg, note bg, graph bg (ONLY ON LIGHT MODE) + searchBackground: "#D3D3D3", }, darkMode: { - light: "#161618", - lightgray: "#393639", - gray: "#646464", - darkgray: "#d4d4d4", + light: "#191919", + lightgray: "#393639", //code, graph edges, outline + gray: "#E2E2E2", //graph nodes + darkgray: "#E2E2E2", dark: "#ebebec", secondary: "#7C7C7C", - tertiary: "#09FEF8", - highlight: "rgba(125, 125, 125, 0.15)", + tertiary: "#C0FFE1", + highlight: "rgba(125, 125, 125, 0.15)", //code bg, note bg 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/explorer.scss b/quartz/components/styles/explorer.scss index 55ea8aa88..eadff7f93 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -65,6 +65,12 @@ button#explorer { color: var(--dark); opacity: 0.75; pointer-events: all; + transition: all 0.2s ease; + + &:hover { + opacity: 1; + color: var(--tertiary); + } } } } diff --git a/quartz/components/styles/graph.scss b/quartz/components/styles/graph.scss index 3deaa1feb..b02b6e57b 100644 --- a/quartz/components/styles/graph.scss +++ b/quartz/components/styles/graph.scss @@ -14,6 +14,11 @@ margin: 0.5em 0; position: relative; overflow: hidden; + background-color: var(--highlight); + + [saved-theme="dark"] & { + background-color: var(--light); + } & > #global-graph-icon { color: var(--dark); @@ -52,7 +57,7 @@ & > #global-graph-container { border: 1px solid var(--lightgray); - background-color: var(--light); + background-color: var(--highlight); border-radius: 5px; box-sizing: border-box; position: fixed; @@ -62,6 +67,10 @@ height: 60vh; width: 50vw; + [saved-theme="dark"] & { + background-color: var(--light); + } + @media all and (max-width: $fullPageWidth) { width: 90%; } 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/components/styles/toc.scss b/quartz/components/styles/toc.scss index 27ff62a40..24f068ae0 100644 --- a/quartz/components/styles/toc.scss +++ b/quartz/components/styles/toc.scss @@ -44,10 +44,21 @@ button#toc { color: var(--dark); opacity: 0.35; transition: - 0.5s ease opacity, - 0.3s ease color; + 0.2s ease opacity, + 0.2s ease color; + + &:hover { + opacity: 1; + color: var(--tertiary); + } + &.in-view { opacity: 0.75; + + &:hover { + opacity: 1; + color: var(--tertiary); + } } } } 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..3c1c2a68b 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -60,11 +60,14 @@ strong { a { font-weight: $semiBoldWeight; text-decoration: none; - transition: color 0.2s ease; + transition: color 0.2s ease, background-color 0.2s ease; color: var(--secondary); &:hover { color: var(--tertiary) !important; + background-color: var(--highlight); + border-radius: 5px; + padding: 0 0.1rem; } &.internal { @@ -74,6 +77,10 @@ a { border-radius: 5px; line-height: 1.4rem; + &:hover { + background-color: var(--highlight); + } + &:has(> img) { background-color: none; border-radius: 0; @@ -141,6 +148,12 @@ a { p > strong { color: var(--dark); } + + p { + letter-spacing: -0.03em; + line-height: 1.5; + font-size: 0.9rem; + } } & > #quartz-body { @@ -296,29 +309,33 @@ h6 { // typography improvements h1 { - font-size: 1.75rem; + font-size: 33px; margin-top: 2.25rem; margin-bottom: 1rem; + letter-spacing: -0.02em; } h2 { - font-size: 1.4rem; + font-size: 22px; margin-top: 1.9rem; margin-bottom: 1rem; + letter-spacing: -0.01em; } h3 { - font-size: 1.12rem; + font-size: 22px; margin-top: 1.62rem; margin-bottom: 1rem; + letter-spacing: -0.01em; } h4, h5, h6 { - font-size: 1rem; + font-size: 11px; margin-top: 1.5rem; margin-bottom: 1rem; + letter-spacing: 0; } figure[data-rehype-pretty-code-figure] { @@ -513,3 +530,12 @@ 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}; } ` }