#715 Adding hub link to footer

[thetwopct]

The design could be better I think

• the button changes height from mobile to desktop
• the height of the button is not consistent with other buttons in the footer
• it breaks the all uppercase button rule
• no hover style provided (defaulted to pink)
• Button does not align with the logo (its bigger)
• Tablet size of footer looks pretty messy

Preview - https://pr-716-cncfci.pantheonsite.io

[caniszczyk]

Also adding a link to artifacthub.io could be great too as park of the button list

[cjyabraham]

@caniszczyk I've captured that idea for consideration in this issue.

[thetwopct]

Updated the hover state

https://user-images.githubusercontent.com/10615884/232541696-574c5b92-96fd-4ef3-afd2-6df56cd163f7.mp4

[cjyabraham]

When I hover over the "Subscribe" button it turns to #d62293, however, when I hover over the "All CNCF Sites" button, it turns to #c53490. I think they should both go to #d62293 on hover.

I know that "JOIN NOW" goes to #c53490 on hover but think that's fine as it starts off as #d62293.

Anything to add @GarethAcidWorks ?

[GarethAcidWorks]

Link Pink_D62293 is the official link colour. We do have a darker pink, which should only be used when 'Link Pink' is then moused over.

In this instance... we are going from Black >>>> Pink. So Link Pink_D62293 is fine here.

When I hover over the "Subscribe" button it turns to #d62293, however, when I hover over the "All CNCF Sites" button, it turns to #c53490. I think they should both go to #d62293 on hover.

I know that "JOIN NOW" goes to #c53490 on hover but think that's fine as it starts off as #d62293.

Anything to add @GarethAcidWorks ?

[GarethAcidWorks]

Some additional feedbacks:

1. It looks like we are top aligning the logo asset to the top of the text frame. Which is causing inconsistency in the design. Let's ensure that stays centred.

2. I would also avoid any full width text flowing onto 4 lines as it's too much. In the instance circled we only have one word that's pushing down to that 4th line. So a minor copy edit should fix it.

3. On TAG intro text... we have a 'widow' on the end of the top line. Can we do a force return there so the sentence reads better. Or edit the copy slightly so it's not as noticeable?

[cjyabraham]

@GarethAcidWorks the text is responsive so it flows to fit different widths. See here that the Maturity Model is only 3 lines on my screen:

[GarethAcidWorks]

Also, on the outline treatment of our boxes. Generally speaking this is something I want to move away from relying on, it feels more heavy and clunky when we do this.

With that said i do appreciate / value the extra help to make things standout off the page more.

The below has 3 tests:

1. 20% opacity black outline (Too heavy, not needed)
2. 10% opacity black outline (Im ok with this)
3. No outline (im ok with this)

Vertical dividing line: This helps provide some added structure in the wide landscape panel. It's not essential if it's a nuisance to build... but preferred.

[cjyabraham]

@GarethAcidWorks the logos are now centered vertically in each box.

[cjyabraham]

As for the outline suggestions, I've broken that out into a new issue.