Update gradients

[steverydz]

Done

Add gradient overlay styles for all banner backgrounds

QA

• Check out this feature branch
• Run the site using the command ./run serve
• View the site locally in your web browser at: http://0.0.0.0:8057/?title=Ubuntu+for+the+internet+of+things&subtitle=From+smart+homes+to+smart+drones%2C+robots%2C+and+industrial+systems%2C+Ubuntu+is+the+new+standard+for+embedded+Linux.&illustration_url=https%3A%2F%2Fassets.ubuntu.com%2Fv1%2Fa70bfab2-Managed-apps_wht.svg&illustration_width=297&illustration_height=150&background=k8s
• Check that the gradients look in line with the designs

Issue / Card

Fixes #2

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/?title=Ubuntu+for+the+internet+of+things&subtitle=From+smart+homes+to+smart+drones%2C+robots%2C+and+industrial+systems%2C+Ubuntu+is+the+new+standard+for+embedded+Linux.&illustration_url=https%3A%2F%2Fassets.ubuntu.com%2Fv1%2Fa70bfab2-Managed-apps_wht.svg&illustration_width=297&illustration_height=150&background=k8s

[steverydz]

@waynecrosby I've assigned you to this so you can review it from a design/brand perspective.

[waynecrosby]

Thanks @steverydz
A couple of comments about the Ubuntu gradient & suru:

1. The orange is looking a bit murky brown, could you make the grad go from the aubergine to #B9463C
2. There should be 3 suru elements, 2 white (3% & 5% opacity) and 1 black (5% opacity)
3. The balck suru is in the wrong position, see below where it should be

Hopefully that should brighten it up, let me know if not clear. Thanks

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[steverydz]

Thanks @waynecrosby

I've updated the orange as requested, changed the opacity of the two white suru elements to 0.03 and 0.05, moved the position of the black suru element and changed it's opacity to 0.0.5

[pmahnke]

looking good... the only thing I have seen is when the h1 is short like 'Internet of Things' a few have the image pretty low... perhaps Wayne can comment on the right thing to do in this case.

[steverydz]

@pmahnke @waynecrosby the illustration is centred vertically and horizontally within it's container. I can make the image box the same height as the total text height. I'll do that in another PR though because it will require a fair bit of refactoring.

@waynecrosby If you're happy with these gradients I'll merge the PR

[waynecrosby]

@steverydz Not sure why but the gradient doesn't seem to be as bright as in Sketch? Can you try this orange to see if it lifts it #B94E47.
Also, as Peter said, when the copy is short the illustration on the taller banners stays too low, if you can try and centre it vertically in the gap left that would be great.
With 'Facebook & LinkedIn - 1200 x 628' when the copy is short as above, can you move the copy down to be more vertically centred as in this version 'Twitter wide - 800 x 418'. Thanks

[steverydz]

@waynecrosby I've updated the gradient orange.

For the text/image alignment I've made a new issue (#14)

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[steverydz]

@waynecrosby did you have any thoughts about the updated gradient?

[waynecrosby]

@steverydz It's looking much better, one thought I had was if you can have more aubergine so that the orange gradient starts further into the corner.

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[steverydz]

@waynecrosby I've updated it - what do you think?

[waynecrosby]

@steverydz The gradient should have 3 colours, are you using the below values?:
#2C001E --> #772953 --> #BA534A

In Sketch we use #e95420 orange but we finish it off canvas as it's too bright going to that in the corner, that is why I've given you the orange value above to use as that is what appears in the corner in Sketch. You can see what I mean in the image below:

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[steverydz]

@waynecrosby I've just pushed another update.

This is how it's constructed:

From bottom left to top right:

• #2c001e (0% to 62%)
• #772953 (62% to 94%)
• #ba534a (94% to 100%)

Then the overlays are:

• Top: rgba(255, 255, 255, 0.03)
• Bottom: rgba(255, 255, 255, 0.05)
• Top left: rgba(0, 0, 0, 0.05)

[waynecrosby]

@steverydz I think it's nearly there, I think the percentages are good, it's just that last orange shade we need to get right, could you try changing #ba534a (94% to 100%) to #c44e43 (94% to 100%). Thanks

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[steverydz]

@waynecrosby done, how does it look?

[waynecrosby]

@steverydz I'm so sorry, can we try one more: #d1573c - if this one doesn't look right I think we revert to #ba534a

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[steverydz]

@waynecrosby ok, updated

[waynecrosby]

@steverydz I think we revert to where you were as it's the closest to the Sketch file. Apologies for the back and forth:
#2c001e (0% to 62%)
#772953 (62% to 94%)
#ba534a (94% to 100%)

[webteam-app]

Starting demo at: https://social-banners-canonical-web-and-design-pr-13.run.demo.haus/

[steverydz]

@waynecrosby no worries, it's worth getting it right :)

I've updated as you said - if this is OK I'll get this merged.

[waynecrosby]

@steverydz Great, looking good!

[waynecrosby]

@steverydz Are you adjusting the illustration positioning on another issue?

[steverydz]

@steverydz Are you adjusting the illustration positioning on another issue?

@waynecrosby Yes #14