diff options
| author | netop://ウィビ <paul@webb.page> | 2026-04-11 15:16:43 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-04-11 15:16:43 -0700 |
| commit | 6be86b5f05a7c14e9de03d63132e7beb9789965c (patch) | |
| tree | dae243510721368d64f4b5c60e7f66e4ad048f77 /documentation/USAGE.md | |
Diffstat (limited to 'documentation/USAGE.md')
| -rw-r--r-- | documentation/USAGE.md | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/documentation/USAGE.md b/documentation/USAGE.md new file mode 100644 index 0000000..380ce4e --- /dev/null +++ b/documentation/USAGE.md @@ -0,0 +1,64 @@ +# Usage + +I love Deno. URL imports are cool. Anyhoo, you can do the same with uchū: + +- `https://uchu.style/color.css` +- `https://uchu.style/color_expanded.css` + + + +## Pure + +If you're coding a website by hand, you probably want to use the reduced palette. Or not, whatever. + +```html +<!DOCTYPE html> +<html lang="your language code"> + <head> + <meta charset="utf-8"/> + <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <link href="https://uchu.style/color.css" rel="stylesheet"/> + + <style> + body { + background-color: var(--uchu-yang); + color: var(--uchu-yin); + } + </style> + </head> + + <body> + <section> + <p>My background is slightly off-white and my text color is a nuanced black.</p> + </section> + </body> +</html> +``` + + + +## Svelte/SvelteKit + +If you're coding a web app, you probably want to use the expanded palette. Or not, whatever. + +```svelte +<script lang="ts"> + // this example is using Svelte but probably applies to others as well +</script> + +<style lang="scss"> + @import url("https://uchu.style/color_expanded.css"); + + section { + background-color: var(--uchu-yang); + + p { + color: var(--uchu-yin-9); + } + } +</style> + +<section> + <p>My background is slightly off-white and my text color is a nuanced black.</p> +</section> +``` |