homepage refresh

3 files changed, 192 insertions, 177 deletions

diff --git a/css/bootswatch.css b/css/bootswatch.css
index 40f31b0a..59948c61 100644
--- a/css/bootswatch.css
+++ b/css/bootswatch.css
@@ -1,101 +1,20 @@
 body {
-	padding-top: 80px;
+	padding-top: 100px;
 	padding-bottom: 20px;
 }
 
-.navbar a > i {
-	opacity: 0.5;
-}
-
-.navbar a:hover > i {
-	opacity: 1;
-}
-
 section {
 	margin-top: 100px;
 }
 
-.subhead {
-	padding-bottom: 0;
-	margin-bottom: 9px;
-}
-
-.subhead h1 {
-	font-size: 54px;
-}
-
-.subhead > div:first-child {
-	min-height: 200px;
-}
-
-.subnav {
-	margin-bottom: 60px;
-	width: 100%;
-	height: 36px;
-	background-color: #eeeeee; /* Old browsers */
-	background-repeat: repeat-x; /* Repeat the gradient */
-	background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
-	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
-	background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
-	background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
-	background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
-	background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
-	border: 1px solid #e5e5e5;
-	-webkit-border-radius: 4px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
-}
-
-.subnav .nav {
-	margin-bottom: 0;
-}
-
-.subnav .nav > li > a {
-	margin: 0;
-	padding-top:    11px;
-	padding-bottom: 11px;
-	border-left: 1px solid #f5f5f5;
-	border-right: 1px solid #e5e5e5;
-	-webkit-border-radius: 0;
-	-moz-border-radius: 0;
-	border-radius: 0;
-}
+/* index */
 
