Merge pull request #17 from tmos/master

import miniBoard modifications in miniGal

README.md

@@ -1,16 +1,16 @@
-Minigal Nano SSE
+MiniBoardNano SSE
 ================
 
-MiniGal Nano is a very simple image gallery. It adheres to the KISS principle and is very easy to install. MiniGal Nano does not have a web admin interface: You just upload your images in the photo folder. It only requires php and GD (no database, no special libraries like PEAR or ImageMagick).
+miniBoardNano is a fork of MiniGal Nano by Sebsauvage. It just make it more graphic, with new themes and icons. Some little technicals improvements are made, but all the MiniGal Nano stuff you can find over the web should be compatible with miniBoardNano. The following text is nearly the same as the official documentation of MiniGal Nano by Sebsauvage.
 
-Minigal Nano uses a javascript Lightbox (Use left/right arrows for navigation), but it degrades gracefully if javascript is disabled.
+miniBoardNano is a very simple image gallery. It adheres to the KISS principle and is very easy to install. miniBoardNano does not have a web admin interface: You just upload your images in the photo folder. It only requires php and GD (no database, no special libraries like PEAR or ImageMagick).
+Boardigal Nano uses a javascript Lightbox (Use left/right arrows for navigation), but it degrades gracefully if javascript is disabled.
 
-This fork (Minigal Nano SSE) is based on [Thomas Rybak's](http://www.minigal.dk/minigal-nano.html) version which seems to have been abandonned in 2010.
+miniBoardNano is based on Minigal Nano SEE by [Sebsauvage](https://github.com/sebsauvage/MinigalNano), that is is based on [Thomas Rybak's](http://www.minigal.dk/minigal-nano.html) version which seems to have been abandonned in 2010.
 
-It adds a handfull of features like tumbnails cache and image/folder description.
+Its add new themes and icons, use more modern html/css, update JS libs, and wants to be more community pull-friendly for the future.
 
-
-Online demo: [http://sebsauvage.net/galerie/](http://sebsauvage.net/galerie/)
+Online demo: [http://boards.tomcanac.com/](http://boards.tomcanac.com/)
 
 Installation
 ============
@@ -52,7 +52,8 @@ If some thumbnails are wrong, you can purge this directory: Thumbnails will be a
 
 --------------------------------------------------
 
-MiniGal Nano SSE by Sébastien SAUVAGE is licensed under a Creative Commons Attribution-Share Alike.
-https://creativecommons.org/licenses/by-sa/2.5/
+* Icons in the images folder are from the nitrux pack [http://store.nitrux.in/](http://store.nitrux.in/)
 
+miniBoardNano SSE by TomCanac is **highly** based on MiniGal Nano by Sébastien SAUVAGE  and is under the same licensed : Creative Commons Attribution-Share Alike.
+https://creativecommons.org/licenses/by-sa/2.5/
 --------------------------------------------------

config.php

@@ -19,14 +19,15 @@ Please enjoy this free script!
 $thumbs_pr_page 		= "39"; //Number of thumbnails on a single page
 $gallery_width 			= "80%"; //Gallery width. Eg: "500px" or "70%"
 $backgroundcolor 		= "white"; //This provides a quick way to change your gallerys background to suit your website. Use either main colors like "black", "white", "yellow" etc. Or HEX colors, eg. "#AAAAAA"
-$templatefile 			= "darkgold2"; //Template filename (must be placed in 'templates' folder)
-$title 				= "MiniGal Nano test gallery"; // Text to be displayed in browser titlebar
+$templatefile 			= "board"; //Template filename (must be placed in 'templates' folder)
+$title 					= "MiniGal Nano"; // Text to be displayed in browser titlebar
 $author					= "John Doe";
 $folder_color 			= "black"; // Color of folder icons: blue / black / vista / purple / green / grey
 $sorting_folders		= "name"; // Sort folders by: [name][date]
 $sorting_files			= "name"; // Sort files by: [name][date][size]
 $sortdir_folders		= "ASC"; // Sort direction of folders: [ASC][DESC]
 $sortdir_files			= "ASC"; // Sort direction of files: [ASC][DESC]
+$lazyload				= 1; // 0 = pagination, 1 = display all pictures on one page.
 
 //LANGUAGE STRINGS
 $label_home 			= "Home"; //Name of home link in breadcrumb navigation
@@ -39,5 +40,5 @@ $label_loading 			= "Loading..."; //Thumbnail loading text
 //ADVANCED SETTINGS
 $thumb_size 			= 320; //Thumbnail height/width (square thumbs). Changing this will most likely require manual altering of the template file to make it look properly! 
 $label_max_length 		= 40; //Maximum chars of a folder name that will be displayed on the folder thumbnail  
-$display_exif			= 0;
+$display_exif			= 0; //Take care, even if not diplayed EXIF are still readable for visitors. May be a good idea to erase EXIF datas...
 ?>

css/mediaboxBlack.css

@@ -33,10 +33,7 @@
 	left: 50%;
 	overflow: hidden;
 	background-color: #000;
-	-webkit-border-radius: 10px;
-	-khtml-border-radius: 10px;
-	-moz-border-radius: 10px;
-	border-radius: 10px;
+	border-radius: 4px;
 	-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
 	-khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
 	-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
@@ -46,6 +43,9 @@
 	/* For IE 5.5 - 7 */
 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
 }
+#mbCenter img{
+	border-radius: 4px;
+}
 
 #mbCenter.mbLoading {
 	background: #000 url(../images/loading2.gif) no-repeat center;
@@ -66,7 +66,6 @@
 
 		/*	Inline content styling	*/
 
-	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
 	line-height: 20px;
 	font-size: 12px;
 	color: #fff;
@@ -79,13 +78,10 @@
 		/*	Title, Caption and Button styling	*/
 
 #mbBottom {
-	min-height: 20px;
-	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
-	line-height: 20px;
-	font-size: 12px;
 	color: #999;
 	text-align: left;
 	padding: 0 10px 10px;
+	font-size: 1.5rem;
 }
 
 #mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink {
@@ -154,10 +150,7 @@
 	border: 10px solid #700;
 	padding: 10px 10px 10px;
 	margin: 20px;
-	-webkit-border-radius: 5px;
-	-khtml-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
+	border-radius: 4px;
 }
 
 #mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {

css/mediaboxWhite.css

@@ -33,10 +33,7 @@
 	left: 50%;
 	overflow: hidden;
 	background-color: #fff;
-	-webkit-border-radius: 10px;
-	-khtml-border-radius: 10px;
-	-moz-border-radius: 10px;
-	border-radius: 10px;
+	border-radius: 4px;
 	-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
 	-khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
 	-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
@@ -46,6 +43,9 @@
 	/* For IE 5.5 - 7 */
 	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
 }
+#mbCenter img{
+	border-radius: 4px;
+}
 
 #mbCenter.mbLoading {
 	background: #fff url(../images/WhiteLoading.gif) no-repeat center;
@@ -66,26 +66,22 @@
 
 		/*	Inline content styling	*/
 
-	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
 	line-height: 20px;
 	font-size: 12px;
 	color: #333;
 	text-align: left;
 	background-position: center center;
 	background-repeat: no-repeat;
