From a423f037214fbded09d437b06f8b2b504586e3fe Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 4 Jun 2026 09:23:20 +0000 Subject: [PATCH 1/4] fix(docker-training): apply design review findings - jochen.html: add missing
wrapper (source: shared/sections/jochen.html) - why-docker.html: add source attribution for docker-hub-stats.png; link @benorama credit - cloud-native.html: align Core Technologies icon color to --r-accent-color (was --r-link-color) - container-history.html: replace inline-styled blockquote div with semantic
- docker-images.html: replace all off-palette SVG hex colors with CSS custom property references - devops-docker.html: add styled-list class to bare
    elements inside .card - docker-kubernetes.html: link @ajeetraina source credit - docker-desktop/networking/volumes/swarm/serverless/kubernetes/monitoring: add loading="lazy" to late-deck images https://claude.ai/code/session_01VVPnYcx8HkWWSqWK7EjFsJ --- docker-training/sections/cloud-native.html | 14 ++-- .../sections/container-history.html | 6 +- docker-training/sections/devops-docker.html | 4 +- docker-training/sections/docker-desktop.html | 1 + docker-training/sections/docker-images.html | 71 ++++++++++--------- .../sections/docker-kubernetes.html | 6 +- .../sections/docker-networking.html | 3 + docker-training/sections/docker-swarm.html | 4 ++ docker-training/sections/docker-volumes.html | 3 + docker-training/sections/monitoring.html | 1 + docker-training/sections/serverless.html | 3 + docker-training/sections/why-docker.html | 3 +- shared/sections/jochen.html | 2 + 13 files changed, 73 insertions(+), 48 deletions(-) diff --git a/docker-training/sections/cloud-native.html b/docker-training/sections/cloud-native.html index a151985..cbe11d5 100644 --- a/docker-training/sections/cloud-native.html +++ b/docker-training/sections/cloud-native.html @@ -56,30 +56,30 @@

    -

    Core Technologies

    +

    Core Technologies

    - + Containers
    - + Microservices
    - + Service Meshes
    - + Serverless
    - + Declarative APIs
    - + Immutable Infrastructure
    diff --git a/docker-training/sections/container-history.html b/docker-training/sections/container-history.html index 860c2f8..3758e07 100644 --- a/docker-training/sections/container-history.html +++ b/docker-training/sections/container-history.html @@ -4,10 +4,10 @@

    What are containers?

    A lightweight, isolated environment to run an application —
    using features already built into the Linux kernel

    -
    -

    "chroot on steroids"

    +
    +

    "chroot on steroids"

    — Jérôme Petazzoni

    -
    +

diff --git a/docker-training/sections/devops-docker.html b/docker-training/sections/devops-docker.html index fbed39a..cd86e71 100644 --- a/docker-training/sections/devops-docker.html +++ b/docker-training/sections/devops-docker.html @@ -54,7 +54,7 @@

Container Separation

Dan the Developer

Worries about what's "Inside the Container"

-
    +
    • Code
    • Libraries
    • Package Manager
      • @@ -66,7 +66,7 @@

      Dan the Developer

      Oscar the Ops Guy

      Worries about what's "Outside the Container"

      -
        +
        • Logging
        • Monitoring
        • Networking
          • diff --git a/docker-training/sections/docker-desktop.html b/docker-training/sections/docker-desktop.html index 8ac29f9..21bccd2 100644 --- a/docker-training/sections/docker-desktop.html +++ b/docker-training/sections/docker-desktop.html @@ -23,6 +23,7 @@

          Docker Desktop Architecture

          src="imgs/docker-desktop-architecture.png" style="max-width: 80%; max-height: 540px;" alt="Docker Desktop Architecture" + loading="lazy" />
diff --git a/docker-training/sections/docker-images.html b/docker-training/sections/docker-images.html index d3a8aba..dada485 100644 --- a/docker-training/sections/docker-images.html +++ b/docker-training/sections/docker-images.html @@ -10,11 +10,11 @@

Images & Layers

- + - + @@ -22,55 +22,55 @@

Images & Layers

