Merge pull request #82 from plastic-labs/vince/color-updates

consistent brand identity. subversive solutions. plastic labs baby

quartz.config.ts

@@ -21,32 +21,34 @@ const config: QuartzConfig = {
     theme: {
       cdnCaching: true,
       typography: {
-        header: "Exo 2",
+        header: "Departure Mono",
-        body: "Hind Madurai",
+        body: "Roboto Mono",
         code: "Ubuntu Mono",
       },
       colors: {
         lightMode: {
-          light: "#faf8f8",
+          light: "#E2E2E2",
-          lightgray: "#e5e5e5",
+          lightgray: "#4e4e4e", //code, graph, outline
-          gray: "#b8b8b8",
+          gray: "#4e4e4e", // graph nodes
           darkgray: "#4e4e4e",
-          dark: "#2b2b2b",
+          dark: "#4E4E4E",
           secondary: "#4e4e4e",
-          tertiary: "#FF5A7E",
+          tertiary: "#C0FFE1",
-          customCallout: "#db424210",
+          customCallout: "rgba(183, 255, 236, 0.35)",
-          highlight: "rgba(128, 128, 128, 0.15)",
+          highlight: "rgba(128, 128, 128, 0.35)", //code bg, note bg, graph bg (ONLY ON LIGHT MODE)
+          searchBackground: "#D3D3D3",
         },
         darkMode: {
-          light: "#161618",
+          light: "#191919",
-          lightgray: "#393639",
+          lightgray: "#393639", //code, graph edges, outline
-          gray: "#646464",
+          gray: "#E2E2E2", //graph nodes
-          darkgray: "#d4d4d4",
+          darkgray: "#E2E2E2",
           dark: "#ebebec",
           secondary: "#7C7C7C",
-          tertiary: "#09FEF8",
+          tertiary: "#C0FFE1",
-          highlight: "rgba(125, 125, 125, 0.15)",
+          highlight: "rgba(125, 125, 125, 0.15)", //code bg, note bg
           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/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);
+      }
     }
   }
 }

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

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/components/styles/toc.scss

@@ -44,10 +44,21 @@ button#toc {
       color: var(--dark);
       opacity: 0.35;
       transition:
-        0.5s ease opacity,
+        0.2s ease opacity,
-        0.3s ease color;
+        0.2s ease color;
+
+      &:hover {
+        opacity: 1;
+        color: var(--tertiary);
+      }
+
       &.in-view {
         opacity: 0.75;
+        
+        &:hover {
+          opacity: 1;
+          color: var(--tertiary);
+        }
       }
     }
   }

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

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,7 +41,7 @@ iframe {
 
 .callout {
   &[data-callout="custom"] {
-    --color: 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};
 }
 `
 }