Headers/footers

Author: localhost433

about.html

@@ -60,8 +60,8 @@ <h2>Tech Stack</h2>
 
     <footer id="footer-placeholder"></footer>
 
+    <script type="module" src="js/header-footer.js"></script>
     <script src="js/theme.js"></script>
-    <script src="js/header-footer.js"></script>
 </body>
 
 </html>

blog.html

@@ -32,7 +32,7 @@
 
     <!-- necessary script order: -->
     <script src="js/theme.js"></script>
-    <script src="js/header-footer.js"></script>
+    <script type="module" src="js/header-footer.js"></script>
     <script src="js/blog.js"></script>
 </body>
 

css/projects.css

@@ -4,55 +4,77 @@
 
 /* Grid container */
 .projects-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin-top: 2rem;
-  }
-  
-  /* Card styles */
-  .project-card {
-    flex: 1 1 calc(33.333% - 20px);
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 0.8rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-  }
-  .project-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-  }
-  
-  /* Image & Content */
-  .project-card img {
-    width: 100%;
-    display: block;
-  }
-  .project-card-content {
-    padding: 1rem;
-  }
-  
-  /* Title & Description */
-  .project-card-title {
-    font-size: 1.3rem;
-    font-weight: bold;
-    color: #0055aa;
-    margin-bottom: 0.5rem;
-  }
-  .project-card-description {
-    font-size: 1rem;
-    color: #666;
-    line-height: 1.5;
-  }
-  .project-card-link {
-    display: inline-block;
-    margin-top: 0.8rem;
-    font-size: 0.9rem;
-    color: #0055aa;
-  }
-  .project-card-link:hover {
-    text-decoration: underline;
-  }
-  
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin-top: 2rem;
+}
+
+/* Card styles */
+.project-card {
+  flex: 1 1 calc(33.333% - 20px);
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 0.8rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.project-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Image & Content */
+.project-card img {
+  width: 100%;
+  display: block;
+}
+
+.project-card-content {
+  padding: 1rem;
+}
+
+/* Title & Description */
+.project-card-title {
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: #0055aa;
+  margin-bottom: 0.5rem;
+}
+
+.project-card-description {
+  font-size: 1rem;
+  color: #666;
+  line-height: 1.5;
+}
+
+.project-card-link {
+  display: inline-block;
+  margin-top: 0.8rem;
+  font-size: 0.9rem;
+  color: #0055aa;
+}
+
+.project-card-link:hover {
+  text-decoration: underline;
+}
+
+/* projects.css */
+#projects-list .post-entry {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#projects-list .post-title {
+  flex: 1;
+  margin-right: 1rem;
+}
+
+#projects-list .post-meta-inline {
+  white-space: nowrap;
+  font-size: 0.9rem;
+  color: #555;
+}

index.html

@@ -27,8 +27,9 @@
     <footer id="footer-placeholder"></footer>
 
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script type="module" src="js/header-footer.js"></script>
     <script src="js/theme.js"></script>
-    <script src="js/header-footer.js"></script>
+
 </body>
 
 </html>

js/header-footer.js

@@ -5,10 +5,10 @@ import { initializeThemeToggle } from './theme.js';
 
 function loadHeaderFooter() {
   return Promise.all([
-    fetch("/components/header.html")
+    fetch("components/header.html")
       .then(r => r.text())
       .then(html => document.getElementById("header-placeholder").innerHTML = html),
-    fetch("/components/footer.html")
+    fetch("components/footer.html")
       .then(r => r.text())
       .then(html => document.getElementById("footer-placeholder").innerHTML = html)
   ]);

js/theme.js

@@ -1,5 +1,5 @@
 /* Dark-mode toggle */
-export function initializeThemeToggle() {
+function initializeThemeToggle() {
   const btn = document.getElementById("theme-toggle");
   if (!btn) {
     console.warn("theme-toggle not found.");
@@ -25,6 +25,8 @@ export function initializeThemeToggle() {
   });
 }
 
+export { initializeThemeToggle };
+
 
 /* Wait for header/footer to be injected */
 document.addEventListener("DOMContentLoaded", initializeThemeToggle);

post.html

@@ -43,7 +43,7 @@ <h3>Add a Comment</h3>
   <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script>
 
   <script src="js/theme.js"></script>
-  <script src="js/header-footer.js"></script>
+  <script type="module" src="js/header-footer.js"></script>
   <script src="js/post.js"></script>
 </body>
 

projects.html

@@ -7,6 +7,7 @@
     <title>Projects - Robin's Site</title>
     <link rel="stylesheet" href="css/shared.css" />
     <link rel="stylesheet" href="css/home.css" />
+    <link rel="stylesheet" href="css/projects.css" /> 
     <meta http-equiv="Content-Security-Policy" content="
         default-src 'self';
         script-src 'self' https://cdn.jsdelivr.net;
@@ -35,7 +36,7 @@ <h1>Projects</h1>
     <footer id="footer-placeholder"></footer>
 
     <script src="js/theme.js"></script>
-    <script src="js/header-footer.js"></script>
+    <script type="module" src="js/header-footer.js"></script>
     <script src="js/projects.js"></script>
 </body>