+ fill="none" style="stroke: var(--r-accent-color)" stroke-width="2" stroke-dasharray="8,4"/> + fill="none" style="stroke: var(--r-accent-color)" stroke-width="1.5" stroke-dasharray="5,3"/> Thin R/W layer + style="stroke: var(--r-muted-color)" stroke-width="1.5" marker-end="url(#arr-sm)"/> Container layer + font-size="11" style="fill: var(--r-muted-color)">Container layer - - - - - - - - - - + + + + + + + + + + + fill="white" style="stroke: var(--r-card-border)" stroke-width="1.5" stroke-dasharray="4,3"/> - + 91e54dfb1179 0 B - + d74508fb6632 1.895 KB - + c22013c84729 194.5 KB - + d3a1f33e8a5a 188.1 MB @@ -81,13 +81,13 @@

Images & Layers

- + fill="none" style="stroke: var(--r-muted-color)" stroke-width="2"/> + - + + fill="none" style="stroke: var(--r-link-color)" stroke-width="2.5"/> Images & Layers Container + font-size="13" style="fill: var(--r-muted-color)">Container (based on ubuntu:15.04 image) + font-size="11" style="fill: var(--r-muted-color)">(based on ubuntu:15.04 image) @@ -117,15 +117,15 @@

Images & Layers

--> + style="fill: var(--r-accent-color)"/> - + FROM ubuntu:15.04 + font-family="monospace" font-size="15" font-weight="600" fill="white">FROM ubuntu:15.04 Images & Layers --> + style="stroke: var(--r-accent-color)" stroke-width="3.5" marker-end="url(#arr-layers)"/> + style="stroke: var(--r-accent-color)" stroke-width="3.5" marker-end="url(#arr-layers)"/> + style="stroke: var(--r-accent-color)" stroke-width="3.5" marker-end="url(#arr-layers)"/> + style="stroke: var(--r-accent-color)" stroke-width="3.5" marker-end="url(#arr-layers)"/>
@@ -170,6 +170,7 @@

Container Layer

src="imgs/container-layers.png" style="max-width: 70%" alt="Container Layers" + loading="lazy" />
@@ -181,6 +182,7 @@

Image Layer Details

src="imgs/image-layer-detail1.jpeg" style="max-width: 80%" alt="Image Layer Details" + loading="lazy" /> @@ -192,6 +194,7 @@

Image Layer Details

src="imgs/image-layer-detail2.jpeg" style="max-width: 80%" alt="Image Layer Details" + loading="lazy" /> diff --git a/docker-training/sections/docker-kubernetes.html b/docker-training/sections/docker-kubernetes.html index 3b2f2b9..a79a45a 100644 --- a/docker-training/sections/docker-kubernetes.html +++ b/docker-training/sections/docker-kubernetes.html @@ -7,6 +7,7 @@

Docker Architecture

src="imgs/docker-k8s-arch.png" style="max-width: 70%" alt="Docker Architecture" + loading="lazy" /> @@ -18,9 +19,10 @@

Kubernetes Architecture

src="imgs/k8s-architecture.png" style="max-width: 80%" alt="Kubernetes Architecture" + loading="lazy" /> -
Credit: @ajeetraina
+
@ajeetraina

Docker & Kubernetes Architecture

@@ -31,6 +33,7 @@

Docker

class="rounded" src="imgs/docker-containerd.png" alt="Docker containerd Architecture" + loading="lazy" />
@@ -39,6 +42,7 @@

Kubernetes

class="rounded" src="imgs/k8s-containerd.png" alt="Kubernetes containerd Architecture" + loading="lazy" />
diff --git a/docker-training/sections/docker-networking.html b/docker-training/sections/docker-networking.html index 3959f23..48166d4 100644 --- a/docker-training/sections/docker-networking.html +++ b/docker-training/sections/docker-networking.html @@ -7,6 +7,7 @@

Overlay Network

src="imgs/overlay-network.png" style="max-width: 50%; max-height: 540px;" alt="Overlay Network" + loading="lazy" />
@@ -18,6 +19,7 @@

Bridged Network

src="imgs/bridged-network.png" style="max-width: 50%; max-height: 540px;" alt="Bridged Network" + loading="lazy" /> @@ -29,6 +31,7 @@

MACVLAN Network

