fix(docker-training): apply design review findings

.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 `<section class="section-title">` with nested `.title-slide`. Section dividers use `<section class="section-title"><h2>…</h2></section>`. 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 `<div class="source"><a href="…" target="_blank" rel="noopener noreferrer">…</a></div>`. Horizontal rules use `<hr class="divider">`. 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 `<section class="section-title">` with nested `.title-slide`. Section dividers use `<section class="section-title"><h2>…</h2></section>`. 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 `<div class="source"><a href="…" target="_blank" rel="noopener noreferrer">…</a></div>`. Horizontal rules use `<hr class="divider">`. Social links use the `.social-links` wrapper.
 3. **Heading hierarchy.** Exactly one `<h1>` per presentation (on the title slide). `<h2>` for section-divider titles, title-slide subtitle, and content-slide titles. `<h3>` for sub-headings inside content slides. `<h4>` only for decorative labels inside `.card` — do not flag `<h4>` inside cards. Do not skip levels. Do not use `<h1>` 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) <pct>%, 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) <pct>%, 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.

docker-training/sections/cloud-native.html

@@ -56,30 +56,30 @@ <h4 style="margin: 0 0 0.3em; font-size: 0.85em;"><i class="fa-solid fa-shield-h
     </div>
     <!-- Technologies -->
     <div class="fragment" style="flex: 1;">
-      <h4 style="margin: 0 0 0.3em; font-size: 0.85em;"><i class="fa-solid fa-toolbox" aria-hidden="true" style="color: var(--r-link-color); margin-right: 0.3em;"></i>Core Technologies</h4>
+      <h4 style="margin: 0 0 0.3em; font-size: 0.85em;"><i class="fa-solid fa-toolbox" aria-hidden="true" style="color: var(--r-accent-color); margin-right: 0.3em;"></i>Core Technologies</h4>
       <div class="flex flex-col" style="gap: 0.25em;">
         <div class="card flex items-center" style="gap: 0.6em; padding: 0.3em 0.7em;">
-          <i class="fa-solid fa-box" aria-hidden="true" style="color: var(--r-link-color); width: 1.2em;"></i>
+          <i class="fa-solid fa-box" aria-hidden="true" style="color: var(--r-accent-color); width: 1.2em;"></i>
           <span><strong>Containers</strong></span>
         </div>
         <div class="card flex items-center" style="gap: 0.6em; padding: 0.3em 0.7em;">
-          <i class="fa-solid fa-cubes" aria-hidden="true" style="color: var(--r-link-color); width: 1.2em;"></i>
+          <i class="fa-solid fa-cubes" aria-hidden="true" style="color: var(--r-accent-color); width: 1.2em;"></i>
           <span><strong>Microservices</strong></span>
         </div>
         <div class="card flex items-center" style="gap: 0.6em; padding: 0.3em 0.7em;">
-          <i class="fa-solid fa-diagram-project" aria-hidden="true" style="color: var(--r-link-color); width: 1.2em;"></i>
+          <i class="fa-solid fa-diagram-project" aria-hidden="true" style="color: var(--r-accent-color); width: 1.2em;"></i>
           <span><strong>Service Meshes</strong></span>
         </div>
         <div class="card flex items-center" style="gap: 0.6em; padding: 0.3em 0.7em;">
-          <i class="fa-solid fa-bolt" aria-hidden="true" style="color: var(--r-link-color); width: 1.2em;"></i>
+          <i class="fa-solid fa-bolt" aria-hidden="true" style="color: var(--r-accent-color); width: 1.2em;"></i>
           <span><strong>Serverless</strong></span>
         </div>
         <div class="card flex items-center" style="gap: 0.6em; padding: 0.3em 0.7em;">
-          <i class="fa-solid fa-code" aria-hidden="true" style="color: var(--r-link-color); width: 1.2em;"></i>
+          <i class="fa-solid fa-code" aria-hidden="true" style="color: var(--r-accent-color); width: 1.2em;"></i>
           <span><strong>Declarative APIs</strong></span>
         </div>
         <div class="card flex items-center" style="gap: 0.6em; padding: 0.3em 0.7em;">
-          <i class="fa-solid fa-server" aria-hidden="true" style="color: var(--r-link-color); width: 1.2em;"></i>
+          <i class="fa-solid fa-server" aria-hidden="true" style="color: var(--r-accent-color); width: 1.2em;"></i>
           <span><strong>Immutable Infrastructure</strong></span>
         </div>
       </div>

docker-training/sections/container-history.html

@@ -4,10 +4,10 @@ <h2>What are containers?</h2>
   <p style="font-size: 0.85em; margin-bottom: 0.6rem;">A lightweight, isolated environment to run an application &mdash;<br>using features already built into the Linux kernel</p>
 
   <!-- Quote -->
-  <div style="border-left: 4px solid var(--r-link-color); padding: 0.5rem 1.2rem; margin: 0 auto 1.2rem; max-width: 65%; background: var(--r-accent-light); border-radius: 0 0.4rem 0.4rem 0;">
-    <p style="margin: 0; font-size: 1em; font-style: italic;">"chroot on steroids"</p>
+  <blockquote>
+    <p style="margin: 0;">"chroot on steroids"</p>
     <p style="margin: 0.2rem 0 0; font-size: 0.65em; color: var(--r-muted-color);">&mdash; J&eacute;r&ocirc;me Petazzoni</p>
-  </div>
+  </blockquote>
 
   <!-- Kernel features — 2x2 grid -->
   <div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: 0.6rem; max-width: 75%; margin: 0 auto 1rem;">

docker-training/sections/docker-desktop.html

@@ -23,6 +23,7 @@ <h2>Docker Desktop Architecture</h2>
       src="imgs/docker-desktop-architecture.png"
       style="max-width: 80%; max-height: 540px;"
       alt="Docker Desktop Architecture"
+      loading="lazy"
     />
   </div>
 </section>