v0

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",
         },
       },
     },

quartz/cfg.ts

@@ -73,3 +73,16 @@ export interface FullPageLayout {
 
 export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
 export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer">
+
+export interface ColorScheme {
+  light: string
+  lightgray: string
+  gray: string
+  darkgray: string
+  dark: string
+  secondary: string
+  tertiary: string
+  highlight: string
+  customCallout: string
+  searchBackground: string
+}

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);

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;
+}

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);
+}

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};
 }
 `
 }