-	padding: 10px;
+	padding: 5px;
 }
 
 		/*	Title, Caption and Button styling	*/
 
 #mbBottom {
-	min-height: 20px;
-	font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
-	line-height: 20px;
-	font-size: 12px;
 	color: #000;
 	text-align: left;
 	padding: 0 10px 10px;
+	font-size: 1.5rem;
 }
 
 #mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink {
@@ -154,10 +150,7 @@
 	border: 10px solid #700;
 	padding: 10px 10px 10px;
 	margin: 20px;
-	-webkit-border-radius: 5px;
-	-khtml-border-radius: 5px;
-	-moz-border-radius: 5px;
-	border-radius: 5px;
+	border-radius: 4px;
 }
 
 #mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {

humans.txt

@@ -0,0 +1,8 @@
+According to the commits, here are the humans behind MiniGal Nano :
+Thomas Rybak <http://www.minigal.dk/minigal-nano.html>
+Sébastien Sauvage <http://sebsauvage.net/>
+Aldarone <http://aldarone.fr/>
+
+And miniBoardNano :
+Tom Canac <http://tomcanac.com/>
+Sylvhem <http://lepubdelobservateur.fr/>

index.php

@@ -103,14 +103,14 @@ function readEXIF($file) {
 		$emodel = $exif_idf0['Model'];
 
 		$efocal = $exif_idf0['FocalLength'];
-        list($x,$y) = split('/', $efocal);
+		list($x,$y) = preg_split('/', $efocal);
 		$efocal = round($x/$y,0);
 	   
 		$exif_exif = exif_read_data ($file,'EXIF' ,0 );
 		$eexposuretime = $exif_exif['ExposureTime'];
 	   
 		$efnumber = $exif_exif['FNumber'];
-        list($x,$y) = split('/', $efnumber);
+		list($x,$y) = preg_split('/', $efnumber);
 		$efnumber = round($x/$y,0);
 
 		$eiso = $exif_exif['ISOSpeedRatings'];
@@ -231,12 +231,19 @@ if (file_exists($currentdir ."/captions.txt"))
 
 						$img_captions[$file] = $file;
 						if (is_file($currentdir.'/'.$file.'.html')) { $img_captions[$file] = $file.'::'.htmlspecialchars(file_get_contents($currentdir.'/'.$file.'.html'),ENT_QUOTES); }
-
+						if ($lazyload) {
 							$files[] = array (
 			  				"name" => $file,
 							"date" => filemtime($currentdir . "/" . $file),
 							"size" => filesize($currentdir . "/" . $file),
-				  			"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><span></span><img src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&amp;size=$thumb_size' alt='$label_loading' /></a></li>");
+				  			"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><img class=\"b-lazy\" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&amp;size=$thumb_size' alt='$label_loading' /></a></li>");
+						} else {
+							$files[] = array (
+			  				"name" => $file,
+							"date" => filemtime($currentdir . "/" . $file),
+							"size" => filesize($currentdir . "/" . $file),
+				  			"html" => "<li><a href='" . $currentdir . "/" . $file . "' rel='lightbox[billeder]' title=\"".htmlentities($img_captions[$file])."\"><img  src='" . GALLERY_ROOT . "createthumb.php?filename=" . $thumbdir . "/" . $file . "&amp;size=$thumb_size' alt='$label_loading' /></a></li>");
+						}
 		  			}
 					// Other filetypes
 					$extension = "";
@@ -298,7 +305,7 @@ if (sizeof($files) > 0)
 	$offset_end = $offset_start + $thumbs_pr_page;
 	if ($offset_end > sizeof($dirs) + sizeof($files)) $offset_end = sizeof($dirs) + sizeof($files);
 
