[samironsoctopus]

Summary

Replaces two diagrams on the Kubernetes step pages with light and dark variants that follow the site theme. Also adds contributor guidance on when to use screenshots and how to make images follow the theme.

Themed images

• Adds theme-light-only and theme-dark-only classes in src/styles/main.css. They key off html[data-theme], so images follow the site's theme toggle as well as the OS setting. <picture> with prefers-color-scheme would only follow the OS setting, and the zoom lightbox would always show its fallback image.
• Replaces the Deploy Container diagram on kubernetes-resources.md with light and dark SVGs exported from Figma.
• Replaces the Load Balancer diagram on kubernetes-resources.md and kubernetes-service.md with light and dark SVGs, stored in the shared public/docs/img/kubernetes/steps/ folder.
• Removes the old deploy-container.svg and loadbalancer.svg, which nothing else referenced.

SVG sizing

• SVGs inside a figure now fill the content column (figure img[src$='.svg'] { width: 100%; }), because they scale without losing sharpness. This also widens high-availability.svg slightly, from 800px to the column width. The other existing SVG figures were already column-width.
• The zoom lightbox in src/scripts/modules/figures.js no longer limits vector images to their exported width. PNG and JPG keep the existing limit.

Contributor guidance (README.md)

• Decide whether a page needs a screenshot: when a screenshot earns its maintenance cost and when to avoid one. Light and dark pairs are reserved for high-traffic pages. Based on GitHub, GitLab, Grafana and Google style guides and research by Gellevij and van der Meij.
• Images and theming:
  • Sizing PNGs and SVGs for the content column (up to 800px on desktop, 1056px on tablets).
  • Capturing at 2x and creating clear images.
  • Adding light and dark variants.
  • What to do when an image has only one variant.

Testing

• markdownlint-cli2 passes on the changed pages and the README.
• Checked in Playwright against astro dev:
  • In both themes, and after using the theme toggle, the correct variant shows on both pages.
  • Both variants load.
  • SVG figures fill the column.
  • The lightbox opens the visible variant and zooms past the exported width.
• I haven't run a full pnpm build or the Playwright test suite.

Follow-up

• The dark diagrams use a #16191F background. The README recommends the page colour #111A23.
• The comment above the content-image background rule in src/styles/main.css still says content images sit on a white background. The rule now uses a colour that changes with the theme.

🤖 Generated with Claude Code

[team-marketing-branch-protections]

Pull request environment is available at https://stoctodocspr3518.z22.web.core.windows.net/.

You can view the ephemeral environment status in Octopus Deploy.

This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity.