From 0378841b258618a32672cd006933af75d35486b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Bertrand?= <jeremie.bertrand@gmail.com>
Date: Fri, 26 Dec 2014 17:42:19 +0100
Subject: [PATCH] Add small tile size

---
 index.html      | 57 +++++++++++++++++++++++++++++++++++--------
 less/tiles.less | 65 ++++++++++++++++++++++++++++++++-----------------
 2 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index 610f9cc..23609b7 100644
--- a/index.html
+++ b/index.html
@@ -23,10 +23,10 @@ <h3>about</h3>
 				<p>The <a href="http://code52.org">Code52</a> gang are putting together some stylesheets and resources for people looking to get more familiar with Metro.</p>
 
 				<p>Much like the Twitter Bootstrap project (which was one of the inspirations for this project), the site uses LESS to build the stylesheets on-the-fly. So if you wanted to test this locally, you'd need something like <a href="http://github.com/mojombo/jekyll/">Jekyll</a> or our own <a href="http://github.com/Code52/Pretzel/">Pretzel</a> to serve up the content (as the generation is done using Javascript and you will likely encounter file:// permission issues).
-				
+
 				<p>While you can just go and grab the code from <a href="http://github.com/Code52/metro.css/">GitHub</a>, feel free to click around the site and see more for yourself.
 			</div>
-						
+
 			<div class="pivot-item">
 				<h3>demos</h3>
 				<ul class="metro-list">
@@ -78,7 +78,7 @@ <h4>active progress bars</h4>
 					</div>
 				</div>
 
-				<h4>tiles</h3>
+				<h4>tiles</h4>
 				<div class="tiles" style="width:800px;">
 					<div class="tilerow">
 						<div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/markpad.png" /><h2>markpad</h2></a></div>
@@ -86,7 +86,7 @@ <h4>tiles</h3>
 						<div class="tile one bluebg"><a href="#"><img src="http://code52.org/img/tiles/ideastrike.png" /><h2>ideastrike</h2></a></div>
 						<div class="tile two-h bluebg"><a href="#"><img src="http://code52.org/img/tiles/samurai.png" /><h2>samurai</h2></a></div>
 					</div>
-					
+
 					<div class="tilerow">
 						<div class="tile two-h limebg"><a href="#"><img src="http://code52.org/img/tiles/pretzel.png" /><h2>pretzel</h2></a></div>
 						<div class="tile one limebg"><a href="#"><h2>test</h2></a></div>
@@ -98,25 +98,62 @@ <h4>tiles</h3>
 						<div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
 						<div class="tile one orangebg"><a href="#"><h2>test</h2></a></div>
 						<div class="tile two-v fourthcol orangebg"><a href="#"><h2>test</h2></a></div>
-					</div>	
+					</div>
 					<div class="tilerow">
 						<div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
 						<div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
 						<div class="tile one tealbg"><a href="#"><h2>test</h2></a></div>
 						<div class="tile one fifthcol tealbg"><a href="#"><h2>test</h2></a></div>
-					</div>	
+					</div>
 					<div class="tilerow">
 						<div class="tile one purplebg"><p><h2>test</h2></p></div>
 						<div class="tile one purplebg"><p><h2>test</h2></p></div>
 						<div class="tile one purplebg"><p><h2>test</h2></p></div>
 						<div class="tile one purplebg"><p><h2>test</h2></p></div>
 						<div class="tile one purplebg"><p><h2>test</h2></p></div>
-					</div>	
+					</div>
 				</div>
+
+				<h4 style="clear: both;">small tiles</h4>
+				<div class="tiles" style="width:500px;">
+					<div class="tilerow">
+						<div class="tile quarter bluebg"><a href="#"><img src="http://code52.org/img/tiles/markpad.png" /><h2>markpad</h2></a></div>
+						<div class="tile quarter bluebg"><a href="#"><img src="http://code52.org/img/tiles/jibbr.png" /><h2>jibbr</h2></a></div>
+						<div class="tile quarter bluebg"><a href="#"><img src="http://code52.org/img/tiles/ideastrike.png" /><h2>ideastrike</h2></a></div>
+						<div class="tile half-h bluebg"><a href="#"><img src="http://code52.org/img/tiles/samurai.png" /><h2>samurai</h2></a></div>
+					</div>
+
+					<div class="tilerow">
+						<div class="tile half-h limebg"><a href="#"><img src="http://code52.org/img/tiles/pretzel.png" /><h2>pretzel</h2></a></div>
+						<div class="tile quarter limebg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile quarter limebg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile half-v smallfifthcol limebg"><a href="#"><h2>test</h2></a></div>
+					</div>
+					<div class="tilerow">
+						<div class="tile quarter orangebg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile quarter orangebg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile quarter orangebg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile half-v smallfourthcol orangebg"><a href="#"><h2>test</h2></a></div>
+					</div>
+					<div class="tilerow">
+						<div class="tile quarter tealbg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile quarter tealbg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile quarter tealbg"><a href="#"><h2>test</h2></a></div>
+						<div class="tile quarter smallfifthcol tealbg"><a href="#"><h2>test</h2></a></div>
+					</div>
+					<div class="tilerow">
+						<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
+						<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
+						<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
+						<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
+						<div class="tile quarter purplebg"><p><h2>test</h2></p></div>
+					</div>
+				</div>
+
 			</div>
