Add highlight container for improved content visibility

Author: nikoscham

FEAScript-website.css

@@ -63,6 +63,13 @@ p {
   max-width: 1000px;
 }
 
+.highlight-container {
+  background-color: #fff0b3;
+  border-radius: 5px;
+  max-width: 1000px;
+  padding: 10px;
+}
+
 a {
   text-decoration: none;
 }

FiniteElementMethodNotes.html

@@ -54,12 +54,13 @@ <h1>Finite Element Method Notes</h1>
       <li><a href="#residualscomputation">Residuals Computation</a></li>
       <li><a href="#references">References</a></li>
     </ul>
-
-    <p>
-      The finite element method is a discretization technique that can utilize a computational mesh to
-      approximate the solution of a partial differential equation. Basic concepts of the finite element method
-      are described below.
-    </p>
+    <div class="highlight-container">
+      <p>
+        The finite element method is a discretization technique that can utilize a computational mesh to
+        approximate the solution of a partial differential equation. Basic concepts of the finite element
+        method are described below.
+      </p>
+    </div>
     <h2 id="galerkinresiduals"><a name="Galerkin Residuals"></a>Galerkin Residuals</h2>
     <p>
       Consider a typical formulation of a boundary value problem (BVP): $$\begin{eqnarray} Lu &= f \quad
@@ -187,5 +188,11 @@ <h2 id="references"><a name="References"> </a>References</h2>
     <ul id="menu">
       <li><a href="https://feascript.com/index.html">Return</a></li>
     </ul>
+
+    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <script>
+      document.getElementById("currentYear").innerHTML = new Date().getFullYear();
+    </script>
+
   </body>
 </html>

index.html

@@ -61,12 +61,14 @@ <h1>A JavaScript Finite Element Simulation Library</h1>
       </li>
     </ul>
 
-    <p>
-      FEAScript is a lightweight finite element simulation library built in JavaScript. It enables the
-      creation and running of client-side, browser-based simulations for physics and engineering problems
-      without the need for additional installations. FEAScript can be an excellent tool for building
-      interactive web applications as well as performing hands-on learning of computational mechanics.
-    </p>
+    <div class="highlight-container">
+      <p>
+        FEAScript is a lightweight finite element simulation library built in JavaScript. It enables the
+        creation and running of client-side, browser-based simulations for physics and engineering problems
+        without the need for additional installations. FEAScript can be an excellent tool for building
+        interactive web applications as well as performing hands-on learning of computational mechanics.
+      </p>
+    </div>
 
     <h2 id="gettingstarted"><a name="Getting Started"></a>Getting Started</h2>
     <p>
@@ -149,16 +151,17 @@ <h3>Tutorials</h3>
     <h2 id="licensing"><a name="Licensing"></a>Licensing</h2>
     <p>
       FEAScript is distributed under the terms of the
-      <a href="https://github.com/FEAScript/FEAScript-core/blob/main/LICENSE" target="_blank">MIT license</a>. This website is licensed
-      under a
+      <a href="https://github.com/FEAScript/FEAScript-core/blob/main/LICENSE" target="_blank">MIT license</a>.
+      This website is licensed under a
       <a href="https://github.com/FEAScript/FEAScript-website/blob/main/LICENSE" target="_blank"
         >Creative Commons Attribution 4.0 license</a
       >.
     </p>
-    <p>&#169; 2023-<span id="currentYear"></span> FEAScript.</p>
 
+    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
     <script>
       document.getElementById("currentYear").innerHTML = new Date().getFullYear();
     </script>
+
   </body>
 </html>

tutorials/HeatConduction2DFin.html

@@ -69,11 +69,13 @@ <h1>Heat Conduction in a Two-Dimensional Fin Tutorial</h1>
       <li><a href="#results">Results</a></li>
     </ul>
 
-    <p>
-      In this tutorial, we address a stationary heat transfer problem within a 2D rectangular domain. This is
-      a typical cooling fin problem. Cooling fins are commonly used to increase the area available for heat
-      transfer between metal walls and poorly conducting fluids such as air.
-    </p>
+    <div class="highlight-container">
+      <p>
+        In this tutorial, we address a stationary heat transfer problem within a 2D rectangular domain. This
+        is a typical cooling fin problem. Cooling fins are commonly used to increase the area available for
+        heat transfer between metal walls and poorly conducting fluids such as air.
+      </p>
+    </div>
 
     <h2 id="mathematicalformulation"><a name="Mathematical formulation"></a>Mathematical Formulation</h2>
     <p>
@@ -211,7 +213,11 @@ <h2 id="results"><a name="Results"></a>Results</h2>
 
     <script type="module">
       //Load FEAScript from GitHub
-      import { FEAScriptModel, plotSolution, printVersion } from "https://feascript.github.io/FEAScript-core/src/index.js";
+      import {
+        FEAScriptModel,
+        plotSolution,
+        printVersion,
+      } from "https://feascript.github.io/FEAScript-core/src/index.js";
       //Load FEAScript from a local directory
       //import { FEAScriptModel, plotSolution, printVersion } from "../../FEAScript-core/src/index.js";
 
@@ -311,5 +317,11 @@ <h2 id="results"><a name="Results"></a>Results</h2>
         }
       });
     </script>
+
+    <p>&#169; 2023-<span id="currentYear"></span> FEAScript</p>
+    <script>
+      document.getElementById("currentYear").innerHTML = new Date().getFullYear();
+    </script>
+
   </body>
 </html>