styling changes

README.md

@@ -1,18 +1,14 @@
-# Quartz v4
+# Ed-Eddy-Edward Brain Dump
 
-> “[One] who works with the door open gets all kinds of interruptions, but [they] also occasionally gets clues as to what the world is and what might be important.” — Richard Hamming
+Central repository storing and publishing my notes on various things.
 
-Quartz is a set of tools that helps you publish your [digital garden](https://jzhao.xyz/posts/networked-thought) and notes as a website for free.
-Quartz v4 features a from-the-ground rewrite focusing on end-user extensibility and ease-of-use.
+## Usage
 
-🔗 Read the documentation and get started: https://quartz.jzhao.xyz/
+```bash
+npm i
 
-[Join the Discord Community](https://discord.gg/cRFFHYye7t)
+# To begin development preview
+npx quartz build --serve
+```
 
-## Sponsors
-
-<p align="center">
-  <a href="https://github.com/sponsors/jackyzha0">
-    <img src="https://cdn.jsdelivr.net/gh/jackyzha0/jackyzha0/sponsorkit/sponsors.svg" />
-  </a>
-</p>
+All my notes are under `content/` and managed as an [Obsidian Vault](https://obsidian.md/)

content/index.md

@@ -1,6 +1,115 @@
 ---
-title: Welcome to Quartz
+title: Welcome to Quartz - Color Preview
 ---
 
-This is a blank Quartz installation.
-See the [documentation](https://quartz.jzhao.xyz) for how to get started.
+# Quartz Color Configuration Preview
+
+This page showcases all the color configurations available in this Quartz repository using Obsidian-formatted markdown.
+
+## Text Colors & Highlights
+
+Regular text appears in the default dark color (`#2b2b2b`).
+
+==This text is highlighted using the text highlight color (`#fff23688`)==
+
+> [!info] Information Callout
+> This callout uses the secondary color (`#284b63`) for its accent. Callouts are great for drawing attention to important information.
+
+> [!tip] Tip Callout
+> This callout uses the tertiary color (`#84a59d`) for its accent. Tips provide helpful suggestions.
+
+> [!warning] Warning Callout
+> Warning callouts help highlight potential issues or important considerations.
+
+> [!example] Example Callout
+> Example callouts are useful for demonstrating concepts or providing samples.
+
+## Links and Interactive Elements
+
+Here's a [[non-existent page]] wiki-link that will appear in gray (`#b8b8b8`).
+
+Regular [markdown links](https://quartz.jzhao.xyz) use the secondary color (`#284b63`).
+
+## Code Blocks
+
+Inline code like `const color = "#284b63"` uses the darkgray color (`#4e4e4e`) for background.
+
+```javascript
+// Code blocks showcase syntax highlighting
+const theme = {
+  light: "#e8e6dd",
+  lightgray: "#e5e5e5",
+  gray: "#b8b8b8",
+  darkgray: "#4e4e4e",
+  dark: "#2b2b2b",
+  secondary: "#284b63",
+  tertiary: "#84a59d",
+  highlight: "rgba(143, 159, 169, 0.15)",
+  textHighlight: "#fff23688"
+};
+
+console.log("Colors configured!");
+```
+
+```bash
+chmod +x executable
+```
+
+## Typography Showcase
+
+### Headers use Schibsted Grotesk font
+
+Body text uses Source Sans Pro font for optimal readability.
+
+`Code uses IBM Plex Mono` for clear distinction.
+
+## Lists and Formatting
+
+- **Bold text** stands out
+- *Italic text* for emphasis
+- ~~Strikethrough~~ for deprecated content
+
+### Task Lists
+- [ ] Uncompleted task
+- [x] Completed task using tertiary color
+
+## Tables
+
+| Color Variable | Hex Value | Usage |
+|---------------|-----------|--------|
+| light | #e8e6dd | Background color |
+| lightgray | #e5e5e5 | Borders and dividers |
+| gray | #b8b8b8 | Muted text |
+| darkgray | #4e4e4e | Code backgrounds |
+| dark | #2b2b2b | Main text color |
+| secondary | #284b63 | Links and accents |
+| tertiary | #84a59d | Secondary accents |
+
+## Block Quotes
+
+> Block quotes use the lightgray color (`#e5e5e5`) for their left border.
+> 
+> They're great for highlighting important passages or quotes.
+
+## Horizontal Rules
+
+The line below uses the lightgray color:
+
+---
+
+## Mathematical Expressions
+
+Inline math: $E = mc^2$ 
+
+Block math:
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$
+
+## Tags and Metadata
+
+Tags like #color-preview #theme-configuration use the tertiary color.
+
+---
+
+*Note: This preview page demonstrates how the color scheme defined in `quartz.config.ts` is applied throughout the site. The background uses the light color (`#e8e6dd`), while various UI elements utilize the full color palette for visual hierarchy.*

docs/layout-components.md

@@ -34,7 +34,6 @@ Component.Flex({
       Component: Component.Search(),
       grow: true, // Search will grow to fill available space
     },
-    { Component: Component.Darkmode() }, // Darkmode keeps its natural size
   ],
   direction: "row",
   gap: "1rem",

quartz.config.ts

@@ -8,8 +8,8 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "Quartz 4",
-    pageTitleSuffix: "",
+    pageTitle: "Braindump",
+    pageTitleSuffix: "A collection of notes on various topics I am interested in.",
     enableSPA: true,
     enablePopovers: true,
     analytics: {
@@ -29,27 +29,16 @@ const config: QuartzConfig = {
       },
       colors: {
         lightMode: {
-          light: "#faf8f8",
-          lightgray: "#e5e5e5",
-          gray: "#b8b8b8",
+          light: "#e8e6dd",
+          lightgray: "#b8b8b8",
+          gray: "#c5c5c5",
           darkgray: "#4e4e4e",
           dark: "#2b2b2b",
-          secondary: "#284b63",
-          tertiary: "#84a59d",
-          highlight: "rgba(143, 159, 169, 0.15)",
-          textHighlight: "#fff23688",
-        },
-        darkMode: {
-          light: "#161618",
-          lightgray: "#393639",
-          gray: "#646464",
-          darkgray: "#d4d4d4",
-          dark: "#ebebec",
-          secondary: "#7b97aa",
-          tertiary: "#84a59d",
-          highlight: "rgba(143, 159, 169, 0.15)",
-          textHighlight: "#b3aa0288",
-        },
+          secondary: "#c03541",
+          tertiary: "#c03541",
+          highlight: "rgba(240, 101, 113, 0.15)",
+          textHighlight: "#c03541",
+        }
       },
     },
   },

quartz.layout.ts

@@ -34,7 +34,6 @@ export const defaultContentPageLayout: PageLayout = {
           Component: Component.Search(),
           grow: true,
         },
-        { Component: Component.Darkmode() },
         { Component: Component.ReaderMode() },
       ],
     }),
