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. 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/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..c2328fb 100644 --- a/docker-training/sections/docker-images.html +++ b/docker-training/sections/docker-images.html @@ -10,11 +10,11 @@

Images & Layers

- + - + @@ -22,92 +22,92 @@

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 + font-size="13" style="fill: var(--r-heading-color)">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 ubuntu:15.04 + font-size="13" style="fill: var(--r-heading-color)">ubuntu:15.04 - + fill="none" style="stroke: var(--r-muted-color)" stroke-width="2"/> + - + + fill="none" style="stroke: var(--r-link-color)" stroke-width="2.5"/> Image layers (R/O) + font-size="12" font-weight="600" style="fill: var(--r-heading-color)">Image layers (R/O) 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) Dockerfile: + font-size="17" font-weight="700" style="fill: var(--r-heading-color)">Dockerfile: + style="fill: var(--r-accent-color)"/> - + + style="stroke: var(--r-heading-color)" stroke-width="1.2" opacity="0.6"/> 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 @@

>

+