Footer implementation across multiple tutorial pages. Update background color in CSS

Author: nikoscham

FEAScript-website.css

@@ -69,7 +69,8 @@ p {
 }
 
 .highlight-container {
-  background-color: #fff0b3;
+  /* background-color: #fff0b3; */
+  background: #f7e7b7;
   border-radius: 5px;
   max-width: 1000px;
   padding: 10px;
@@ -326,3 +327,14 @@ mjx-container {
   font-style: italic;
   color: #555;
 }
+
+/* Footer styles */
+footer {
+  max-width: 1000px;
+  position: relative;
+  background-color: #f7e7b7;
+  color: #444;
+  padding: 2px 0 2px 0;
+  text-align: center;
+  border-top: 2px solid #e0c97f;
+}

index.html

@@ -333,8 +333,9 @@ <h2 id="licensing"><a name="Licensing"></a>Licensing</h2>
         >Creative Commons Attribution 4.0 license</a
       >.
     </p>
-
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <footer>
+      <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    </footer>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>

tutorials/HeatConduction1DWall.html

@@ -309,8 +309,9 @@ <h2 id="results"><a name="Results"></a>Results</h2>
         }
       });
     </script>
-
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <footer>
+      <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    </footer>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>

tutorials/HeatConduction1DWallPlatform.html

@@ -163,8 +163,9 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
         >
       </li>
     </ul>
-
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <footer>
+      <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    </footer>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>

tutorials/HeatConduction2DFin.html

@@ -354,7 +354,9 @@ <h2 id="results"><a name="Results"></a>Results</h2>
       });
     </script>
 
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <footer>
+      <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    </footer>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>

tutorials/HeatConduction2DFinGmsh.html

@@ -194,8 +194,8 @@ <h2 id="gmshfileimport"><a name="gmshfileimport"></a>Gmsh File Import</h2>
 
     <h3 id="gmshgeofile"><a name="gmshgeofile"></a>Example Gmsh .geo File</h3>
     <p>
-      Below is the rect.geo file used in this tutorial. It defines a 4m × 2m rectangular domain
-      with physical lines for each boundary edge:
+      Below is the rect.geo file used in this tutorial. It defines a 4m × 2m rectangular domain with physical
+      lines for each boundary edge:
     </p>
 
     <pre class="prettyprint">
@@ -233,7 +233,8 @@ <h3 id="gmshgeofile"><a name="gmshgeofile"></a>Example Gmsh .geo File</h3>
 // Generate 2D mesh
 Recombine Surface{1}; // Turn triangle elements into quadrilaterals
 Mesh.ElementOrder = 2; // Set quadratic elements 
-Mesh 2;</pre>
+Mesh 2;</pre
+    >
 
     <p>
       Note how the physical line tags in the geo file correspond to the boundary conditions in our FEAScript
@@ -275,7 +276,9 @@ <h2 id="generatedmesh"><a name="generatedmesh"></a>Generated Mesh</h2>
         alt="Quadrilateral mesh generated by Gmsh"
         style="max-width: 40%; height: auto"
       />
-      <p class="image-caption">Quadrilateral mesh (rect_quad_unstruct.msh) generated using the rect.geo script with Gmsh</p>
+      <p class="image-caption">
+        Quadrilateral mesh (rect_quad_unstruct.msh) generated using the rect.geo script with Gmsh
+      </p>
     </div>
 
     <p>
@@ -384,7 +387,9 @@ <h2 id="results"><a name="results"></a>Results</h2>
       });
     </script>
 
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <footer>
+      <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    </footer>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>

tutorials/HeatConduction2DFinPlatform.html

@@ -157,11 +157,15 @@ <h2 id="tutorial"><a name="Tutorial"></a>Step-by-Step Tutorial</h2>
         <a href="https://feascript.com/index.html" target="_blank">Return to FEAScript Website</a>
       </li>
       <li>
-        <a href="https://platform.feascript.com/help.html" target="_blank">Return to FEAScript Platform Help</a>
+        <a href="https://platform.feascript.com/help.html" target="_blank"
+          >Return to FEAScript Platform Help</a
+        >
       </li>
     </ul>
 
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <footer>
+      <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    </footer>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>

tutorials/HeatConduction2DFinWorker.html

@@ -335,7 +335,9 @@ <h2 id="results"><a name="Results"></a>Results</h2>
       });
     </script>
 
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <footer>
+      <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    </footer>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>