diff --git a/public/css/default.css b/public/css/default.css index 5f61392..a2df598 100644 --- a/public/css/default.css +++ b/public/css/default.css @@ -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); diff --git a/templates/AlbumIndex.php b/templates/AlbumIndex.php index ebfe9c1..676b871 100644 --- a/templates/AlbumIndex.php +++ b/templates/AlbumIndex.php @@ -15,6 +15,7 @@ class AlbumIndex extends Template const TILE_WIDTH = 400; const TILE_HEIGHT = 300; + const TILE_RATIO = self::TILE_WIDTH / self::TILE_HEIGHT; public function __construct(array $albums, $show_edit_buttons = false, $show_labels = true) { @@ -26,57 +27,56 @@ class AlbumIndex extends Template public function html_main() { echo ' -