/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Card.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
Any static assets, like images, can be placed in the public/
directory.
All commands are run from the root of the project, from a terminal:
Command | Action |
---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add , astro check |
npm run astro -- --help |
Get help using the Astro CLI |
The darkest shade of a color is usually reserved for text, while the lightest shade might be used to tint the background of an element.
-
Greys Text, backgrounds, panels, form controls — almost everything in an interface is grey.
-
Primary color: Light color for Alerts.Dark shade: text
- 100 -Light. 2nd
- Light
- Light - 3rd
- Light
- 500 - base. 1st
- Dark
- Dark - 3rd
- Dark
- 900 - darkest. 2nd
-
Neutral
- 100 -Light. 2nd
- Light
- Light - 3rd
- Light
- 500 - base. 1st
- Dark
- Dark - 3rd
- Dark
- 900 - darkest. 2nd
-
Accent colors
- 100 -Light. 2nd
- Light
- Light - 3rd
- Light
- 500 - base. 1st
- Dark
- Dark - 3rd
- Dark
- 900 - darkest. 2nd
- 0 1px 3px hsla(0,0%,0%,.12), 0 1px 2px hsla(0,0%,0%,.24)
- 0 3px 6px hsla(0,0%,0%,.15), 0 2px 4px hsla(0,0%,0%,.12)
- 0 10px 20px hsla(0,0%,0%,.15), 0 3px 6px hsla(0,0%,0%,.10)
- 0 15px 25px hsla(0,0%,0%,.15), 0 5px 10px hsla(0,0%,0%,.05)
- 0 20px 40px hsla(0,0%,0%,.2)
For example, on click can go from 3px to 1px
#Page 173