From 654007b709d804767ab5be3bde3b134221a5b589 Mon Sep 17 00:00:00 2001 From: Tomas Bzatek Date: Sun, 3 Apr 2016 17:15:05 +0200 Subject: New 'fluid' theme Introducing a modern looking theme that changes gallery philosophy a bit. Instead of having thumbnails on an album page and photos on separate pages this new design brings emphasis on story telling. Viewer is advised to go through the whole album sequentially, bringing atmosphere to the whole set. All photos are loaded within a single page and keyboard navigation via left/right arrows is supposed to be used to switch the presentation mode on. Three photo sizes are supported now with the 'preview' size being the default. High resolution size has been introduced for 2560x1440 screens and larger. Note that this template uses code from 3rd parties, see CREDITS for details. I haven't been able to contact anyone behind the TheCodePlayer.com project so licensing of the breadcrumbs might be an issue. --- templates/Makefile.am | 2 +- templates/fluid/CREDITS | 14 + templates/fluid/Makefile.am | 15 + templates/fluid/README | 18 + templates/fluid/emblems-readonly_120.png | Bin 0 -> 5668 bytes templates/fluid/fluid.xml | 97 ++++ templates/fluid/fonts.css | 3 + templates/fluid/scripts.js | 351 ++++++++++++++ templates/fluid/styles.css | 757 +++++++++++++++++++++++++++++++ templates/fluid/template_album.html | 109 +++++ templates/fluid/template_index.html | 77 ++++ 11 files changed, 1442 insertions(+), 1 deletion(-) create mode 100644 templates/fluid/CREDITS create mode 100644 templates/fluid/Makefile.am create mode 100644 templates/fluid/README create mode 100644 templates/fluid/emblems-readonly_120.png create mode 100644 templates/fluid/fluid.xml create mode 100644 templates/fluid/fonts.css create mode 100644 templates/fluid/scripts.js create mode 100644 templates/fluid/styles.css create mode 100644 templates/fluid/template_album.html create mode 100644 templates/fluid/template_index.html (limited to 'templates') diff --git a/templates/Makefile.am b/templates/Makefile.am index 150d7e2..2b03c64 100644 --- a/templates/Makefile.am +++ b/templates/Makefile.am @@ -1,3 +1,3 @@ NULL = -SUBDIRS = classic +SUBDIRS = classic fluid diff --git a/templates/fluid/CREDITS b/templates/fluid/CREDITS new file mode 100644 index 0000000..316224e --- /dev/null +++ b/templates/fluid/CREDITS @@ -0,0 +1,14 @@ +This template was heavily inspired by flickriver.com and fluidr.com portals: + Flickriver viewer software © 2007-2016 Flickriver.com + Fluidr.com Copyright by Sidath Senanayake + + +The CSS breadcrumb navigation is a heavily modified example from + http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation + Copyright 2014 TheCodePlayer. All Rights Reserved. + + +Portions of the JavaScript code was taken from Prototype JavaScript framework: + Copyright (c) 2005-2008 Sam Stephenson + Prototype is freely distributable under the terms of an MIT-style license. + For details, see the Prototype web site: http://www.prototypejs.org/ diff --git a/templates/fluid/Makefile.am b/templates/fluid/Makefile.am new file mode 100644 index 0000000..edfc559 --- /dev/null +++ b/templates/fluid/Makefile.am @@ -0,0 +1,15 @@ +NULL = + +templatesdir = $(datadir)/cgg/fluid + +templates_DATA = \ + fluid.xml \ + fonts.css \ + styles.css \ + scripts.js \ + template_album.html \ + template_index.html \ + emblems-readonly_120.png \ + $(NULL) + +EXTRA_DIST = $(templates_DATA) diff --git a/templates/fluid/README b/templates/fluid/README new file mode 100644 index 0000000..268a911 --- /dev/null +++ b/templates/fluid/README @@ -0,0 +1,18 @@ +The fluid template is an attempt to create modern-looking interactive view mode. +It's targeted for a stream-like presentation as opposed to single picture pages. + +There's a strong emphasis for an album to tell a story and drive the viewer's +attention through it till the end. + + +Navigation +---------- + +To start the photostream mode, use or arrow keys or press +. To quit the photostream mode, press , or arrow keys +or simply scroll the mouse. + +Special shortcuts: + D - toggles EXIF panel visibility for all items + A - toggles animations (experimental, default=off) + F - toggles fullscreen mode (experimental) diff --git a/templates/fluid/emblems-readonly_120.png b/templates/fluid/emblems-readonly_120.png new file mode 100644 index 0000000..c952c7e Binary files /dev/null and b/templates/fluid/emblems-readonly_120.png differ diff --git a/templates/fluid/fluid.xml b/templates/fluid/fluid.xml new file mode 100644 index 0000000..b4e528b --- /dev/null +++ b/templates/fluid/fluid.xml @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + index.html + thumbnail + emblems-readonly_120.png + + + + + index.html + preview + + + + + + + + + + index_big.html + thumbnail + emblems-readonly_120.png + + + + + index_big.html + original + + + + + + + + + + index_hires.html + thumbnail + emblems-readonly_120.png + + + + + index_hires.html + hires + + + + + + + + diff --git a/templates/fluid/fonts.css b/templates/fluid/fonts.css new file mode 100644 index 0000000..eac5540 --- /dev/null +++ b/templates/fluid/fonts.css @@ -0,0 +1,3 @@ +@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css); + +@import url(http://fonts.googleapis.com/css?family=Hind:400,300,500,600,700|Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700&subset=latin,cyrillic-ext,latin-ext,cyrillic); diff --git a/templates/fluid/scripts.js b/templates/fluid/scripts.js new file mode 100644 index 0000000..7c9bb97 --- /dev/null +++ b/templates/fluid/scripts.js @@ -0,0 +1,351 @@ + +/****************************** EXIF TABLE *********************************/ + +var exif_all_visible = false; + +function set_exif_params (table, icon, visible) { + if (visible) { + table.style.display = 'block'; + icon.style.opacity = 1.0; + } else { + table.style.display = 'none'; + icon.style.opacity = 0.23; + } +} + +function toggle_exif_visibility (id) { + var table = document.getElementById ('exif_table-' + id); + var icon = document.getElementById ('exif_icon-' + id); + set_exif_params (table, icon, icon.style.opacity != 1.0); +} + +function toggle_exif_all_visibility () { + exif_all_visible = !exif_all_visible; + for (var i = 1; table = document.getElementById ("exif_table-" + i); i++) { + var icon = document.getElementById ('exif_icon-' + i); + set_exif_params (table, icon, exif_all_visible); + } +} + + +/**************************** FULLSCREEN MODE *****************************/ + +/* https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode */ +/* FIXME: scrollbar reset in Chromium 40 */ +/* TODO: retain stream mode if active */ +function toggleFullScreen() { + if (!document.fullscreenElement && // alternative standard method + !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods + if (document.documentElement.requestFullscreen) { + document.documentElement.requestFullscreen(); + } else if (document.documentElement.msRequestFullscreen) { + document.documentElement.msRequestFullscreen(); + } else if (document.documentElement.mozRequestFullScreen) { + document.documentElement.mozRequestFullScreen(); + } else if (document.documentElement.webkitRequestFullscreen) { + document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + } + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } + } +} + + +/****************************** PHOTOSTREAM *******************************/ + +/* PHOTOSTREAM - INSTRUCTIONS: + * - photos should be embedded in
+ * - every photo should have id="photo-XXX" where XXX is index starting with 1 + * - total number of photos needs to be defined in the NUM_PHOTOS variable + */ + +var current_idx = 0;    +var photostream_mode = false; +var scroll_timeout = 0; +var ignore_scroll_event = false; + +var enable_animations = false; +var animation_duration = 175; /* ms */ +var animation_steps = 17; + +    +    +/* Portions of code taken from Prototype JavaScript framework + * Copyright (c) 2005-2008 Sam Stephenson + * Prototype is freely distributable under the terms of an MIT-style license. + * For details, see the Prototype web site: http://www.prototypejs.org/ + */ + +function hasClassName (element, className) { + var elementClassName = element.className; + return (elementClassName.length > 0 && (elementClassName == className || + new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName))); +} + +function addClassName (element, className) { + if (!hasClassName(element, className)) + element.className += (element.className ? ' ' : '') + className; + return element; +} + +function removeClassName (element, className) { + element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, ''); + return element; +} + +function cumulativeOffset (element) { + var valueT = 0, valueL = 0; + do { + valueT += element.offsetTop || 0; + valueL += element.offsetLeft || 0; + element = element.offsetParent; + } while (element); + return [valueL, valueT]; +} + + +/* http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js */ +/* http://matthewlein.com/experiments/easing.html */ +function fadein (el) { + var op = 0.35; + var t = 0; + var handler = setInterval (function () { + if (op >= 1.0) + clearInterval (handler); + el.style.opacity = op; + op += 1.0 / animation_steps; + t += animation_duration / animation_steps; + var c = 1.0 / animation_steps; + var d = animation_duration; + var b = 0.0; +// op += c - c * Math.cos(t/d * (Math.PI/2)); /* easeInSine */ +// op += c*(t/=d)*t + b; /* easeInQuad */ + }, animation_duration / animation_steps); +} + + +function do_show_photo (do_show, id) { + var elem = document.getElementById (id); + if (! elem) + return; + + if (do_show) { + addClassName (elem, "photostream-force-show"); + if (enable_animations) { + elem.style.opacity = 0.0; + fadein (elem); + } else { + elem.style.opacity = 1.0; + } + } else { + removeClassName (elem, "photostream-force-show"); + elem.style.opacity = 1.0; + } +} + +function start_photostream_mode () { +  photostream_mode = true; + + if (NUM_PHOTOS <= 0) + return; + +  var l = document.getElementsByClassName('photostream-hide'); + for (var i = 0; i < l.length; i++) + addClassName (l[i], "photostream-force-hide"); + + var elem = document.getElementById ("photostream-close"); + if (elem) + removeClassName (elem, "photostream-force-hide"); + + var elem = document.getElementById ("photostream-position-label"); + if (elem) + removeClassName (elem, "photostream-force-hide"); +} + +function cancel_photostream_mode () { + if (photostream_mode) { + photostream_mode = false; + do_show_photo (false); + +    var l = document.getElementsByClassName('photostream-hide'); + for (var i = 0; i < l.length; i++) + removeClassName (l[i], "photostream-force-hide"); + + var elem = document.getElementById ("photostream-close"); + if (elem) + addClassName (elem, "photostream-force-hide"); + + var elem = document.getElementById ("photostream-position-label"); + if (elem) + addClassName (elem, "photostream-force-hide"); + } +} + +function update_position_label () { + var elem = document.getElementById ("photostream-position-label"); + if (elem) + elem.innerHTML = current_idx + " / " + NUM_PHOTOS; +} + +function scroll_to_photo (elem) { + var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight; + var off = cumulativeOffset (elem); + + off[1] += (elem.offsetHeight - window_height) / 2; + /* Dirty workaround to ignore subsequent onScroll events */ + ignore_scroll_event = true; + setTimeout (function () {ignore_scroll_event=false;}, 200); + window.scrollTo (off[0], off[1]); +} + +function set_position (inc) { + var idx; + var elem; + + if (! photostream_mode) + start_photostream_mode (); + + idx = current_idx + inc; + if (idx < 1) + idx = 1; + if (idx > NUM_PHOTOS) + idx = NUM_PHOTOS; + + elem = document.getElementById ("photo-" + idx); + if (! elem) + return; + + do_show_photo (false, "photo-" + current_idx); + do_show_photo (false, "photo-" + current_idx + "-sep"); + do_show_photo (false, "photo-" + current_idx + "-ispc"); + + scroll_to_photo (elem); + do_show_photo (true, "photo-" + idx); + do_show_photo (true, "photo-" + idx + "-sep"); + do_show_photo (true, "photo-" + idx + "-ispc"); + + current_idx = idx; + update_position_label (); +} + +function check_position () { + var win_pos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; + var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight; + var elem; + + current_idx = 0; + for (var i = 1; elem = document.getElementById ("photo-" + i); i++) { + /* Display the first photo when scrolled to the very top of the page */ + if (i == 1 && elem.offsetTop > win_pos + window_height / 2 - elem.clientHeight / 2 + 4) { + current_idx = 0; + break; + } + if (elem.offsetTop > win_pos + window_height / 2) + break; + current_idx = i; + } + + /* Update size buttons' anchors */ +  var l = document.getElementsByClassName('size-button'); + for (var i = 0; i < l.length; i++) { + l[i].href = l[i].href.replace(/(#.*)/, ''); + if (current_idx > 0) + l[i].href += '#i' + current_idx; + } + update_position_label (); +} + +function schedule_check_position () { + clearTimeout (scroll_timeout); + scroll_timeout = setTimeout (check_position, 100); +} + + +/* Movement */ +function stop_event (event) { +  event.preventDefault (); +  event.stopPropagation (); +} + +function onKeyEvent (event) { +  if (!event) +   event = window.event; +  if (!event) +   return; +  if (event.ctrlKey || event.altKey || event.metaKey) +   return; + + var c = event.which ? event.which : event.keyCode; + + switch (c) { + case 32: /* Space */ + case 39: /* Right arrow */ + set_position (1); + stop_event (event); + break; + case 8: /* Backspace */ + if (photostream_mode) { + set_position (-1); + stop_event (event); + } + break; + case 37: /* Left arrow */ + set_position (-1); + stop_event (event); + break; + case 27: /* Escape */ + if (photostream_mode) { + cancel_photostream_mode (); + stop_event (event); + } + schedule_check_position (); + break; + case 68: /* d */ + toggle_exif_all_visibility (); + onResize (null); + break; + case 65: /* a */ + enable_animations = ! enable_animations; + break; + case 70: /* f */ + toggleFullScreen(); + break; + } +} + +function onScroll (event) { + if (ignore_scroll_event) + return; + if (photostream_mode) { + cancel_photostream_mode (); + stop_event (event); + } + schedule_check_position (); +} + +function onResize (event) { + if (photostream_mode) { + var elem = document.getElementById ("photo-" + current_idx); + if (! elem) + return; + scroll_to_photo (elem); + } +} + +function onLoad () { + document.addEventListener ("keydown", onKeyEvent, false); +  window.addEventListener ("scroll", onScroll, false); +  window.addEventListener ("resize", onResize, false); +  schedule_check_position (); +}    + +/* this should perform initialization while the page is still loading */ +onLoad(); diff --git a/templates/fluid/styles.css b/templates/fluid/styles.css new file mode 100644 index 0000000..547ff6f --- /dev/null +++ b/templates/fluid/styles.css @@ -0,0 +1,757 @@ +@import url(fonts.css); + +html, body { + margin-top: 0; + margin-bottom: 0; + padding: 0; + height: 100%; + background: #000000; +} + +/* for the footer to stay down */ +div.content-wrapper { + min-height: 100%; + position: relative; +} + +div.content { + padding: 15px; +} + +div.content div.title { + padding-top: 50px; + font-weight: 600; + font-family: 'Hind', sans-serif; + font-size: 46px; + color: #EEEEEE; +/* text-shadow: rgba(240, 230, 199, 0.5) 0 0 2px; */ +} + +/* Size buttons tend to show color frame in Firefox */ +a:active, a:visited { + color: rgba(0, 255, 0, 0); +} + +div.content div.title a, +div.content div.text a, +div.photo div.photo-title a, +div.photo div.photo-text a, +div.interspace a, +div.separator a, +div.albums div.footnote a { + color: #CCCCCC; + text-decoration: underline; + transition-property: color, text-shadow; + transition-duration: 0.5s; +} + +div.content div.title a:hover, +div.content div.text a:hover, +div.photo div.photo-title a:hover, +div.photo div.photo-text a:hover, +div.interspace a:hover, +div.separator a:hover, +div.albums div.footnote a:hover { + color: #D0D0D0; + text-decoration: underline; + text-shadow: 0 0 4px rgba(240, 230, 220, 1.0); +} + +div.content div.text { + padding-top: 15px; + padding-left: 25px; + padding-right: 50px; + padding-bottom: 50px; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + color: #C3C3C3; +} + + +/******************************* NAVIGATION *******************************/ + +div.navigation { + font-size: 14px; + font-family: 'Open Sans', sans-serif; + background-color: rgba(50, 50, 50, 1.0); + color: #E0E0E0; + white-space: nowrap; + overflow: hidden; +} + +div.navigation div.navbar { + position: fixed; + z-index: 100; + top: 0; + left: 0; + line-height: 36px; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7); + border-right: 1px solid rgba(100, 100, 100, 1.0); + border-bottom: 1px solid rgba(100, 100, 100, 1.0); + border-bottom-right-radius: 6px; + -moz-border-radius: 0 0 6px 0; + -webkit-border-radius: 0 0 6px 0; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + background: linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + transition: box-shadow 0.3s; +} + +div.navigation div.navbar:hover { + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); +} + +div.navigation div.nav-right { + position: fixed; + z-index: 100; + top: 0; + right: 0; + padding: 8px; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.7); + border-left: 1px solid rgba(100, 100, 100, 1.0); + border-bottom: 1px solid rgba(100, 100, 100, 1.0); + border-bottom-left-radius: 6px; + -moz-border-radius: 0 0 0 6px; + -webkit-border-radius: 0 0 0 6px; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.4); + background: linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -o-linear-gradient(top, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + transition: box-shadow 0.3s; +} + +div.navigation div.nav-right:hover { + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); +} + +/* The following navbar code is a heavily modified example from + * http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation + * Copyright 2014 TheCodePlayer. All Rights Reserved. + */ +div.navbar a { + text-decoration: none; + float: left; + color: white; + padding: 0 8px 0 27px; + position: relative; +} + +div.navbar .nav-current { + float: left; + color: #CACACA; + padding: 0 14px 0 4px; +} + +div.navbar:hover .nav-current, +div.navbar .nav-current.av { + padding-left: 27px; +} + +div.navbar .nav-current.nav-root, +div.navbar:hover .nav-current.nav-root { + padding-left: 12px; +} + +div.navbar .nav-hidden, +div.navbar:hover .nav-revhidden { + display: none; +} + +div.navbar .nav-revhidden, +div.navbar:hover .nav-hidden { + display: inline; +} + +div.navbar a:first-child { + padding-left: 12px; +} + +div.navbar a:hover { + background: linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); + background: -o-linear-gradient(top, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%); +} + +div.navbar a:hover:after { + background: linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; + background: -webkit-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; + background: -moz-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; + background: -o-linear-gradient(325deg, rgba(128, 128, 128, 1.0) 30%, rgba(60, 60, 60, 1.0) 100%) !important; +} + +div.navbar a:nth-child(n+2):after, +div.navbar:hover a:first-child:after, +div.navbar a.av:after { + content: ''; + position: absolute; + top: 0; + right: -17px; + width: 34px; + height: 34px; + transform: scale(0.707) rotate(45deg); + -webkit-transform: scale(0.707) rotate(45deg); + -moz-transform: scale(0.707) rotate(45deg); + -o-transform: scale(0.707) rotate(45deg); + z-index: 2; + background: linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -webkit-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -moz-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + background: -o-linear-gradient(325deg, rgba(90, 90, 90, 1.0) 30%, rgba(30, 30, 30, 1.0) 100%); + box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + -webkit-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + -moz-box-shadow: 2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + border-radius: 0 5px 0 50px; + -webkit-border-radius: 0 5px 0 50px; + -moz-border-radius: 0 5px 0 50px; +} + +div.navbar a .vert-sep { + display: inline-block; + position: absolute; + top: 6px; + right: 6px; + width: 1px; + height: 23px; + background-image: linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-image: -webkit-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-image: -moz-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-image: -o-linear-gradient(top, rgba(120, 120, 120, 1.0) 35%, rgba(50, 50, 50, 1.0) 100%); + background-repeat: no-repeat; +} + +/* navbar icons */ +div.navbar i.fa { + font-size: 24px; + opacity: 0.7; + transition: opacity 0.3s; +} + +div.navbar:hover a i.fa { + opacity: 1.0; +} + +div.navbar i.fa-home { + position: relative; + top: 2px; +} + + +/******************************* FOOTER ***********************************/ + +div.footer { + clear: both; + position: absolute; + bottom: 0; + width: 100%; + text-align: center; + padding-top: 5px; + padding-bottom: 16px; + font-size: 13px; + font-family: 'Open Sans', sans-serif; + line-height: 1.4; + color: #A0A0A0; +} + +div.footer a { + color: #CCCCCC; + text-decoration: none; + transition-property: color, text-shadow; + transition-duration: 0.5s; +} + +div.footer a:hover { + color: #D0D0D0; + text-decoration: underline; + text-shadow: 0 0 4px rgba(240, 230, 220, 1.0); +} + +div.footer hr { + margin-left: 150px; + margin-right: 150px; + border: 0; + height: 1px; + background-image: linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); + background-image: -webkit-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); + background-image: -moz-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); + background-image: -o-linear-gradient(left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75) 25%, rgba(128, 128, 128, 0.75) 75%, rgba(128, 128, 128, 0)); +} + +div.footer i.fa { + padding-right: 3px; +} + + +/******************************* BUTTONS **********************************/ + +div.buttons { + position: fixed; + overflow: hidden; + bottom: 30px; + left: 30px; + z-index: 1; + font-size: 13px; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + border: solid 1px rgba(100, 100, 100, 1.0); + border-radius: 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + transition: box-shadow 0.3s; +} + +div.buttons:hover { + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.45); +} + +div.buttons a { + width: 30px; + height: 30px; + text-decoration: none; + white-space: nowrap; + position: relative; + float: left; + background-color: #404040; + background: linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + background: -webkit-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + background: -moz-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + background: -o-linear-gradient(top, rgba(70, 70, 70, 1.0) 15%, rgba(5, 5, 5, 1.0) 100%); + border-right: solid 1px rgba(90, 90, 90, 1.0); +} + +div.buttons a:last-child { + border-right: none; +} + +div.buttons a i.fa { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + color: white; + text-align: center; + vertical-align: middle; + line-height: 30px; + opacity: 0.3; + transition: opacity 0.3s; +} + +div.buttons a i.fa.small { + font-size: 80%; +} + +div.buttons a i.fa.big { + font-size: 120%; +} + +div.buttons a i.fa.active { + opacity: 0.75; +} + +div.buttons a:hover i.fa { + opacity: 1.0; + text-shadow: 0 0 4px rgba(240, 230, 199, 0.8); +} + + +/******************************* IMAGES ***********************************/ + +.position_marker { + position: relative; + top: -100px; +} + +div.photos { + text-align: center; + padding-bottom: 50px; +} + +div.photos div.photo { + margin-top: 60px; + margin-bottom: 80px; + display: inline-block; + text-align: left; +} + +div.photo img { + display: block; + margin-bottom: 4px; +} + +div.photo div.photo-title { + font-family: 'Open Sans', sans-serif; + text-align: center; + color: #E0E0E0; + font-size: 17px; + float: left; + display: block; + margin-top: 4px; + margin-bottom: 4px; +} + +div.photo a.exif-icon { + text-decoration: none; + float: right; + display: block; + color: #EEEEEE; + padding-right: 2px; + padding-top: 2px; + padding-bottom: 4px; + opacity: 0.3; + transition-property: opacity, text-shadow; + transition-duration: 0.3s; +} + +div.photo a.exif-icon:hover { + opacity: 1.0 !important; + text-shadow: 0 0 4px rgba(240, 230, 199, 0.8); +} + +div.photo div.photo-text { + font-family: 'Open Sans', sans-serif; + color: #B0B0B0; + font-size: 13px; + clear: both; + margin-top: 3px; + margin-bottom: 3px; +} + +div.photo div.photo-exif { + display: none; + clear: both; + margin-top: 7px; + margin-bottom: 2px; + background: #303030; +} + +/* this is nested in order to have the parent div fully expanded according + to the image width (including variable border size) */ +div.photo div.photo-exif-sub { + font-family: 'Open Sans', sans-serif; + color: #CCCCCC; + font-size: 13px; + padding-top: 4px; + padding-bottom: 4px; +} + +div.photo div.photo-exif-sub .seg { + padding-left: 10px; + padding-right: 12px; + display: inline-block; + white-space: nowrap; + line-height: 1.7; + transition: color 0.3s; +} + +div.photo div.photo-exif-sub .seg:last-child { + padding-right: 3px; +} + +div.photo div.photo-exif-sub .seg i.fa { + padding-right: 5px; +} + +div.photo div.photo-exif-sub .seg:hover { + color: #E0E0E0; +} + +div.photo div.photo-exif-sub a { + color: #D0D0D0; + text-decoration: none; + transition-property: color, text-shadow; + transition-duration: 0.5s; +} + +div.photo div.photo-exif-sub a:hover { + color: #E0E0E0; + text-decoration: underline; + text-shadow: 0 0 4px rgba(240, 230, 220, 1.0); +} + + +/*************************** IMAGE BORDER STYLES **************************/ + +div.photo img#border_single { + border: solid 1px rgb(128, 128, 128); +} + +div.photo img#border_none { +} + +div.photo img#frame_black { + background-color: #909090; + padding: 1px; + border: 20px solid black; +} + +div.photo img#frame_white { + background-color: #444444; + padding: 1px; + border: 20px solid white; +} + +div.photo img#frame_black_horiz { + background-color: #A0A0A0; + padding: 1px 0 1px 0; + border-top: 35px solid black; + border-bottom: 35px solid black; +} + +div.photo img#frame_white_horiz { + background-color: #444444; + padding: 1px 0 1px 0; + border-top: 35px solid white; + border-bottom: 35px solid white; +} + +div.photo img#frame_black_vert { + background-color: #A0A0A0; + padding: 0 1px 0 1px; + border-left: 40px solid black; + border-right: 40px solid black; +} + +div.photo img#frame_white_vert { + background-color: #444444; + padding: 0 1px 0 1px; + border-left: 40px solid white; + border-right: 40px solid white; +} + +div.photo img#border_black { + border: 15px solid black; +} + +div.photo img#border_white { + border: 15px solid white; +} + + +/******************************* SEPARATORS *******************************/ + +div.separator { + clear: both; + text-align: left; + font-variant: small-caps; + font-family: 'Open Sans', sans-serif; + font-size: 32px; + color: #EEEEEE; +/* text-shadow: rgba(240, 230, 199, 0.6) 0 0 2px; */ + margin-top: 50px; + margin-left: 20px; + margin-right: 50px; + border-bottom: 1px solid #606060; +} + +div.albums div.separator { + padding-top: 40px; + margin-left: 0; + margin-right: 10px; +} + +div.interspace { + clear: both; + text-align: left; + margin-left: 30px; + margin-right: 60px; + margin-top: 10px; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + color: #CACACA; +} + +div.albums div.interspace { + padding-bottom: 35px; + margin-left: 15px; + margin-right: 20px; +} + +div.albums div.footnote { + clear: both; + text-align: left; + padding-bottom: 35px; + padding-top: 10px; + margin-left: 15px; + margin-right: 20px; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + color: #CACACA; +} + + +/******************************* INDEX ITEMS ******************************/ + +div.albums { + text-align: left; +} + +div.index_item { + display: block; + overflow: hidden; + float: left; + margin: 20px; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + border: 1px solid #6b6c69; + background-position: 50% 50%; + background-repeat: no-repeat; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.3); + transition-property: box-shadow; + transition-duration: 0.3s; +} + +div.index_item:hover { + border: 1px solid #AAAAAA; + box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -moz-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); + -webkit-box-shadow: 0 0 10px 2px rgba(255, 245, 200, 0.6); +} + +div.index_item a { + display: block; + position: relative; + width: 495px; + height: 330px; + text-align: left; + text-decoration: none; + background: linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 63%, rgba(0, 0, 0, 0.61) 85%, rgba(0, 0, 0, 0.65) 100%); + background: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 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 a:hover { + background: linear-gradient(top, 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(top, 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(top, 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(top, 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%); +} + +div.index_item span.album_text { + font-family: 'Hind', sans-serif; + font-size: 34px; + font-weight: 700; + color: #F3F3F3; + text-shadow: 0 0 2px rgba(0, 0, 0, 1); + position: absolute; + bottom: 55px; + left: 15px; + line-height: 1.1; + padding-right: 15px; + transition-property: text-shadow, color; + transition-duration: 0.3s; +} + +div.index_item a:hover .album_text { + color: #FFFFFF; +} + +div.index_item .album_subtext { + font-family: 'Open Sans', sans-serif; + font-size: 15px; + color: #D0D0D0; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.7); + position: absolute; + top: 277px; + left: 15px; + padding-right: 15px; + line-height: 1.3; + transition-property: color; + transition-duration: 0.3s; +} + +div.index_item:hover .album_subtext { + color: #E9E9E9; +} + +div.index_item .album_note { + font-family: 'Open Sans', sans-serif; + font-size: 11px; + color: #B0B0B0; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.7); + position: absolute; + right: 12px; + bottom: 10px; +} + +div.index_item .album_protected_note { + font-family: 'Open Sans', sans-serif; + color: #c8bc00; + font-size: 80%; + position: absolute; + bottom: 7px; + left: 15px; +} + + +/****************************** PHOTOSTREAM *******************************/ + +.photostream-force-show { + visibility: visible !important; +} +.photostream-force-hide { + visibility: hidden !important; +} + +.photostream-hide { +} + +#photostream-close { + position: fixed; + z-index: 100; + top: 10px; + right: 15px; + font-size: 32px; + text-decoration: none; + color: #EEEEEE; + opacity: 0.4; + transition-property: opacity, text-shadow; + transition-duration: 0.3s; +} + +#photostream-close:hover { + text-shadow: 0 0 7px rgba(240, 230, 199, 0.8); + opacity: 1; +} + +#photostream-position-label { + position: fixed; + z-index: 101; + bottom: 15px; + right: 15px; + font-family: 'Open Sans', sans-serif; + font-weight: 600; + font-size: 12px; + text-decoration: none; + color: #EEEEEE; + opacity: 0.5; + transition-property: opacity, text-shadow; + transition-duration: 0.3s; +} + +#photostream-position-label:hover { + opacity: 1; + text-shadow: 0 0 7px rgba(240, 230, 199, 0.4); +} + diff --git a/templates/fluid/template_album.html b/templates/fluid/template_album.html new file mode 100644 index 0000000..0552074 --- /dev/null +++ b/templates/fluid/template_album.html @@ -0,0 +1,109 @@ + + + + + + $(PAGE_TITLE) + + + + + + + + + + +
+
+ + +   + + + + + + + + + + + + + + +
+
photos
+
+ +
+
+
+
+ +
+ + +
+
+ +
+ +
+
+
+ + + +   + + ISO + + + + + +
+
+
+
+ + +
+ + +
+ + + + +
+
+ + +
+ + +
+ + + + + + + +
+ + +1 / + + +
+
+
+
+ + + + diff --git a/templates/fluid/template_index.html b/templates/fluid/template_index.html new file mode 100644 index 0000000..74833dd --- /dev/null +++ b/templates/fluid/template_index.html @@ -0,0 +1,77 @@ + + + + + + $(PAGE_TITLE) + + + + + + + + +
+
+ + +   + + + + + + + + + + + + + + +
+
albums
+
+ +
+
+
+
+ +
+ + +
+
+ +
+ +
(This album is password protected) + ( items) + +
+ + +
+ + +
+ + + + +
+
+ +
+ + +
+
+
+
+ + + -- cgit v1.2.3