Update brand assets

[dizzyup]

This PR introduces updated brand assets for Consul (against v1.10).

There's also a version of this same PR against v1.9.3 - #10090

Note
This isn't intended to go live until the wider rollout happens which is being handled by marketing - I'd like to get this work reviewed though so we can merge once marketing ship the other Consul properties.

Changelog

• Updated header logo
• Updated attribution icon
• Updated favicon and meta assets
• Updated logos for loading states

As part of the favicon/meta work I took the opportunity to update the strategy there so we serve a favicon.svg alongside a favicon.ico file, together with an Apple Touch Icon asset.

[johncowen]

Hey @dizzyup

I know you are still working on this, but I noticed a couple of things I thought I'd mention.

Firstly, oh my wordy 😍 !

Also, thanks for cleaning up all those extraneous files!

Couple of things I wanted to ask were:

• Is the SVG you are using 'minizable' at all, can we use svgo on it?
• I noticed the logo uses the newer color scheme also, I can think of one place off the top of my head where we use a shade of the older magenta scheme, is it worthwhile tweaking that in this PR also? (I just merged a PR that would affect where that would be done, I'm just gonna look now so I can point you to it if you wanted to do that here - gah I just thought, it would be slightly different for the 2 branches also) Anyway let me know if you want to do that here at all, or me or you do it separately.

[dizzyup]

@johncowen No problem!

• Is the SVG you are using 'minizable' at all, can we use svgo on it?

So the asset has actually already gone through SVGO before I embed the markup - the larger size is because the new SVG has more points along the paths. I'm not sure there's any further optimisation that can happen there.

• I noticed the logo uses the newer color scheme also ... is it worthwhile tweaking that in this PR also?

It might be, though I was steering clear of wider design changes to make sure just the brandmark was the thing being landed. What would the change affect specifically? The marketing guidelines for the brand give us #E03875 for the logo, and #DC477D which is intended for buttons and UI elements, but there are additional shades that are context specific - we'd likely need to make some judgement calls so I figured I'd save those for a later effort.

[johncowen]

So the asset has actually already gone through SVGO before I embed the markup

Oh cool, would it be ok to make a app/components/consul/logo/index.hbs template-only component for it so we can tuck it out the way? Then it'd be just that little bit less 'wow numbers!' when you open the hashicorp-consul component hbs file. If not no worries.

What would the change affect specifically?

We use it for the underline highlights for our tabs, and then a tiny detail of code syntax highlighting for our inline code style. We can change that up at a later date tho if thats better.

[dizzyup]

Oh cool, would it be ok to make a app/components/consul/logo/index.hbs template-only component for it..

Great idea, will do that now!

We use it for the underline highlights for our tabs, and then a tiny detail of code syntax highlighting for our inline code style. We can change that up at a later date tho if thats better.

I'm not against that at all! Do you want to try applying #DC477D in a commit?

[johncowen]

Yeah sure, could you rebase this one for me and I'll make a little branch off here

[dizzyup]

@johncowen Given that the eng docs only show locally, I think this solution is ok because this style is only loaded when we're a) local, b) looking at the docs and c) the docs css has been loaded (so we can hide the loading state).

Have I missed anything with this approach?

[johncowen]

Don't think so, thanks for extra explanation!

Ping me when this is out of draft and I can give it a 👍

[dizzyup]

@johncowen Noticed in the eng docs that the left-hand navigation had a gap at the bottom. This rule is a version of the standard one but removes the - 35px portion of that calc.

[johncowen]

Super good! Thanks for the tweaks there too!

👍