Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

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
Conversation 0 Commits 8 Files Changed 5 +7 -113
1 changed files with 7 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 31ea4196cf - Show all commits

120
public/css/default.css
View File

@ -177,15 +177,12 @@ i.space-invader.alt-7::before {
}
/* Album index
----------------*/
/* Album and photo index pages
--------------------------------*/
.album-index, .photo-index {
clear: both;
}
/* Tiled grid
---------------*/
.tiled-header > a {
background: #fff;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
@ -200,35 +197,19 @@ i.space-invader.alt-7::before {
white-space: nowrap;
}
.tiled_grid {
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 {
div.polaroid {
background: #fff;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
/*float: left;*/
line-height: 0;
/* margin: 0 3.5% 3.5% 0;*/
/* overflow: hidden;*/
position: relative;
/*width: 31%;*/
}
div.polaroid img,
.tiled_grid div img {
div.polaroid img {
background: url('../images/nothumb.svg') center no-repeat;
border: none;
object-fit: cover;
width: 100%;
}
div.polaroid h4,
.tiled_grid div h4 {
div.polaroid h4 {
color: #000;
margin: 0;
font: 400 18px 'Coda', sans-serif;
@ -238,101 +219,14 @@ div.polaroid h4,
white-space: nowrap;
overflow: hidden;
}
div.polaroid a,
.tiled_grid div a {
div.polaroid 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 {
div.polaroid:hover {
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
----------------------*/