├── README.md ├── css ├── component.css └── default.css ├── fonts ├── bpicons │ ├── bpicons.eot │ ├── bpicons.svg │ ├── bpicons.ttf │ ├── bpicons.woff │ └── license.txt └── fontawesome │ ├── Read Me.txt │ ├── fontawesome.dev.svg │ ├── fontawesome.eot │ ├── fontawesome.svg │ ├── fontawesome.ttf │ ├── fontawesome.woff │ └── license.txt ├── images ├── 1.png ├── 10.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png └── 9.png ├── index.html └── js ├── cbpViewModeSwitch.js ├── classie.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | View Mode Switch 3 | ========= 4 | A simple view mode switch that has two example layouts, a grid and a list. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=15656) 7 | 8 | [demo](http://tympanus.net/Blueprints/ViewModeSwitch/) 9 | 10 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'fontawesome'; 3 | src:url('../fonts/fontawesome/fontawesome.eot'); 4 | src:url('../fonts/fontawesome/fontawesome.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/fontawesome/fontawesome.woff') format('woff'), 6 | url('../fonts/fontawesome/fontawesome.ttf') format('truetype'), 7 | url('../fonts/fontawesome/fontawesome.svg#fontawesome') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | /* Main container */ 13 | .cbp-vm-switcher { 14 | padding: 20px; 15 | border: 3px solid #47a3da; 16 | } 17 | 18 | /* options/select wrapper with switch anchors */ 19 | .cbp-vm-options { 20 | text-align: right; 21 | padding-bottom: 10px; 22 | border-bottom: 3px solid #47a3da; 23 | } 24 | 25 | .cbp-vm-options a { 26 | display: inline-block; 27 | width: 40px; 28 | height: 40px; 29 | overflow: hidden; 30 | white-space: nowrap; 31 | color: #d0d0d0; 32 | margin: 2px; 33 | } 34 | 35 | .cbp-vm-options a:hover, 36 | .cbp-vm-options a.cbp-vm-selected { 37 | color: #47a3da; 38 | } 39 | 40 | .cbp-vm-options a:before { 41 | width: 40px; 42 | height: 40px; 43 | line-height: 40px; 44 | font-size: 30px; 45 | text-align: center; 46 | display: inline-block; 47 | } 48 | 49 | /* General style of switch items' list */ 50 | 51 | .cbp-vm-switcher ul { 52 | list-style: none; 53 | padding: 0; 54 | margin: 0; 55 | } 56 | 57 | /* Clear eventual floats */ 58 | .cbp-vm-switcher ul:before, 59 | .cbp-vm-switcher ul:after { 60 | content: " "; 61 | display: table; 62 | } 63 | 64 | .cbp-vm-switcher ul:after { 65 | clear: both; 66 | } 67 | 68 | .cbp-vm-switcher ul li { 69 | display: block; 70 | position: relative; 71 | } 72 | 73 | .cbp-vm-image { 74 | display: block; 75 | margin: 0 auto; 76 | } 77 | 78 | .cbp-vm-image img { 79 | display: inline-block; 80 | max-width: 100%; 81 | border: none; 82 | } 83 | 84 | .cbp-vm-title { 85 | margin: 0; 86 | padding: 0; 87 | } 88 | 89 | .cbp-vm-price { 90 | color: #c0c0c0; 91 | } 92 | 93 | .cbp-vm-add { 94 | color: #fff; 95 | background: #47a3da; 96 | padding: 10px 20px; 97 | border-radius: 2px; 98 | margin: 20px 0 0; 99 | display: inline-block; 100 | transition: background 0.2s; 101 | } 102 | 103 | .cbp-vm-add:hover { 104 | color: #fff; 105 | background: #02639d; 106 | } 107 | 108 | .cbp-vm-add:before { 109 | margin-right: 5px; 110 | } 111 | 112 | /* Common icon styles */ 113 | .cbp-vm-icon:before { 114 | font-family: 'fontawesome'; 115 | speak: none; 116 | font-style: normal; 117 | font-weight: normal; 118 | font-variant: normal; 119 | text-transform: none; 120 | line-height: 1; 121 | -webkit-font-smoothing: antialiased; 122 | } 123 | 124 | .cbp-vm-grid:before { 125 | content: "\f00a"; 126 | } 127 | 128 | .cbp-vm-list:before { 129 | content: "\f00b"; 130 | } 131 | 132 | .cbp-vm-add:before { 133 | content: "\f055"; 134 | } 135 | 136 | /* Individual view mode styles */ 137 | 138 | /* Large grid view */ 139 | .cbp-vm-view-grid ul { 140 | text-align: center; 141 | } 142 | 143 | .cbp-vm-view-grid ul li { 144 | width: 33%; 145 | text-align: center; 146 | padding: 25px; 147 | margin: 20px 0 0; 148 | display: inline-block; 149 | min-height: 420px; 150 | vertical-align: top; 151 | } 152 | 153 | .cbp-vm-view-grid .cbp-vm-title { 154 | font-size: 2em; 155 | } 156 | 157 | .cbp-vm-view-grid .cbp-vm-details { 158 | max-width: 300px; 159 | min-height: 70px; 160 | margin: 0 auto; 161 | } 162 | 163 | .cbp-vm-view-grid .cbp-vm-price { 164 | margin: 10px 0; 165 | font-size: 1.5em; 166 | } 167 | 168 | 169 | /* List view */ 170 | .cbp-vm-view-list li { 171 | padding: 20px 0; 172 | white-space: nowrap; 173 | } 174 | 175 | .cbp-vm-view-list .cbp-vm-image, 176 | .cbp-vm-view-list .cbp-vm-title, 177 | .cbp-vm-view-list .cbp-vm-details, 178 | .cbp-vm-view-list .cbp-vm-price, 179 | .cbp-vm-view-list .cbp-vm-add { 180 | display: inline-block; 181 | vertical-align: middle; 182 | } 183 | 184 | .cbp-vm-view-list .cbp-vm-image { 185 | width: 10%; 186 | } 187 | 188 | .cbp-vm-view-list .cbp-vm-title { 189 | font-size: 1.3em; 190 | padding: 0 10px; 191 | white-space: normal; 192 | width: 23%; 193 | } 194 | 195 | .cbp-vm-view-list .cbp-vm-price { 196 | font-size: 1.3em; 197 | width: 10%; 198 | } 199 | 200 | .cbp-vm-view-list .cbp-vm-details { 201 | width: 40%; 202 | padding: 0 15px; 203 | overflow: hidden; 204 | white-space: normal; 205 | } 206 | 207 | .cbp-vm-view-list .cbp-vm-add { 208 | margin: 0; 209 | } 210 | 211 | @media screen and (max-width: 66.7em) { 212 | .cbp-vm-view-list .cbp-vm-details { 213 | width: 30%; 214 | } 215 | } 216 | 217 | @media screen and (max-width: 57em) { 218 | .cbp-vm-view-grid ul li { 219 | width: 49%; 220 | } 221 | } 222 | 223 | @media screen and (max-width: 47.375em) { 224 | .cbp-vm-view-list .cbp-vm-image { 225 | width: 20%; 226 | } 227 | 228 | .cbp-vm-view-list .cbp-vm-title { 229 | width: auto; 230 | } 231 | 232 | .cbp-vm-view-list .cbp-vm-details { 233 | display: block; 234 | width: 100%; 235 | margin: 10px 0; 236 | } 237 | 238 | .cbp-vm-view-list .cbp-vm-add { 239 | margin: 10px; 240 | } 241 | } 242 | 243 | @media screen and (max-width: 40.125em) { 244 | .cbp-vm-view-grid ul li { 245 | width: 100%; 246 | } 247 | } 248 | 249 | -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Blueprint Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | @font-face { 4 | font-family: 'bpicons'; 5 | src:url('../fonts/bpicons/bpicons.eot'); 6 | src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/bpicons/bpicons.woff') format('woff'), 8 | url('../fonts/bpicons/bpicons.ttf') format('truetype'), 9 | url('../fonts/bpicons/bpicons.svg#bpicons') format('svg'); 10 | font-weight: normal; 11 | font-style: normal; 12 | } /* Made with http://icomoon.io/ */ 13 | 14 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 15 | body, html { font-size: 100%; padding: 0; margin: 0;} 16 | 17 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 18 | .clearfix:before, .clearfix:after { content: " "; display: table; } 19 | .clearfix:after { clear: both; } 20 | 21 | body { 22 | font-family: 'Lato', Calibri, Arial, sans-serif; 23 | color: #47a3da; 24 | } 25 | 26 | a { 27 | color: #f0f0f0; 28 | text-decoration: none; 29 | } 30 | 31 | a:hover { 32 | color: #000; 33 | } 34 | 35 | .main, 36 | .container > header { 37 | width: 90%; 38 | max-width: 69em; 39 | margin: 0 auto; 40 | padding: 0 1.875em 3.125em 1.875em; 41 | } 42 | 43 | .container > header { 44 | padding: 2.875em 1.875em 1.875em; 45 | } 46 | 47 | .container > header h1 { 48 | font-size: 2.125em; 49 | line-height: 1.3; 50 | margin: 0 0 0.6em 0; 51 | float: left; 52 | font-weight: 400; 53 | } 54 | 55 | .container > header > span { 56 | display: block; 57 | position: relative; 58 | z-index: 9999; 59 | font-weight: 700; 60 | text-transform: uppercase; 61 | letter-spacing: 0.5em; 62 | padding: 0 0 0.6em 0.1em; 63 | } 64 | 65 | .container > header > span span:after { 66 | width: 30px; 67 | height: 30px; 68 | left: -12px; 69 | font-size: 50%; 70 | top: -8px; 71 | font-size: 75%; 72 | position: relative; 73 | } 74 | 75 | .container > header > span span:hover:before { 76 | content: attr(data-content); 77 | text-transform: none; 78 | text-indent: 0; 79 | letter-spacing: 0; 80 | font-weight: 300; 81 | font-size: 110%; 82 | padding: 0.8em 1em; 83 | line-height: 1.2; 84 | text-align: left; 85 | left: auto; 86 | margin-left: 4px; 87 | position: absolute; 88 | color: #fff; 89 | background: #47a3da; 90 | } 91 | 92 | .container > header nav { 93 | float: right; 94 | text-align: center; 95 | } 96 | 97 | .container > header nav a { 98 | display: inline-block; 99 | position: relative; 100 | text-align: left; 101 | width: 2.5em; 102 | height: 2.5em; 103 | background: #fff; 104 | border-radius: 50%; 105 | margin: 0 0.1em; 106 | border: 4px solid #47a3da; 107 | } 108 | 109 | .container > header nav a > span { 110 | display: none; 111 | } 112 | 113 | .container > header nav a:hover:before { 114 | content: attr(data-info); 115 | color: #47a3da; 116 | position: absolute; 117 | width: 600%; 118 | top: 120%; 119 | text-align: right; 120 | right: 0; 121 | pointer-events: none; 122 | } 123 | 124 | .container > header nav a:hover { 125 | background: #47a3da; 126 | } 127 | 128 | .bp-icon:after { 129 | font-family: 'bpicons'; 130 | speak: none; 131 | font-style: normal; 132 | font-weight: normal; 133 | font-variant: normal; 134 | text-transform: none; 135 | text-align: center; 136 | color: #47a3da; 137 | -webkit-font-smoothing: antialiased; 138 | } 139 | 140 | .container > header nav .bp-icon:after { 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | width: 100%; 145 | height: 100%; 146 | line-height: 2; 147 | text-indent: 0; 148 | } 149 | 150 | .container > header nav a:hover:after { 151 | color: #fff; 152 | } 153 | 154 | .bp-icon-next:after { 155 | content: "\e000"; 156 | } 157 | .bp-icon-drop:after { 158 | content: "\e001"; 159 | } 160 | .bp-icon-archive:after { 161 | content: "\e002"; 162 | } 163 | .bp-icon-about:after { 164 | content: "\e003"; 165 | } 166 | .bp-icon-prev:after { 167 | content: "\e004"; 168 | } 169 | 170 | @media screen and (max-width: 55em) { 171 | 172 | .container > header h1, 173 | .container > header nav { 174 | float: none; 175 | } 176 | 177 | .container > header > span, 178 | .container > header h1 { 179 | text-align: center; 180 | } 181 | 182 | .container > header nav { 183 | margin: 0 auto; 184 | } 185 | 186 | .container > header > span { 187 | text-indent: 30px; 188 | } 189 | } -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/fonts/bpicons/bpicons.eot -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/fonts/bpicons/bpicons.ttf -------------------------------------------------------------------------------- /fonts/bpicons/bpicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/fonts/bpicons/bpicons.woff -------------------------------------------------------------------------------- /fonts/bpicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/fontawesome/Read Me.txt: -------------------------------------------------------------------------------- 1 | To modify your generated font, use the *dev.svg* file, located in the *fonts* folder in this package. You can import this dev.svg file to the IcoMoon app. All the tags (class names) and the Unicode points of your glyphs are saved in this file. 2 | 3 | See the documentation for more info on how to use this package: http://icomoon.io/#docs/font-face -------------------------------------------------------------------------------- /fonts/fontawesome/fontawesome.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/fontawesome/fontawesome.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/fonts/fontawesome/fontawesome.eot -------------------------------------------------------------------------------- /fonts/fontawesome/fontawesome.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/fontawesome/fontawesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/fonts/fontawesome/fontawesome.ttf -------------------------------------------------------------------------------- /fonts/fontawesome/fontawesome.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/fonts/fontawesome/fontawesome.woff -------------------------------------------------------------------------------- /fonts/fontawesome/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL -------------------------------------------------------------------------------- /images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/1.png -------------------------------------------------------------------------------- /images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/10.png -------------------------------------------------------------------------------- /images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/2.png -------------------------------------------------------------------------------- /images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/3.png -------------------------------------------------------------------------------- /images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/4.png -------------------------------------------------------------------------------- /images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/5.png -------------------------------------------------------------------------------- /images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/6.png -------------------------------------------------------------------------------- /images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/7.png -------------------------------------------------------------------------------- /images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/8.png -------------------------------------------------------------------------------- /images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/ViewModeSwitch/906d66f4b12bfb2bd1aee6fe86f237013b789d42/images/9.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blueprint: View Mode Switch 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | Blueprint 20 |

View Mode Switch

21 | 27 |
28 |
29 |
30 |
31 | Grid View 32 | List View 33 |
34 |
    35 |
  • 36 | 37 |

    Silver beet

    38 |
    $19.90
    39 |
    40 | Silver beet shallot wakame tomatillo salsify mung bean beetroot groundnut. 41 |
    42 | Add to cart 43 |
    • 44 |
  • 45 | 46 |

    Wattle seed

    47 |
    $22.90
    48 |
    49 | Wattle seed bunya nuts spring onion okra garlic bitterleaf zucchini. 50 |
    51 | Add to cart 52 |
    • 53 |
  • 54 | 55 |

    Kohlrabi bok

    56 |
    $5.90
    57 |
    58 | Kohlrabi bok choy broccoli rabe welsh onion spring onion tatsoi ricebean kombu chard. 59 |
    60 | Add to cart 61 |
    • 62 |
  • 63 | 64 |

    Melon sierra

    65 |
    $12.90
    66 |
    67 | Melon sierra leone bologi carrot peanut salsify celery onion jícama summer purslane. 68 |
    69 | Add to cart 70 |
    • 71 |
  • 72 | 73 |

    Celery carrot

    74 |
    $15.00
    75 |
    76 | Celery carrot napa cabbage wakame zucchini celery chard beetroot jícama sierra leone. 77 |
    78 | Add to cart 79 |
    • 80 |
  • 81 | 82 |

    Catsear

    83 |
    $20.00
    84 |
    85 | Catsear cabbage tomato parsnip cucumber pea brussels sprout spring onion shallot swiss . 86 |
    87 | Add to cart 88 |
    • 89 |
  • 90 | 91 |

    Mung bean

    92 |
    $88.00
    93 |
    94 | Mung bean taro chicory spinach komatsuna fennel. 95 |
    96 | Add to cart 97 |
    • 98 |
  • 99 | 100 |

    Epazote

    101 |
    $34.90
    102 |
    103 | Epazote soko chickpea radicchio rutabaga desert raisin wattle seed coriander water. 104 |
    105 | Add to cart 106 |
    • 107 |
  • 108 | 109 |

    Tatsoi caulie

    110 |
    $21.50
    111 |
    112 | Tatsoi caulie broccoli rabe bush tomato fava bean beetroot epazote salad grape. 113 |
    114 | Add to cart 115 |
    • 116 |
  • 117 | 118 |

    Endive okra

    119 |
    $18.50
    120 |
    121 | Endive okra chard desert raisin prairie turnip cucumber maize avocado. 122 |
    123 | Add to cart 124 |
    • 125 |
  • 126 | 127 |

    Bush tomato

    128 |
    $9.00
    129 |
    130 | Bush tomato peanut shallot turnip prairie turnip gram desert raisin. 131 |
    132 | Add to cart 133 |
    • 134 |
  • 135 | 136 |

    Yarrow leek

    137 |
    $22.50
    138 |
    139 | Yarrow leek cabbage amaranth onion salsify caulie kale desert raisin prairie turnip garlic. 140 |
    141 | Add to cart 142 |
    • 143 |
144 |
145 |
146 |
147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /js/cbpViewModeSwitch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * cbpViewModeSwitch.js v1.0.0 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | (function() { 12 | 13 | var container = document.getElementById( 'cbp-vm' ), 14 | optionSwitch = Array.prototype.slice.call( container.querySelectorAll( 'div.cbp-vm-options > a' ) ); 15 | 16 | function init() { 17 | optionSwitch.forEach( function( el, i ) { 18 | el.addEventListener( 'click', function( ev ) { 19 | ev.preventDefault(); 20 | _switch( this ); 21 | }, false ); 22 | } ); 23 | } 24 | 25 | function _switch( opt ) { 26 | // remove other view classes and any any selected option 27 | optionSwitch.forEach(function(el) { 28 | classie.remove( container, el.getAttribute( 'data-view' ) ); 29 | classie.remove( el, 'cbp-vm-selected' ); 30 | }); 31 | // add the view class for this option 32 | classie.add( container, opt.getAttribute( 'data-view' ) ); 33 | // this option stays selected 34 | classie.add( opt, 'cbp-vm-selected' ); 35 | } 36 | 37 | init(); 38 | 39 | })(); -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie - class helper functions 3 | * from bonzo https://github.com/ded/bonzo 4 | * 5 | * classie.has( elem, 'my-class' ) -> true/false 6 | * classie.add( elem, 'my-new-class' ) 7 | * classie.remove( elem, 'my-unwanted-class' ) 8 | * classie.toggle( elem, 'my-class' ) 9 | */ 10 | 11 | /*jshint browser: true, strict: true, undef: true */ 12 | /*global define: false */ 13 | 14 | ( function( window ) { 15 | 16 | 'use strict'; 17 | 18 | // class helper functions from bonzo https://github.com/ded/bonzo 19 | 20 | function classReg( className ) { 21 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 22 | } 23 | 24 | // classList support for class management 25 | // altho to be fair, the api sucks because it won't accept multiple classes at once 26 | var hasClass, addClass, removeClass; 27 | 28 | if ( 'classList' in document.documentElement ) { 29 | hasClass = function( elem, c ) { 30 | return elem.classList.contains( c ); 31 | }; 32 | addClass = function( elem, c ) { 33 | elem.classList.add( c ); 34 | }; 35 | removeClass = function( elem, c ) { 36 | elem.classList.remove( c ); 37 | }; 38 | } 39 | else { 40 | hasClass = function( elem, c ) { 41 | return classReg( c ).test( elem.className ); 42 | }; 43 | addClass = function( elem, c ) { 44 | if ( !hasClass( elem, c ) ) { 45 | elem.className = elem.className + ' ' + c; 46 | } 47 | }; 48 | removeClass = function( elem, c ) { 49 | elem.className = elem.className.replace( classReg( c ), ' ' ); 50 | }; 51 | } 52 | 53 | function toggleClass( elem, c ) { 54 | var fn = hasClass( elem, c ) ? removeClass : addClass; 55 | fn( elem, c ); 56 | } 57 | 58 | var classie = { 59 | // full names 60 | hasClass: hasClass, 61 | addClass: addClass, 62 | removeClass: removeClass, 63 | toggleClass: toggleClass, 64 | // short names 65 | has: hasClass, 66 | add: addClass, 67 | remove: removeClass, 68 | toggle: toggleClass 69 | }; 70 | 71 | // transport 72 | if ( typeof define === 'function' && define.amd ) { 73 | // AMD 74 | define( classie ); 75 | } else { 76 | // browser global 77 | window.classie = classie; 78 | } 79 | 80 | })( window ); 81 | -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-generatedcontent-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(n.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o={},p={},q={},r=[],s=r.slice,t,u=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=s.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(s.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(s.call(arguments)))};return e}),o.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:u(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},o.generatedcontent=function(){var a;return u(["#",h,"{font:0/0 a}#",h,':after{content:"',l,'";visibility:hidden;font:3px/1 a}'].join(""),function(b){a=b.offsetHeight>=3}),a};for(var C in o)w(o,C)&&(t=C.toLowerCase(),e[t]=o[C](),r.push((e[t]?"":"no-")+t));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},x(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e.testStyles=u,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+r.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f