-		</div>	
+		</div>
+
 
-		
 		<script>
 			var defaults = {
 				animationDuration: 350,
@@ -144,4 +181,4 @@ <h4>tiles</h3>
 
 		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/less/tiles.less b/less/tiles.less
index 113057a..771a25c 100644
--- a/less/tiles.less
+++ b/less/tiles.less
@@ -1,20 +1,23 @@
-@tilebasewidth : 130;
-@tilepadding: 5;
-@tilemargin: 10;
+@tilebasewidth: 130px;
+@tilepadding: 5px;
+@tilemargin: 10px;
 @tilesize: (@tilepadding*2) + @tilebasewidth + @tilemargin;
+@2tilewidth: (@tilebasewidth + @tilemargin) *2;
+@smalltilesize: (@tilepadding*2) + @tilebasewidth /2 + @tilemargin;
+@small2tilewidth: (@tilebasewidth /2 + @tilemargin) *2;
 
 .tile {
 	-webkit-perspective: 0;
 	-webkit-transform-style: preserve-3d;
 	-webkit-transition: -webkit-transform 0.2s;
 	float: left;
-	margin-right: @tilemargin + 0px;
-	margin-bottom: @tilemargin + 0px;
+	margin-right: @tilemargin;
+	margin-bottom: @tilemargin;
 	text-align:center;
-	padding: @tilepadding + 0px;
+	padding: @tilepadding;
 	opacity:0.75;
 
-	h1, h2, h3, h4, h5, h6 { 
+	h1, h2, h3, h4, h5, h6 {
 		color: @white;
 		-webkit-user-select: none;
 	}
@@ -28,29 +31,45 @@
 .tile img { border :0;}
 .tile:hover { opacity:1;}
 .tiles { .clear; }
-.tilerow  { 
-	float:left; 	
+.tilerow  {
+	float:left;
 	-webkit-perspective: 0;
 	-webkit-transform-style: preserve-3d;
-	-webkit-user-select: none; 
-} 
+	-webkit-user-select: none;
+}
+
+.tilesize(@width, @height) {
+	width: @width;
+	height: @height;
+}
 .one {
-	width: @tilebasewidth + 0px;
-	height: @tilebasewidth + 0px;
+	.tilesize(@tilebasewidth, @tilebasewidth);
 }
 .two-h {
-	width: (@tilebasewidth + @tilemargin) *2 + 0px;
-	height: @tilebasewidth + 0px;
+	.tilesize(@2tilewidth, @tilebasewidth);
 }
 .two-v {
-	width: @tilebasewidth + 0px;
-	height: (@tilebasewidth + @tilemargin)*2 + 0px;
+	.tilesize(@tilebasewidth, @2tilewidth);
 }
 
-.firstcol, .secondcol, .thirdcol, .fourthcol, .fifthcol { position: absolute;}
-.firstcol { }
-.secondcol { margin-left: @tilesize*1px; }
-.thirdcol { margin-left: @tilesize*2px; }
-.fourthcol { margin-left: @tilesize*3px; }
-.fifthcol { margin-left: @tilesize*4px; }
+.half-h {
+	.tilesize(@small2tilewidth, @tilebasewidth /2);
+}
+.half-v {
+	.tilesize(@tilebasewidth /2, @small2tilewidth);
+}
+.quarter {
+	.tilesize(@tilebasewidth /2, @tilebasewidth /2);
+}
 
+.firstcol, .secondcol, .thirdcol, .fourthcol, .fifthcol, .smallfirstcol, .smallsecondcol, .smallthirdcol, .smallfourthcol, .smallfifthcol { position: absolute;}
+.firstcol { }
+.secondcol { margin-left: @tilesize*1; }
+.thirdcol { margin-left: @tilesize*2; }
+.fourthcol { margin-left: @tilesize*3; }
+.fifthcol { margin-left: @tilesize*4; }
+.smallfirstcol { }
+.smallsecondcol { margin-left: @smalltilesize*1; }
+.smallthirdcol { margin-left: @smalltilesize*2; }
+.smallfourthcol { margin-left: @smalltilesize*3; }
+.smallfifthcol { margin-left: @smalltilesize*4; }