diff options
Diffstat (limited to 'templates/fluid')
| -rw-r--r-- | templates/fluid/styles.css | 19 | ||||
| -rw-r--r-- | templates/fluid/template_index.html | 8 |
2 files changed, 22 insertions, 5 deletions
diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css index d730844..2ad267d 100644 --- a/templates/fluid/styles.css +++ b/templates/fluid/styles.css @@ -610,8 +610,6 @@ div.index_item { margin: 20px; border-radius: 8px; border-width: 0px; - background-position: 50% 50%; - background-repeat: no-repeat; box-shadow: 0 0 0px 1px #6b6c69, 0 0 12px 2px rgba(255, 245, 200, 0.38); transition-property: box-shadow; @@ -631,12 +629,25 @@ div.index_item a { height: 330px; text-align: left; text-decoration: none; +} + +div.index_item a span.album_thumbnail { + position: relative; + display: inline-block; +} + +div.index_item a span.album_thumbnail:after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: inline-block; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); background: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); - transition-property: background; - transition-duration: 0.3s; } div.index_item span.album_text { diff --git a/templates/fluid/template_index.html b/templates/fluid/template_index.html index 12fc918..652d649 100644 --- a/templates/fluid/template_index.html +++ b/templates/fluid/template_index.html @@ -52,9 +52,15 @@ <div class="albums"> <!-- $(BEGIN_IMG_LIST) --> <!-- $(BEGIN_LIST_PICTURE_ALL_SIZES) --> - <div class="index_item" style="background-image:url($(IMG_SRC_THUMB)); background-image:image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))); background-image:-webkit-image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))); background-image:-moz-image-set(url($(IMG_SRC_THUMB)) 1x$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), url($(IMG_SRC__THUMBNAIL_HIDPI_1.5X)) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), url($(IMG_SRC__THUMBNAIL_HIDPI_2X)) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)));"> + <div class="index_item"> <div class="position_marker" id="$(IMG_POS_MARKER)"></div> <a href="$(ALBUM_SUBPATH)"> + <span class="album_thumbnail"> + <picture> + <source srcset="$(IMG_SRC_THUMB)$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X)), $(IMG_SRC__THUMBNAIL_HIDPI_1.5X) 1.5x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_1.5X))$(ifdef(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X)), $(IMG_SRC__THUMBNAIL_HIDPI_2X) 2x$(endif(HAVE_IMG_SIZE_THUMBNAIL_HIDPI_2X))"> + <img src="$(IMG_SRC_THUMB)" width="$(IMG_SIZE_W__THUMBNAIL)" height="$(IMG_SIZE_H__THUMBNAIL)" alt="" /> + </picture> + </span> <span class="album_text"><!-- $(IMG_TITLE) --></span><br /> <span class="album_subtext"><!-- $(IMG_DESCRIPTION) --></span> <!-- $(ifdef(IS_PROTECTED)) --><span class="album_protected_note"><br />(This album is password protected)</span><!-- $(endif(IS_PROTECTED)) --> |