lbreitkopf commited on
Commit ·
171923d
1
Parent(s): 792fc9a
style change
Browse files- index.html +61 -1
index.html
CHANGED
|
@@ -117,6 +117,25 @@
|
|
| 117 |
.full-span { grid-column: 1 / -1; }
|
| 118 |
@media (max-width: 920px){ .full-span { grid-column: auto; } }
|
| 119 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 120 |
</style>
|
| 121 |
</head>
|
| 122 |
<body>
|
|
@@ -368,6 +387,47 @@
|
|
| 368 |
});
|
| 369 |
})();
|
| 370 |
</script>
|
| 371 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 372 |
</body>
|
| 373 |
</html>
|
|
|
|
| 117 |
.full-span { grid-column: 1 / -1; }
|
| 118 |
@media (max-width: 920px){ .full-span { grid-column: auto; } }
|
| 119 |
|
| 120 |
+
/* ===== Image modal (click-to-zoom) ===== */
|
| 121 |
+
.img-modal {
|
| 122 |
+
display:none; position:fixed; inset:0; z-index:1000;
|
| 123 |
+
background:rgba(0,0,0,.75);
|
| 124 |
+
align-items:center; justify-content:center;
|
| 125 |
+
padding:2rem;
|
| 126 |
+
}
|
| 127 |
+
.img-modal.open { display:flex; }
|
| 128 |
+
.img-modal img {
|
| 129 |
+
max-width:92vw; max-height:92vh;
|
| 130 |
+
border-radius:.6rem; box-shadow:0 6px 28px rgba(0,0,0,.4);
|
| 131 |
+
}
|
| 132 |
+
.img-modal .close {
|
| 133 |
+
position:absolute; top:12px; right:16px;
|
| 134 |
+
font-size:1.6rem; color:#fff; background:transparent; border:0; cursor:pointer;
|
| 135 |
+
}
|
| 136 |
+
.figure-card img { cursor: zoom-in; }
|
| 137 |
+
body.modal-open { overflow:hidden; } /* prevent background scroll */
|
| 138 |
+
|
| 139 |
</style>
|
| 140 |
</head>
|
| 141 |
<body>
|
|
|
|
| 387 |
});
|
| 388 |
})();
|
| 389 |
</script>
|
| 390 |
+
|
| 391 |
+
<!-- Image modal (click-to-zoom) -->
|
| 392 |
+
<div class="img-modal" id="imgModal" aria-hidden="true">
|
| 393 |
+
<button class="close" aria-label="Close">×</button>
|
| 394 |
+
<img id="imgModalImg" alt="">
|
| 395 |
+
</div>
|
| 396 |
+
|
| 397 |
+
<script>
|
| 398 |
+
(function(){
|
| 399 |
+
const modal = document.getElementById('imgModal');
|
| 400 |
+
const modalImg = document.getElementById('imgModalImg');
|
| 401 |
+
if (!modal || !modalImg) return;
|
| 402 |
+
|
| 403 |
+
document.addEventListener('click', (e)=>{
|
| 404 |
+
const img = e.target.closest('.figure-card img');
|
| 405 |
+
if (!img) return;
|
| 406 |
+
const full = img.getAttribute('data-full');
|
| 407 |
+
modalImg.src = full || img.src;
|
| 408 |
+
modalImg.alt = img.alt || '';
|
| 409 |
+
modal.classList.add('open');
|
| 410 |
+
document.body.classList.add('modal-open');
|
| 411 |
+
modal.setAttribute('aria-hidden','false');
|
| 412 |
+
});
|
| 413 |
+
|
| 414 |
+
modal.addEventListener('click', (e)=>{
|
| 415 |
+
if (e.target === modal || e.target.classList.contains('close')) closeModal();
|
| 416 |
+
});
|
| 417 |
+
|
| 418 |
+
document.addEventListener('keydown', (e)=>{
|
| 419 |
+
if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
|
| 420 |
+
});
|
| 421 |
+
|
| 422 |
+
function closeModal(){
|
| 423 |
+
modal.classList.remove('open');
|
| 424 |
+
document.body.classList.remove('modal-open');
|
| 425 |
+
modal.setAttribute('aria-hidden','true');
|
| 426 |
+
modalImg.src = '';
|
| 427 |
+
}
|
| 428 |
+
})();
|
| 429 |
+
</script>
|
| 430 |
+
|
| 431 |
+
|
| 432 |
</body>
|
| 433 |
</html>
|