-	if ($_GET["page"] == "all")
+	if ($_GET["page"] == "all" || $lazyload)
 	{
 		$offset_start = 0;
 		$offset_end = sizeof($dirs) + sizeof($files);
@@ -307,7 +314,7 @@ if (sizeof($files) > 0)
 //-----------------------
 // PAGE NAVIGATION
 //-----------------------
-if (sizeof($dirs) + sizeof($files) > $thumbs_pr_page)
+if (!$lazyload && sizeof($dirs) + sizeof($files) > $thumbs_pr_page)
 {
 	$page_navigation .= "$label_page ";
 	for ($i=1; $i <= ceil((sizeof($files) + sizeof($dirs)) / $thumbs_pr_page); $i++)
@@ -397,7 +404,7 @@ $comment_filepath = $currentdir . $file . "/comment.html";
 if (file_exists($comment_filepath))
 {
 	$fd = fopen($comment_filepath, "r");
-    $comment = utf8_encode(fread($fd,filesize ($comment_filepath))); // utf8_encode to convert from iso-8859 to UTF-8
+	$comment = fread($fd,filesize ($comment_filepath));
 	fclose($fd);
 }
 //PROCESS TEMPLATE FILE

js/lazy.js

@@ -0,0 +1,6 @@
+/*!
+  [be]Lazy.js - v1.1.3 - 2014.01.21
+  A lazy loading and multi-serving image script
+  (c) Bjoern Klinggaard - @bklinggaard - http://dinbror.dk/blazy
+*/
+var Blazy=function(c,h){function g(b){if(!h.querySelectorAll){var d=h.createStyleSheet();h.querySelectorAll=function(b,a,c,e,g){g=h.all;a=[];b=b.replace(/\[for\b/gi,"[htmlFor").split(",");for(c=b.length;c--;){d.addRule(b[c],"k:v");for(e=g.length;e--;)g[e].currentStyle.k&&a.push(g[e]);d.removeRule(0)}return a}}a=b||{};a.src=a.src||"data-src";a.multi=a.multi||!1;a.error=a.error||!1;a.offset=a.offset||100;a.success=a.success||!1;a.selector=a.selector||".b-lazy";a.separator=a.separator||"|";a.container=a.container?h.querySelectorAll(a.container):!1;a.errorClass=a.errorClass||"b-error";a.successClass=a.successClass||"b-loaded";q=a.src;u=1<c.devicePixelRatio;e=v(w,20);r=v(x,50);x();l(a.multi,function(b){if(b.width>=c.screen.width)return q=b.src,!1});y()}function w(){for(var b=0;b<k;b++){var d=m[b],t=-1!==(" "+d.className+" ").indexOf(" "+a.successClass+" "),f=d.getBoundingClientRect(),c=z+a.offset;if(0<=f.left&&f.right<=A+a.offset&&(0<=f.top&&f.top<=c||f.bottom<=c&&f.bottom>=0-a.offset)||t)t||B(d),m.splice(b,1),k--,b--}0===k&&g.prototype.destroy()}function B(b){if(0<b.offsetWidth&&0<b.offsetHeight){var d=b.getAttribute(q)||b.getAttribute(a.src);if(d){var d=d.split(a.separator),c=d[u&&1<d.length?1:0],d=new Image;l(a.multi,function(a){b.removeAttribute(a.src)});b.removeAttribute(a.src);d.onerror=function(){a.error&&a.error(b,"invalid");b.className=b.className+" "+a.errorClass};d.onload=function(){"img"===b.nodeName.toLowerCase()?b.src=c:b.setAttribute("style",'background-image: url("'+c+'");');b.className=b.className+" "+a.successClass;a.success&&a.success(b)};d.src=c}else a.error&&a.error(b,"missing"),b.className=b.className+" "+a.errorClass}}function C(b){b=h.querySelectorAll(b);for(var a=k=b.length;a--;m.unshift(b[a]));}function x(){var b=h.documentElement;z=c.innerHeight||b.clientHeight;A=c.innerWidth||b.clientWidth}function y(){C(a.selector);s&&(s=!1,a.container&&l(a.container,function(b){n(b,"scroll",e)}),n(c,"scroll",e),n(c,"resize",e),n(c,"resize",r));w()}function n(b,a,c){b.attachEvent?b.attachEvent&&b.attachEvent("on"+a,c):b.addEventListener(a,c,!1)}function p(b,a,c){b.detachEvent?b.detachEvent&&b.detachEvent("on"+a,c):b.removeEventListener(a,c,!1)}function l(b,a){if(b&&a)for(var c=b.length,f=0;f<c&&!1!==a(b[f],f);f++);}function v(a,c){var e=0;return function(){var f=+new Date;f-e<c||(e=f,a.apply(this,arguments))}}var q,a,A,z,u,s=!0,k=0,m=[],e,r;g.prototype.revalidate=function(){y()};g.prototype.load=function(b){-1===(" "+b.className+" ").indexOf(" "+a.successClass+" ")&&B(b)};g.prototype.destroy=function(){a.container&&l(a.container,function(a){p(a,"scroll",e)});p(c,"scroll",e);p(c,"resize",e);p(c,"resize",r);k=0;m.length=0;s=!0};return g}(window,document);

js/mediabox1.3.4.js

@@ -5,8 +5,11 @@
 	based on Slimbox v1.64 - The ultimate lightweight Lightbox clone
 		(c) 2007-2008 Christophe Beyls <http://www.digitalia.be>
 	MIT-style license.
-*/
 
+	MiniBoardNano modifications :
+	Tom Canac <http://tomcanac.com/>
+	Uncomment lines 208 and 866 to desactivate the rigth click (take care... it's a pain in the ass for the end-usernd don't protect you at all ! (maj+rigth click make it useless))
+*/
 var Mediabox;
 
 (function() {
@@ -205,7 +208,7 @@ var Mediabox;
 			var links = this;
 
 			links.addEvent('contextmenu', function(e){
-				if (this.toString().match(/\.gif|\.jpg|\.jpeg|\.png/i)) e.stop();
+				/*if (this.toString().match(/\.gif|\.jpg|\.jpeg|\.png/i)) e.stop();*/
 			});
 
 			links.removeEvents("click").addEvent("click", function() {
@@ -861,7 +864,7 @@ var Mediabox;
 					preload.width = mediaWidth;
 				}
 				if (Browser.Engine.trident) preload = document.id(preload);
-				preload.addEvent('mousedown', function(e){ e.stop(); }).addEvent('contextmenu', function(e){ e.stop(); });
+				/*preload.addEvent('mousedown', function(e){ e.stop(); }).addEvent('contextmenu', function(e){ e.stop(); });*/
 				image.setStyles({backgroundImage: "none", display: ""});
 				preload.inject(image);
 			}

js/script.js

@@ -0,0 +1,4 @@
+/*=== lazyLoading ===*/
+window.addEventListener('load', function(){
+	var bLazy = new Blazy;
+}, false);

system_check.php

@@ -1,14 +1,12 @@
 <?php
 	ini_set("memory_limit","256M");
-
 	$exif = "No";
 	$gd = "No";
 	if (function_exists('exif_read_data')) $exif = "Yes";
 	if (extension_loaded('gd') && function_exists('gd_info')) $gd = "Yes";
-
 ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<meta name="robots" content="noindex, nofollow">
@@ -63,8 +61,9 @@ div {
 			padding: 2px;
 		}	
 	</style>
+</head>
 <body>
-<h1>MiniGal Nano system check</h1>
+	<h1>MiniBoardNano system check</h1>
 	<div class="left">
 		PHP Version
 	</div>
@@ -108,8 +107,10 @@ div {
 		Memory is needed to create thumbnails. Bigger images uses more memory	
 	</div>
 
-<br /><br />
-<a href="http://www.minigal.dk/minigal-nano.html" target="_blank">Support website</a>
-| <a href="http://www.minigal.dk/forum" target="_blank">Support forum</a>
+	<footer role="contentinfo">
+		<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
+				Made with miniGal by sebsauvage.
+			</a>
+	</footer>
 </body>
 </html>

templates/board.html

@@ -0,0 +1,203 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="author" content="<% author %>" />
+		<meta name="generator" content="MinigalNano <% version %>" />
+		<title><% title %></title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
+		
+		<script src="<% gallery_root %>js/lazy.js"></script>
+		<script src="<% gallery_root %>js/script.js"></script>
+		<script src="<% gallery_root %>js/mootools.js"></script>
+		<script src="<% gallery_root %>js/mediabox1.3.4.js"></script>
+
+		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxWhite.css" type="text/css" media="screen" />
+		<style type="text/css">
+			html{
+				font-size: 62.5%;
+			}
+			body {
+				margin: 0;
+				padding: 0;
+				width: 100%;
+				font-size: 1.5rem;
+				font-family:Helvetica, Arial, sans-serif;
+				background: #E7E6E0;
+				color: #333333;
+			}
+			a {
+				color: #333333;
+				font-weight: bold;
+				text-decoration: none;
+			}
+			h1 {
+				margin: 20px 0 0 0;
+				font-family: Georgia, Lucida, serif;
+				font-style: italic;
+			}
+			h1 a{
+				color: #CC2027;	
+			}
+			body > header{
+				background-color:#FFF;
+				padding: 1px 0 0 0;
+				margin-bottom: 1rem;
+			}
+			#container, #innerheader{
+				max-width: <% gallery_width %>;
+				margin: 0px auto;
+			}
+			header aside{
+				padding: 2rem 0;
+			}
+			img {
+				border: none;
+			}
+			nav {
+				font-size: 1.3em;
+				padding-top: 2rem;
+			}
+			body > nav {
+				text-align: center;
+			}
+			#folder_comment
+			{
+				margin-bottom:10px;
+			}
+			#folder_comment a {
+				color: #FFCC11;
+				text-decoration: none;
+			}
+			#backtop,
+			#backtop:hover,
+			#backtop:active,
+			.b-lazy {
+				-webkit-transition:all .2s ease-in;
+				-ms-transition:all .2s ease-in;
+				-o-transition:all .2s ease-in;
+				transition:all .2s ease-in;
+			}
+			#gallery {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+			}
+			#gallery li, #gallery li img {
+				border-radius: 4px;
+			}
+			#gallery li {
+				float: left;
+				position: relative;
+				overflow:hidden;
+				margin: .5%;
+				-webkit-box-shadow:  0px 0px 2px -1px #000;
+				box-shadow:  0px 0px 2px -1px #000;
+			}
+			#gallery li img{
+				width: 100%;
+			}	
+			#gallery em {
+				background: #FFF;
+				text-align: center;
+				font-style: normal;
+				padding: 8px 0px;
+				display: block;
+				position: absolute;
+				bottom:0px;
+				width: 100%;
+			}
+			footer {
+				clear:both;
+				padding-top: 2rem;
+				margin: 25px 0px;
+				text-align: center;
+			}
+			footer a {
+				text-decoration: none;
+				color: #666;
+			}
+			/*----Back to top button---*/
+			#backtop {
+				display: block;
+				position: fixed;
+				bottom: 0;
+				right: 0;
+				padding: 1rem 4rem;
+				background-color: #CC2027;
+				color: #FFF;
+				margin: .5%;
+				border-radius: 4px;
+				-webkit-box-shadow:  0px 0px 2px -1px #000;
+				box-shadow:  0px 0px 2px -1px #000;
+			}
+			/*----lazyloading---*/
+			.loader{
+				background: url('images/loader.gif') center center no-repeat;
+			}
+			.b-lazy {
+				opacity: 0;
+			}
+			.b-lazy.b-loaded {
+				opacity: 1;
+			}
+			/*----responsive----*/
+			#gallery li {
+				width: 24%;
+				height: 0;
+				padding-bottom: 24%;
+			}
+			@media (max-width: 1000px) {
+				#gallery li {
+					width: 32%;
+					padding-bottom: 32%;
+				}
+			}
+			@media (max-width: 800px) {
+				#gallery li {
+					width: 48%;
+					padding-bottom: 48%;
+				}
+			}
+			@media (max-width: 450px) {
+				#gallery li {
+					width: 100%;
+					padding-bottom: 100%;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<header  role="banner">
+			<div id="innerheader">
+				<h1><a href="<% gallery_root %>"><% title %></a></h1>
+				<% messages %>
+				<nav role="navigation"><% breadcrumb_navigation %></nav>
+				<aside><% folder_comment %></aside>
+			</div>
+		</header>
+		
+		<main id="container">
+			<ul id="gallery">
+				<% thumbnails %>
+			</ul>
+		</main>
+
+		<nav class="clear" role="navigation"><% page_navigation %></nav>
+		<a href="#top" id="backtop">top</a>
+		<footer role="contentinfo">
+			Gallery by <% author %> /
+			<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
+				Powered by MiniGal Nano <% version %>
+			</a> /
+			<a href="http://tomcanac.com/minigal/" title="Tom Canac" target="_blank">
+				Board theme by Tom Canac
+			</a> /
+			<a  title="<% title %> RSS" href="rss/" />
+				RSS
+			<a>
+		</footer>
+	</body>
+</html>

templates/darkgold2.html

@@ -1,12 +1,16 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html>
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta charset="UTF-8">
+	<meta name="author" content="<% author %>" />
+	<meta name="generator" content="MinigalNano SSE <% version %>" />
 	<title><% title %></title>
-	<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvBlack21.css" type="text/css" media="screen" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>	
 	<script src="<% gallery_root %>js/mootools.js" type="text/javascript"></script>
 	<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js" type="text/javascript"></script>
+	<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvBlack21.css" type="text/css" media="screen" />
+
 	<style type="text/css">
 		body {
 			margin: 0 auto;
@@ -35,6 +39,9 @@ h1 {
 			font-style: normal;
 			font-style: normal;
 		}
+		.backlink {
+			text-align: center;
+		}
 		.backlink a {
 			font-size: 10px;
 			text-decoration: none;
@@ -181,22 +188,22 @@ a {
 	</style>
 </head>
 <body>
+	<header role="banner">
 		<h1><% title %></h1>
 		<% messages %>
-<p class="credits"><!--em>by: </em><% author %--></p>
-<span id="breadcrumb_nav"><% breadcrumb_navigation %></span>
-<br /><br />
-<div id="container">
-<div id="folder_comment"><% folder_comment %></div>
+		<p class="credits"><em>by: </em><% author %></p>
+		<nav id="breadcrumb_nav" role="navigation"><% breadcrumb_navigation %></nav>
+	</header>
+	<section id="container">
+		<p id="folder_comment"><% folder_comment %></p>
 		<ul class="gallery">
 			<% thumbnails %>
 		</ul>
-</div>
+	</section>
 	<br />
-<div id="page_nav"><% page_navigation %></div>
+	<nav id="page_nav" role="navigation"><% page_navigation %></nav>
 	<br />
 	<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
-<div class="backlink" align="center"><a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by MiniGal Nano <% version %></a></div>
-<br /><br />
+	<footer class="backlink" role="contentinfo"><a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by MiniGal Nano <% version %></a></footer>
 </body>
 </html>

templates/darkgold3.html

@@ -0,0 +1,219 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="author" content="<% author %>" />
+		<meta name="generator" content="MinigalNano <% version %>" />
+		<title><% title %></title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
+		
+		<script src="<% gallery_root %>js/lazy.js"></script>
+		<script src="<% gallery_root %>js/script.js"></script>
+		<script src="<% gallery_root %>js/mootools.js"></script>
+		<script src="<% gallery_root %>js/mediabox1.3.4.js"></script>
+
+		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxWhite.css" type="text/css" media="screen" />
+		<style type="text/css">
+		body {
+			margin: 0 auto;
+			padding: 0;
+			width: <% gallery_width %>;
+			font: 12px Tahoma,Verdana,Arial,Helvetica, sans-serif;
+			background: #272727;
+			color: #BDBDBD;
+		}
+		h1 {
+			font: normal 250%/100% "Trebuchet MS",Tahoma,Verdana,Arial,Helvetica, sans-serif;
+			margin: 20px 0 5px 0;
+			letter-spacing: -1px;
+			color: #FFCC11;	
+			text-shadow: #000000 2px 2px 2px;
+		}
+		.credits {
+			border-bottom: solid 1px #434343;
+			padding-bottom: 5px;
+			margin-bottom: 5px;
+			color: #CF8D26;
+			font: 100% "Trebuchet MS",Tahoma,Verdana,Arial,Helvetica, sans-serif;
+		}
+		.credits em {
+			color: #BDBDBD;
+			font-style: normal;
+			font-style: normal;
+		}
+		footer {
+			text-align: center;
+		}
+		footer a {
+			font-size: 10px;
+			text-decoration: none;
+			color: #666;
+		}
+		footer a:hover,
+		footer a:visited:hover {
+			color: #888;
+		}
+		img {
+			border: none;
+		}
+		#page_nav {
+			color: #BDBDBD;
+			clear:both;
+			text-align: center;
+		}
+		#page_nav a:link, #page_nav a:visited, #page_nav a:hover, #page_nav a:visited:hover {
+			text-decoration: none;
+			color: #FFCC11;
+		}
+		#breadcrumb_nav {
+			color: #BDBDBD;
+			font-weight: bold;
+		}
+		#breadcrumb_nav a:link, #breadcrumb_nav a:visited, #breadcrumb_nav a:hover, #breadcrumb_nav a:visited:hover {
+			text-decoration: none;
+			color: #FFCC11;
+		}
+		a {
+			color: #FFCC11;
+		}
+		#container {
+			overflow: auto;
+			width: 100%
+		}
+		.hidden {
+			visibility: hidden;
+			position:absolute;
+			top:0;
+			left:0;
+			display:inline;
+		}
+		#topbar {
+			border-bottom-color: #afafaf;
+			border-style: none;
+			color: black;
+			position: absolute;
+			left: 0;
+			top: 0;
+			margin: 0;
+			padding-top: 5px;
+			float: none;
+			width: 100%;
+			height: 25px;
+			text-align: center;
+			background-color: #FFFF99;
+			border-bottom: 1px solid;
+		}
+		#topbar a:link, #topbar a:visited, #topbar a:hover, #topbar a:visited:hover {
+			text-decoration: underline;
+			color: #000;
+		}
+		#topbar img{
+			position: absolute;
+			right: 6;
+			top: 6;
+			vertical-align: middle;
+		}
+
+		#folder_comment
+		{
+			margin-bottom:10px;
+		}
+
+		#folder_comment a {
+		color: #FFCC11;
+		text-decoration: none;
+
+		}
+		/* ---------- gallery styles start here ----------------------- */
+		.gallery {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+		.gallery li {
+			
+			margin: 1px;
+			float: left;
+			position: relative;
+			width: 33%;
+			height: 240px;
+			overflow:hidden;
+		}
+		.gallery li:hover img {
+			background: #ddd;
+			filter: alpha(opacity=70);
+			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
+			-moz-opacity: 0.70;
+			opacity:0.7;
+		}
+		.gallery img {
+			background: #000;
+			color: #666;
+		}
+		.gallery em {
+			background: #000;
+			color: #FFCC11;
+			font-family: "Trebuchet MS",Tahoma,Verdana,Arial,Helvetica, sans-serif;
+			font-style: normal;
+			font-weight: bold;
+			font-size: 14px;
+			padding: 8px 2px;
+			display: block;
+			position: absolute;
+			/* top: 90px; */
+			bottom:20px;
+			left: 0px;
+			width: 320px;
+			/* height: 40px; */
+			filter: alpha(opacity=60);
+			filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
+			-moz-opacity: 0.60;
+			opacity:0.6;
+		}
+		.gallery em-pdf {
+			color: #666;
+			font-style: normal;
+			font-size: 10px;
+			padding: 3px 7px;
+			display: block;
+			position: absolute;
+			top: 100px;
+			left: 0px;
+		}
+		.gallery a {
+			text-decoration: none;
+		}
+		.gallery a:hover em {
+			background: grey;
+			color: black;
+		}
+	</style>
+</head>
+<body>
+	<header role="banner">
+		<h1><% title %></h1>
+		<% messages %>
+		<p class="credits"><em>by: </em><% author %></p>
+		<nav id="breadcrumb_nav" role="navigation"><% breadcrumb_navigation %></nav>
+	</header>
+	<section id="container">
+		<p id="folder_comment"><% folder_comment %></p>
+		<ul class="gallery">
+			<% thumbnails %>
+		</ul>
+	</section>
+	<br />
+	<nav id="page_nav" role="navigation"><% page_navigation %></nav>
+	<br />
+	<footer role="contentinfo">
+		Gallery by <% author %>.
+		<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
+			Powered by MiniGal Nano <% version %>
+		</a> |
+		<a  title="<% title %> RSS" href="rss/" />
+			RSS
+		<a>
+	</footer>
+</body>
+</html>

templates/darksideboard.html

@@ -0,0 +1,205 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="author" content="<% author %>" />
+		<meta name="generator" content="MinigalNano <% version %>" />
+		<title><% title %></title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
+		
+		<script src="<% gallery_root %>js/lazy.js"></script>
+		<script src="<% gallery_root %>js/script.js"></script>
+		<script src="<% gallery_root %>js/mootools.js"></script>
+		<script src="<% gallery_root %>js/mediabox1.3.4.js"></script>
+
+		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxWhite.css" type="text/css" media="screen" />
+		<style type="text/css">
+			html{
+				font-size: 62.5%;
+			}
+			body {
+				margin: 0;
+				padding: 0;
+				width: 100%;
+				font-size: 1.5rem;
+				font-family:Helvetica, Arial, sans-serif;
+				background: #222;
+				color: #F1F1F1;
+			}
+			a {
+				color: #222;
+				font-weight: bold;
+				text-decoration: none;
+			}
+			h1 {
+				margin: 20px 0 0 0;
+				font-family: Georgia, Lucida, serif;
+				font-style: italic;
+			}
+			header a {
+				color: #F1F1F1
+			}
+			h1 a{
+				color: #CC2027;	
+			}
+			body > header{
+				background-color:#111;
+				padding: 1px 0 0 0;
+				margin-bottom: 1rem;
+			}
+
+			#container, #innerheader{
+				max-width: <% gallery_width %>;
+				margin: 0px auto;
+			}
+			header aside{
+				padding: 2rem 0;
+			}
+			img {
+				border: none;
+			}
+			nav {
+				font-size: 1.3em;
+				padding-top: 2rem;
+			}
+			body > nav {
+				text-align: center;
+			}
+			#folder_comment
+			{
+				margin-bottom:10px;
+			}
+			#folder_comment a {
+				color: #FFCC11;
+				text-decoration: none;
+			}
+			#backtop,
+			#backtop:hover,
+			#backtop:active,
+			.b-lazy {
+				-webkit-transition:all .2s ease-in;
+				-ms-transition:all .2s ease-in;
+				-o-transition:all .2s ease-in;
+				transition:all .2s ease-in;
+			}
+			#gallery {
+				list-style: none;
+				margin: 0;
+				padding: 0;
+			}
+			#gallery li, #gallery li img {
+				border-radius: 4px;
+			}
+			#gallery li {
+				float: left;
+				position: relative;
+				overflow:hidden;
+				margin: .5%;
+			}
+			#gallery li img{
+				width: 100%;
+			}	
+			#gallery em {
+				background: #FFF;
+				text-align: center;
+				font-style: normal;
+				padding: 8px 0px;
+				display: block;
+				position: absolute;
+				bottom:0px;
+				width: 100%;
+			}
+			footer {
+				clear:both;
+				padding-top: 2rem;
+				margin: 25px 0px;
+				text-align: center;
+			}
+			footer a {
+				text-decoration: none;
+				color: #AAA;
+			}
+			/*----Back to top button---*/
+			#backtop {
+				display: block;
+				position: fixed;
+				bottom: 0;
+				right: 0;
+				padding: 1rem 4rem;
+				background-color: #CC2027;
+				color: #FFF;
+				margin: .5%;
+				border-radius: 4px;
+				-webkit-box-shadow:  0px 0px 2px -1px #000;
+				box-shadow:  0px 0px 2px -1px #000;
+			}
+			/*----lazyloading---*/
+			.loader{
+				background: url('images/loader.gif') center center no-repeat;
+			}
+			.b-lazy {
+				opacity: 0;
+			}
+			.b-lazy.b-loaded {
+				opacity: 1;
+			}
+			/*----responsive----*/
+			#gallery li {
+				width: 24%;
+				height: 0;
+				padding-bottom: 24%;
+			}
+			@media (max-width: 1000px) {
+				#gallery li {
+					width: 32%;
+					padding-bottom: 32%;
+				}
+			}
+			@media (max-width: 800px) {
+				#gallery li {
+					width: 48%;
+					padding-bottom: 48%;
+				}
+			}
+			@media (max-width: 450px) {
+				#gallery li {
+					width: 100%;
+					padding-bottom: 100%;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<header  role="banner">
+			<div id="innerheader">
+				<h1><a href="<% gallery_root %>"><% title %></a></h1>
+				<% messages %>
+				<nav role="navigation"><% breadcrumb_navigation %></nav>
+				<aside><% folder_comment %></aside>
+			</div>
+		</header>
+		
+		<main id="container">
+			<ul id="gallery">
+				<% thumbnails %>
+			</ul>
+		</main>
+
+		<nav class="clear" role="navigation"><% page_navigation %></nav>
+		<a href="#top" id="backtop">top</a>
+		<footer role="contentinfo">
+			Gallery by <% author %> /
+			<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
+				Powered by MiniGal Nano <% version %>
+			</a> /
+			<a href="http://tomcanac.com/minigal/" title="Tom Canac" target="_blank">
+				Board theme by Tom Canac
+			</a> /
+			<a  title="<% title %> RSS" href="rss/" />
+				RSS
+			<a>
+		</footer>
+	</body>
+</html>

templates/exhibition.html

@@ -1,10 +1,11 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!DOCTYPE html>
+<html>
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta charset="UTF-8" />
+<meta name="author" content="<% author %>" />
+<meta name="generator" content="MinigalNano SSE <% version %>" />
 <title><% title %></title>
 	<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
-	<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
 	<script src="<% gallery_root %>js/mootools.js" type="text/javascript"></script>
 	<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js" type="text/javascript"></script>
 <style type="text/css">
@@ -26,8 +27,12 @@ h1 {
 	margin: 0 0 30px 0;
 	font: 120% Georgia, Lucida Sans Unicode, Garamond, Georgia, serif;
 }
-.credits em {
+.credits span {
 	color: #999;
+	font-style: italic;
+}
+.backlink {
+	font-style: italic;
 }
 .backlink a {
 	font-size: 10px;
@@ -165,22 +170,20 @@ a {
 </style>
 </head>
 <body>
+<header role="banner">
 <h1><% title %></h1>
 <% messages %>
-<p class="credits"><em>by: </em><% author %></p>
-<span id="breadcrumb_nav"><% breadcrumb_navigation %></span>
-<br /><br />
-<div id="container">
-<div id="folder_comment"><% folder_comment %></div>
+<p class="credits"><span>by:</span> <% author %></p>
+<nav id="breadcrumb_nav" role="navigation"><% breadcrumb_navigation %></nav>
+</header>
+<section id="container">
+<p id="folder_comment"><% folder_comment %></p>
 <ul class="gallery">
 <% thumbnails %>
 </ul>
-</div>
-<br />
-<div id="page_nav"><% page_navigation %></div>
-<br />
+</section>
+<nav id="page_nav" role="navigation"><% page_navigation %></nav>
 <!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
-<div class="backlink" align="center"><a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by MiniGal Nano <% version %></a></div>
-<br /><br />
+<footer class="backlink" role="navigation"><a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by MiniGal Nano <% version %></a></footer>
 </body>
 </html>

templates/integrate.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title><% title %></title>
-	<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvBlack21.css" type="text/css" media="screen" />
-	<script src="<% gallery_root %>js/mootools.js" type="text/javascript"></script>
-	<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js" type="text/javascript"></script>
-<style type="text/css">
-body {
-	margin: 0 auto;
-	padding: 0;
-	width: <% gallery_width %>;
-	font: 14px Georgia, "Times New Roman", Times, serif;
-}
-h1 {
-	font: normal 320%/100% Georgia, "Times New Roman", Times, serif;
-	margin: 20px 0 5px 0;
-	letter-spacing: -2px;
-}
-.credits {
-	border-bottom: solid 1px #ccc;
-	padding-bottom: 5px;
-	margin: 0 0 30px 0;
-	font: 120% Garamond, Georgia, serif;
-}
-.credits em {
-	color: #999;
-}
-.backlink a {
-	font-size: 10px;
-	text-decoration: none;
-	color: #AAA;
-}
-.backlink a:hover,
-.backlink a:visited:hover {
-	color: #000;
-}
-img {
-	border: none;
-}
-#page_nav {
-	color: #999;
-	clear:both;
-	text-align: center;
-}
-#page_nav a:link, #page_nav a:visited, #page_nav a:hover, #page_nav a:visited:hover {
-	text-decoration: none;
-	color: #222;
-}
-#breadcrumb_nav {
-	color: #999;
-}
-#breadcrumb_nav a:link, #breadcrumb_nav a:visited, #breadcrumb_nav a:hover, #breadcrumb_nav a:visited:hover {
-	text-decoration: none;
-	color: #222;
-}
-a {
-	color: black;	
-}
-#container {
-	overflow: auto;
-	width: 100%
-}
-.hidden {
-	visibility: hidden;
-	position:absolute;
-	top:0;
-	left:0;
-	display:inline;
-}
-
-#folder_comment
-{
- margin-top:10px;
- margin-left:10px;
-}
-
-/* ---------- gallery styles start here ----------------------- */
-.gallery {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-.gallery li {
-	padding: 10px;
-	margin: 0;
-	float: left;
-	position: relative;
-	width: 130px;
-	height: 130px;
-}
-.gallery li:hover img {
-	border-color: #000;
-	background: #ddd;
-}
-.gallery img {
-	background: #fff;
-	border: solid 1px #888;
-	padding: 5px;
-}
-.gallery em {
-	background: #fff url(images/grey-gradient.gif) repeat-y;
-	color: #000;
-	font-style: normal;
-	padding: 2px 10px;
-	display: block;
-	position: absolute;
-	top: 110px;
-	left: 9px;
-	border: 1px solid #999;
-	border-left-color: #888;
-}
-.gallery a {
-	text-decoration: none;
-}
-.gallery a:hover em {
-	background: #ffdb01 url(images/orange-gradient.gif) repeat-y;
-	border-color: #c25b08;
-}
-.newversion {
-	position: absolute;
-	right: 0;
-	top: 0;
-	margin: 0;
-	padding: 0;
-	border: none;
-	float: none;
-}
-.newversion a img {
-	background-color: transparent;
-	color: white;
-	border: none;
-	text-decoration: none;
-}
-</style>
-</head>
-
-<body>
-<h1><em><% title %></em></h1>
-<p class="credits"><em>by:</em> <% author %></p>
-<span id="breadcrumb_nav"><% breadcrumb_navigation %></span>
-<div id="container">
-<div id="folder_comment"><% folder_comment %></div>
-<ul class="gallery">
-<% thumbnails %>
-</ul>
-</div>
-<br />
-<div id="page_nav"><% page_navigation %></div>
-<br />
-<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
-<div class="backlink" align="center"><a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by MiniGal Nano <% version %></a></div>
-<br /><br />
-</body>
-</html>

templates/mano.html

@@ -1,174 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title><% title %></title>
-	<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvBlack21.css" type="text/css" media="screen" />
-	<script src="<% gallery_root %>js/mootools.js" type="text/javascript"></script>
-	<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js" type="text/javascript"></script>
-<style type="text/css">
-body {
-	margin: 0 auto;
-	padding: 0;
-	width: <% gallery_width %>;
-	font: 12px geneva, century gothic, Georgia, "Times New Roman", Times, serif;
-	background: <% bgcolor %>;
-}
-h1 {
-	font: italic 320%/100% Georgia, "Times New Roman", Times, serif;
-	margin: 20px 0 5px 0;
-	letter-spacing: -2px;
-}
-.credits {
-	border-bottom: solid 1px #ccc;
-	padding-bottom: 5px;
-	margin: 0 0 30px 0;
-	font: 120% Garamond, Georgia, serif;
-}
-.credits em {
-	color: #999;
-}
-#bottom {
-	color: #FFF;
-	border: 0;
-	border-top: solid 1px #ccc;
-}
-.backlink a {
-	font-size: 10px;
-	text-decoration: none;
-	color: #AAA;
-}
-.backlink a:hover,
-.backlink a:visited:hover {
-	color: #000;
-}
-img {
-	border: none;
-}
-#page_nav {
-	color: #999;
-	clear:both;
-	text-align: center;
-}
-#page_nav a:link, #page_nav a:visited, #page_nav a:hover, #page_nav a:visited:hover {
-	text-decoration: none;
-	color: #222;
-}
-#breadcrumb_nav {
-	color: #999;
-}
-#breadcrumb_nav a:link, #breadcrumb_nav a:visited, #breadcrumb_nav a:hover, #breadcrumb_nav a:visited:hover {
-	text-decoration: none;
-	color: #222;
-}
-a {
-	color: black;	
-}
-#container {
-	overflow: auto;
-	width: 100%
-}
-.hidden {
-	visibility: hidden;
-	position:absolute;
-	top:0;
-	left:0;
-	display:inline;
-}
-#topbar {
-	position: absolute;
-	left: 0;
-	top: 0;
-	margin: 0;
-	padding-top: 5px;
-	border: none;
-	float: none;
-	width: 100%;
-	height: 25px;
-	text-align: center;
-	background-color: #FFFF99;
-	border-bottom: 1px solid #DDD;
-}
-#topbar img{
-	position: absolute;
-	right: 6;
-	top: 6;
-	vertical-align: middle;
-}
-
-#folder_comment
-{
- margin-top:10px;
- margin-left:10px;
-}
-
-/* ---------- gallery styles start here ----------------------- */
-.gallery {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-}
-.gallery li {
-	padding: 10px;
-	margin: 0;
-	float: left;
-	position: relative;
-	width: 130px;
-	height: 160px;
-	overflow:hidden;
-}
-.gallery li:hover img {
-	border-color: #000;
-	background: #ddd;
-}
-.gallery img {
-	background: #fff;
-	border: solid 1px #888;
-	padding: 5px;
-}
-.gallery em {
-	color: #000;
-	font-style: normal;
-	padding: 2px 5px;
-	display: block;
-	position: absolute;
-	top: 140px;
-	left: 9px;
-}
-.gallery em-pdf {
-	color: #666;
-	font-style: normal;
-	font-size: 10px;
-	padding: 3px 7px;
-	display: block;
-	position: absolute;
-	top: 118px;
-	left: 9px;
-}
-.gallery a {
-	text-decoration: none;
-}
-.gallery a:hover em {
-	color: #666;
-}
-</style>
-<body>
-<h1><% title %></h1>
-<% messages %>
-<p class="credits"><em>by: </em><% author %></p>
-<span id="breadcrumb_nav"><% breadcrumb_navigation %></span>
-<div id="container">
-<div id="folder_comment"><% folder_comment %></div>
-<ul class="gallery">
-<% thumbnails %>
-</ul>
-</div>
-<br />
-<div id="page_nav"><% page_navigation %></div>
-<br />
-<!-- CREDITS - DO NOT REMOVE OR YOU WILL VOID MiniGal Nano TERMS OF USE -->
-<hr id="bottom" />
-<div class="backlink" align="center"><a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">Powered by MiniGal Nano <% version %></a></div>
-<br /><br />
-</body>
-</html>

