Improvements and PDF export for Docker Training

custom-themes/white_contrast_compact_verbatim_headers.css

@@ -628,10 +628,65 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 /*********************************************
- * PRINT BACKGROUND
+ * PDF / PRINT EXPORT SAFEGUARD
+ *
+ * Chromium's page.pdf() pipeline (used by decktape/Puppeteer) and its print
+ * path can rasterize *blurred* box-shadow / text-shadow as hard rectangles,
+ * leaving stray grey boxes behind cards, the profile photo and title text.
+ *
+ * We neutralise only the blurred decorative shadows. Zero-blur ring highlights
+ * (box-shadow: 0 0 0 Npx ...) don't trigger the bug and carry meaning, so they
+ * are intentionally left intact.
+ *
+ * Three export contexts, same fix:
+ *   .pdf-export  — added by portrait.js when navigator.webdriver is set
+ *                  (decktape/Puppeteer headless export)
+ *   .print-pdf   — added by reveal.js for its ?print-pdf browser view
+ *   @media print — real Ctrl+P / Save as PDF
+ * Live on-screen rendering keeps every shadow.
  *********************************************/
+html.pdf-export,
+html.print-pdf {
+  --r-card-shadow: none;
+}
+html.pdf-export .reveal pre,
+html.pdf-export .reveal .card,
+html.pdf-export .reveal .r-frame,
+html.pdf-export .reveal a:hover .r-frame,
+html.pdf-export .shadow-2xl,
+html.print-pdf .reveal pre,
+html.print-pdf .reveal .card,
+html.print-pdf .reveal .r-frame,
+html.print-pdf .reveal a:hover .r-frame,
+html.print-pdf .shadow-2xl {
+  box-shadow: none !important;
+}
+html.pdf-export .reveal *,
+html.pdf-export .reveal *::before,
+html.pdf-export .reveal *::after,
+html.print-pdf .reveal *,
+html.print-pdf .reveal *::before,
+html.print-pdf .reveal *::after {
+  text-shadow: none !important;
+}
+
 @media print {
+  :root {
+    --r-card-shadow: none;
+  }
   .backgrounds {
     background-color: var(--r-background-color);
   }
+  .reveal pre,
+  .reveal .card,
+  .reveal .r-frame,
+  .reveal a:hover .r-frame,
+  .shadow-2xl {
+    box-shadow: none !important;
+  }
+  .reveal *,
+  .reveal *::before,
+  .reveal *::after {
+    text-shadow: none !important;
+  }
 }

docker-training/sections/docker-commands.html

@@ -1,30 +1,33 @@
-<section class="section-title" aria-label="Section: Docker Commands"><h2>Docker Commands</h2></section>
+<section class="section-title" aria-label="Section: Docker Commands">
+  <h2>Docker Commands</h2>
+</section>
 <section>
-  <h2>Top Docker Commands &mdash; Information</h2>
+  <h2>Top Docker Commands &mdash; General</h2>
   <pre><code class="language-bash" data-trim>
-$ docker --help     # returns all commands available
-$ docker attach     # attach to a running container
-$ docker info       # displays system wide information
-$ docker inspect    # inspect container or image details
+$ docker --help                # returns all commands available
+$ docker system info           # displays system wide information
+$ docker system prune          # remove unused data
   </code></pre>
 </section>
 <section>
-  <h2>Top Docker Commands &mdash; Images</h2>
+  <h2>Top Docker Commands &mdash; Containers</h2>
   <pre><code class="language-bash" data-trim>
-$ docker build      # builds a Dockerfile into an image
-$ docker login      # login to Container Image Registry
-$ docker pull       # pull image from Container Registry
-$ docker rmi        # remove image
+$ docker container ls          # display running containers
+$ docker container ls -a       # show all containers stopped/started
+$ docker container run         # start and run a new container
+$ docker container start       # start existing container
+$ docker container stop        # stop existing container
+$ docker container rm          # remove container
+$ docker container inspect     # inspect container details
   </code></pre>
 </section>
 <section>
-  <h2>Top Docker Commands &mdash; Containers</h2>
+  <h2>Top Docker Commands &mdash; Images</h2>
   <pre><code class="language-bash" data-trim>
-$ docker ps         # display running containers
-$ docker ps -a      # show all containers stopped/started
-$ docker run        # start and run a new container
-$ docker start      # start existing container
-$ docker stop       # stop existing container
-$ docker rm         # remove container
+$ docker image build           # builds a Dockerfile into an image
+$ docker image rm              # remove image
+$ docker login                 # login to Container Image Registry
+$ docker image pull            # pull image from Container Registry
+$ docker image inspect         # inspect image details
   </code></pre>
 </section>

docker-training/sections/docker-time.html

@@ -15,7 +15,10 @@ <h3>Let's have a look: DEMO</h3>
 <section>
   <h2>Let's Get Started!</h2>
   <p>
-    <a href="https://training.new-bridge.dev/Docker/kickstart/README.html" target="_blank" rel="noopener noreferrer"
+    <a
+      href="https://training.new-bridge.dev/Docker/kickstart"
+      target="_blank"
+      rel="noopener noreferrer"
       >training.new-bridge.dev/Docker/kickstart</a
     >
   </p>

docker-training/sections/resources.html

@@ -1,19 +1,30 @@
-<section class="section-title" aria-label="Section: Docker Resources"><h2>Docker Resources</h2></section>
+<section class="section-title" aria-label="Section: Docker Resources">
+  <h2>Docker Resources</h2>
+</section>
 <section>
   <h2>Docker Resources</h2>
   <ul class="styled-list">
     <li>
-      <a href="https://play-with-docker.com" target="_blank" rel="noopener noreferrer"
+      <a
+        href="https://www.docker.com/play-with-docker/"
+        target="_blank"
+        rel="noopener noreferrer"
         >Play with Docker</a
       >
     </li>
     <li>
-      <a href="https://training.new-bridge.dev/Docker/kickstart/README.html" target="_blank" rel="noopener noreferrer"
+      <a
+        href="https://training.new-bridge.dev/Docker/kickstart"
+        target="_blank"
+        rel="noopener noreferrer"
         >Docker Kickstart Training</a
       >
     </li>
     <li>
-      <a href="https://veggiemonk.github.io/awesome-docker/" target="_blank" rel="noopener noreferrer"
+      <a
+        href="https://veggiemonk.github.io/awesome-docker/"
+        target="_blank"
+        rel="noopener noreferrer"
         >Awesome Docker</a
       >
     </li>