gallery doesn't look like total shit now

index.html

@@ -42,13 +42,14 @@
     <main class="container">
         <section id="gallery" class="image-gallery">
             <h2>Visual Progress</h2>
-            <img src="01.png" alt="Lexer Screenshot">           
+            <img src="01.png" alt="Lexer Screenshot" onclick="openModal(this)">
-            <img src="02.png" alt="Lexer Tests Screenshot">
+            <img src="02.png" alt="Lexer Tests Screenshot" onclick="openModal(this)">
-            <img src="03.png" alt="REPL Screenshot">
+            <img src="03.png" alt="REPL Screenshot" onclick="openModal(this)">
-            <img src="04.png" alt="Parsing 'hello, world'">
+            <img src="04.png" alt="Parsing 'hello, world'" onclick="openModal(this)">
-            <img src="05.png" alt="ast progress">
+            <img src="05.png" alt="ast progress" onclick="openModal(this)">
-            <img src="06.png" alt="arithmetic parsing">
+            <img src="06.png" alt="arithmetic parsing" onclick="openModal(this)">
-            <img src="07.png" alt="Variables are being stored!">
+            <img src="07.png" alt="Variables are being stored!" onclick="openModal(this)">
+            <p>Some building screenshots no one will care about. :)</p>
         </section>
 
         <section id="overview">
@@ -176,11 +177,16 @@ cargo run</code></pre>
         </div>
     </footer>
 
+    <div id="imageModal" class="modal">
+        <span class="close-modal" onclick="closeModal()">&times;</span>
+        <img class="modal-content" id="modalImage">
+        <div id="caption" class="modal-caption"></div>
+    </div>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script>hljs.highlightAll();</script>
     <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
     <script>
-        // Simple script to highlight active nav link based on scroll position
         document.addEventListener("DOMContentLoaded", function() {
             const sections = document.querySelectorAll("section[id]");
             const navLi = document.querySelectorAll("nav ul li a");
@@ -189,7 +195,7 @@ cargo run</code></pre>
                 let current = "";
                 sections.forEach(section => {
                     const sectionTop = section.offsetTop;
-                    if (pageYOffset >= sectionTop - (section.clientHeight / 3) ) { // Adjust offset as needed
+                    if (pageYOffset >= sectionTop - (section.clientHeight / 3) ) { 
                         current = section.getAttribute("id");
                     }
                 });
@@ -203,5 +209,37 @@ cargo run</code></pre>
             });
         });
     </script>
+    <script>
+        // Get the modal
+        var modal = document.getElementById("imageModal");
+        var modalImg = document.getElementById("modalImage");
+        var captionText = document.getElementById("caption");
+
+        // Function to open the modal
+        function openModal(element) {
+            modal.style.display = "block";
+            modalImg.src = element.src;
+            captionText.innerHTML = element.alt; // Use alt text as caption
+        }
+
+        // Function to close the modal
+        function closeModal() {
+            modal.style.display = "none";
+        }
+
+        // Close modal if user clicks anywhere outside the image
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                closeModal();
+            }
+        }
+
+        // Optional: Close modal with Escape key
+        document.addEventListener('keydown', function(event) {
+            if (event.key === "Escape") {
+                closeModal();
+            }
+        });
+    </script>
 </body>
 </html>

styles.css

@@ -84,6 +84,16 @@ section {
     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 
+section.image-gallery { /* Be more specific or use the ID #gallery if preferred */
+    background-color: #1e1e1e; /* This is from your general section style, which is fine */
+    padding: 25px;             /* Also from general section style */
+    margin-bottom: 30px;        /* Also from general section style */
+    border-radius: 8px;         /* Also from general section style */
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Also from general section style */
+    text-align: center; /* To center the inline-block images */
+    /* Remove problematic styles like max-width, specific border, specific margin, cursor from the container */
+}
+
 h2 {
     color: #ffffff;
     border-bottom: 2px solid #569cd6; /* Accent border */
@@ -139,16 +149,25 @@ a:hover {
 
 /* Image Gallery */
 .image-gallery {
-    text-align: center;
+    background-color: #1e1e1e; /* This is from your general section style, which is fine */
-    margin-bottom: 20px;
+    padding: 25px;             /* Also from general section style */
+    margin-bottom: 30px;        /* Also from general section style */
+    border-radius: 8px;         /* Also from general section style */
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Also from general section style */
+    text-align: center; /* To center the inline-block images */
 }
 
 .image-gallery img {
-    max-width: calc(50% - 20px); /* Display two images per row on larger screens */
+    max-width: calc(33.333% - 20px); /* Adjusted for potentially 3 images per row, play with this */
+    /* Or, for smaller thumbnails like in your screenshot, you might want a fixed width: */
+    /* max-width: 150px; */
     height: auto;
     border: 2px solid #444;
     border-radius: 6px;
-    margin: 10px;
+    margin: 10px; /* This creates space around each image */
+    display: inline-block; /* Allows text-align:center on parent to work & respects margin/padding */
+    vertical-align: top; /* Aligns images nicely if they have different heights */
+    cursor: pointer; /* Indicates images are clickable */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -158,14 +177,77 @@ a:hover {
 }
 
 /* For smaller screens, stack images */
-@media (max-width: 768px) {
+@media (max-width: 900px) { /* Adjusted breakpoint */
     .image-gallery img {
-        max-width: calc(100% - 20px); /* Full width on smaller screens */
+        max-width: calc(50% - 20px); /* Two images per row */
     }
 }
 
+@media (max-width: 600px) { /* Adjusted breakpoint */
+    .image-gallery img {
+        max-width: calc(100% - 20px); /* Full width (one image per row) */
+    }
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.9);
+}
+
+.modal-content {
+    margin: auto;
+    display: block;
+    width: auto; /* Auto width */
+    max-width: 80%; /* Max width */
+    max-height: 80vh; /* Max height related to viewport height */
+    animation-name: zoom;
+    animation-duration: 0.4s;
+}
+
+.modal-caption {
+    margin: 15px auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0;
+    height: 50px; /* Give it some height */
+    font-size: 1.1em;
+}
+
+/* Add Animation */
+@keyframes zoom {
+    from {transform:scale(0.5)}
+    to {transform:scale(1)}
+}
+
+/* The Close Button */
+.close-modal {
+    position: absolute;
+    top: 20px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+.close-modal:hover,
+.close-modal:focus {
+    color: #bbb;
+    text-decoration: none;
+    cursor: pointer;
+}
 
-/* Goals and Projections Section (previously .notes) */
 .goals-projections {
     background-color: #232323; /* Slightly different background */
     padding: 25px;