From ef74392a6f6e88555c660740862aec4179e289c4 Mon Sep 17 00:00:00 2001
From: Tom Canac <contact@tomcanac.com>
Date: Sun, 12 Jan 2014 14:09:31 +0100
Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20des=20th=C3=A8mes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config.php             |   2 +-
 templates/board.html   |  18 +--
 templates/rounded.html | 289 +++++++++++++++++++----------------------
 templates/squares.html | 163 +++++++++++------------
 4 files changed, 223 insertions(+), 249 deletions(-)

diff --git a/config.php b/config.php
index 8467969..9d803fc 100644
--- a/config.php
+++ b/config.php
@@ -19,7 +19,7 @@ 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 			= "rounded"; //Template filename (must be placed in 'templates' folder)
+$templatefile 			= "board"; //Template filename (must be placed in 'templates' folder)
 $title 					= "MiniBoardNano gallery"; // Text to be displayed in browser titlebar
 $author					= "John Doe";
 $folder_color 			= "black"; // Color of folder icons: blue / black / vista / purple / green / grey
diff --git a/templates/board.html b/templates/board.html
index d03a0cf..5bf0feb 100644
--- a/templates/board.html
+++ b/templates/board.html
@@ -25,37 +25,37 @@
 			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;
-			margin: 20px 0 0 0;
-			
 		}
 		h1 a{
 			color: #CC2027;	
 		}
-
 		body > header{
 			background-color:#FFF;
-			padding: 1px;
-			margin-bottom: 15px;
+			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: 15px 0px;
+			padding-top: 2rem;
 		}
 		body > nav {
 			text-align: center;
@@ -106,7 +106,6 @@
 			text-decoration: none;
 			color: #666;
 		}
-
 		/*----responsive----*/
 		#gallery li {
 			width: 24%;
@@ -140,11 +139,12 @@
 			<h1><a href="<% gallery_root %>"><% title %></a></h1>
 			<% messages %>
 			<nav role="navigation"><% breadcrumb_navigation %></nav>
+			<aside><% folder_comment %></aside>
 		</div>
 	</header>
 
 	<main id="container">
-		<header><% folder_comment %></header>
+		
 		<ul id="gallery">
 			<% thumbnails %>
 		</ul>
diff --git a/templates/rounded.html b/templates/rounded.html
index c5188ae..952e53e 100644
--- a/templates/rounded.html
+++ b/templates/rounded.html
@@ -12,171 +12,150 @@
 		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
 
 	<style type="text/css">
