index: added support section

10 files changed, 140 insertions, 3 deletions

diff --git a/css/bootswatch.css b/css/bootswatch.css
index 94543029..c7e8e33e 100644
--- a/css/bootswatch.css
+++ b/css/bootswatch.css
@@ -100,6 +100,10 @@ body {
 	vertical-align: top;
 }  
 
+.thumbnail p {
+	max-width: 352px;
+}
+
 .thumbnail .btn-toolbar {
   text-align: right;
 }
@@ -107,7 +111,7 @@ body {
 .thumbnail .btn-group {
     margin-top: 10px;
 }
-	
+
 /* Landscape phones and down */
 @media (max-width: 480px) {
 	
@@ -157,7 +161,7 @@ body {
 }
  
 /* Landscape phone to portrait tablet */
-@media (max-width: 768px) {
+@media (max-width: 767px) {
 	
 	.hero-unit {
 		margin-top: 0;
@@ -169,6 +173,10 @@ body {
 /* Portrait tablet to landscape and desktop */
 @media (min-width: 768px) and (max-width: 980px) { 
 
+	.hero-unit {
+		margin-top: 0;
+	}
+
 	.thumbnail .btn {
 		font-size: 11px;
 	}
diff --git a/img/refs/blank.png b/img/refs/blank.png
new file mode 100644
index 00000000..9f2f8ce7
--- /dev/null
+++ b/img/refs/blank.png
diff --git a/img/refs/cssmissingmanual.png b/img/refs/cssmissingmanual.png
new file mode 100644
index 00000000..67f486f2
--- /dev/null
+++ b/img/refs/cssmissingmanual.png
diff --git a/img/refs/dontmakemethink.png b/img/refs/dontmakemethink.png
new file mode 100644
index 00000000..3ff9ce64
--- /dev/null
+++ b/img/refs/dontmakemethink.png
diff --git a/img/refs/htmlandcss.png b/img/refs/htmlandcss.png
new file mode 100644
index 00000000..02c77d7d
--- /dev/null
+++ b/img/refs/htmlandcss.png
diff --git a/img/refs/javascriptandjquery.png b/img/refs/javascriptandjquery.png
new file mode 100644
index 00000000..60d7ef67
--- /dev/null
+++ b/img/refs/javascriptandjquery.png
diff --git a/img/refs/pixelmator.png b/img/refs/pixelmator.png
new file mode 100644
index 00000000..2bdd46db
--- /dev/null
+++ b/img/refs/pixelmator.png
diff --git a/img/refs/transmit.png b/img/refs/transmit.png
new file mode 100644
index 00000000..c7e678eb
--- /dev/null
+++ b/img/refs/transmit.png
diff --git a/img/refs/xscope.png b/img/refs/xscope.png
new file mode 100644
index 00000000..0673a233
--- /dev/null
+++ b/img/refs/xscope.png
diff --git a/index.html b/index.html
index 1ce6e21f..60af546f 100644
--- a/index.html
+++ b/index.html
@@ -484,10 +484,139 @@
 			      </div>
 			    </li>
 
+
+			    <!--<li class="span4">
+			      <div class="thumbnail">
+			        <img src="img/refs/blank.png" alt="">
+			        <div class="caption">
+			          <h3>Don't see what you need?</h3>
+			          <p>Inquire about a swatch custom-tailored to your business.</p>
+			          <div class="btn-toolbar">
+						<div class="btn-group">
+						  <a class="btn btn-large btn-danger" target="_blank" href="mailto:thomas@thomaspark.me">thomas@thomaspark.me</a>
+						</div>
+					</div>
+			        </div>
+			      </div>
+			    </li>-->
+
   
 			 </ul>
 		</div>
-	  </div>
+	  </div> <!-- end row-->
+
+
+	  
+	  <div class="row" style="padding-top: 30px;">
+		  <div class="span12">
+		  	  <h1 id="gallery">Support</h1>
+			  <ul class="thumbnails">
+			  	  <div id="ref" class="span3">
+					  <h3>Swatches will always be free.</h3>
+					  <p>But if you find them useful, you can show your support by getting one of these gems.</p>
+			 	  </div>
+				
+			    <li class="span3">
+  			      <div class="thumbnail">
+  			        <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new"><img src="img/refs/transmit.png" alt=""></a>
+  			        <div class="caption">
+  			          <h3>Transmit</h3>
+  			          <p>The ultimate (S)FTP + Amazon S3 client.</p>
+  			          <div class="btn-toolbar">
+  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
+  					</div>
+  			        </div>
+  			      </div>
+			    </li>
+				
+			  
+			    <li class="span3">
+  			      <div class="thumbnail">
+  			        <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fpixelmator%2Fid407963104%3Fmt%3D12" target="new"><img src="img/refs/pixelmator.png" alt=""></a>
+  			        <div class="caption">
+  			          <h3>Pixelmator</h3>
+  			          <p>A beautifully designed image editor.</p>
+  			          <div class="btn-toolbar">
+  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fpixelmator%2Fid407963104%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
+  					</div>
+  			        </div>
+  			      </div>
+			    </li>
+				
+
+			    <li class="span3">
+  			      <div class="thumbnail">
+  			        <a href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new"><img src="img/refs/xscope.png" alt=""></a>
+  			        <div class="caption">
+  			          <h3>xScope</h3>
+  			          <p>Measure and inspect on-screen layouts.</p>
+  			          <div class="btn-toolbar">
+  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://click.linksynergy.com/fs-bin/click?id=wyucSOE7tvo&subid=&offerid=146261.1&type=10&tmpid=3909&RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fxscope%2Fid447661441%3Fmt%3D12" target="new">Mac App Store <i class="icon-share-alt icon-white"></i></a></div>
+  					</div>
+  			        </div>
+  			      </div>
+			    </li>
+				
+			    <li class="span3">
+  			      <div class="thumbnail">
+  			        <a href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/bootswatch-20" target="new"><img src="img/refs/htmlandcss.png" alt=""></a>
+  			        <div class="caption">
+  			          <h3>HTML &amp; CSS</h3>
+  			          <p>Jon Duckett</p>
+  			          <div class="btn-toolbar">
+  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
+  					</div>
+  			        </div>
+  			      </div>
+			    </li>
+				
+
+			    <li class="span3">
+  			      <div class="thumbnail">
+  			        <a href="http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447/bootswatch-20" target="new"><img src="img/refs/cssmissingmanual.png" alt=""></a>
+  			        <div class="caption">
+  			          <h3>CSS: The Missing Manual</h3>
+  			          <p>David Sawyer McFarland</p>
+  			          <div class="btn-toolbar">
+  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
+  					</div>
+  			        </div>
+  			      </div>
+			    </li>
+
+
+			    <li class="span3">
+  			      <div class="thumbnail">
+  			        <a href="http://www.amazon.com/JavaScript-jQuery-The-Missing-Manual/dp/1449399029/bootswatch-20" target="new"><img src="img/refs/javascriptandjquery.png" alt=""></a>
+  			        <div class="caption">
+  			          <h3>JavaScript &amp; jQuery</h3>
+  			          <p>David Sawyer McFarland</p>
+  			          <div class="btn-toolbar">
+  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/JavaScript-jQuery-The-Missing-Manual/dp/1449399029/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
+  					</div>
+  			        </div>
+  			      </div>
+			    </li>
+
+
+			    <li class="span3">
+  			      <div class="thumbnail">
+  			        <a href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/bootswatch-20" target="new"><img src="img/refs/dontmakemethink.png" alt=""></a>
+  			        <div class="caption">
+  			          <h3>Don't Make Me Think</h3>
+  			          <p>Steve Krug</p>
+  			          <div class="btn-toolbar">
+  						<div class="btn-group"><a class="btn btn-large btn-info" href="http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/bootswatch-20" target="new">Amazon <i class="icon-share-alt icon-white"></i></a></div>
+  					</div>
+  			        </div>
+  			      </div>
+			    </li>
+
+
+			</ul>
+		  </div>
+	  </div> <!-- end row-->
+				
 
       <hr>