templates/rounded.html

@@ -0,0 +1,224 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="author" content="<% author %>" />
+		<meta name="generator" content="MinigalNano <% version %>" />
+		<title><% title %></title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
+		
+		<script src="<% gallery_root %>js/lazy.js"></script>
+		<script src="<% gallery_root %>js/script.js"></script>
+		<script src="<% gallery_root %>js/mootools.js"></script>
+		<script src="<% gallery_root %>js/mediabox1.3.4.js"></script>
+
+		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxWhite.css" type="text/css" media="screen" />
+		<style type="text/css">
+			html {
+				font-size:62.5%;
+			}
+			body {
+				width:100%;
+				margin:0;
+				padding:0;
+				font-family:Helvetica,Arial,sans-serif;
+				font-size:1.5rem;
+				color:#FFF;
+				background:#3B3A37;
+			}
+			a {
+				text-decoration:none;
+				font-weight:bold;
+				color:#FFF;
+			}
+			h1 {
+				margin:20px 0 0;
+				font-family:Georgia,Lucida,serif;
+				font-style:italic;
+			}
+			h1 a,
+			a {
+				color:#E63D24;
+			}
+			body > header {
+				padding:1px;
+				text-align:center;
+			}
+			#container,
+			#innerheader {
+				margin:0 auto;
+				max-width:<% gallery_width %>;
+			}
+			#container header {
+				padding:2rem 0;
+			}
+			img {
+				border:none;
+			}
+			nav {
+				padding-top:15px;
+				font-size:1.3em;
+			}
+			body > nav {
+				text-align:center;
+			}
+			#folder_comment {
+				margin-bottom:10px;
+			}
+			#folder_comment a {
+				text-decoration:none;
+				color:#FFCC11;
+			}
+			#gallery {
+				margin:0;
+				padding:0;
+				list-style:none;
+			}
+			#gallery li,
+			#gallery li img {
+				border-radius:4px;
+			}
+			#gallery li {
+				float:left;
+				position:relative;
+				margin:.5%;
+			}
+			#gallery li img {
+				width:100%;
+				border-radius:100%;
+				-webkit-box-shadow:0 0 2px -1px #000;
+				box-shadow:0 0 2px -1px #000;
+			}
+			#gallery li:hover img {
+				-webkit-box-shadow:0 0 5px 0 #000;
+				box-shadow:0 0 5px 0 #000;
+			}
+			#gallery li:hover img,
+			#gallery li img,
+			#gallery li em,
+			#gallery li:hover em
+			#backtop,
+			#backtop:hover,
+			#backtop:active,
+			.b-lazy {
+				-webkit-transition:all .2s ease-in;
+				-ms-transition:all .2s ease-in;
+				-o-transition:all .2s ease-in;
+				transition:all .2s ease-in;
+			}
+			#gallery em {
+				position:absolute;
+				top:-1px;
+				bottom:-1px;
+				zoom:1;
+				width:100%;
+				margin:-0.5px 0 0 -0.5px;
+				padding:40% 0;
+				border:1px solid #000;
+				border-radius:100%;
+				text-align:center;
+				font-family:Georgia,Lucida,serif;
+				font-size:2.5rem;
+				font-style:italic;
+				color:#FFF;
+				opacity:0;
+				background:#000;
+				filter:alpha(opacity=0);
+			}
+			#gallery li:hover em {
+				zoom:1;
+				opacity:1;
+				filter:alpha(opacity=1);
+			}
+			footer {
+				clear:both;
+				padding-top: 2rem;
+				margin: 25px 0px;
+				text-align: center;
+			}
+			footer a {
+				text-decoration:none;
+			}	
+			/*----Back to top button---*/
+			#backtop {
+				display: block;
+				position: fixed;
+				bottom: 0;
+				right: 0;
+				padding: 4rem;
+				background-color: #E63D24;
+				color: #FFF;
+				margin: 1rem;
+				border-radius: 100%;
+				-webkit-box-shadow:  0px 0px 2px -1px #000;
+				box-shadow:  0px 0px 2px -1px #000;
+			}
+			/*----lazyloading---*/
+			.loader{
+				background: url('images/loader.gif') center center no-repeat;
+			}
+			.b-lazy {
+				opacity: 0;
+			}
+			.b-lazy.b-loaded {
+				opacity: 1;
+			}
+			/*----responsive----*/
+			#gallery li {
+				width:24%;
+				height:0;
+				padding-bottom:24%;
+			}
+			@media(max-width:1000px) {
+				#gallery li {
+					width:32%;
+					padding-bottom:32%;
+				}
+			}
+			@media(max-width:800px) {
+				#gallery li {
+					width:48%;
+					padding-bottom:48%;
+				}
+			}
+			@media(max-width:450px) {
+				#gallery li {
+					width:100%;
+					padding-bottom:100%;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<header  role="banner">
+			<div id="innerheader">
+				<h1><a href="<% gallery_root %>"><% title %></a></h1>
+				<% messages %>
+				<nav role="navigation"><% breadcrumb_navigation %></nav>
+			</div>
+		</header>
+		<a href="#top" id="backtop">top</a>
+		<main id="container">
+			<header><% folder_comment %></header>
+			<ul id="gallery">
+				<% thumbnails %>
+			</ul>
+		</main>
+		<nav role="navigation"><% page_navigation %></nav>
+		<a href="#top" id="backtop">top</a>
+		<footer role="contentinfo">
+			Gallery by <% author %> /
+			<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
+				Powered by MiniGal Nano <% version %>
+			</a> /
+			<a href="http://tomcanac.com/minigal/" title="Tom Canac" target="_blank">
+				Rounded theme by Tom Canac
+			</a> /
+			<a  title="<% title %> RSS" href="rss/" />
+				RSS
+			<a>
+		</footer>
+	</body>
+</html>

templates/squares.html

@@ -0,0 +1,199 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="author" content="<% author %>" />
+		<meta name="generator" content="MinigalNano <% version %>" />
+		<title><% title %></title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>
+		
+		<script src="<% gallery_root %>js/lazy.js"></script>
+		<script src="<% gallery_root %>js/script.js"></script>
+		<script src="<% gallery_root %>js/mootools.js"></script>
+		<script src="<% gallery_root %>js/mediabox1.3.4.js"></script>
+
+		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxWhite.css" type="text/css" media="screen" />
+		<style type="text/css">
+			html {
+				font-size:62.5%;
+			}
+			body {
+				width:100%;
+				margin:0;
+				padding:0;
+				font-family:Helvetica,Arial,sans-serif;
+				font-size:1.5rem;
+				color:#FFF;
+				background:#232321;
+			}
+			a,
+			h1 a {
+				text-decoration:none;
+				color:#FF0084;
+			}
+			h1 {
+				margin:20px 0 0;
+				font-weight:normal;
+			}
+			body > header {
+				padding:1px;
+				text-align:center;
+			}
+			#container,
+			#innerheader {
+				margin:0 auto;
+			}
+			#container header {
+				padding:2rem;
+			}
+			nav {
+				padding-top:15px;
+				font-size:1.3em;
+			}
+			body > nav {
+				text-align:center;
+			}
+			#folder_comment {
+				margin-bottom:10px;
+			}
+			#folder_comment a {
+				text-decoration:none;
+				color:#FFCC11;
+			}
+			#gallery li:hover img,
+			#gallery li img,
+			#gallery li em,
+			#gallery li:hover em,
+			#backtop,
+			#backtop:hover,
+			#backtop:active,
+			.b-lazy {
+				-webkit-transition:all .2s ease-in;
+				-ms-transition:all .2s ease-in;
+				-o-transition:all .2s ease-in;
+				transition:all .2s ease-in;
+			}
+			#gallery {
+				margin:0;
+				padding:0;
+				list-style:none;
+			}
+			#gallery li {
+				float:left;
+				position:relative;
+				overflow:hidden;
+			}
+			#gallery li img {
+				width:100%;
+			}
+			#gallery em {
+				display:block;
+				position:absolute;
+				top:100%;
+				bottom:0;
+				width:100%;
+				padding:40% 0;
+				text-align:center;
+				font-family:Georgia,Lucida,serif;
+				font-size:2.5rem;
+				font-style:italic;
+				color:#FFF;
+				background:rgba(0,0,0,.9);
+			}
+			#gallery li:hover em {
+				top:0;
+			}
+			footer {
+				font-weight: bold;
+				clear:both;
+				padding-top: 2rem;
+				margin: 25px 0px;
+				text-align: center;
+			}
+			/*----Back to top button---*/
+			#backtop {
+				display: block;
+				position: fixed;
+				bottom: 0;
+				right: 0;
+				padding: 1rem 4rem;
+				background-color: #FFF;
+				color: #0063dc;
+				font-weight: bold;
+				-webkit-box-shadow:  0px 0px 2px -1px #000;
+				box-shadow:  0px 0px 2px -1px #000;
+				
+			}
+			#backtop:hover,
+			#backtop:active{
+				background-color: #0063dc;
+				color: #FFF;
+				padding: 2rem 8rem;
+			}
+			/*----lazyloading---*/
+			.b-lazy {
+				opacity: 0;
+			}
+			.b-lazy.b-loaded {
+				opacity: 1;
+			}
+			/*----responsive----*/
+			#gallery li {
+				width:25%;
+				height:0;
+				padding-bottom:24%;
+			}
+			@media(max-width:1000px) {
+				#gallery li {
+					width:32%;
+					padding-bottom:32%;
+				}
+			}
+			@media(max-width:800px) {
+				#gallery li {
+					width:48%;
+					padding-bottom:48%;
+				}
+			}
+			@media(max-width:450px) {
+				#gallery li {
+					width:100%;
+					padding-bottom:100%;
+				}
+			}
+		</style>
+	</head>
+
+	<body>
+		<header id="top" role="banner">
+			<div id="innerheader">
+				<h1><a href="<% gallery_root %>"><% title %></a></h1>
+				<% messages %>
+				<nav role="navigation"><% breadcrumb_navigation %></nav>
+			</div>
+		</header>
+		
+		<main id="container">
+			<header><% folder_comment %></header>
+			<ul id="gallery">
+				<% thumbnails %>
+			</ul>
+		</main>
+
+		<nav role="navigation"><% page_navigation %></nav>
+		<a href="#top" id="backtop">top</a>
+		<footer role="contentinfo">
+			Gallery by <% author %> /
+			<a href="https://github.com/sebsauvage/MinigalNano" title="Powered by MiniGal Nano" target="_blank">
+				Powered by MiniGal Nano <% version %>
+			</a> /
+			<a href="http://tomcanac.com/minigal/" title="Tom Canac" target="_blank">
+				Squares theme by Tom Canac
+			</a> /
+			<a  title="<% title %> RSS" href="rss/" />
+				RSS
+			<a>
+		</footer>
+	</body>
+</html>