From 71bfd6154ffa31e24d65864548b8ca58192ffe57 Mon Sep 17 00:00:00 2001
From: Tom Canac <contact@tomcanac.com>
Date: Thu, 9 Jan 2014 21:21:27 +0100
Subject: [PATCH] =?UTF-8?q?board=20:=C2=A0fix=20height=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/board.html | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)
diff --git a/templates/board.html b/templates/board.html
index 77afa34..dd077cf 100644
--- a/templates/board.html
+++ b/templates/board.html
@@ -7,13 +7,15 @@
 		<link rel="alternate" type="application/rss+xml" title="<% title %>" href="rss/" /><link>	
 		<script src="<% gallery_root %>js/mootools.js"></script>
 		<script src="<% gallery_root %>js/mediaboxAdv-1.3.4b.js"></script>
-		<link rel="stylesheet" href="<% gallery_root %>css/board-white.css" type="text/css" media="screen" />
+		<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 {
 			margin: 0;
 			padding: 0;
@@ -23,6 +25,7 @@
 			background: #E7E6E0;
 			color: #333333;
 		}
+
 		a {
 			color: #333333;
 			font-weight: bold;
@@ -36,12 +39,13 @@
 		h1 a{
 			color: #CC2027;	
 		}
+
 		body > header{
 			background-color:#FFF;
 			padding: 1px;
 			margin-bottom: 15px;
 		}
-		#container, body > header > div{
+		#container, #innerheader{
 			max-width: <% gallery_width %>;
 			margin: 0px auto;
 		}
@@ -62,8 +66,8 @@
 		#folder_comment a {
 			color: #FFCC11;
 			text-decoration: none;
-
 		}
+
 		#gallery {
 			list-style: none;
 			margin: 0;
@@ -83,23 +87,19 @@
 			box-shadow:  0px 0px 2px -1px #000;
 			*/
 		}
-		#gallery img {
-			background: #000;
-			color: #666;
-		}
+		#gallery li img{
+			width: 100%;
+		}	
 		#gallery em {
 			background: #FFF;
 			text-align: center;
 			font-style: normal;
-			font-weight: bold;
 			padding: 8px 0px;
 			display: block;
 			position: absolute;
 			bottom:0px;
-			left: 0px;
 			width: 100%;
 		}
-		.clear{clear:both;}
 		footer {
 			margin: 25px 0px;
 			text-align: center;
@@ -112,23 +112,25 @@
 		/*----responsive----*/
 		#gallery li {
 			width: 24%;
-		}
-		#gallery li img{
-			width: 100%;
+			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>
@@ -136,7 +138,7 @@
 
 <body>
 	<header>
-		<div>
+		<div id="innerheader">
 			<h1><a href="<% gallery_root %>"><% title %></a></h1>
 			<% messages %>
 			<nav><% breadcrumb_navigation %></nav>
