diff options
| author | Thomas Park <thomas@thomaspark.me> | 2012-03-12 14:40:45 -0400 |
|---|---|---|
| committer | Thomas Park <thomas@thomaspark.me> | 2012-03-12 14:40:45 -0400 |
| commit | b33227b3d4ef98b86c0cf91f2d31f4a85019baa0 (patch) | |
| tree | f3b26e3911409a3a7481e0d5f1372e21eb4a4145 | |
| parent | 64a9e2f2658555d0d4bef31a644ed96040b01055 (diff) | |
index: get responsive working on ios
| -rw-r--r-- | css/bootswatch.css | 48 | ||||
| -rw-r--r-- | index.html | 9 |
2 files changed, 26 insertions, 31 deletions
diff --git a/css/bootswatch.css b/css/bootswatch.css index d6a28918..6af6d928 100644 --- a/css/bootswatch.css +++ b/css/bootswatch.css @@ -1,5 +1,4 @@ body { - padding-top: 60px; padding-bottom: 20px; } @@ -29,8 +28,9 @@ body { } .hero-unit { - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + margin-top: 60px; margin-bottom: 60px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .hero-unit, .thumbnail { @@ -50,7 +50,7 @@ body { width: 160px !important; } -.rss { +.rss-button { width: 40px; height: 14px; font-size: 11px; @@ -115,12 +115,18 @@ body { /* Landscape phones and down */ @media (max-width: 480px) { - body { - padding-top: 0px; + .hero-unit { + padding: 40px 20px 80px; + margin-top: 0; + margin-bottom: 20px; + } + + .hero-unit h1 { + font-size: 36px; } - .hero-unit { - padding-bottom: 120px; + .hero-unit p { + font-size: 13px; } .about { @@ -132,42 +138,30 @@ body { } .span4 { - width: 95%; + width: 85%; } } /* Landscape phone to portrait tablet */ @media (max-width: 768px) { - body { - padding-top: 0px; + .about, .thumbnails { + margin-left: 0; } .hero-unit { - padding-bottom: 100px; - } - - .about { - margin-top: -10px; - } - - .about h3 { - margin-top: 20px; - } - - .span4 { - width: 95%; + margin-top: 0; + padding-bottom: 80px; } } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 980px) { - body { - padding-top: 0px; - } - + .hero-unit { + margin-top: 0; + } } /* Large desktop */ @@ -2,6 +2,7 @@ <html lang="en"> <head> <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootswatch: Free themes for Twitter Bootstrap</title> <!-- Le HTML5 shim, for IE6-8 support of HTML elements --> @@ -60,16 +61,16 @@ <p>Add color to your <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a> site without touching a color picker.</p> <div id="social"> - <div class="span2 offset1"> + <div class="span4 github"> <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 offset1"> + <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 offset1"> - <a class="btn rss" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a> + <div class="span2 rss"> + <a class="btn rss-button" href="http://feeds.feedburner.com/bootswatch"><i class="icon-rss"></i><span>RSS</span></a> </div> </div> </div> |