src="imgs/macvlan-network.png" style="max-width: 50%; max-height: 540px;" alt="MACVLAN Network" + loading="lazy" /> diff --git a/docker-training/sections/docker-swarm.html b/docker-training/sections/docker-swarm.html index 7ec7344..194e437 100644 --- a/docker-training/sections/docker-swarm.html +++ b/docker-training/sections/docker-swarm.html @@ -7,6 +7,7 @@

Docker Swarm

src="imgs/swarm-overview.jpeg" style="max-width: 70%" alt="Docker Swarm Overview" + loading="lazy" /> @@ -18,6 +19,7 @@

Swarm Architecture

src="imgs/swarm-architecture.png" style="max-width: 70%" alt="Swarm Architecture" + loading="lazy" /> @@ -29,6 +31,7 @@

Deployment

src="imgs/swarm-deployment.png" style="max-width: 70%" alt="Swarm Deployment" + loading="lazy" /> @@ -40,6 +43,7 @@

Swarm Services

src="imgs/swarm-services.png" style="max-width: 70%" alt="Swarm Services" + loading="lazy" /> diff --git a/docker-training/sections/docker-volumes.html b/docker-training/sections/docker-volumes.html index 8d55cb7..1ced3b6 100644 --- a/docker-training/sections/docker-volumes.html +++ b/docker-training/sections/docker-volumes.html @@ -20,6 +20,7 @@

Bind Mount

src="imgs/bind-mount.png" alt="Bind Mount" style="max-height: 220px" + loading="lazy" />
@@ -29,6 +30,7 @@

Volume

src="imgs/volume-mount.png" alt="Volume Mount" style="max-height: 220px" + loading="lazy" />
@@ -38,6 +40,7 @@

tmpfs

src="imgs/tmpfs-mount.png" alt="tmpfs Mount" style="max-height: 220px" + loading="lazy" />
diff --git a/docker-training/sections/monitoring.html b/docker-training/sections/monitoring.html index 39458b7..32ac084 100644 --- a/docker-training/sections/monitoring.html +++ b/docker-training/sections/monitoring.html @@ -7,6 +7,7 @@

Custom Monitoring

src="imgs/custom-monitoring.png" style="max-width: 80%" alt="Custom Monitoring" + loading="lazy" /> diff --git a/docker-training/sections/serverless.html b/docker-training/sections/serverless.html index 93943f4..dc16674 100644 --- a/docker-training/sections/serverless.html +++ b/docker-training/sections/serverless.html @@ -7,6 +7,7 @@

Future == Serverless

src="imgs/serverless-future.png" style="max-width: 70%" alt="Serverless Future" + loading="lazy" /> @@ -18,6 +19,7 @@

Serverless is made of Servers!

src="imgs/serverless-servers.png" style="max-width: 70%" alt="Serverless is made of Servers" + loading="lazy" /> @@ -50,6 +52,7 @@

OpenFaaS

src="imgs/openfaas.png" style="max-width: 70%" alt="OpenFaaS" + loading="lazy" />
diff --git a/docker-training/sections/why-docker.html b/docker-training/sections/why-docker.html index 48972ee..a1ec711 100644 --- a/docker-training/sections/why-docker.html +++ b/docker-training/sections/why-docker.html @@ -123,7 +123,7 @@

The Evolution of Software Architecture

-
Credit: @benorama
+
@benorama

A Brief History Lesson

@@ -257,6 +257,7 @@

Build, Ship, Run — Any App, Anywhere

alt="Build, Ship, Run - Any App, Anywhere" /> +
Source: Docker, Inc.

Docker Hub in Numbers

diff --git a/shared/sections/jochen.html b/shared/sections/jochen.html index 241a01c..88387f0 100644 --- a/shared/sections/jochen.html +++ b/shared/sections/jochen.html @@ -1,3 +1,4 @@ +

Jochen Zehnder

Engineering Leader Public Cloud Engineering at Inventx

@@ -88,3 +89,4 @@

>

