From 71617ebaececa563256796fe73924cbf21df8a0a Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Wed, 20 Feb 2013 00:12:38 -0500 Subject: swatchmaker: update styles, fix modal and popover, add smoothscroll, fix path to icos --- swatchmaker/test/bootswatch.css | 323 ++++++++-------------------------------- swatchmaker/test/bootswatch.js | 94 ++++++++++++ swatchmaker/test/test-full.html | 81 +++++----- swatchmaker/test/test.html | 6 +- 4 files changed, 198 insertions(+), 306 deletions(-) create mode 100644 swatchmaker/test/bootswatch.js (limited to 'swatchmaker') diff --git a/swatchmaker/test/bootswatch.css b/swatchmaker/test/bootswatch.css index e7aaca6f..2a69cbb7 100644 --- a/swatchmaker/test/bootswatch.css +++ b/swatchmaker/test/bootswatch.css @@ -1,20 +1,44 @@ -body { - padding-top: 80px; - padding-bottom: 20px; +section { + margin-top: 60px; + padding-top: 100px; } -.navbar a > i { - opacity: 0.5; +/* index */ + +.tooltip-inner { + max-width: 500px; } -.navbar a:hover > i { - opacity: 1; +.hero-unit h1, +.hero-unit p { + margin-bottom: 15px; } -section { - margin-top: 100px; +#footer { + margin-bottom: 20px; +} + +#footer .links a { + margin-right: 10px; +} + +@media (max-width: 767px) { + + + section { + padding-top: 20px; + } +} + +@media (max-width: 979px) and (min-width: 768px) { + + section { + padding-top: 20px; + } } +/* preview */ + .subhead { padding-bottom: 0; margin-bottom: 9px; @@ -24,6 +48,12 @@ section { font-size: 54px; } +.subhead > div:first-child { + min-height: 200px; +} + +/* subnav */ + .subnav { margin-bottom: 60px; width: 100%; @@ -42,11 +72,11 @@ section { -moz-border-radius: 4px; border-radius: 4px; } - + .subnav .nav { margin-bottom: 0; } - + .subnav .nav > li > a { margin: 0; padding-top: 11px; @@ -57,7 +87,7 @@ section { -moz-border-radius: 0; border-radius: 0; } - + .subnav .nav > .active > a, .subnav .nav > .active > a:hover { padding-left: 13px; @@ -69,12 +99,12 @@ section { -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; @@ -83,227 +113,19 @@ section { -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; } - -.tooltip-inner { - max-width: 500px; -} - -.hero-unit { - margin-bottom: 10px; - text-align: center; -} - -.hero-unit h1, -.hero-unit p { - margin-bottom: 15px; -} - -#social { - display: inline-block; - margin-top: 45px; - text-align: center; -} - -#gh-star { - margin-right: 10px; -} - -.twitter-follow-button { - width: 60px !important; -} - -.twitter-share-button { - margin-right: 15px; -} - -.rss-button { - width: 40px; - height: 14px; - font-size: 11px; - line-height: 14px; - font-weight: bold; - margin: 0 0 10px; - padding: 2px 5px 2px 4px; -} - -.icon-rss { - background: url(../img/rss-icons.png) no-repeat 0 0; - opacity: .65; - width: 16px; -} - -#ticker { - margin-bottom: 40px; -} - -.about { - margin-top: 20px; -} - -.about > div { - margin-bottom: 20px; -} - -.about h3 { - margin: 0 0 5px 35px; -} - -.about img { - float: left; - margin-top: 5px; - opacity: 0.7; -} - -#gallery { - margin: 45px 0 30px 0; - padding-right: 20px; - text-align: center; -} - -.thumbnail { - margin-bottom: 20px; - background-color: rgba(0, 0, 0, 0.05); -} - -.thumbnail img { - width: 100%; - -webkit-border-radius: 7px; - -moz-border-radius: 7px; - border-radius: 7px; -} - -.thumbnail .caption { - color: inherit !important; -} - -.thumbnail h3 { - margin-bottom: 0; -} - -.thumbnail .btn-toolbar { - margin-top: 15px; - text-align: right; -} - -.links { - margin-bottom: 20px; -} - -.links > a { - margin-right: 10px; -} - -div.one .bsa_it_ad { - padding: 25px 25px 15px 25px; -} - -div.one .bsa_it_p { - display: none; -} - -.bsa { - float: right; - max-width: 400px; - padding: 0; -} - -body .one .bsa_it_ad { - margin-bottom: -10px; - background: none; - border: none; - font-family: inherit; - color: inherit; -} - -body .one .bsa_it_ad .bsa_it_t, -body .one .bsa_it_ad .bsa_it_d { - color: inherit; - font-size: inherit; -} - -body .one .bsa_it_p { - display: none; -} - -.links { - margin-bottom: 20px; -} - -.links > a { - margin-right: 10px; -} - -@media (max-width: 480px) { - - .hero-unit { - padding: 20px 20px 0; - margin: 0 0 20px; - } - - .hero-unit h1 { - font-size: 36px; - } - - .hero-unit iframe { - margin-right: 0 !important; - } - - #social { - margin-top: 0px; - margin-bottom: 20px; - } - - #social > span { - display: block; - } - - .about { - margin-top: 0; - } - - .about h3 { - margin-top: 20px; - } - - .about p { - margin-bottom: 0; - } - - .modal { - position: fixed !important; - top: 25% !important; - } -} - -/* Landscape phone to portrait tablet */ -@media (min-width: 481px) and (max-width: 767px) { - - .hero-unit { - margin-top: 0; - padding: 30px; - } - - .about { - margin-top: 0; - } -} - + @media (max-width: 767px) { - - body { - padding-top: 0; - } - + .subnav { position: static; top: auto; @@ -315,53 +137,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 */ @@ -375,11 +176,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; @@ -387,17 +190,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/swatchmaker/test/bootswatch.js b/swatchmaker/test/bootswatch.js new file mode 100644 index 00000000..71eba460 --- /dev/null +++ b/swatchmaker/test/bootswatch.js @@ -0,0 +1,94 @@ +// tooltips + +$('a[rel=tooltip]').tooltip({ + 'placement': 'bottom' +}); + +// smooth scroll + +$(document).ready(function() { + function filterPath(string) { + return string + .replace(/^\//,'') + .replace(/(index|default).[a-zA-Z]{3,4}$/,'') + .replace(/\/$/,''); + } + var locationPath = filterPath(location.pathname); + var scrollElem = scrollableElement('html', 'body'); + + $('a[href^=#]').each(function() { + var thisPath = filterPath(this.pathname) || locationPath; + if ( locationPath == thisPath + && (location.hostname == this.hostname || !this.hostname) + && this.hash.replace(/#/,'') ) { + var $target = $(this.hash), target = this.hash; + if (target) { + var targetOffset = $target.offset().top; + $(this).click(function(event) { + event.preventDefault(); + $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { + location.hash = target; + }); + }); + } + } + }); + + // use the first element that is "scrollable" + function scrollableElement(els) { + for (var i = 0, argLength = arguments.length; i 0) { + return el; + } else { + $scrollElement.scrollTop(1); + var isScrollable = $scrollElement.scrollTop()> 0; + $scrollElement.scrollTop(0); + if (isScrollable) { + return el; + } + } + } + return []; + } + +}); + +// subnav + +(function ($) { + + $(function(){ + + // fix sub nav on scroll + var $win = $(window), + $body = $('body'), + $nav = $('.subnav'), + navHeight = $('.navbar').first().height(), + subnavHeight = $('.subnav').first().height(), + subnavTop = $('.subnav').length && $('.subnav').offset().top - navHeight, + marginTop = parseInt($body.css('margin-top'), 10); + isFixed = 0; + + processScroll(); + + $win.on('scroll', processScroll); + + function processScroll() { + var i, scrollTop = $win.scrollTop(); + + if (scrollTop >= subnavTop && !isFixed) { + isFixed = 1; + $nav.addClass('subnav-fixed'); + $body.css('margin-top', marginTop + subnavHeight + 'px'); + } else if (scrollTop <= subnavTop && isFixed) { + isFixed = 0; + $nav.removeClass('subnav-fixed'); + $body.css('margin-top', marginTop + 'px'); + } + } + + }); + +})(window.jQuery); \ No newline at end of file diff --git a/swatchmaker/test/test-full.html b/swatchmaker/test/test-full.html index bb442964..333c74ca 100755 --- a/swatchmaker/test/test-full.html +++ b/swatchmaker/test/test-full.html @@ -33,15 +33,15 @@ - - - - - + + + + + - + @@ -93,35 +93,6 @@ - - - -
@@ -2410,7 +2381,7 @@
- Click to toggle popover + Click to toggle popover
@@ -2428,7 +2399,7 @@ ================================================== --> + + @@ -2460,14 +2458,19 @@ - + - diff --git a/swatchmaker/test/test.html b/swatchmaker/test/test.html index 1ab58e36..25a3f05d 100755 --- a/swatchmaker/test/test.html +++ b/swatchmaker/test/test.html @@ -18,7 +18,7 @@ - + @@ -848,7 +848,7 @@ @@ -873,7 +873,7 @@ - + -- cgit v1.2.3