Fix CSS for case study pages

[tnir]

Closes #10462

Signed-off-by: Takuya Noguchi takninnovationresearch@gmail.com

Problem: Layout is broken on Case Study detail.

Proposed Solution: Modernize and fix CSS.

Pages to Update:

• https://kubernetes.io/case-studies/adform/
• https://kubernetes.io/case-studies/capital-one/
• https://kubernetes.io/case-studies/ibm/
• https://kubernetes.io/case-studies/ing/
• https://kubernetes.io/case-studies/naic/
• https://kubernetes.io/case-studies/newyorktimes/
• https://kubernetes.io/case-studies/nordstrom/
• https://kubernetes.io/case-studies/northwestern-mutual/
• https://kubernetes.io/case-studies/ocado/
• https://kubernetes.io/case-studies/openAI/
• https://kubernetes.io/case-studies/pearson/
• https://kubernetes.io/case-studies/pinterest/
• https://kubernetes.io/case-studies/slingtv/
• https://kubernetes.io/case-studies/squarespace/
• https://kubernetes.io/case-studies/ygrene/

[k8sio-netlify-preview-bot]

Deploy preview for kubernetes-io-master-staging ready!

Built with commit 77eeeb0

https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com

[k8sio-netlify-preview-bot]

Deploy preview for kubernetes-io-master-staging ready!

Built with commit 77eeeb0

https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com

[tnir]

Reviewer(s) can confirm if this fix has no regression at the following URLs:

• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/adform/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/capital-one/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/ibm/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/ing/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/naic/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/newyorktimes/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/nordstrom/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/northwestern-mutual/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/ocado/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/openAI/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/pearson/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/pinterest/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/slingtv/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/squarespace/
• https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/ygrene/

[tnir]

/assign @Bradamant3
/kind bug

[kbhawkey]

Hi. I think there are still a number of issues with the paragraph formatting (Challenge, Solution, Impact), and some white/gray horizontal space.
Still seeing some footer content on the right for other case studies, such as:
https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/huawei/
https://deploy-preview-10463--kubernetes-io-master-staging.netlify.com/case-studies/box/

[Bradamant3]

/assign @zparnold

[tnir]

@kbhawkey Yes, besides two I know there are case studies with custom (not general) CSS as follow (full list):

• https://kubernetes.io/case-studies/amadeus/
• https://kubernetes.io/case-studies/ancestry/
• https://kubernetes.io/case-studies/blablacar/
• https://kubernetes.io/case-studies/blackrock/
• https://kubernetes.io/case-studies/buffer/
• https://kubernetes.io/case-studies/golfnow/
• https://kubernetes.io/case-studies/peardeck/
• https://kubernetes.io/case-studies/wink/

Should I fix these customized cases in this PR?

[tnir]

/kind design

[kbhawkey]

@tnir, may be a sass-related change.

[zparnold]

/lgtm
/approve
@tnir A separate PR for those would be nice. Thanks!

[k8s-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: zparnold

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [zparnold]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[tnir]

@zparnold Thanks, I think so too. cc @kbhawkey

[tnir]

@tnir, may be a sass-related change.

@kbhawkey Ummm I don't think so. Anyway just created #10531, take a look if you have time.