docs: fix text overlap on small screen and dynamically resize images

Author: james

docs/ql-documentation/ql-training-rst/_static-training/slides-semmle-2/static/theme/css/default.css

@@ -1487,6 +1487,20 @@ p.first.admonition-title {
   width: inherit;
 }
 
+/* scale and centre images*/
+
+.image-box {
+  display: grid;
+  height: 100%;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100vh;
+  margin: auto;
+}
+
+
 @media print {
   /* line 978, ../scss/default.scss */
   slides slide {
@@ -1572,7 +1586,7 @@ p.first.admonition-title {
     overflow: auto;
     position: fixed;
     width: 100%;
-    font-size: 40%;
+    font-size: 45%;
   }
 
   body {
@@ -1585,12 +1599,11 @@ p.first.admonition-title {
     height: auto;
   }
 
-  img {
+  /*img {
     transform: scale(0.6) translate(-20%, 0);
-  }
+  }*/
 
   article {
-    position: absolute;
     top: 20%;
     left: 10%;
     right: 10%; 

docs/ql-documentation/ql-training-rst/intro-to-ql/intro-ql-general.rst

@@ -5,9 +5,10 @@ Crashing bug found in Curiosity’s landing module through routine testing.
 
 Patching is still possible mid-flight, but what if there are more such issues?
 
-.. image:: ../_static-training/curiosity.png
-   :scale: 100 % 
+.. container:: image-box
 
+   .. image:: ../_static-training/curiosity.png
+   
 .. note::
 
    When the Curiosity Rover was on its way to Mars in 2012, a flight software developer at NASA JPL discovered a mission-critical bug through manual code review. The problem occurred in Curiosity’s Entry, Descent, and Landing software–the software responsible for the Rover’s descent through the Martian atmosphere and landing it safely on the surface. of Mars.
@@ -79,8 +80,10 @@ Find all instances!
 
 - All were fixed with a mid-flight patch.
 
-.. image:: ../_static-training/curiosity2.png
-   :scale: 75% 
+.. container:: image-box
+
+   .. image:: ../_static-training/curiosity2.png
+    
 
 .. note::
 
@@ -101,8 +104,10 @@ Analysis overview
 - The database schema is (source) language specific, as are queries and libraries.
 - Multi-language code bases are analyzed one language at a time.
 
-.. image:: ../_static-training/analysis-overview.png
-   :scale: 75 % 
+.. container:: image-box
+
+   .. image:: ../_static-training/analysis-overview.png
+       
 
 .. note::