ryan/pictshare-browse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CSS styles for improved layout and aesthetics; enhance body and h1 styles, update image container properties, and adjust image display settings
All checks were successful
CI / build (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Ryan Hamilton
2025-07-23 20:20:21 +00:00
parent 0a566797de
commit 6b13809d01
2 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/style.css
View File

@@ -1,6 +1,18 @@
body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; } body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
min-height: 100vh;
background: linear-gradient(135deg, #1f1f22 0%, #232a33 100%);
color: #e0e0e0;
}
h1 { margin-top: 1.5rem; } h1 {
margin-top: 1.5rem;
color: #e0e6f0;
letter-spacing: 1px;
}
#gallery { #gallery {
@@ -18,19 +30,18 @@ h1 { margin-top: 1.5rem; }
.image-container { .image-container {
width: 200px; width: 200px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
background: #fafafa; background: transparent;
border-radius: 8px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
transition: transform 0.15s; transition: transform 0.15s;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center;
} }
.image-container:hover { .image-container:hover {
transform: scale(1.04); transform: scale(1.04);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
} }
.copy-btn { .copy-btn {
@@ -54,9 +65,13 @@ h1 { margin-top: 1.5rem; }
} }
.image-container img { .image-container img {
width: 100%; max-width: 90%;
height: 100%; max-height: 90%;
object-fit: cover; width: auto;
border-radius: 8px 8px 0 0; height: auto;
object-fit: contain;
border-radius: 8px;
display: block; display: block;
margin: auto;
background: transparent;
} }