tristan/fddl.dev
1
0
Fork 0
mirror of https://github.com/urinalcaketopper/fddl.dev.git synced 2025-06-03 20:24:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

gallery doesn't look like total shit now

Browse Source
This commit is contained in:
Tristan 2025-05-29 23:07:55 -04:00
parent 4907225b7a
commit ff34d88c0e
2 changed files with 136 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
index.html
View File

@ -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="02.png" alt="Lexer Tests Screenshot">
<img src="03.png" alt="REPL Screenshot">
<img src="04.png" alt="Parsing 'hello, world'">
<img src="05.png" alt="ast progress">
<img src="06.png" alt="arithmetic parsing">
<img src="07.png" alt="Variables are being stored!">
<img src="01.png" alt="Lexer Screenshot" onclick="openModal(this)">
<img src="02.png" alt="Lexer Tests Screenshot" onclick="openModal(this)">
<img src="03.png" alt="REPL Screenshot" onclick="openModal(this)">
<img src="04.png" alt="Parsing 'hello, world'" onclick="openModal(this)">
<img src="05.png" alt="ast progress" onclick="openModal(this)">
<img src="06.png" alt="arithmetic parsing" onclick="openModal(this)">
<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>

96
styles.css
View File

@ -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;
margin-bottom: 20px;
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 */
}
.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;