search

globalcsr / datapage-framework

Styles and jQuery manipulations of datapages
0 stars 0 forks source link

Find a color or color set for (animated) gradient on navbar #2

Open olivernorman opened 7 years ago

olivernorman commented 7 years ago

Hey @Dorianmatt

The link to the pen where the code is being produced is:

https://codepen.io/globalcsr/pen/a81d617512a699f925db760a985cb7b0

The colors are located in the css, here:

.navbar { z-index:999; position:fixed; top:0; left:0; margin:0 auto; max-width:100%; min-height:130px; background: url('https://s3-us-west- background:linear-gradient(-45deg, #bf5700, #a35b20, #e75c19, #f24001); background-size: 400% 400%; -webkit-animation: Gradient 35s ease infinite; -moz-animation: Gradient 35s ease infinite; animation: Gradient 35s ease infinite; }

Dorianmatt commented 7 years ago

https://codepen.io/dorianmatt/pen/ooGNNK

olivernorman commented 7 years ago

I tried out a slategray combined with darkslategray and made the logo white metal. That seems to give a good look, so maybe we should go with that and leave the orange blue green color coding until we actually have the tripple botton line? You can see it by logging in at hrdd.csrcloud.com.

Dorianmatt commented 7 years ago

The choice is yours, I've been playing around with a few subtle orange gradients, you can take a look here if you like https://codepen.io/dorianmatt/pen/ooGNNK

olivernorman commented 7 years ago

Oooh I like that a lot, and that is definitely in tune with the intended color coding. Let’s use that. And what do you think - the metal or the colorized logo that’s used in your pen?

Dorianmatt commented 7 years ago

Maybe the metal one? Too much colour might be too distracting. I haven't seen the metal one though. Take a look between the two and see what looks best. :)

olivernorman commented 7 years ago

I agree. The metal one then.

Dorianmatt commented 7 years ago

Marvelous! The only other thing I'm kind of on the fence about is the small gradient bar you have underneath the logo and menus, it might be a bit distracting, but probably best to decide that when I can see the whole page.

olivernorman commented 7 years ago

I’m inclined to agree with you. It works well to have a separator between the static content and the dynamic tab content, though. What about making the color scheme a grayscale - could you do that? It’s the .dividerHR class in the css.