AlbumIndex: rewrite to use Bootstrap grid for tiles

This commit is contained in:
2023-04-01 14:02:58 +02:00
parent a260f4ff88
commit b05015e76e
2 changed files with 70 additions and 52 deletions

View File

@@ -177,6 +177,13 @@ i.space-invader.alt-7::before {
}
/* Album index
----------------*/
.album-index {
clear: both;
}
/* Tiled grid
---------------*/
.tiled_header {
@@ -199,23 +206,29 @@ i.space-invader.alt-7::before {
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;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
float: left;
/*float: left;*/
line-height: 0;
margin: 0 3.5% 3.5% 0;
overflow: hidden;
/* margin: 0 3.5% 3.5% 0;*/
/* overflow: hidden;*/
position: relative;
width: 31%;
/*width: 31%;*/
}
div.polaroid img,
.tiled_grid div img {
background: url('../images/nothumb.svg') center no-repeat;
border: none;
object-fit: cover;
width: 100%;
}
div.polaroid h4,
.tiled_grid div h4 {
color: #000;
margin: 0;
@@ -226,9 +239,14 @@ i.space-invader.alt-7::before {
white-space: nowrap;
overflow: hidden;
}
div.polaroid a,
.tiled_grid div a {
display: block;
text-decoration: none;
}
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);