Tweak outline of tiles across site

[cjyabraham]

Audit outline of tiles across the site and update all to option 2 below.

As per @GarethAcidWorks :

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)

[thetwopct]

We have a lot of outlines (a sample below) - do they all need a consistent treatment? Certainly some are darker than others. @GarethAcidWorks

Home

Menu

Who We Are

Training (CKA + others)

End Users / Pricing

Case Study Single

Webinars

KubeWeekly

Phippy

Reports

In the News

[GarethAcidWorks]

Thanks for pulling all of these together, testing and removing as many variations as possible today, be right back

[GarethAcidWorks]

Hi all, i have compared all of the settings for our boxes for the following:

• Outlines • Drop Shadows • Corner Radius

With different size and functionality for different modules... indeed not all should follow 1 rule. With that said there is some styles that can be merged and our stylesheet lists generally polished up. Here is a link to the comparison if you need to see it.

Screen shot below:

[GarethAcidWorks]

But in the short term... this middle option for the hub is fine.

[cjyabraham]

For your test in figma, could you change the background color to the color we use on the site #fdfdfd ? So that we can see what the shadows/borders will actually look like in practice?

[cjyabraham]

Drawing from Gareth's design analysis and other inconsistencies I see, I suggest the following:

All tiles that go 3 across the desktop screen could be standardized. Currently, some have 3px border radius, some 5px. All have box shadow 0px 2px 5px rgba(0, 0, 0, 0.1). Some have border 1px solid #eaeaea others have no border. Suggest we give them all the same 5px border radius and no border lines.

For tiles that go 2 across the desktop screen, some have 5px border radius, some 10px. Some have has-animation-scale-2 some have no animation. Suggest we give them all the same 10px border radius and animation.

We currently have is-style-box-shadow that can be applied to Group blocks to make them stand out. It uses border 1px solid #d0d0d0 which is fairly dark. Gareth recommends removing the drop-shadow on these. We could also change its name from "Box Shadow" to "Border" and is-style-box-shadow to is-style-border.

I suggest we introduce a new style is-style-box-shadow with a lighter border 1px solid #eaeaea but keep the normal drop shadow. This can be used on the All CNCF page where we are listing multiple items in group blocks and don't want such a pronounced border. This style is currently used in the case studies highlights blocks on a case study so we'd be keeping consistent with that.

Suggest we change the Charter box on Who We Are to remove grey background. That current grey box style is only used in one other place (on the Phippy page) so isn't really standard.

[cjyabraham]

Most of these ideas and more have been deployed.