index: new thumbnails, responsive layout, clickable images

css/bootswatch.css

@@ -1,14 +1,14 @@
 body {
-  padding-top: 60px;
-  padding-bottom: 30px;
+	padding-top: 60px;
+	padding-bottom: 20px;
 }
 
 .navbar .nav > li > a {
 	color: #ccc;
 }
 
 .nav i {
-	opacity: 0.4;
+	opacity: 0.5;
 }
 
 .nav a:hover i {
@@ -30,6 +30,7 @@ body {
 
 .hero-unit {
 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+	margin-bottom: 60px;
 }
 
 .hero-unit, .thumbnail {
@@ -50,6 +51,7 @@ body {
 }
 
 .rss {
+	width: 40px;
 	height: 14px;
 	font-size: 11px;
 	line-height: 14px;
@@ -69,7 +71,7 @@ body {
 }
 
 .about {
-  margin-top: 50px;
+  margin-top: 20px;
 }
 
 .about h3 {
@@ -88,12 +90,11 @@ body {
 }
 
 .thumbnail {
-  max-width: 300px;
+  max-width: 370px;
 }
 
 .thumbnail img {
-  width: 290px;
-  height: 200px;
+  max-height: 250px;
   -webkit-border-radius: 7px;
      -moz-border-radius: 7px;
           border-radius: 7px;
@@ -106,4 +107,72 @@ body {
 .thumbnail .btn-toolbar {
   text-align: right;
 }
+
+.thumbnail .btn-group {
+    margin-top: 10px;
+}
+
+/* Landscape phones and down */
+@media (max-width: 480px) {
+
+	body {
+		padding-top: 0px;
+	}
+
+	.hero-unit {
+		padding-bottom: 80px;
+	}
+
+	.about {
+	  margin-top: -10px;
+	}
+
+	.about h3 {
+	  margin-top: 20px;
+	}
+
+	.span4 {
+		width: 95%;
+	}
+
+}
+
+/* Landscape phone to portrait tablet */
+@media (max-width: 768px) {
+	body {
+		padding-top: 0px;
+	}
+
+	.hero-unit {
+		padding-bottom: 80px;
+	}
+
+	.about {
+	  margin-top: -10px;
+	}
+
+	.about h3 {
+	  margin-top: 20px;
+	}
+
+	.span4 {
+		width: 95%;
+	}
+
+}
+
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) and (max-width: 980px) { 
+	body {
+		padding-top: 0px;
+	}
+
+
+}
+
+/* Large desktop */
+@media (min-width: 1200px) {
+
+
+}
 

index.html

@@ -11,6 +11,7 @@
 
     <!-- Le styles -->
     <link href="css/bootstrap.css" rel="stylesheet">
+    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
     <link href="css/bootswatch.css" rel="stylesheet">
 	<link rel="alternate" type="application/rss+xml" 
 	  title="Bootswatch" 
@@ -63,11 +64,11 @@ <h1>Bootswatch</h1>
   			<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
 			<iframe src="http://markdotto.github.com/github-buttons/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>		
   		  </div>
-          <div class="span4">
+          <div class="span3 offset1">
   			<a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a>
   			<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
   		  </div>
-		  <div class="span1">
+		  <div class="span1 offset1">
   			<a class="btn rss" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a>
 		  </div>
   	    </div>	
@@ -118,7 +119,7 @@ <h1 id="gallery">Gallery</h1>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="amelia/thumbnail.png" alt="">
+			        <a href="amelia"><img src="amelia/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Amelia  <span class="label label-warning">new!</label></h3>
 			          <p>Sweet and cheery.</p>
@@ -152,7 +153,7 @@ <h3>Amelia  <span class="label label-warning">new!</label></h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="cerulean/thumbnail.png" alt="">
+			         <a href="cerulean"><img src="cerulean/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Cerulean</h3>
 			          <p>A calm, blue sky.</p>
@@ -185,7 +186,7 @@ <h3>Cerulean</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="cyborg/thumbnail.png" alt="">
+			         <a href="cyborg"><img src="cyborg/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Cyborg</h3>
 			          <p>Jet black and electric blue.</p>
@@ -218,7 +219,7 @@ <h3>Cyborg</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="journal/thumbnail.png" alt="">
+			         <a href="journal"><img src="journal/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Journal</h3>
 			          <p>Crisp like a new sheet of paper.</p>
@@ -252,7 +253,7 @@ <h3>Journal</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="readable/thumbnail.png" alt="">
+			         <a href="readable"><img src="readable/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Readable  <span class="label label-warning">new!</label></h3>
 			          <p>Optimized for legibility.</p>
@@ -285,7 +286,7 @@ <h3>Readable  <span class="label label-warning">new!</label></h3>
 
   			    <li class="span4">
   			      <div class="thumbnail">
-  			        <img src="simplex/thumbnail.png" alt="">
+  			         <a href="simplex"><img src="simplex/thumbnail.png" alt=""></a>
   			        <div class="caption">
   			          <h3>Simplex</h3>
   			          <p>Flat, matte, minimalist.</p>
@@ -318,7 +319,7 @@ <h3>Simplex</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="slate/thumbnail.png" alt="">
+			         <a href="slate"><img src="slate/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Slate</h3>
 			          <p>Shades of gunmetal gray.</p>
@@ -351,7 +352,7 @@ <h3>Slate</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="spacelab/thumbnail.png" alt="">
+			         <a href="spacelab"><img src="spacelab/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Spacelab</h3>
 			          <p>Silvery and sleek.</p>
@@ -385,7 +386,7 @@ <h3>Spacelab</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="spruce/thumbnail.png" alt="">
+			         <a href="spruce"><img src="spruce/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Spruce</h3>
 			          <p>Camping in the woods.</p>
@@ -418,7 +419,7 @@ <h3>Spruce</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="superhero/thumbnail.png" alt="">
+			        <a href="superhero"><img src="superhero/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>Superhero</h3>
 			          <p>Batman meets... Aquaman?</p>
@@ -451,7 +452,7 @@ <h3>Superhero</h3>
 
 			    <li class="span4">
 			      <div class="thumbnail">
-			        <img src="united/thumbnail.png" alt="">
+			        <a href="united"><img src="united/thumbnail.png" alt=""></a>
 			        <div class="caption">
 			          <h3>United</h3>
 			          <p>Bright colors and a unique font.</p>
@@ -503,6 +504,7 @@ <h3>United</h3>
     <script src="js/jquery.js"></script>
     <script src="js/bootstrap-dropdown.js"></script>
 	<script src="js/bootstrap-tooltip.js"></script>
+    <script src="js/bootstrap-collapse.js"></script>
     <script src="js/bootswatch.js"></script>
 	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>