@@ -59,7 +58,6 @@ export const defaultListPageLayout: PageLayout = {
           Component: Component.Search(),
           grow: true,
         },
-        { Component: Component.Darkmode() },
       ],
     }),
     Component.Explorer(),

quartz/util/theme.ts

@@ -12,7 +12,6 @@ export interface ColorScheme {
 
 interface Colors {
   lightMode: ColorScheme
-  darkMode: ColorScheme
 }
 
 export type FontSpecification =
@@ -160,17 +159,5 @@ ${stylesheet.join("\n\n")}
   --bodyFont: "${getFontSpecificationName(theme.typography.body)}", ${DEFAULT_SANS_SERIF};
   --codeFont: "${getFontSpecificationName(theme.typography.code)}", ${DEFAULT_MONO};
 }
-
-:root[saved-theme="dark"] {
-  --light: ${theme.colors.darkMode.light};
-  --lightgray: ${theme.colors.darkMode.lightgray};
-  --gray: ${theme.colors.darkMode.gray};
-  --darkgray: ${theme.colors.darkMode.darkgray};
-  --dark: ${theme.colors.darkMode.dark};
-  --secondary: ${theme.colors.darkMode.secondary};
-  --tertiary: ${theme.colors.darkMode.tertiary};
-  --highlight: ${theme.colors.darkMode.highlight};
-  --textHighlight: ${theme.colors.darkMode.textHighlight};
-}
 `
 }