diff options
| -rw-r--r-- | css/bootswatch.css | 307 | ||||
| -rw-r--r-- | favicon.ico | bin | 465 -> 1150 bytes | |||
| -rw-r--r-- | index.html | 62 |
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 Binary files differindex 0dc45c0c..7491e83e 100644 --- a/favicon.ico +++ b/favicon.ico @@ -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"> </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"> </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> '; } |