Implement Custom Color Palette in base.css

schule4-0 / pets

PS40 SS24

https://pets.schule4-0.dev/

GNU General Public License v3.0

3 stars 0 forks source link

Implement Custom Color Palette in base.css #5

Open stapps21 opened 2 weeks ago

stapps21 commented 2 weeks ago

Description

Currently, our project uses the standard Vue color palette. We propose creating a custom color palette and implementing it as variables within base.css.

Action

[ ] Create a color palette.
[ ] Update base.css to use the new color palette.

stapps21 commented 2 weeks ago

The "Schule 4.0" Website looks like they use Material 3 as a styleguide (https://www.schule4-0.de/), I would suggest, that we design our Website in a similar way. (https://m3.material.io/)

Create a Material 3 Theme (https://material-foundation.github.io/material-theme-builder/)
Maybe we can also use the material-web library, it uses Material 3 (https://github.com/material-components/material-web/tree/main)

What are your opinions on that?

pascall2 commented 2 weeks ago

It looks like https://www.schule4-0.de/blog/ps40-spuren-im-netz/ use a custom design. Of course, this is more work, but for a game this kind of design is maybe a better fit. However, a Material 3 theme with "game" like colors could also work.

stapps21 commented 2 weeks ago

Okay, so I think we can wait for a theme integration after we fully implemented the first minigame and then have a look on what core elements we really need. I think the theme is not required for the graphics so we can implement it afterwards. Let's keep this open and adjust things later.