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

Refactor CSS for progressive image handling in generateSite.js and styles.css. Moved progressive image styles from generateSite.js to styles.css for better organization, ensuring improved responsiveness and visual presentation. Updated mix-blend-mode for navigation and image elements to enhance aesthetics and user engagement. These changes streamline the layout and enhance the overall user experience.

Browse Source
This commit is contained in:
Knight 2024-12-28 21:38:26 -05:00
parent aefe3b9cec
commit d0868b2353
2 changed files with 37 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
generateSite.js
View File

@ -51,49 +51,6 @@ async function generateSite() {
<title>${image.description || `Image ${i + 1}`}</title> <title>${image.description || `Image ${i + 1}`}</title>
<link rel="stylesheet" href="/styles.css"> <link rel="stylesheet" href="/styles.css">
<link rel="icon" type="image/png" href="/favicon.png"> <link rel="icon" type="image/png" href="/favicon.png">
<style>
.progressive-image-container {
width: auto;
max-width: 100vw;
max-height: 100vh;
margin: 0 auto;
display: grid;
position: relative;
}
.progressive-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100vh;
grid-area: 1 / 1;
transition: opacity 0.5s ease-in-out;
object-fit: contain;
}
.thumbnail {
filter: blur(10px);
transform: scale(.95);
opacity: 1;
}
.full-image {
opacity: 0;
}
.full-image.loaded {
opacity: 1;
}
.description {
position: absolute;
max-width: 80%;
z-index: 2;
color: #cccccc;
opacity: 0.8;
mix-blend-mode: color-dodge;
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
letter-spacing: 0.5px;
line-height: 1.4;
}
</style>
</head> </head>
<body> <body>
<div class="image-container"> <div class="image-container">

39
public/styles.css
View File

@ -51,6 +51,9 @@ img {
letter-spacing: 0.5px; letter-spacing: 0.5px;
line-height: 1.4; line-height: 1.4;
opacity: 0.7; opacity: 0.7;
z-index: 2;
color: #cccccc;
mix-blend-mode: color-dodge;
} }
.navigation { .navigation {
@ -61,13 +64,12 @@ img {
justify-content: space-between; justify-content: space-between;
padding: 0 5px; padding: 0 5px;
pointer-events: none; pointer-events: none;
mix-blend-mode: color-burn;
} }
.navigation a { .navigation a {
text-decoration: none; text-decoration: none;
color: white; color: white;
mix-blend-mode: difference; mix-blend-mode: color-dodge;
font-size: 24px; font-size: 24px;
pointer-events: auto; pointer-events: auto;
opacity: 0.7; opacity: 0.7;
@ -77,4 +79,37 @@ img {
.navigation a:hover { .navigation a:hover {
opacity: 1; opacity: 1;
}
.progressive-image-container {
width: auto;
max-width: 100vw;
max-height: 100vh;
margin: 0 auto;
display: grid;
position: relative;
}
.progressive-image {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100vh;
grid-area: 1 / 1;
transition: opacity 0.5s ease-in-out;
object-fit: contain;
}
.thumbnail {
filter: blur(10px);
transform: scale(.95);
opacity: 1;
}
.full-image {
opacity: 0;
}
.full-image.loaded {
opacity: 1;
} }