knight/analogGallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS in generateSite.js to improve image container responsiveness. Updated styles to use 'fit-content' for width, adjusted image dimensions to auto for better aspect ratio handling, and implemented a single-column grid layout. These changes enhance visual presentation and user experience by ensuring images are displayed appropriately within their containers.

Browse Source
This commit is contained in:
Knight 2024-12-28 12:06:34 -05:00
parent 7d2b74001c
commit ff9d7f31f8
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
generateSite.js
View File

@ -53,21 +53,23 @@ async function generateSite() {
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<style> <style>
.progressive-image-container { .progressive-image-container {
width: 100%; width: fit-content; /* Only as wide as the content */
max-width: 100vw; max-width: 100vw;
max-height: 100vh; max-height: 100vh;
margin: 0 auto; margin: 0 auto;
display: grid; /* Use grid for overlay */ display: grid;
position: relative; /* Add this to contain the description */ position: relative;
grid-template-columns: 1fr; /* Single column grid */
grid-template-rows: 1fr; /* Single row grid */
} }
.progressive-image { .progressive-image {
width: 100%; width: auto; /* Let image determine width */
height: 100%; height: auto; /* Let image determine height */
max-width: 100%; max-width: 100vw;
max-height: 100vh; max-height: 100vh;
grid-area: 1 / 1; /* Stack images in same grid cell */ grid-area: 1 / 1;
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
object-fit: contain; /* Maintain aspect ratio within bounds */ object-fit: contain;
} }
.thumbnail { .thumbnail {
filter: blur(10px); filter: blur(10px);