Skip to content

Latest commit

 

History

History
58 lines (42 loc) · 1.59 KB

README.md

File metadata and controls

58 lines (42 loc) · 1.59 KB
Raw

Marvel Color Switcher

pt 1 Goals

  • Click to switch between characters
  • Change color on character switch using CSS Variables
  • Change content as well without url change of character bio
  • Maybe change font and other styles as well
  • 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

  • Update button using v7 of react-hook-form
  • 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

  • Remove hard-coded css of data scheme
  • 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