-html {
-	font-size:62.5%;
-}
-
-.clear {
-	clear:both;
-}
-
-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 {
-	color:#E63D24;
-}
-
-body > header {
-	margin-bottom:15px;
-	padding:1px;
-	text-align:center;
-}
-
-#container,
-#innerheader {
-	margin:0 auto;
-	max-width:<% gallery_width %>;
-}
-
-img {
-	border:none;
-}
-
-nav {
-	padding:15px 0;
-	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 {
-	-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%;
-	padding:40% 0;
-	border-radius:100%;
-	text-align:center;
-	font-family:Georgia,Lucida,serif;
-	font-size:2.5rem;
-	font-style:italic;
-	color:#FFF;
-	margin: -0.5px 0 0 -0.5px;
-	border:1px solid black;
-	opacity:0;
-	background:#000;
-	filter:alpha(opacity=0);
-}
-
-#gallery li:hover em {
-	zoom:1;
-	opacity:1;
-	filter:alpha(opacity=1);
-}
-
-footer {
-	margin:25px 0;
-	text-align:center;
-}
-
-footer a {
-	text-decoration:none;
-	color:#666;
-}
-
+		html {
+			font-size:62.5%;
+		}
+		.clear {
+			clear:both;
+		}
+		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 {
+			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 {
+			-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 {
+			margin:25px 0;
+			text-align:center;
+		}
+		footer a {
+			text-decoration:none;
+			color:#666;
+		}
 		/*----responsive----*/
 		#gallery li {
-			width: 24%;
-			height: 0;
-			padding-bottom: 24%;
+			width:24%;
+			height:0;
+			padding-bottom:24%;
 		}
-		@media (max-width: 1000px) {
+		@media(max-width:1000px) {
 			#gallery li {
-				width: 32%;
-				padding-bottom: 32%;
+				width:32%;
+				padding-bottom:32%;
 			}
 		}
-		@media (max-width: 800px) {
+		@media(max-width:800px) {
 			#gallery li {
-				width: 48%;
-				padding-bottom: 48%;
+				width:48%;
+				padding-bottom:48%;
 			}
 		}
-		@media (max-width: 450px) {
+		@media(max-width:450px) {
 			#gallery li {
-				width: 100%;
-				padding-bottom: 100%;
+				width:100%;
+				padding-bottom:100%;
 			}
 		}
 	</style>
diff --git a/templates/squares.html b/templates/squares.html
index 89e5f55..36cd5cf 100644
--- a/templates/squares.html
+++ b/templates/squares.html
@@ -12,126 +12,121 @@
 		<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
 
 	<style type="text/css">
-		html{
-			font-size: 62.5%;
+		html {
+			font-size:62.5%;
+		}
+		.clear {
+			clear:both;
 		}
-		.clear{clear:both;}
 		body {
-			margin: 0;
-			padding: 0;
-			width: 100%;
-			font-size: 1.5rem;
-			font-family: Helvetica, Arial, sans-serif;
-			background: #2B2B2B;
-			color: #BBB;
+			width:100%;
+			margin:0;
+			padding:0;
+			text-shadow:0 1px 0 #000;
+			font-family:Helvetica,Arial,sans-serif;
+			font-size:1.5rem;
+			color:#FFF;
+			background:#232321;
 		}
-
-		a, h1 a {
-			color: #CE4D45;
-			font-weight: bold;
-			text-decoration: none;
+		a,
+		h1 a {
+			text-decoration:none;
+			color:#FF0084;
 		}
 		h1 {
-			margin: 20px 0 0 0;
-			
+			margin:20px 0 0;
+			font-weight:normal;
 		}
-
-		body > header{
-			padding: 1px;
-			text-align: center;
+		body > header {
+			padding:1px;
+			text-align:center;
 		}
-		#container, #innerheader{
-			/*max-width: <% gallery_width %>;*/
-			margin: 0px auto;
+		#container,
+		#innerheader {
+			margin:0 auto;
 		}
-		img {
-			border: none;
+		#container header {
+			padding:2rem;
 		}
 		nav {
-			font-size: 1.3em;
-			padding: 15px 0px;
+			padding-top:15px;
+			font-size:1.3em;
 		}
 		body > nav {
-			text-align: center;
+			text-align:center;
 		}
-		#folder_comment
-		{
+		#folder_comment {
 			margin-bottom:10px;
 		}
 		#folder_comment a {
-			color: #FFCC11;
-			text-decoration: none;
+			text-decoration:none;
+			color:#FFCC11;
+		}
+		#gallery li:hover img,
+		#gallery li img,
+		#gallery li em,
+		#gallery li:hover em {
+			-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 {
+			margin:0;
+			padding:0;
+			list-style:none;
 		}
 		#gallery li {
-			float: left;
-			position: relative;
+			float:left;
+			position:relative;
 			overflow:hidden;
 		}
-		#gallery li img{
-			width: 100%;
-		}	
-		#gallery em {
-			padding: 40% 0%;
-			display: block;
-			position: absolute;
-			bottom:0px;
-			width: 100%;
-			top:100%;
-			color: #FFF;
-			background: rgba(0,0,0, .9);
-			text-align: center;
-			font-family: Georgia, Lucida, serif;
-			font-style: italic;
-			font-size: 2.5rem;
-			-webkit-transition: all .2s ease-in;
-			-moz-transition: all .2s ease-in;
-			-ms-transition: all .2s ease-in;
-			-o-transition: all .2s ease-in;
-			transition: all .2s ease-in;
+		#gallery li img {
+			width:100%;
 		}
-		#gallery li:hover em{
-			top:0%;
-			-webkit-transition: all .2s ease-in;
-			-moz-transition: all .2s ease-in;
-			-ms-transition: all .2s ease-in;
-			-o-transition: all .2s ease-in;
-			transition: all .2s ease-in;
+		#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 {
-			margin: 25px 0px;
-			text-align: center;
+			margin:25px 0;
+			text-align:center;
 		}
-
 		/*----responsive----*/
 		#gallery li {
-			width: 25%;
-			height: 0;
-			padding-bottom: 24%;
+			width:25%;
+			height:0;
+			padding-bottom:24%;
 		}
-		@media (max-width: 1000px) {
+		@media(max-width:1000px) {
 			#gallery li {
-				width: 32%;
-				padding-bottom: 32%;
+				width:32%;
+				padding-bottom:32%;
 			}
 		}
-		@media (max-width: 800px) {
+		@media(max-width:800px) {
 			#gallery li {
-				width: 48%;
-				padding-bottom: 48%;
+				width:48%;
+				padding-bottom:48%;
 			}
 		}
-		@media (max-width: 450px) {
+		@media(max-width:450px) {
 			#gallery li {
-				width: 100%;
-				padding-bottom: 100%;
+				width:100%;
+				padding-bottom:100%;
 			}
 		}
 	</style>