https://github.com/jackhowa/marvel-color-switcher

Practice css variables with marvel characters bc bingeing mcu
https://github.com/jackhowa/marvel-color-switcher

css-variables marvel-comics styled-components

Last synced: about 1 month ago
JSON representation

Practice css variables with marvel characters bc bingeing mcu

• Host: GitHub
• URL: https://github.com/jackhowa/marvel-color-switcher
• Owner: JackHowa
• Created: 2021-02-08T23:53:28.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T05:23:05.000Z (almost 2 years ago)
• Last Synced: 2023-08-18T23:01:26.278Z (over 1 year ago)
• Topics: css-variables, marvel-comics, styled-components
• Language: JavaScript
• Homepage: https://marvel-color-picker.netlify.app/
• Size: 2.19 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Marvel Color Switcher

- Inspired by https://epicreact.dev/css-variables/ (code sandbox https://df90h.csb.app/)

## pt 1 Goals

- [x] Click to switch between characters

- [x] Change color on character switch using CSS Variables

- [x] Change content as well without url change of character bio

- [ ] Maybe change font and other styles as well

- [x] Make sure color contrast of wild marvel colors are still accessible with Google Material Color picker ;) -> somewhat better with lighthouse

## pt form picker react-hook-form context

- [x] Update button using v7 of react-hook-form

- [x] Use form context to submit the form change separate from the inputs (mostly unnecessary but poc)

## Reach Goals

- [ ] IE 11 does not support CSS Variables, but think of a way?

- [ ] Create your own color scheme and make your own character live

- [ ] Add other custom styles like font-height but whatever

- [ ] Do something about data of who picks what

## PT 2 CSS Var Picker 

- [x] Remove hard-coded css of data scheme 

- [x] Add live configurer

- [ ] Change live configurer dynamically on state change

- [ ] Determine input of variable based on something

- [ ] Create your own color scheme and make your own character live

- [ ] Do something about data of who picks what

- [ ] Post to api of color scheme

## Colors

### Iron Man

reds

#4b0908

#6a0c0b

#aa0505

yellows

#fbca03

#b97d10

https://colorswall.com/palette/3128/

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=aa0505&secondary.color=fbca03

### Captain America

#0000ff

#002d5c

#870000

#a5a5ab

#f0f0f0

https://www.color-hex.com/color-palette/20730