quartz/content/index.md

title
Welcome to Quartz - Color Preview

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 use the secondary color (#284b63).

Code Blocks

Inline code like const color = "#284b63" uses the darkgray color (#4e4e4e) for background.

// 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!");

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
• 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.