Source code of my website
💄 : use a simple grid for gallery
+10
-34
+10
-34
assets/css/custom.css
+10
-34
assets/css/custom.css
···
276
276
background-color: var(--bkg-color) !important;
277
277
}
278
278
279
-
/* Photo gallery styles */
280
-
.photo-gallery {
281
-
display: flex;
282
-
flex-direction: column;
283
-
}
284
-
285
-
.gallery-row {
286
-
display: flex;
287
-
flex-wrap: nowrap;
288
-
justify-content: flex-start;
289
-
}
290
-
291
-
.gallery-row img {
292
-
width: 100%;
293
-
flex-shrink: 1;
294
-
height: auto;
295
-
transition: transform 0.3s ease;
296
-
margin: 0;
297
-
}
298
-
299
-
.gallery-row img:hover {
300
-
transform: scale(1.3);
301
-
}
302
-
303
-
/* Default styling for images when not using the new pattern */
304
-
.photo-gallery > img {
305
-
margin: 0;
306
-
border-radius: 4px;
307
-
width: 100%;
308
-
max-width: 800px;
309
-
height: auto;
310
-
transition: transform 0.3s ease;
311
-
}
312
-
313
279
.images-grid-2 {
314
280
display: grid;
315
281
grid-template-columns: 1fr 1fr;
···
336
302
background-color: #0085ff;
337
303
color: white;
338
304
text-decoration: none;
305
+
}
306
+
307
+
.photo-gallery {
308
+
display: grid;
309
+
grid-template-columns: repeat(3, auto);
310
+
a{
311
+
img{
312
+
margin-bottom: 0;
313
+
}
314
+
}
339
315
}