Use Bootstrap for album/photo grid #31

Merged
Aaron merged 8 commits from bootstrap-tiles into master 2023-04-05 17:08:17 +02:00
Showing only changes of commit 31ea4196cf - Show all commits

View File

@ -177,15 +177,12 @@ i.space-invader.alt-7::before {
} }
/* Album index /* Album and photo index pages
----------------*/ --------------------------------*/
.album-index, .photo-index { .album-index, .photo-index {
clear: both; clear: both;
} }
/* Tiled grid
---------------*/
.tiled-header > a { .tiled-header > a {
background: #fff; background: #fff;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
@ -200,35 +197,19 @@ i.space-invader.alt-7::before {
white-space: nowrap; white-space: nowrap;
} }
.tiled_grid { div.polaroid {
margin: 0;
padding: 0;
list-style: none;
}
div.polaroid,
.tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama,
.tiled_grid div.duo, .tiled_grid div.single {
background: #fff; background: #fff;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/*float: left;*/
line-height: 0; line-height: 0;
/* margin: 0 3.5% 3.5% 0;*/
/* overflow: hidden;*/
position: relative; position: relative;
/*width: 31%;*/
} }
div.polaroid img {
div.polaroid img,
.tiled_grid div img {
background: url('../images/nothumb.svg') center no-repeat; background: url('../images/nothumb.svg') center no-repeat;
border: none; border: none;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
} }
div.polaroid h4 {
div.polaroid h4,
.tiled_grid div h4 {
color: #000; color: #000;
margin: 0; margin: 0;
font: 400 18px 'Coda', sans-serif; font: 400 18px 'Coda', sans-serif;
@ -238,101 +219,14 @@ div.polaroid h4,
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
div.polaroid a {
div.polaroid a,
.tiled_grid div a {
display: block; display: block;
text-decoration: none; text-decoration: none;
} }
div.polaroid:hover {
div.polaroid:hover,
.tiled_grid div.landscape:hover, .tiled_grid div.portrait:hover, .tiled_grid div.panorama:hover,
.tiled_grid div.duo:hover, .tiled_grid div.single:hover {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
/* Panoramas */
.tiled_grid div.panorama, .tiled_grid .tiled_row {
clear: both;
float: left;
width: 100%;
margin-right: 0;
}
/* Tiling: one landscape, two tiles */
.tiled_row .column_landscape {
float: left;
width: 65.5%;
margin: 0 3.5% 3.5% 0;
}
.tiled_row .column_landscape div {
width: auto;
margin: 0;
}
.tiled_row .column_tiles_two {
float: left;
width: 31%;
}
.tiled_row .column_tiles_two div {
float: left;
width: 100%;
margin: 0 0 10% 0;
}
/* Tiling: big portrait, four tiles */
.tiled_row .column_portrait {
float: left;
width: 31%;
margin: 0 3.5% 3.5% 0;
}
.tiled_row .column_portrait div {
width: auto;
margin: 0;
}
.tiled_row .column_tiles_four {
float: left;
width: 65.5%;
}
.tiled_row .column_tiles_four div {
float: left;
width: 47.45%;
margin: 0 5% 5% 0;
}
/* Tiling: two tiles */
.tiled_row .duo {
width: 48.25% !important;
}
/* Tiling: one tile */
.tiled_row .single {
width: 48.25% !important;
}
/* Tiling: remove horizontal margin at end of row. */
.tiled_row > div:nth-child(3n),
.tiled_row > .duo:nth-child(2) {
margin-right: 0 !important;
}
.tiled_row .column_tiles_four > div:nth-child(2n) {
margin-right: 0;
}
/* Tiling: switch places for odd rows */
.tiled_row:nth-child(odd) .column_landscape,
.tiled_row:nth-child(odd) .column_portrait {
float: right;
margin: 0 0 3.5% 3.5%;
}
.tiled_row:nth-child(odd) .column_tiles_four {
float: right;
}
.tiled_row:nth-child(odd) .column_tiles_two {
float: right;
}
/* Album title boxes /* Album title boxes
----------------------*/ ----------------------*/