index: restyle hero-unit and social buttons

2 files changed, 53 insertions, 25 deletions

diff --git a/css/bootswatch.css b/css/bootswatch.css
index 4817b168..52ebedea 100644
--- a/css/bootswatch.css
+++ b/css/bootswatch.css
@@ -100,20 +100,35 @@ section {
 
 .hero-unit {
 	margin-bottom: 10px;
+	text-align: center;
 }
 
 .hero-unit h1,
 .hero-unit p {
-	text-align: center;
 	margin-bottom: 15px;
 }
 
 #social {
+	display: inline-block;
 	margin-top: 45px;
+	text-align: center;
+}
+
+
+#gh-star {
+	margin-right: -15px;
+}
+
+#gh-fork {
+	margin-right: 25px;
 }
 
 .twitter-follow-button {
-	width: 150px !important;
+	width: 60px !important;
+}
+
+.twitter-share-button  {
+	margin-right: 15px;
 }
 
 .rss-button {
@@ -122,7 +137,7 @@ section {
 	font-size: 11px;
 	line-height: 14px;
 	font-weight: bold;
-	margin: 0;
+	margin: 0 0 10px;
 	padding: 2px 5px 2px 4px;
 }
 
@@ -244,7 +259,7 @@ body .one .bsa_it_p {
 @media (max-width: 480px) {
 
 	.hero-unit {
-		padding: 40px 20px 10px;
+		padding: 20px 20px 0;
 		margin: 0 0 20px;
 	}
 
@@ -252,14 +267,17 @@ body .one .bsa_it_p {
 		font-size: 36px;
 	}
 
-	.hero-unit p {
-		font-size: 13px;
-		line-height: 18px;
+	.hero-unit iframe {
+		margin-right: 0 !important;
 	}
 
 	#social {
 		margin-top: 0px;
-		margin-bottom: 40px;
+		margin-bottom: 20px;
+	}
+
+	#social > span {
+		display: block;
 	}
 
 	.about {
@@ -285,7 +303,7 @@ body .one .bsa_it_p {
 
 	.hero-unit {
 		margin-top: 0;
-		padding-bottom: 60px;
+		padding: 30px;
 	}
 
 	.about {
@@ -342,8 +360,13 @@ body .one .bsa_it_p {
 		margin-top: 0;
 	}
 
+	.thumbnail p {
+		font-size: 12px;
+	}
+
 	.thumbnail .btn {
-		font-size: 11px;
+		padding: 8px 12px;
+		font-size: 12px;
 	}
 }
 
diff --git a/index.html b/index.html
index eb0f509f..915cdf8f 100644
--- a/index.html
+++ b/index.html
@@ -79,22 +79,27 @@
 
 	<div class="container">
 
-		<div class="hero-unit">
-			<h1>Bootswatch</h1>
-			<p id="tagline">&nbsp;</p>
-
-			<div id="social">
-				<div class="span4 github">
-					<iframe 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>
-					<iframe src="http://ghbtns.com/github-btn.html?user=thomaspark&repo=bootswatch&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="53px" height="20px"></iframe>
-				</div>
-				<div class="span4 twitter">
-					<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 rss">
-					<a class="btn rss-button" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a>
+		<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-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>
+							<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>
+						</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>