diff options
| -rw-r--r-- | css/bootswatch.css | 66 | ||||
| -rw-r--r-- | index.html | 78 |
2 files changed, 67 insertions, 77 deletions
diff --git a/css/bootswatch.css b/css/bootswatch.css index b2204dca..a0645198 100644 --- a/css/bootswatch.css +++ b/css/bootswatch.css @@ -2,10 +2,6 @@ body { padding-bottom: 20px; } -.navbar .nav > li > a { - color: #ccc; -} - .nav i { opacity: 0.5; } @@ -17,12 +13,12 @@ body { .tooltip-inner { max-width: 500px; } - + .alert a { font-weight: bold; text-decoration: underline; } - + .alert p { margin: 0; } @@ -30,13 +26,8 @@ body { .hero-unit { margin-top: 60px; margin-bottom: 60px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } -.hero-unit, .thumbnail { - background-color: #e3e3e3; -} - .hero-unit h1, .hero-unit p { text-align: center; margin-bottom: 15px; @@ -45,11 +36,11 @@ body { #social { margin-top: 45px; } - + .twitter-follow-button { width: 160px !important; } - + .rss-button { width: 40px; height: 14px; @@ -69,26 +60,26 @@ body { .icon-envelope { opacity: .65; } - + .about { margin-top: 20px; } - + .about h3 { margin: 0 0 5px 35px; } - + .about img { float: left; - opacity: 0.8; + opacity: 0.6; } - + #gallery { margin: 45px 0 30px 0; padding-right: 20px; text-align: center; } - + .thumbnail img { max-width: 100%; -webkit-border-radius: 7px; @@ -98,7 +89,7 @@ body { .thumbnail .label { vertical-align: top; -} +} .thumbnail p { max-width: 352px; @@ -126,37 +117,37 @@ body { /* Landscape phones and down */ @media (max-width: 480px) { - + body, .navbar { margin: 0; } - + body { padding: 0; } - + .container { padding: 20px; } - + .span4 { width: 100%; } - + .hero-unit { padding: 40px 20px 80px; margin-bottom: 20px; } - + .hero-unit h1 { font-size: 36px; } - + .hero-unit p { font-size: 13px; line-height: 20px; } - + #social { margin-top: 0px; margin-bottom: 40px; @@ -165,25 +156,25 @@ body { .about { margin-top: -10px; } - + .about h3 { margin-top: 20px; } - + } - + /* Landscape phone to portrait tablet */ @media (max-width: 767px) { - + .hero-unit { margin-top: 0; padding-bottom: 80px; } } - + /* Portrait tablet to landscape and desktop */ -@media (min-width: 768px) and (max-width: 980px) { +@media (min-width: 768px) and (max-width: 980px) { .hero-unit { margin-top: 0; @@ -192,12 +183,11 @@ body { .thumbnail .btn { font-size: 11px; } - + } - + /* Large desktop */ @media (min-width: 1200px) { - + } -
\ No newline at end of file @@ -32,7 +32,7 @@ })(); </script> - + </head> <body> @@ -46,7 +46,7 @@ </a> <a class="brand" href="./">Bootswatch</a> <div class="nav-collapse"> - + </div><!--/.nav-collapse --> </div> </div> @@ -59,11 +59,11 @@ <div class="hero-unit"> <h1>Bootswatch</h1> <p id="tagline"> </p> - + <div id="social"> <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> + <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 twitter"> <a href="https://twitter.com/thomashpark" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @thomashpark</a> @@ -72,45 +72,45 @@ <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> - </div> + </div> </div> <!-- Example row of columns --> <div class="row about"> <div class="span4"> - <img src="img/glyphicons_036_file.png"> + <img class="glyph" src="img/glyphicons_036_file.png"> <h3>Easy to Install</h3> <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p> </div> <div class="span4"> - <img src="img/glyphicons_341_github.png"> + <img class="glyph" src="img/glyphicons_341_github.png"> <h3>Open Source</h3> <p>Licensed under Apache 2.0 and maintained by the community on <a target="_blank" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p> </div> <div class="span4"> - <img src="img/glyphicons_280_settings.png"> + <img class="glyph" src="img/glyphicons_280_settings.png"> <h3>Tuned for 2.0.3</h3> <p>Swatches are built for and tested with the latest version of Bootstrap. <a target="_blank" href="https://github.com/thomaspark/bootswatch/downloads">Older versions</a> are also available for download.</p> </div> - </div> + </div> <div class="row about"> <div class="span4"> - <img src="img/glyphicons_023_cogwheels.png"> + <img class="glyph" src="img/glyphicons_023_cogwheels.png"> <h3>Modular</h3> <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p> </div> <div class="span4"> - <img src="img/glyphicons_265_electrical_plug.png"> + <img class="glyph" src="img/glyphicons_265_electrical_plug.png"> <h3>Get Plugged In</h3> <p>An <a data-toggle="modal" href="#modal-api">API</a> is available for integrating your platform with Bootswatch.</p> </div> <div class="span4"> - <img src="img/glyphicons_032_wifi_alt.png"> + <img class="glyph" src="img/glyphicons_032_wifi_alt.png"> <h3>Stay Updated</h3> <p>Be notified when new swatches are released by subscribing via <a href="http://feeds.feedburner.com/bootswatch">RSS feed</a>, <a href="http://feedburner.google.com/fb/a/mailverify?uri=bootswatch&loc=en_US">email</a>, or <a href="http://bootswatch.tumblr.com/">Tumblr</a>.</p> </div> </div> - + <div class="modal hide fade" id="modal-api"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> @@ -128,8 +128,8 @@ <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Close</a> </div> - </div> - + </div> + <div class="row"> <div class="span12"> <h1 id="gallery">Gallery</h1> @@ -151,7 +151,7 @@ </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> - <li><a target="_blank" href="amelia/bootstrap.min.css" + <li><a target="_blank" href="amelia/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.min.css']);">bootstrap.min.css</a></li> <li><a target="_blank" href="amelia/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'amelia', 'bootstrap.css']);">bootstrap.css</a></li> @@ -185,7 +185,7 @@ </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> - <li><a target="_blank" href="cerulean/bootstrap.min.css" + <li><a target="_blank" href="cerulean/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.min.css']);">bootstrap.min.css</a></li> <li><a target="_blank" href="cerulean/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cerulean', 'bootstrap.css']);">bootstrap.css</a></li> @@ -218,7 +218,7 @@ </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> - <li><a target="_blank" href="cyborg/bootstrap.min.css" + <li><a target="_blank" href="cyborg/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.min.css']);">bootstrap.min.css</a></li> <li><a target="_blank" href="cyborg/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'cyborg', 'bootstrap.css']);">bootstrap.css</a></li> @@ -251,7 +251,7 @@ </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> - <li><a target="_blank" href="journal/bootstrap.min.css" + <li><a target="_blank" href="journal/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.min.css']);">bootstrap.min.css</a></li> <li><a target="_blank" href="journal/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'journal', 'bootstrap.css']);">bootstrap.css</a></li> @@ -265,9 +265,9 @@ </div> </div> </div> - - - + + + <li class="span4"> <div class="thumbnail"> @@ -285,7 +285,7 @@ </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> - <li><a target="_blank" href="readable/bootstrap.min.css" + <li><a target="_blank" href="readable/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.min.css']);">bootstrap.min.css</a></li> <li><a target="_blank" href="readable/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'readable', 'bootstrap.css']);">bootstrap.css</a></li> @@ -301,7 +301,7 @@ </div> </li> - + <li class="span4"> <div class="thumbnail"> <a href="simplex"><img src="simplex/thumbnail.png" alt=""></a> @@ -333,7 +333,7 @@ </div> </div> </li> - + <li class="span4"> <div class="thumbnail"> @@ -351,7 +351,7 @@ </a> <ul class="dropdown-menu"> <!-- dropdown menu links --> - <li><a target="_blank" href="slate/bootstrap.min.css" + <li><a target="_blank" href="slate/bootstrap.min.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.min.css']);">bootstrap.min.css</a></li> <li><a target="_blank" href="slate/bootstrap.css" onClick="_gaq.push(['_trackEvent', 'bootswatch', 'slate', 'bootstrap.css']);">bootstrap.css</a></li> @@ -367,7 +367,7 @@ </div> </li> - + <li class="span4"> <div class="thumbnail"> <a href="spacelab"><img src="spacelab/thumbnail.png" alt=""></a> @@ -399,9 +399,9 @@ </div> </div> </li> - - + + <li class="span4"> <div class="thumbnail"> <a href="spruce"><img src="spruce/thumbnail.png" alt=""></a> @@ -467,7 +467,7 @@ </div> </li> - + <li class="span4"> <div class="thumbnail"> <a href="united"><img src="united/thumbnail.png" alt=""></a> @@ -516,7 +516,7 @@ </div> </li> - + </ul> </div> </div> <!-- end row--> @@ -543,7 +543,7 @@ </div> </div> - + <div class="row" style="padding-top: 30px;"> <div class="span12"> <h1 id="gallery">Support</h1> @@ -552,7 +552,7 @@ <h3>Swatches will always be free.</h3> <p>But if you find them useful, you can show your love by linking back to Bootswatch or buying one of these fantastic products.</p> </div> - + <li class="span3"> <div class="thumbnail"> <a onClick="_gaq.push(['_trackEvent', 'refs', 'mac', 'transmit']);" 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%2Ftransmit%2Fid403388562%3Fmt%3D12" target="new"><img src="img/refs/transmit.png" alt=""></a> @@ -566,8 +566,8 @@ </div> </div> </li> - - + + <li class="span3"> <div class="thumbnail"> <a onClick="_gaq.push(['_trackEvent', 'refs', 'mac', 'pixelmator']);" 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> @@ -581,7 +581,7 @@ </div> </div> </li> - + <li class="span3"> <div class="thumbnail"> @@ -596,7 +596,7 @@ </div> </div> </li> - + <li class="span3"> <div class="thumbnail"> <a onClick="_gaq.push(['_trackEvent', 'refs', 'amazon', 'htmlandcss']);" href="http://www.amazon.com/gp/product/1118008189/ref=as_li_tf_tl?ie=UTF8&tag=bootswatch-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=1118008189" target="new"><img src="img/refs/htmlandcss.png" alt=""></a> @@ -610,7 +610,7 @@ </div> </div> </li> - + <li class="span3"> <div class="thumbnail"> @@ -660,7 +660,7 @@ </ul> </div> </div> <!-- end row--> - + <hr> |