add reactive page design to the image and the footer so that this is …

…more viewable on mobile

index.html

@@ -39,10 +39,8 @@ <h2>About Me</h2>
         <img
           src="assets/whale.webp"
           alt="CNCF TAG logo. A light green whale sitting on top of a light green image of the earth."
-          width="100"
-          height="100"
           title="CNCF TAG Environmental Sustainability logo"
-          style="display: block; margin: 0 auto"
+          style="display:block; margin:0 auto; max-width:50%; height:auto;"
         />
       </div>
 
@@ -68,9 +66,10 @@ <h2>Isn't this a bit basic?</h2>
       </div>
     </main>
 
+    <!-- Note that this can be pinned to the bottom of the page once CSS is in use -->
     <footer
       style="
-        position: fixed;
+        position: relative;
         bottom: 0;
         width: 100%;
         background-color: #f8f9fa;

pages/edi.html

@@ -83,9 +83,10 @@ <h2>Tools and Documentation</h2>
       </div>
     </main>
 
+    <!-- Note that this can be pinned to the bottom of the page once CSS is in use -->
     <footer
       style="
-        position: fixed;
+        position: relative; 
         bottom: 0;
         width: 100%;
         background-color: #f8f9fa;

pages/sustainability.html

@@ -71,9 +71,10 @@ <h2>Tools</h2>
       </div>
     </main>
 
+    <!-- Note that this can be pinned to the bottom of the page once CSS is in use -->
     <footer
       style="
-        position: fixed;
+        position: relative;
         bottom: 0;
         width: 100%;
         background-color: #f8f9fa;