Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tylergaw/colormix.site
Visualize the CSS color-mix function
https://github.com/tylergaw/colormix.site
astro color-mix css netlify
Last synced: 16 days ago
JSON representation
Visualize the CSS color-mix function
- Host: GitHub
- URL: https://github.com/tylergaw/colormix.site
- Owner: tylergaw
- Created: 2022-06-01T04:42:44.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-17T21:02:28.000Z (over 1 year ago)
- Last Synced: 2023-05-17T22:22:06.527Z (over 1 year ago)
- Topics: astro, color-mix, css, netlify
- Language: Astro
- Homepage: https://www.colormix.style
- Size: 144 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [colormix.style](https://www.colormix.style) [](https://app.netlify.com/sites/color-mix-style/deploys)
A site to visualize the CSS [`color-mix`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) function.
- Production: [colormix.style](https://www.colormix.style)
- Staging: Every pull request gets a preview deploy URL
- Figma: [figma.com/file/X2rvL8LtTk5Cw4rxECTqdY/colormix](https://www.figma.com/file/X2rvL8LtTk5Cw4rxECTqdY/colormix)
## Technology overview
- This is a static site built with [Astro](https://astro.build/)
- TypeScript (most of the time)
- Makes use of [Preact](https://preactjs.com) and [Nano Stores](https://github.com/nanostores/nanostores)
- Hosted on Netlify
## Local setup
**Install dependencies**
```
yarn
```
**Start development server**
```
yarn start
```
The site will be available at [http://localhost:3000](http://localhost:3000)
**Preview production**
Do a production build and local server to mimic a production environment. Note that there's no reload when files are changed.
```
yarn preview
```
**Build for production**
Generates static content into the `dist` directory that can be served using any static content hosting service.
```
yarn build
```
## Deployment
### To production
This site is hosted on Netlify. Anything merged into the `main` branch is deployed to production.
### To staging
This site uses Netlify preview builds. To see any branch in a live environment, push the branch to the remote and open a pull request.