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

Refactor CSS in generateSite.js for improved responsiveness and layout. Updated styles to set the image container width to 100%, adjusted image dimensions for better scaling, and repositioned the description overlay for enhanced visual alignment. These changes enhance the overall user experience by ensuring images are displayed more effectively within their containers.

Browse Source
This commit is contained in:
Knight 2024-12-28 12:08:03 -05:00
parent ff9d7f31f8
commit 027628794a
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
generateSite.js
View File

@ -53,19 +53,17 @@ async function generateSite() {
<link rel="icon" type="image/png" href="/favicon.png">
<style>
.progressive-image-container {
width: fit-content; /* Only as wide as the content */
width: 100%;
max-width: 100vw;
max-height: 100vh;
margin: 0 auto;
display: grid;
position: relative;
grid-template-columns: 1fr; /* Single column grid */
grid-template-rows: 1fr; /* Single row grid */
}
.progressive-image {
width: auto; /* Let image determine width */
height: auto; /* Let image determine height */
max-width: 100vw;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100vh;
grid-area: 1 / 1;
transition: opacity 0.5s ease-in-out;
@ -85,13 +83,16 @@ async function generateSite() {
.description {
position: absolute;
bottom: 20px;
left: 20px;
left: 50%;
transform: translateX(-50%);
margin-left: -40%; /* This will offset it to the left */
max-width: 80%;
z-index: 2;
color: #cccccc;
opacity: 0.8;
mix-blend-mode: hard-light;
margin: 0;
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 1.4;