Skip to content

align EN training page styles with Docsy and fix its mobile UX#54826

Open
Caesarsage wants to merge 2 commits intokubernetes:mainfrom
Caesarsage:training-en-docsy-alignment
Open

align EN training page styles with Docsy and fix its mobile UX#54826
Caesarsage wants to merge 2 commits intokubernetes:mainfrom
Caesarsage:training-en-docsy-alignment

Conversation

@Caesarsage
Copy link
Contributor

This PR migrates the English Training page to Docsy-aligned styling via the SCSS pipeline, while preserving legacy styling for other locales.

other locales stay unchanged.

Includes mobile alignment fixes for CTA and training partner sections.
new:

image

existing:
image

similar changes with the kubestronaut program section

Follow-up PRs will migrate each locale individually by enabling training_styles_migrated per locale.

related to #41171

@k8s-ci-robot k8s-ci-robot requested a review from lmktfy March 8, 2026 19:14
@k8s-ci-robot k8s-ci-robot added the area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes label Mar 8, 2026
@k8s-ci-robot k8s-ci-robot requested a review from tengqm March 8, 2026 19:14
@k8s-ci-robot k8s-ci-robot added language/en Issues or PRs related to English language sig/docs Categorizes an issue or PR as relevant to SIG Docs. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. labels Mar 8, 2026
@Caesarsage Caesarsage changed the title align EN training page styles with Docsy and fix mobile UX align EN training page styles with Docsy and fix its mobile UX Mar 8, 2026
@netlify
Copy link

netlify bot commented Mar 8, 2026

Pull request preview available for checking

Built without sensitive environment variables

Name Link
🔨 Latest commit 055d2a8
🔍 Latest deploy log https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/69add7b782ed1e0008b22cf4
😎 Deploy Preview https://deploy-preview-54826--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Member

@lmktfy lmktfy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/lgtm

cid: training
class: training
body_class: training
training_styles_migrated: true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
training_styles_migrated: true
# Once all localizations have migrated, we can drop the training_styles_migrated
# field and simplify the CSS code.
training_styles_migrated: true


body.training section.call-to-action {
color: #ffffff;
background-color: #326ce5;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, use a named color here.

}

body.training .button:hover {
background-color: #2357b0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, use a named color here.

}

body.training .lighter-gray-bg {
background-color: #f4f4f4;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, use a named color here.

@k8s-ci-robot k8s-ci-robot added the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Mar 8, 2026
@k8s-ci-robot
Copy link
Contributor

LGTM label has been added.

DetailsGit tree hash: f8539c3e7d79be9cd85d0632789439c4589704d3

display: flex;
flex-grow: 1;
width: 18%;
background-color: #f9f9f9;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, use a named color here.

}

body.training .blue-bg {
background-color: #326ce5;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally, use a named color here.

<section>
<div class="main-section padded">
<center>
<div class="training-center">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we don't really need a class named training-center.

We can select based on eg body.training section > .main-section > … and not clash with other sections.

@Caesarsage
Copy link
Contributor Author

Thanks for the review, I will make the updates and make follow up localization PR

@k8s-ci-robot k8s-ci-robot removed the lgtm "Looks good to me", indicates that a PR is ready to be merged. label Mar 8, 2026
@k8s-ci-robot k8s-ci-robot requested a review from lmktfy March 8, 2026 20:10
@k8s-ci-robot
Copy link
Contributor

New changes are detected. LGTM label has been removed.

@k8s-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from lmktfy. For more information see the Code Review Process.

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

Details Needs approval from an approver in each of these files:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. language/en Issues or PRs related to English language sig/docs Categorizes an issue or PR as relevant to SIG Docs. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants