index: restyle hero-unit and social buttons

diff --git a/css/bootswatch.css b/css/bootswatch.css
index 4817b16..52ebede 100644 (file)
--- 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 eb0f509..915cdf8 100644 (file)
--- 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>