Finally themed the index page

Author: Soybean44

_quarto.yml

@@ -21,3 +21,4 @@ format:
     toc: true
     embed-resources: true
     self-contained-math: true
+    anchor-sections: false

_site/experiments/cpp_test/index.html

@@ -7,7 +7,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
 
 
-<title>Cpp_test – Computational Physics</title>
+<title>C++ Test – Computational Physics</title>
 <style>
 code{white-space: pre-wrap;}
 span.smallcaps{font-variant: small-caps;}
@@ -4791,7 +4791,7 @@
 
 <header id="title-block-header" class="quarto-title-block default">
 <div class="quarto-title">
-<h1 class="title">Cpp_test</h1>
+<h1 class="title">C++ Test</h1>
 </div>
 
 

_site/experiments/wave_equation/index.html

@@ -2,7 +2,7 @@
   {
     "objectID": "experiments/cpp_test/index.html",
     "href": "experiments/cpp_test/index.html",
-    "title": "Cpp_test",
+    "title": "C++ Test",
     "section": "",
     "text": "This should test the render cpp script.\nextern void render_rect(int x, int y, int w, int h);\n\nint main() {\n  render_rect(0,0,50,50);\n  return 0;\n}\nNow we display a canvas with a square"
   },
@@ -47,5 +47,19 @@
     "title": "About",
     "section": "",
     "text": "About this site"
+  },
+  {
+    "objectID": "index.html",
+    "href": "index.html",
+    "title": "Computational Physics",
+    "section": "",
+    "text": "Home Page\n\n\n\n\n\n\n\n\n\n\n\nCpp_test\n\n  \n\n\n\n\nPoisson’s Equation (Voltage)\n\n \\[\\nabla V = -\\frac{1}{\\epsilon_0}\\rho\\] \n\n\n\n\nSchrödinger’s Equation\n\n \\[-\\frac{\\hbar}{2m}\\nabla^2 \\psi(x) + V(x) \\psi(x) = E \\psi(x)\\] \n\n\n\n\nWave Equation\n\n \\[\\frac{\\partial^2 y}{\\partial^2 t} = \\frac{T}{\\mu} \\frac{\\partial^2 y}{\\partial^2 x}\\] \n\n\n\nNo matching items"
+  },
+  {
+    "objectID": "index.html#home-page",
+    "href": "index.html#home-page",
+    "title": "Computational Physics",
+    "section": "Home Page",
+    "text": "Home Page"
   }
 ]

_site/index.html

@@ -1,5 +1,10 @@
-<ul>
+<ul class="listing-container">
 <% for (const item of items) { %>
-  <li><a href="<%- item.path %>"><%= item.title %></a> <%= item.description%></li>
+  <li class="list-item">
+    <a href="<%- item.path %>" class="card-link">
+      <h3 class="card-title"><%= item.title %></h3><br>
+      <span class="card-desc"><%= item.description %></span>
+    </a>
+  </li>
 <% } %>
 </ul>

_site/search.json

@@ -1,5 +1,5 @@
 ---
-title: Cpp_test
+title: C++ Test
 ---
 
 This should test the render cpp script.

experiment.ejs

@@ -5,4 +5,45 @@ listing:
   sort: "title asc"
   template: experiment.ejs
 ---
-## Experiments
+## Home Page
+```{=html}
+<style>
+.listing-container {
+    background: var(--bs-gray-900);
+    list-style-type: none; /* Removes bullet points from unordered lists */
+    padding: 1em;            /* Optional: removes default padding */
+    text-align: center;
+}
+.card-link {
+    background: none;
+    color: inherit; /* Use the same color as the surrounding text */
+    text-decoration: none; /* Remove underline */
+    cursor: default; /* Change cursor to default */
+}
+.card-desc {
+    background: none;
+    color: inherit; /* Use the same color as the surrounding text */
+}
+.card-link:hover {
+    background: none;
+    color: inherit; /* Keep the same color on hover */
+    text-decoration: none; /* Keep no underline on hover */
+}
+.list-item {
+    background: var(--bs-default);
+    border: 0.1em;
+    padding: 0.1em 1em 0.5em 1em; 
+    border-radius: 1em;
+    margin: 1em;
+}
+
+.list-item:hover {
+    background: var(--bs-default);
+    border: 0.1em;
+    padding: 0.1em 1em 0.5em 1em; 
+    border-radius: 1em;
+    margin: 1em;
+    color: var(--bs-green);
+}
+</style>
+```