-.subnav .nav > .active > a,
-.subnav .nav > .active > a:hover {
-	padding-left: 13px;
-	color: #777;
-	background-color: #e9e9e9;
-	border-right-color: #ddd;
-	border-left: 0;
-	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
-	-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
-	box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
-}
-
-.subnav .nav > .active > a .caret,
-.subnav .nav > .active > a:hover .caret {
-	border-top-color: #777;
-}
-
-.subnav .nav > li:first-child > a,
-.subnav .nav > li:first-child > a:hover {
-	border-left: 0;
-	padding-left: 12px;
-	-webkit-border-radius: 4px 0 0 4px;
-	-moz-border-radius: 4px 0 0 4px;
-	border-radius: 4px 0 0 4px;
-}
-
-.subnav .nav > li:last-child > a {
-	border-right: 0;
+.navbar a > i {
+	opacity: 0.5;
 }
 
-.subnav .dropdown-menu {
-	-webkit-border-radius: 0 0 4px 4px;
-	-moz-border-radius: 0 0 4px 4px;
-	border-radius: 0 0 4px 4px;
+.navbar a:hover > i {
+	opacity: 1;
 }
 
 .tooltip-inner {
@@ -103,7 +22,8 @@ section {
 }
 
 .hero-unit {
-	margin-bottom: 10px;
+	padding-bottom: 5px;
+	background-color: #F3F3F3;
 	border: 1px solid #ddd;
 	text-align: center;
 }
@@ -153,11 +73,15 @@ section {
 }
 
 #ticker {
-	margin-bottom: 40px;
+	margin-top: 40px;
+	margin-bottom: 10px;
+	font-size: 14px;
+	line-height: 1.4;
 }
 
 .about {
-	margin-top: 20px;
+	margin-top: 40px;
+	margin-bottom: 40px;
 }
 
 .about > div {
@@ -176,7 +100,7 @@ section {
 }
 
 #gallery {
-	padding-right: 20px;
+	padding-top: 60px;
 }
 
 .thumbnail {
@@ -192,7 +116,13 @@ section {
 }
 
 .thumbnail .caption {
-	color: inherit !important;
+	color: inherit;
+}
+
+.thumbnail .caption p {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .thumbnail h3 {
@@ -211,14 +141,6 @@ section {
 
 .links > a {
 	margin-right: 10px;
-} 
-
-div.one .bsa_it_ad {
-	padding: 25px 25px 15px 25px;
-}
-
-div.one .bsa_it_p {
-	display: none;
 }
 
 .bsa {
@@ -229,6 +151,7 @@ div.one .bsa_it_p {
 
 body .one .bsa_it_ad {
 	margin-bottom: -10px;
+	padding: 25px 25px 15px 25px;
 	background: none;
 	border: none;
 	font-family: inherit;
@@ -245,11 +168,11 @@ body .one .bsa_it_p {
 	display: none;
 }
 
-.links {
+#footer {
 	margin-bottom: 20px;
 }
 
-.links > a {
+#footer a {
 	margin-right: 10px;
 }
 
@@ -277,6 +200,10 @@ body .one .bsa_it_p {
 		display: block;
 	}
 
+	#ticker {
+		margin-top: 0;
+	}
+
 	.about {
 		margin-top: 0;
 	}
@@ -310,10 +237,135 @@ body .one .bsa_it_p {
 
 @media (max-width: 767px) {
 
-	body {
+	.index {
+		padding-top: 0;
+	}
+
+	.bsa {
+		float: none;
+	}
+}
+
+@media (max-width: 979px) and (min-width: 768px) {
+
+	.index {
 		padding-top: 0;
 	}
 
+	.navbar-fixed-top {
+		margin-bottom: 0;
+	}
+
+	.hero-unit {
+		border-radius: 0;
+	}
+
+	#gallery .btn {
+		padding: 6px 10px;
+		font-size: 14px;
+	}
+}
+
+@media (min-width: 980px) {
+
+	.index {
+		padding-top: 40px;
+	}
+}
+
+/* preview */
+
+.subhead {
+	padding-bottom: 0;
+	margin-bottom: 9px;
+}
+
+.subhead h1 {
+	font-size: 54px;
+}
+
+.subhead > div:first-child {
+	min-height: 200px;
+}
+
+/* subnav */
+
+section {
+	padding-top: 60px;	
+}
+ 
+.subnav {
+	margin-bottom: 60px;
+	width: 100%;
+	height: 36px;
+	background-color: #eeeeee; /* Old browsers */
+	background-repeat: repeat-x; /* Repeat the gradient */
+	background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
+	background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
+	background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
+	background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
+	background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
+	border: 1px solid #e5e5e5;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+ 
+.subnav .nav {
+	margin-bottom: 0;
+}
+ 
+.subnav .nav > li > a {
+	margin: 0;
+	padding-top:    11px;
+	padding-bottom: 11px;
+	border-left: 1px solid #f5f5f5;
+	border-right: 1px solid #e5e5e5;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	border-radius: 0;
+}
+ 
+.subnav .nav > .active > a,
+.subnav .nav > .active > a:hover {
+	padding-left: 13px;
+	color: #777;
+	background-color: #e9e9e9;
+	border-right-color: #ddd;
+	border-left: 0;
+	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+	-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+	box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+}
+ 
+.subnav .nav > .active > a .caret,
+.subnav .nav > .active > a:hover .caret {
+	border-top-color: #777;
+}
+ 
+.subnav .nav > li:first-child > a,
+.subnav .nav > li:first-child > a:hover {
+	border-left: 0;
+	padding-left: 12px;
+	-webkit-border-radius: 4px 0 0 4px;
+	-moz-border-radius: 4px 0 0 4px;
+	border-radius: 4px 0 0 4px;
+}
+ 
+.subnav .nav > li:last-child > a {
+	border-right: 0;
+}
+ 
+.subnav .dropdown-menu {
+	-webkit-border-radius: 0 0 4px 4px;
+	-moz-border-radius: 0 0 4px 4px;
+	border-radius: 0 0 4px 4px;
+}
+ 
+@media (max-width: 767px) {
+ 
 	.subnav {
 		position: static;
 		top: auto;
@@ -325,53 +377,32 @@ body .one .bsa_it_p {
 		-moz-box-shadow: none;
 		box-shadow: none;
 	}
-
+ 
 	.subnav .nav > li {
 		float: none;
 	}
-
+ 
 	.subnav .nav > li > a {
 		border: 0;
 	}
-
+ 
 	.subnav .nav > li + li > a {
 		border-top: 1px solid #e5e5e5;
 	}
-
+ 
 	.subnav .nav > li:first-child > a,
 	.subnav .nav > li:first-child > a:hover {
 		-webkit-border-radius: 4px 4px 0 0;
 		-moz-border-radius: 4px 4px 0 0;
 		border-radius: 4px 4px 0 0;
 	}
-
-	.bsa {
-		float: none;
-	}
 }
-
-/* Portrait tablet to landscape and desktop */
-@media (min-width: 768px) and (max-width: 979px) {
-
-	.hero-unit {
-		margin-top: 0;
-	}
-
-	.thumbnail p {
-		font-size: 12px;
-	}
-
-	.thumbnail .btn {
-		padding: 8px 12px;
-		font-size: 12px;
-	}
-}
-
-/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
+ 
 @media (min-width: 980px) {
+  
 	.subnav-fixed {
 		position: fixed;
-		top: 41px;
+		top: 40px;
 		left: 0;
 		right: 0;
 		z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
@@ -385,11 +416,13 @@ body .one .bsa_it_p {
 		box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
 	}
+  
 	.subnav-fixed .nav {
 		width: 938px;
 		margin: 0 auto;
 		padding: 0 1px;
 	}
+  
 	.subnav .nav > li:first-child > a,
 	.subnav .nav > li:first-child > a:hover {
 		-webkit-border-radius: 0;
@@ -397,17 +430,9 @@ body .one .bsa_it_p {
 		border-radius: 0;
 	}
 }
-
-@media (min-width: 768px) and (max-width: 979px) {
-
-	/* Remove any padding from the body */
-	body {
-		padding-top: 0;
-	}
-}
-
+ 
 @media (min-width: 1210px) {
-
+ 
 	.subnav-fixed .nav {
 		width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
 	}
diff --git a/favicon.ico b/favicon.ico
index 0dc45c0c..7491e83e 100644
--- a/favicon.ico
+++ b/favicon.ico
diff --git a/index.html b/index.html
index b386632e..65334c7a 100644
--- a/index.html
+++ b/index.html
@@ -77,39 +77,36 @@
 		</div>
 	</div>
 
-	<div class="container">
-
-		<div class="row">
-			<div class="span12">
-				<div class="hero-unit">
-					<h1>Bootswatch</h1>
-					<p id="tagline">&nbsp;</p>
-
-					<div id="social">
-						<span>
-							<iframe id="gh-fork" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>
-							<iframe id="gh-star" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
-						</span>
-						<span>
-							<a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @thomashpark</a>
-							<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
-						</span>
-						<span>
-							<a class="btn rss-button" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a>
-						</span>
-					</div>
-				</div>
-
-			</div>
+	<div class="hero-unit">
+		<h1>Bootswatch</h1>
+		<p id="tagline">&nbsp;</p>
+
+		<div id="social">
+			<span>
+				<iframe id="gh-fork" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>
+				<iframe id="gh-star" src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
+			</span>
+			<span>
+				<a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @thomashpark</a>
+				<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://bootswatch.com" data-via="thomashpark">Tweet</a>
+			</span>
+			<span>
+				<a class="btn rss-button" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a>
+			</span>
 		</div>
 
 
-		<div class="row">
-			<div class="span12">
-				<div class="" id="ticker">
+		<div class="container">
+			<div class="row">
+				<div class="span12">
+					<div id="ticker">
+					</div>
 				</div>
 			</div>
 		</div>
+	</div>
+
+	<div class="container">
 
 
 		<div class="row about">
@@ -147,18 +144,11 @@
 
 		<div class="row">
 			<div class="span6 offset3">
-				<h3>Sponsor</h1>
 				<div class="thumbnail"><div id="bsap_1277971" class="bsarocks bsap_c466df00a3cd5ee8568b5c4983b6bb19"></div></div>
 			</div>
 		</div>
 
-		<div class="row">
-			<div class="span12">
-				<h3 id="gallery">Gallery</h3>
-			</div>
-		</div>
-
-		<div class="row">
+		<div class="row" id="gallery">
 
 			<div class="span4">
 				<div class="thumbnail">
@@ -526,7 +516,7 @@
 		$('#tagline').html(taglines[line]);
 
 		parseRSS('http://feeds.feedburner.com/bootswatch', function(d){
-			var h ='<strong>Recent updates:</strong> ';
+			var h ='<strong>Recent news:</strong> ';
 			for (var i = 0; i < 3; i++){
 				h = h + '<a href="' + d.entries[i].link + '" onclick="pageTracker._link(this.href); return false;">' + d.entries[i].title + '...</a>&nbsp;&nbsp;';
 			}