Skip to content

pumbinha/padelmasters.frontend

Repository files navigation

Padel Masters: Frontend

Project Structure

/
├── 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.

🧞 Commands

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

Design

Colors

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

    1. 100 -Light. 2nd
    2. Light
    3. Light - 3rd
    4. Light
    5. 500 - base. 1st
    6. Dark
    7. Dark - 3rd
    8. Dark
    9. 900 - darkest. 2nd
  • Neutral

    1. 100 -Light. 2nd
    2. Light
    3. Light - 3rd
    4. Light
    5. 500 - base. 1st
    6. Dark
    7. Dark - 3rd
    8. Dark
    9. 900 - darkest. 2nd
  • Accent colors

    1. 100 -Light. 2nd
    2. Light
    3. Light - 3rd
    4. Light
    5. 500 - base. 1st
    6. Dark
    7. Dark - 3rd
    8. Dark
    9. 900 - darkest. 2nd

Shadows

  • 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

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •