mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-21 11:54:05 -06:00
116 lines
3.0 KiB
Markdown
116 lines
3.0 KiB
Markdown
---
|
|
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](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.*
|