diff --git a/README.md b/README.md index 27d6dbdb0..9ecb3eaa8 100644 --- a/README.md +++ b/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 - -

- - - -

+All my notes are under `content/` and managed as an [Obsidian Vault](https://obsidian.md/) diff --git a/content/index.md b/content/index.md index 2bdfd8337..843085d00 100644 --- a/content/index.md +++ b/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.* diff --git a/docs/layout-components.md b/docs/layout-components.md index 9a0b6396d..5251c1026 100644 --- a/docs/layout-components.md +++ b/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", diff --git a/quartz.config.ts b/quartz.config.ts index b3db3d60d..356da1d0c 100644 --- a/quartz.config.ts +++ b/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", + } }, }, }, diff --git a/quartz.layout.ts b/quartz.layout.ts index 970a5be34..ad06366da 100644 --- a/quartz.layout.ts +++ b/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(), diff --git a/quartz/util/theme.ts b/quartz/util/theme.ts index ff4453b9f..548659de4 100644 --- a/quartz/util/theme.ts +++ b/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}; -} ` }