+
From 72f5021679026487aa32160c8a1ad93ae2201083 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 4 Jun 2026 10:31:27 +0000 Subject: [PATCH 2/4] fix(docker-images): replace remaining hard-coded SVG hex colors with CSS vars Replace fill="#1a202c" (4 text labels) and stroke="#1e4555" (fold crease) with var(--r-heading-color) per Copilot review comments on PR #46. https://claude.ai/code/session_01VVPnYcx8HkWWSqWK7EjFsJ --- docker-training/sections/docker-images.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docker-training/sections/docker-images.html b/docker-training/sections/docker-images.html index dada485..c2328fb 100644 --- a/docker-training/sections/docker-images.html +++ b/docker-training/sections/docker-images.html @@ -29,7 +29,7 @@

Images & Layers

fill="none" style="stroke: var(--r-accent-color)" stroke-width="1.5" stroke-dasharray="5,3"/> Thin R/W layer + font-size="13" style="fill: var(--r-heading-color)">Thin R/W layer Images & Layers ubuntu:15.04 + font-size="13" style="fill: var(--r-heading-color)">ubuntu:15.04 Images & Layers Image layers (R/O) + font-size="12" font-weight="600" style="fill: var(--r-heading-color)">Image layers (R/O) Images & Layers Dockerfile: + font-size="17" font-weight="700" style="fill: var(--r-heading-color)">Dockerfile: + style="stroke: var(--r-heading-color)" stroke-width="1.2" opacity="0.6"/> Date: Thu, 4 Jun 2026 10:37:43 +0000 Subject: [PATCH 3/4] revert(devops-docker): remove styled-list from compact card lists MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The styled-list spacing caused the Container Separation slide to overflow. These lists sit inside dense .card elements where the extra padding breaks the layout — plain
    keeps the content within the slide bounds. https://claude.ai/code/session_01VVPnYcx8HkWWSqWK7EjFsJ --- docker-training/sections/devops-docker.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docker-training/sections/devops-docker.html b/docker-training/sections/devops-docker.html index cd86e71..fbed39a 100644 --- a/docker-training/sections/devops-docker.html +++ b/docker-training/sections/devops-docker.html @@ -54,7 +54,7 @@

    Container Separation

    Dan the Developer

    Worries about what's "Inside the Container"

    -
      +
      • Code
      • Libraries
      • Package Manager
        • @@ -66,7 +66,7 @@

        Dan the Developer

        Oscar the Ops Guy

        Worries about what's "Outside the Container"

        -
          +
          • Logging
          • Monitoring
          • Networking
            • From bd1fac3261a214b56ce0d7a0036b3818fc1a632c Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 4 Jun 2026 10:46:04 +0000 Subject: [PATCH 4/4] docs(design-review): update agent prompt from PR #46 learnings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three corrections based on the docker-training review run: - Invariant #1: flag raw hex matching a token exactly as INFO (for SVG fill/stroke and HTML attrs) — hardcoded values diverge silently when the theme changes even if currently correct - Invariant #2: styled-list caveat — dense cards (icon+heading+p+list+footer) risk overflow; downgrade to INFO and require render-check confirmation before applying the fix - Invariant #7: fix prompt drift — dark endpoint is --r-link-color-dark, not --r-link-color (matches the CSS --r-prog-* token definitions) https://claude.ai/code/session_01VVPnYcx8HkWWSqWK7EjFsJ --- .claude/agents/design-review.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.claude/agents/design-review.md b/.claude/agents/design-review.md index 37d8509..33b2e7b 100644 --- a/.claude/agents/design-review.md +++ b/.claude/agents/design-review.md @@ -68,13 +68,13 @@ Use the Report Format at the bottom of this file. These are the categories. The CSS supplies the specifics. -1. **Color palette discipline.** Every `color:`, `background:`, `border-color:`, `border-top:` etc. must resolve to a token defined in the main theme CSS (or plain `#fff` / black-or-white `rgba()` for shadows/overlays). Prefer `var(--r-...)` references over raw hex. Flag any off-palette hex or rgb. -2. **Component class usage.** Title slides use `
            ` with nested `.title-slide`. Section dividers use `

            …

            `. Cards use `.card` (no inline accent borders — base styling is sufficient). Lists prefer `ul.styled-list`. Icons wrap in `.icon-accent`. Badges/pills use `.badge`. Source attributions use `
            …
            `. Horizontal rules use `
            `. Social links use the `.social-links` wrapper. +1. **Color palette discipline.** Every `color:`, `background:`, `border-color:`, `border-top:` etc. must resolve to a token defined in the main theme CSS (or plain `#fff` / black-or-white `rgba()` for shadows/overlays). Prefer `var(--r-...)` references over raw hex. Flag any off-palette hex or rgb. Also flag raw hex that exactly matches a token's value (e.g. `fill="#1a202c"` instead of `style="fill: var(--r-heading-color)"`) as **INFO** — the value is correct but the hardcoded form will silently diverge if the theme changes. This applies to SVG `fill`/`stroke` attributes too; modern inline SVG supports `var()` in `style` attributes. +2. **Component class usage.** Title slides use `
            ` with nested `.title-slide`. Section dividers use `

            …

            `. Cards use `.card` (no inline accent borders — base styling is sufficient). Lists prefer `ul.styled-list` — **but verify overflow before flagging**. `.styled-list` adds significant padding and line-height; in dense cards (icon + heading + paragraph + multi-item list + closing element) this can push the slide past the 960×700 bound. If the card is already content-heavy, flag as **INFO** and note that the render check must confirm zero overflow after applying the fix. Only flag as WARNING when the card has room to spare. Icons wrap in `.icon-accent`. Badges/pills use `.badge`. Source attributions use `
            …
            `. Horizontal rules use `
            `. Social links use the `.social-links` wrapper. 3. **Heading hierarchy.** Exactly one `

            ` per presentation (on the title slide). `

            ` for section-divider titles, title-slide subtitle, and content-slide titles. `

            ` for sub-headings inside content slides. `

            ` only for decorative labels inside `.card` — do not flag `

            ` inside cards. Do not skip levels. Do not use `

            ` on section dividers. 4. **Layout via utilities, not inline styles.** Prefer the utility classes defined in `utilities.css` (flex, grid, gap, spacing, sizing, rounding, shadows) over equivalent inline styles. Do not recommend a utility class where higher-specificity CSS would override it (e.g., don't push `.mt-*` onto `.source`, which has its own `margin-top` rule). Acceptable inline styles: `max-width`, `font-size` tweaks, absolute positioning for overlays, and margin-top on elements whose CSS already sets it. 5. **Images.** Must have `alt` (use `alt=""` + `aria-hidden="true"` for purely decorative). Content images use `.rounded`; profile photos use `.rounded-full`. Large images have a `max-width` constraint. External images carry a `.source` attribution. In later sections, missing `loading="lazy"` is worth an INFO flag. 6. **Fragments.** Cards in a grid that use `fragment` should do so consistently — all-or-nothing within a given grid. -7. **Progression gradients.** Multi-step visual progressions (bars, stacks, timelines) use a two-endpoint gradient interpolated between `--r-accent-color` and `--r-link-color` via `color-mix(in srgb, var(--r-accent-color) %, var(--r-link-color))`. For N steps, step i uses `pct = 100 - (i * 100 / (N - 1))`. Always include a solid-color fallback before the `color-mix()` declaration. Text on fills is `#fff`. Fills go on block/bar elements, not `.card`. The same concept on multiple slides uses the same percentage. +7. **Progression gradients.** Multi-step visual progressions (bars, stacks, timelines) use a two-endpoint gradient interpolated between `--r-accent-color` and `--r-link-color-dark` via `color-mix(in srgb, var(--r-accent-color) %, var(--r-link-color-dark))`. For N steps, step i uses `pct = 100 - (i * 100 / (N - 1))`. Always include a solid-color fallback before the `color-mix()` declaration. Text on fills is `#fff`. Fills go on block/bar elements, not `.card`. The same concept on multiple slides uses the same percentage. 8. **Timeline era cards.** Past/completed → `.card` with reduced opacity. Current/active → `.card` with `background: var(--r-accent-light)` at full opacity. Opacity alone is not sufficient to convey active state. 9. **Portrait-mode resilience.** `.grid-cols-2/3/5` collapse to one column; `.col-span-2` resets; images cap at `max-height: 260px`. Layouts that lose meaning when stacked vertically get an INFO flag, especially dense `.grid-cols-5`. 10. **Print considerations.** The `@media print` block alters backgrounds. Slides that rely solely on a gradient background to convey structure deserve an INFO flag.