Website: Styles of buttons are inconsistent

[shuuji3]

This is a Bug Report

Problem:
The styles of buttons are inconsistent. Proper style is applied only to buttons on a few pages.

A. Kubernetes style

Example: Using Minikube to Create a Cluster | Kubernetes

B. Docsy default style (should be changed)

Example: Production environment | Kubernetes

Proposed Solution:
Apply the first style (A. Kubernetes style) to all the buttons.

Page to Update:
We need to fix some stylesheet problem.

Comments:
In the case of pages of the A style, it seems that two stylesheets are applied:

• https://kubernetes.io/docs/tutorials/kubernetes-basics/public/css/styles.css
• src/themes/docsy/assets/vendor/bootstrap/scss/_buttons.scss

styles.css is overriding the default docsy style of _buttons.scss.

However, for pages of the B style, only the default docsy style (_buttons.scss) is applied.

/area web-development

[blueabysm]

/assign
/good-first-issue

Let me handle this if you don't mind :) @shuuji3

[k8s-ci-robot]

@blueabysm:
This request has been marked as suitable for new contributors.

Please ensure the request meets the requirements listed here.

If this request no longer meets these requirements, the label can be removed
by commenting with the /remove-good-first-issue command.

In response to this:

/assign
/good-first-issue

Let me handle this if you don't mind :) @shuuji3

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[shuuji3]

@blueabysm No worries at all. Thank you! 🙂

[blueabysm]

@shuuji3
I found only routes under /<lang>/docs/tutorials/kubernetes-basics/ would apply style /docs/tutorials/kubernetes-basics/public/css/styles.css, which is the file /path/to/website/content/en/docs/tutorials/kubernetes-basics/public/css/styles.css shared among pages in other languages. Different from other pages written in markdown and parsed by Docsy, these pages are all HTML files, manually referring styles.css file in a link tag, for example.

I have no idea the exact purpose the former contributors doing this. Related commit messages tell not much. Maybe I can pick up the button styles and put them into scss files used by docsy. I'm not quite sure that it's a good option. Let me have a test.

[shuuji3]

@blueabysm Thank you for your investigation. In fact, I don't know the historical reason for this well because I joined here about 3 months ago... Looking at the history of https://github.com/kubernetes/website/commits/master/content/en/docs/tutorials/kubernetes-basics/public/css/styles.css, I found it came from around 2018, long before Docsy introduced.

I also noticed the third type of style on https://kubernetes.io/docs/home/. This button style came from _base.scss in https://github.com/kubernetes/website/tree/master/assets/scss/. These styles are introduced 2 months ago for the latest website renewal to Docsy, so maybe we should use this style for all the other buttons.

Current home

[blueabysm]

@shuuji3 Great! But buttons on page /docs/home have different CSS classes. Maybe it's what they are designed to be.🙂
Seems we need to know which style is supposed to be in use first, and then we can talk about how to achieve this. I personally suggest to hold on this issue until someone could confirm, but I don't know who is the proper person I should @ 😂. Maybe the leads of this repo?

Would you please help us with this issue? I'm not sure which style I should use as the unified style. Thanks a lot! @zacharysarah

[shuuji3]

I found another inconsistent style on the page Set up Ingress on Minikube with the NGINX Ingress Controller.

Current style

Previous style (v1.17)

[shuuji3]

I've created the PR to fix the above issue.

[shuuji3]

FYI: "Create an Issue" and "Edit This Page" buttons had been moved to the right sidebar so we don't need to change the style for them.

[sftim]

Fixed in PR #24899
/close

[k8s-ci-robot]

@sftim: Closing this issue.

In response to this:

Fixed in PR #24899
/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.