├── README.md ├── compass-watch ├── css ├── ie.css ├── step1.css ├── step2.css ├── step3.css └── step4.css ├── extras ├── js │ ├── jquery.animate-enhanced.min.js │ ├── jquery.requestAnimationFrame.min.js │ └── main.jquery2.js ├── step3-jquery-animation-frame.html └── step3-jquery-enhanced.html ├── img ├── close-btn.png ├── close-btn.svg ├── nav-icon.png └── nav-icon.svg ├── js ├── main.jquery.js ├── main.js ├── modernizr.js └── modernizr.min.js ├── src ├── _base.scss ├── _max_width_720.scss ├── _min_width_720.scss ├── _normalize.scss ├── ie.scss ├── step1.scss ├── step2.scss ├── step3.scss └── step4.scss ├── step1.html ├── step2.html ├── step3-jquery.html ├── step3.html └── step4.html /README.md: -------------------------------------------------------------------------------- 1 | Responsive Off Canvas Menu 2 | ========================== 3 | 4 | A responsive off-canvas menu using CSS transforms and transitions. This repository contains several demos to support a Smashing Magazine article. 5 | 6 | **[Implementing Off-Canvas Navigation For A Responsive Website 7 | ](http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/)** 8 | 9 | Copyright © David Bushell | BSD & MIT license -------------------------------------------------------------------------------- /compass-watch: -------------------------------------------------------------------------------- 1 | compass watch --output-style=expanded --no-line-comments --sass-dir="src" --css-dir="./css" --image-dir="./img" --fonts-dir="./font" -------------------------------------------------------------------------------- /css/ie.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | * 4 | * Copyright (c) David Bushell | http://dbushell.com/ 5 | * 6 | */ 7 | /* normalize.css v2.0.1 | MIT License | git.io/normalize */ 8 | article, 9 | aside, 10 | details, 11 | figcaption, 12 | figure, 13 | footer, 14 | header, 15 | hgroup, 16 | nav, 17 | section, 18 | summary { 19 | display: block; 20 | } 21 | 22 | audio, 23 | canvas, 24 | video { 25 | display: inline-block; 26 | } 27 | 28 | audio:not([controls]) { 29 | display: none; 30 | height: 0; 31 | } 32 | 33 | [hidden] { 34 | display: none; 35 | } 36 | 37 | html { 38 | font-family: sans-serif; 39 | -webkit-text-size-adjust: 100%; 40 | -ms-text-size-adjust: 100%; 41 | } 42 | 43 | body { 44 | margin: 0; 45 | } 46 | 47 | a:focus { 48 | outline: thin dotted; 49 | } 50 | 51 | a:active, 52 | a:hover { 53 | outline: 0; 54 | } 55 | 56 | h1 { 57 | font-size: 2em; 58 | } 59 | 60 | abbr[title] { 61 | border-bottom: 1px dotted; 62 | } 63 | 64 | b, 65 | strong { 66 | font-weight: bold; 67 | } 68 | 69 | dfn { 70 | font-style: italic; 71 | } 72 | 73 | mark { 74 | background: #ff0; 75 | color: #000; 76 | } 77 | 78 | code, 79 | kbd, 80 | pre, 81 | samp { 82 | font-family: monospace, serif; 83 | font-size: 1em; 84 | } 85 | 86 | pre { 87 | white-space: pre; 88 | white-space: pre-wrap; 89 | word-wrap: break-word; 90 | } 91 | 92 | q { 93 | quotes: "\201C" "\201D" "\2018" "\2019"; 94 | } 95 | 96 | small { 97 | font-size: 80%; 98 | } 99 | 100 | sub, 101 | sup { 102 | font-size: 75%; 103 | line-height: 0; 104 | position: relative; 105 | vertical-align: baseline; 106 | } 107 | 108 | sup { 109 | top: -0.5em; 110 | } 111 | 112 | sub { 113 | bottom: -0.25em; 114 | } 115 | 116 | img { 117 | border: 0; 118 | } 119 | 120 | svg:not(:root) { 121 | overflow: hidden; 122 | } 123 | 124 | figure { 125 | margin: 0; 126 | } 127 | 128 | fieldset { 129 | border: 1px solid #c0c0c0; 130 | margin: 0 2px; 131 | padding: 0.35em 0.625em 0.75em; 132 | } 133 | 134 | legend { 135 | border: 0; 136 | padding: 0; 137 | } 138 | 139 | button, 140 | input, 141 | select, 142 | textarea { 143 | font-family: inherit; 144 | font-size: 100%; 145 | margin: 0; 146 | } 147 | 148 | button, 149 | input { 150 | line-height: normal; 151 | } 152 | 153 | button, 154 | html input[type="button"], 155 | input[type="reset"], 156 | input[type="submit"] { 157 | -webkit-appearance: button; 158 | cursor: pointer; 159 | } 160 | 161 | button[disabled], 162 | input[disabled] { 163 | cursor: default; 164 | } 165 | 166 | input[type="checkbox"], 167 | input[type="radio"] { 168 | box-sizing: border-box; 169 | padding: 0; 170 | } 171 | 172 | input[type="search"] { 173 | -webkit-appearance: textfield; 174 | -moz-box-sizing: content-box; 175 | -webkit-box-sizing: content-box; 176 | box-sizing: content-box; 177 | } 178 | 179 | input[type="search"]::-webkit-search-cancel-button, 180 | input[type="search"]::-webkit-search-decoration { 181 | -webkit-appearance: none; 182 | } 183 | 184 | button::-moz-focus-inner, 185 | input::-moz-focus-inner { 186 | border: 0; 187 | padding: 0; 188 | } 189 | 190 | textarea { 191 | overflow: auto; 192 | vertical-align: top; 193 | } 194 | 195 | table { 196 | border-collapse: collapse; 197 | border-spacing: 0; 198 | } 199 | 200 | ul, ol { 201 | padding: 0; 202 | list-style: none; 203 | } 204 | 205 | h1, h2, h3, h4, h5, h6, p, ul, ol { 206 | margin: 0; 207 | } 208 | 209 | a { 210 | text-decoration: none; 211 | } 212 | 213 | body { 214 | color: #333; 215 | position: relative; 216 | width: 100%; 217 | min-width: 20em; 218 | background: #333333; 219 | } 220 | 221 | .highlight { 222 | background: #fff699; 223 | padding: 0 0.5em; 224 | } 225 | 226 | .prose ul, .prose ol { 227 | list-style: outside disc; 228 | font-size: 1em; 229 | line-height: 1.5em; 230 | margin-bottom: 1.5em; 231 | } 232 | .prose p { 233 | font-size: 1em; 234 | line-height: 1.5em; 235 | margin-bottom: 1.5em; 236 | } 237 | .prose p.small { 238 | color: #666; 239 | font-size: 0.813em; 240 | line-height: 1.846em; 241 | margin-bottom: 1.846em; 242 | } 243 | .prose p.medium { 244 | color: #666; 245 | font-size: 0.875em; 246 | line-height: 1.714em; 247 | margin-bottom: 1.714em; 248 | } 249 | .prose p:last-child { 250 | margin-bottom: 0; 251 | } 252 | .prose h1 { 253 | font-size: 1.875em; 254 | line-height: 1.2em; 255 | margin-bottom: 0.4em; 256 | } 257 | .prose h2 { 258 | font-size: 1.5em; 259 | line-height: 1.25em; 260 | margin-bottom: 0.5em; 261 | } 262 | .prose a { 263 | color: #6d7173; 264 | border-bottom: 1px solid #a1cfe5; 265 | text-decoration: none; 266 | outline: none; 267 | } 268 | .prose a:focus, .prose a:hover { 269 | color: #4ab336; 270 | border-bottom-color: #77b36b; 271 | } 272 | 273 | .block { 274 | position: relative; 275 | margin: 0 auto; 276 | padding: 1.5em 1.25em; 277 | max-width: 60em; 278 | } 279 | 280 | .close-btn { 281 | display: block; 282 | width: 2.625em; 283 | height: 2.25em; 284 | padding: 0; 285 | border: 0; 286 | outline: none; 287 | background: #333333 url("../img/close-btn.svg") left center no-repeat; 288 | background-size: 1.875em 1.875em; 289 | overflow: hidden; 290 | white-space: nowrap; 291 | text-indent: 100%; 292 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 293 | opacity: 1; 294 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 295 | } 296 | .no-svg .close-btn { 297 | background-image: url("../img/close-btn.png"); 298 | } 299 | .close-btn:focus, .close-btn:hover { 300 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 301 | opacity: 1; 302 | } 303 | 304 | .nav-btn { 305 | display: block; 306 | width: 2.625em; 307 | height: 2.25em; 308 | padding: 0; 309 | border: 0; 310 | outline: none; 311 | background: #333333 url("../img/nav-icon.svg") left center no-repeat; 312 | background-size: 1.875em 1.5em; 313 | overflow: hidden; 314 | white-space: nowrap; 315 | text-indent: 100%; 316 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 317 | opacity: 0.7; 318 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 319 | } 320 | .no-svg .nav-btn { 321 | background-image: url("../img/nav-icon.png"); 322 | } 323 | .nav-btn:hover, .nav-btn:focus { 324 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 325 | opacity: 1; 326 | } 327 | 328 | #outer-wrap { 329 | position: relative; 330 | overflow: hidden; 331 | width: 100%; 332 | } 333 | 334 | #inner-wrap { 335 | position: relative; 336 | width: 100%; 337 | } 338 | 339 | #nav { 340 | z-index: 200; 341 | position: relative; 342 | overflow: hidden; 343 | width: 100%; 344 | color: #fff; 345 | } 346 | #nav .close-btn { 347 | display: none; 348 | } 349 | #nav .block-title { 350 | border: 0; 351 | clip: rect(0 0 0 0); 352 | height: 1px; 353 | margin: -1px; 354 | overflow: hidden; 355 | padding: 0; 356 | position: absolute; 357 | width: 1px; 358 | } 359 | #nav .block { 360 | z-index: 2; 361 | position: relative; 362 | padding: 0.75em 1.25em; 363 | background: #333333; 364 | } 365 | #nav ul { 366 | *zoom: 1; 367 | display: block; 368 | } 369 | #nav ul:before, #nav ul:after { 370 | content: ""; 371 | display: table; 372 | } 373 | #nav ul:after { 374 | clear: both; 375 | } 376 | #nav li { 377 | display: block; 378 | } 379 | #nav li a { 380 | display: block; 381 | color: #ccc; 382 | font-size: 0.875em; 383 | line-height: 1.286em; 384 | font-weight: bold; 385 | outline: none; 386 | } 387 | #nav li a:focus, #nav li a:hover { 388 | color: #fff; 389 | background: rgba(255, 255, 255, 0.1); 390 | } 391 | #nav li.is-active a { 392 | color: #fff; 393 | } 394 | 395 | #top { 396 | z-index: 100; 397 | position: relative; 398 | color: #fff; 399 | background: #333333; 400 | } 401 | #top .block-title { 402 | margin: 0; 403 | font-size: 1.875em; 404 | line-height: 1.2em; 405 | text-align: center; 406 | white-space: nowrap; 407 | } 408 | #top .nav-btn { 409 | position: absolute; 410 | top: 1.5em; 411 | left: 1.875em; 412 | } 413 | 414 | #main { 415 | background: #fff; 416 | } 417 | #main .block { 418 | padding: 2.625em 1.875em; 419 | } 420 | 421 | footer[role="contentinfo"] { 422 | background: #ddd; 423 | } 424 | 425 | #top .nav-btn { 426 | border: 0; 427 | clip: rect(0 0 0 0); 428 | height: 1px; 429 | margin: -1px; 430 | overflow: hidden; 431 | padding: 0; 432 | position: absolute; 433 | width: 1px; 434 | } 435 | 436 | #nav .close-btn { 437 | border: 0; 438 | clip: rect(0 0 0 0); 439 | height: 1px; 440 | margin: -1px; 441 | overflow: hidden; 442 | padding: 0; 443 | position: absolute; 444 | width: 1px; 445 | } 446 | #nav .block-title { 447 | border: 0; 448 | clip: rect(0 0 0 0); 449 | height: 1px; 450 | margin: -1px; 451 | overflow: hidden; 452 | padding: 0; 453 | position: absolute; 454 | width: 1px; 455 | } 456 | #nav ul { 457 | text-align: center; 458 | white-space: nowrap; 459 | } 460 | #nav li { 461 | display: inline-block; 462 | border-right: 1px solid rgba(255, 255, 255, 0.1); 463 | } 464 | #nav li:last-child { 465 | border-right: none; 466 | } 467 | #nav li a { 468 | padding: 0.429em 0.857em; 469 | } 470 | -------------------------------------------------------------------------------- /css/step1.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @-ms-viewport { 3 | width: device-width; 4 | } 5 | 6 | @viewport { 7 | width: device-width; 8 | } 9 | 10 | /* 11 | * 12 | * Copyright (c) David Bushell | http://dbushell.com/ 13 | * 14 | */ 15 | /* normalize.css v2.0.1 | MIT License | git.io/normalize */ 16 | article, 17 | aside, 18 | details, 19 | figcaption, 20 | figure, 21 | footer, 22 | header, 23 | hgroup, 24 | nav, 25 | section, 26 | summary { 27 | display: block; 28 | } 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | audio:not([controls]) { 37 | display: none; 38 | height: 0; 39 | } 40 | 41 | [hidden] { 42 | display: none; 43 | } 44 | 45 | html { 46 | font-family: sans-serif; 47 | -webkit-text-size-adjust: 100%; 48 | -ms-text-size-adjust: 100%; 49 | } 50 | 51 | body { 52 | margin: 0; 53 | } 54 | 55 | a:focus { 56 | outline: thin dotted; 57 | } 58 | 59 | a:active, 60 | a:hover { 61 | outline: 0; 62 | } 63 | 64 | h1 { 65 | font-size: 2em; 66 | } 67 | 68 | abbr[title] { 69 | border-bottom: 1px dotted; 70 | } 71 | 72 | b, 73 | strong { 74 | font-weight: bold; 75 | } 76 | 77 | dfn { 78 | font-style: italic; 79 | } 80 | 81 | mark { 82 | background: #ff0; 83 | color: #000; 84 | } 85 | 86 | code, 87 | kbd, 88 | pre, 89 | samp { 90 | font-family: monospace, serif; 91 | font-size: 1em; 92 | } 93 | 94 | pre { 95 | white-space: pre; 96 | white-space: pre-wrap; 97 | word-wrap: break-word; 98 | } 99 | 100 | q { 101 | quotes: "\201C" "\201D" "\2018" "\2019"; 102 | } 103 | 104 | small { 105 | font-size: 80%; 106 | } 107 | 108 | sub, 109 | sup { 110 | font-size: 75%; 111 | line-height: 0; 112 | position: relative; 113 | vertical-align: baseline; 114 | } 115 | 116 | sup { 117 | top: -0.5em; 118 | } 119 | 120 | sub { 121 | bottom: -0.25em; 122 | } 123 | 124 | img { 125 | border: 0; 126 | } 127 | 128 | svg:not(:root) { 129 | overflow: hidden; 130 | } 131 | 132 | figure { 133 | margin: 0; 134 | } 135 | 136 | fieldset { 137 | border: 1px solid silver; 138 | margin: 0 2px; 139 | padding: 0.35em 0.625em 0.75em; 140 | } 141 | 142 | legend { 143 | border: 0; 144 | padding: 0; 145 | } 146 | 147 | button, 148 | input, 149 | select, 150 | textarea { 151 | font-family: inherit; 152 | font-size: 100%; 153 | margin: 0; 154 | } 155 | 156 | button, 157 | input { 158 | line-height: normal; 159 | } 160 | 161 | button, 162 | html input[type="button"], 163 | input[type="reset"], 164 | input[type="submit"] { 165 | -webkit-appearance: button; 166 | cursor: pointer; 167 | } 168 | 169 | button[disabled], 170 | input[disabled] { 171 | cursor: default; 172 | } 173 | 174 | input[type="checkbox"], 175 | input[type="radio"] { 176 | box-sizing: border-box; 177 | padding: 0; 178 | } 179 | 180 | input[type="search"] { 181 | -webkit-appearance: textfield; 182 | -moz-box-sizing: content-box; 183 | -webkit-box-sizing: content-box; 184 | box-sizing: content-box; 185 | } 186 | 187 | input[type="search"]::-webkit-search-cancel-button, 188 | input[type="search"]::-webkit-search-decoration { 189 | -webkit-appearance: none; 190 | } 191 | 192 | button::-moz-focus-inner, 193 | input::-moz-focus-inner { 194 | border: 0; 195 | padding: 0; 196 | } 197 | 198 | textarea { 199 | overflow: auto; 200 | vertical-align: top; 201 | } 202 | 203 | table { 204 | border-collapse: collapse; 205 | border-spacing: 0; 206 | } 207 | 208 | ul, ol { 209 | padding: 0; 210 | list-style: none; 211 | } 212 | 213 | h1, h2, h3, h4, h5, h6, p, ul, ol { 214 | margin: 0; 215 | } 216 | 217 | a { 218 | text-decoration: none; 219 | } 220 | 221 | body { 222 | color: #333; 223 | position: relative; 224 | width: 100%; 225 | min-width: 20em; 226 | background: #333333; 227 | } 228 | 229 | .highlight { 230 | background: #fff699; 231 | padding: 0 0.5em; 232 | } 233 | 234 | .prose ul, .prose ol { 235 | list-style: outside disc; 236 | font-size: 1em; 237 | line-height: 1.5em; 238 | margin-bottom: 1.5em; 239 | } 240 | .prose p { 241 | font-size: 1em; 242 | line-height: 1.5em; 243 | margin-bottom: 1.5em; 244 | } 245 | .prose p.small { 246 | color: #666; 247 | font-size: 0.8125em; 248 | line-height: 1.84615em; 249 | margin-bottom: 1.84615em; 250 | } 251 | .prose p.medium { 252 | color: #666; 253 | font-size: 0.875em; 254 | line-height: 1.71429em; 255 | margin-bottom: 1.71429em; 256 | } 257 | .prose p:last-child { 258 | margin-bottom: 0; 259 | } 260 | .prose h1 { 261 | font-size: 1.875em; 262 | line-height: 1.2em; 263 | margin-bottom: 0.4em; 264 | } 265 | .prose h2 { 266 | font-size: 1.5em; 267 | line-height: 1.25em; 268 | margin-bottom: 0.5em; 269 | } 270 | .prose a { 271 | color: #6d7173; 272 | border-bottom: 1px solid #a1cfe5; 273 | text-decoration: none; 274 | outline: none; 275 | } 276 | .prose a:focus, .prose a:hover { 277 | color: #4ab336; 278 | border-bottom-color: #77b36b; 279 | } 280 | 281 | .block { 282 | position: relative; 283 | margin: 0 auto; 284 | padding: 1.5em 1.25em; 285 | max-width: 60em; 286 | } 287 | 288 | .close-btn { 289 | display: block; 290 | width: 2.625em; 291 | height: 2.25em; 292 | padding: 0; 293 | border: 0; 294 | outline: none; 295 | background: #333333 url("../img/close-btn.svg") left center no-repeat; 296 | background-size: 1.875em 1.875em; 297 | overflow: hidden; 298 | white-space: nowrap; 299 | text-indent: 100%; 300 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 301 | opacity: 1; 302 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 303 | } 304 | .no-svg .close-btn { 305 | background-image: url("../img/close-btn.png"); 306 | } 307 | .close-btn:focus, .close-btn:hover { 308 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 309 | opacity: 1; 310 | } 311 | 312 | .nav-btn { 313 | display: block; 314 | width: 2.625em; 315 | height: 2.25em; 316 | padding: 0; 317 | border: 0; 318 | outline: none; 319 | background: #333333 url("../img/nav-icon.svg") left center no-repeat; 320 | background-size: 1.875em 1.5em; 321 | overflow: hidden; 322 | white-space: nowrap; 323 | text-indent: 100%; 324 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 325 | opacity: 0.7; 326 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 327 | } 328 | .no-svg .nav-btn { 329 | background-image: url("../img/nav-icon.png"); 330 | } 331 | .nav-btn:hover, .nav-btn:focus { 332 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 333 | opacity: 1; 334 | } 335 | 336 | #outer-wrap { 337 | position: relative; 338 | overflow: hidden; 339 | width: 100%; 340 | } 341 | 342 | #inner-wrap { 343 | position: relative; 344 | width: 100%; 345 | } 346 | 347 | #nav { 348 | z-index: 200; 349 | position: relative; 350 | overflow: hidden; 351 | width: 100%; 352 | color: #fff; 353 | } 354 | #nav .close-btn { 355 | display: none; 356 | } 357 | #nav .block-title { 358 | border: 0; 359 | clip: rect(0 0 0 0); 360 | height: 1px; 361 | margin: -1px; 362 | overflow: hidden; 363 | padding: 0; 364 | position: absolute; 365 | width: 1px; 366 | } 367 | #nav .block { 368 | z-index: 2; 369 | position: relative; 370 | padding: 0.75em 1.25em; 371 | background: #333333; 372 | } 373 | #nav ul { 374 | *zoom: 1; 375 | display: block; 376 | } 377 | #nav ul:before, #nav ul:after { 378 | content: ""; 379 | display: table; 380 | } 381 | #nav ul:after { 382 | clear: both; 383 | } 384 | #nav li { 385 | display: block; 386 | } 387 | #nav li a { 388 | display: block; 389 | color: #ccc; 390 | font-size: 0.875em; 391 | line-height: 1.28571em; 392 | font-weight: bold; 393 | outline: none; 394 | } 395 | #nav li a:focus, #nav li a:hover { 396 | color: #fff; 397 | background: rgba(255, 255, 255, 0.1); 398 | } 399 | #nav li.is-active a { 400 | color: #fff; 401 | } 402 | 403 | #top { 404 | z-index: 100; 405 | position: relative; 406 | color: #fff; 407 | background: #333333; 408 | } 409 | #top .block-title { 410 | margin: 0; 411 | font-size: 1.875em; 412 | line-height: 1.2em; 413 | text-align: center; 414 | white-space: nowrap; 415 | } 416 | #top .nav-btn { 417 | position: absolute; 418 | top: 1.5em; 419 | left: 1.875em; 420 | } 421 | 422 | #main { 423 | background: #fff; 424 | } 425 | #main .block { 426 | padding: 2.625em 1.875em; 427 | } 428 | 429 | footer[role="contentinfo"] { 430 | background: #ddd; 431 | } 432 | 433 | @media screen and (min-width: 45.0625em) { 434 | #top .nav-btn { 435 | border: 0; 436 | clip: rect(0 0 0 0); 437 | height: 1px; 438 | margin: -1px; 439 | overflow: hidden; 440 | padding: 0; 441 | position: absolute; 442 | width: 1px; 443 | } 444 | 445 | #nav .close-btn { 446 | border: 0; 447 | clip: rect(0 0 0 0); 448 | height: 1px; 449 | margin: -1px; 450 | overflow: hidden; 451 | padding: 0; 452 | position: absolute; 453 | width: 1px; 454 | } 455 | #nav .block-title { 456 | border: 0; 457 | clip: rect(0 0 0 0); 458 | height: 1px; 459 | margin: -1px; 460 | overflow: hidden; 461 | padding: 0; 462 | position: absolute; 463 | width: 1px; 464 | } 465 | #nav ul { 466 | text-align: center; 467 | white-space: nowrap; 468 | } 469 | #nav li { 470 | display: inline-block; 471 | border-right: 1px solid rgba(255, 255, 255, 0.1); 472 | } 473 | #nav li:last-child { 474 | border-right: none; 475 | } 476 | #nav li a { 477 | padding: 0.42857em 0.85714em; 478 | } 479 | } 480 | @media screen and (max-width: 45em) { 481 | #nav { 482 | position: absolute; 483 | top: 0; 484 | padding-top: 5.25em; 485 | } 486 | #nav:not(:target) { 487 | z-index: 1; 488 | height: 0; 489 | } 490 | #nav:target .close-btn { 491 | display: block; 492 | } 493 | #nav .close-btn { 494 | position: absolute; 495 | top: -3.75em; 496 | left: 1.875em; 497 | } 498 | #nav .block { 499 | position: relative; 500 | padding: 0; 501 | } 502 | #nav li { 503 | position: relative; 504 | border-top: 1px solid rgba(255, 255, 255, 0.1); 505 | } 506 | #nav li:last-child { 507 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 508 | } 509 | #nav li.is-active:after { 510 | z-index: 50; 511 | display: block; 512 | content: ""; 513 | position: absolute; 514 | top: 50%; 515 | right: -0.03125em; 516 | margin-top: -0.625em; 517 | border-top: 0.625em transparent solid; 518 | border-bottom: 0.625em transparent solid; 519 | border-right: 0.625em white solid; 520 | } 521 | #nav li a { 522 | padding: 0.85714em 2.14286em; 523 | } 524 | } 525 | -------------------------------------------------------------------------------- /css/step2.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @-ms-viewport { 3 | width: device-width; 4 | } 5 | 6 | @viewport { 7 | width: device-width; 8 | } 9 | 10 | /* 11 | * 12 | * Copyright (c) David Bushell | http://dbushell.com/ 13 | * 14 | */ 15 | /* normalize.css v2.0.1 | MIT License | git.io/normalize */ 16 | article, 17 | aside, 18 | details, 19 | figcaption, 20 | figure, 21 | footer, 22 | header, 23 | hgroup, 24 | nav, 25 | section, 26 | summary { 27 | display: block; 28 | } 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | audio:not([controls]) { 37 | display: none; 38 | height: 0; 39 | } 40 | 41 | [hidden] { 42 | display: none; 43 | } 44 | 45 | html { 46 | font-family: sans-serif; 47 | -webkit-text-size-adjust: 100%; 48 | -ms-text-size-adjust: 100%; 49 | } 50 | 51 | body { 52 | margin: 0; 53 | } 54 | 55 | a:focus { 56 | outline: thin dotted; 57 | } 58 | 59 | a:active, 60 | a:hover { 61 | outline: 0; 62 | } 63 | 64 | h1 { 65 | font-size: 2em; 66 | } 67 | 68 | abbr[title] { 69 | border-bottom: 1px dotted; 70 | } 71 | 72 | b, 73 | strong { 74 | font-weight: bold; 75 | } 76 | 77 | dfn { 78 | font-style: italic; 79 | } 80 | 81 | mark { 82 | background: #ff0; 83 | color: #000; 84 | } 85 | 86 | code, 87 | kbd, 88 | pre, 89 | samp { 90 | font-family: monospace, serif; 91 | font-size: 1em; 92 | } 93 | 94 | pre { 95 | white-space: pre; 96 | white-space: pre-wrap; 97 | word-wrap: break-word; 98 | } 99 | 100 | q { 101 | quotes: "\201C" "\201D" "\2018" "\2019"; 102 | } 103 | 104 | small { 105 | font-size: 80%; 106 | } 107 | 108 | sub, 109 | sup { 110 | font-size: 75%; 111 | line-height: 0; 112 | position: relative; 113 | vertical-align: baseline; 114 | } 115 | 116 | sup { 117 | top: -0.5em; 118 | } 119 | 120 | sub { 121 | bottom: -0.25em; 122 | } 123 | 124 | img { 125 | border: 0; 126 | } 127 | 128 | svg:not(:root) { 129 | overflow: hidden; 130 | } 131 | 132 | figure { 133 | margin: 0; 134 | } 135 | 136 | fieldset { 137 | border: 1px solid silver; 138 | margin: 0 2px; 139 | padding: 0.35em 0.625em 0.75em; 140 | } 141 | 142 | legend { 143 | border: 0; 144 | padding: 0; 145 | } 146 | 147 | button, 148 | input, 149 | select, 150 | textarea { 151 | font-family: inherit; 152 | font-size: 100%; 153 | margin: 0; 154 | } 155 | 156 | button, 157 | input { 158 | line-height: normal; 159 | } 160 | 161 | button, 162 | html input[type="button"], 163 | input[type="reset"], 164 | input[type="submit"] { 165 | -webkit-appearance: button; 166 | cursor: pointer; 167 | } 168 | 169 | button[disabled], 170 | input[disabled] { 171 | cursor: default; 172 | } 173 | 174 | input[type="checkbox"], 175 | input[type="radio"] { 176 | box-sizing: border-box; 177 | padding: 0; 178 | } 179 | 180 | input[type="search"] { 181 | -webkit-appearance: textfield; 182 | -moz-box-sizing: content-box; 183 | -webkit-box-sizing: content-box; 184 | box-sizing: content-box; 185 | } 186 | 187 | input[type="search"]::-webkit-search-cancel-button, 188 | input[type="search"]::-webkit-search-decoration { 189 | -webkit-appearance: none; 190 | } 191 | 192 | button::-moz-focus-inner, 193 | input::-moz-focus-inner { 194 | border: 0; 195 | padding: 0; 196 | } 197 | 198 | textarea { 199 | overflow: auto; 200 | vertical-align: top; 201 | } 202 | 203 | table { 204 | border-collapse: collapse; 205 | border-spacing: 0; 206 | } 207 | 208 | ul, ol { 209 | padding: 0; 210 | list-style: none; 211 | } 212 | 213 | h1, h2, h3, h4, h5, h6, p, ul, ol { 214 | margin: 0; 215 | } 216 | 217 | a { 218 | text-decoration: none; 219 | } 220 | 221 | body { 222 | color: #333; 223 | position: relative; 224 | width: 100%; 225 | min-width: 20em; 226 | background: #333333; 227 | } 228 | 229 | .highlight { 230 | background: #fff699; 231 | padding: 0 0.5em; 232 | } 233 | 234 | .prose ul, .prose ol { 235 | list-style: outside disc; 236 | font-size: 1em; 237 | line-height: 1.5em; 238 | margin-bottom: 1.5em; 239 | } 240 | .prose p { 241 | font-size: 1em; 242 | line-height: 1.5em; 243 | margin-bottom: 1.5em; 244 | } 245 | .prose p.small { 246 | color: #666; 247 | font-size: 0.8125em; 248 | line-height: 1.84615em; 249 | margin-bottom: 1.84615em; 250 | } 251 | .prose p.medium { 252 | color: #666; 253 | font-size: 0.875em; 254 | line-height: 1.71429em; 255 | margin-bottom: 1.71429em; 256 | } 257 | .prose p:last-child { 258 | margin-bottom: 0; 259 | } 260 | .prose h1 { 261 | font-size: 1.875em; 262 | line-height: 1.2em; 263 | margin-bottom: 0.4em; 264 | } 265 | .prose h2 { 266 | font-size: 1.5em; 267 | line-height: 1.25em; 268 | margin-bottom: 0.5em; 269 | } 270 | .prose a { 271 | color: #6d7173; 272 | border-bottom: 1px solid #a1cfe5; 273 | text-decoration: none; 274 | outline: none; 275 | } 276 | .prose a:focus, .prose a:hover { 277 | color: #4ab336; 278 | border-bottom-color: #77b36b; 279 | } 280 | 281 | .block { 282 | position: relative; 283 | margin: 0 auto; 284 | padding: 1.5em 1.25em; 285 | max-width: 60em; 286 | } 287 | 288 | .close-btn { 289 | display: block; 290 | width: 2.625em; 291 | height: 2.25em; 292 | padding: 0; 293 | border: 0; 294 | outline: none; 295 | background: #333333 url("../img/close-btn.svg") left center no-repeat; 296 | background-size: 1.875em 1.875em; 297 | overflow: hidden; 298 | white-space: nowrap; 299 | text-indent: 100%; 300 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 301 | opacity: 1; 302 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 303 | } 304 | .no-svg .close-btn { 305 | background-image: url("../img/close-btn.png"); 306 | } 307 | .close-btn:focus, .close-btn:hover { 308 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 309 | opacity: 1; 310 | } 311 | 312 | .nav-btn { 313 | display: block; 314 | width: 2.625em; 315 | height: 2.25em; 316 | padding: 0; 317 | border: 0; 318 | outline: none; 319 | background: #333333 url("../img/nav-icon.svg") left center no-repeat; 320 | background-size: 1.875em 1.5em; 321 | overflow: hidden; 322 | white-space: nowrap; 323 | text-indent: 100%; 324 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 325 | opacity: 0.7; 326 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 327 | } 328 | .no-svg .nav-btn { 329 | background-image: url("../img/nav-icon.png"); 330 | } 331 | .nav-btn:hover, .nav-btn:focus { 332 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 333 | opacity: 1; 334 | } 335 | 336 | #outer-wrap { 337 | position: relative; 338 | overflow: hidden; 339 | width: 100%; 340 | } 341 | 342 | #inner-wrap { 343 | position: relative; 344 | width: 100%; 345 | } 346 | 347 | #nav { 348 | z-index: 200; 349 | position: relative; 350 | overflow: hidden; 351 | width: 100%; 352 | color: #fff; 353 | } 354 | #nav .close-btn { 355 | display: none; 356 | } 357 | #nav .block-title { 358 | border: 0; 359 | clip: rect(0 0 0 0); 360 | height: 1px; 361 | margin: -1px; 362 | overflow: hidden; 363 | padding: 0; 364 | position: absolute; 365 | width: 1px; 366 | } 367 | #nav .block { 368 | z-index: 2; 369 | position: relative; 370 | padding: 0.75em 1.25em; 371 | background: #333333; 372 | } 373 | #nav ul { 374 | *zoom: 1; 375 | display: block; 376 | } 377 | #nav ul:before, #nav ul:after { 378 | content: ""; 379 | display: table; 380 | } 381 | #nav ul:after { 382 | clear: both; 383 | } 384 | #nav li { 385 | display: block; 386 | } 387 | #nav li a { 388 | display: block; 389 | color: #ccc; 390 | font-size: 0.875em; 391 | line-height: 1.28571em; 392 | font-weight: bold; 393 | outline: none; 394 | } 395 | #nav li a:focus, #nav li a:hover { 396 | color: #fff; 397 | background: rgba(255, 255, 255, 0.1); 398 | } 399 | #nav li.is-active a { 400 | color: #fff; 401 | } 402 | 403 | #top { 404 | z-index: 100; 405 | position: relative; 406 | color: #fff; 407 | background: #333333; 408 | } 409 | #top .block-title { 410 | margin: 0; 411 | font-size: 1.875em; 412 | line-height: 1.2em; 413 | text-align: center; 414 | white-space: nowrap; 415 | } 416 | #top .nav-btn { 417 | position: absolute; 418 | top: 1.5em; 419 | left: 1.875em; 420 | } 421 | 422 | #main { 423 | background: #fff; 424 | } 425 | #main .block { 426 | padding: 2.625em 1.875em; 427 | } 428 | 429 | footer[role="contentinfo"] { 430 | background: #ddd; 431 | } 432 | 433 | @media screen and (min-width: 45.0625em) { 434 | #top .nav-btn { 435 | border: 0; 436 | clip: rect(0 0 0 0); 437 | height: 1px; 438 | margin: -1px; 439 | overflow: hidden; 440 | padding: 0; 441 | position: absolute; 442 | width: 1px; 443 | } 444 | 445 | #nav .close-btn { 446 | border: 0; 447 | clip: rect(0 0 0 0); 448 | height: 1px; 449 | margin: -1px; 450 | overflow: hidden; 451 | padding: 0; 452 | position: absolute; 453 | width: 1px; 454 | } 455 | #nav .block-title { 456 | border: 0; 457 | clip: rect(0 0 0 0); 458 | height: 1px; 459 | margin: -1px; 460 | overflow: hidden; 461 | padding: 0; 462 | position: absolute; 463 | width: 1px; 464 | } 465 | #nav ul { 466 | text-align: center; 467 | white-space: nowrap; 468 | } 469 | #nav li { 470 | display: inline-block; 471 | border-right: 1px solid rgba(255, 255, 255, 0.1); 472 | } 473 | #nav li:last-child { 474 | border-right: none; 475 | } 476 | #nav li a { 477 | padding: 0.42857em 0.85714em; 478 | } 479 | } 480 | @media screen and (max-width: 45em) { 481 | #nav { 482 | position: absolute; 483 | top: 0; 484 | padding-top: 5.25em; 485 | } 486 | #nav:not(:target) { 487 | z-index: 1; 488 | height: 0; 489 | } 490 | #nav:target .close-btn { 491 | display: block; 492 | } 493 | #nav .close-btn { 494 | position: absolute; 495 | top: -3.75em; 496 | left: 1.875em; 497 | } 498 | #nav .block { 499 | position: relative; 500 | padding: 0; 501 | } 502 | #nav li { 503 | position: relative; 504 | border-top: 1px solid rgba(255, 255, 255, 0.1); 505 | } 506 | #nav li:last-child { 507 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 508 | } 509 | #nav li.is-active:after { 510 | z-index: 50; 511 | display: block; 512 | content: ""; 513 | position: absolute; 514 | top: 50%; 515 | right: -0.03125em; 516 | margin-top: -0.625em; 517 | border-top: 0.625em transparent solid; 518 | border-bottom: 0.625em transparent solid; 519 | border-right: 0.625em white solid; 520 | } 521 | #nav li a { 522 | padding: 0.85714em 2.14286em; 523 | } 524 | 525 | .js-ready #nav { 526 | height: 100%; 527 | width: 70%; 528 | background: #333333; 529 | -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 530 | -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 531 | box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 532 | } 533 | .js-ready #nav .block { 534 | background: transparent; 535 | } 536 | .js-ready #nav .close-btn { 537 | display: block; 538 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 539 | opacity: 0.7; 540 | } 541 | .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { 542 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 543 | opacity: 1; 544 | } 545 | 546 | .js-ready #nav { 547 | left: -70%; 548 | } 549 | .js-ready #inner-wrap { 550 | left: 0; 551 | } 552 | 553 | .js-nav #inner-wrap { 554 | left: 70%; 555 | } 556 | } 557 | -------------------------------------------------------------------------------- /css/step3.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @-ms-viewport { 3 | width: device-width; 4 | } 5 | 6 | @viewport { 7 | width: device-width; 8 | } 9 | 10 | /* 11 | * 12 | * Copyright (c) David Bushell | http://dbushell.com/ 13 | * 14 | */ 15 | /* normalize.css v2.0.1 | MIT License | git.io/normalize */ 16 | article, 17 | aside, 18 | details, 19 | figcaption, 20 | figure, 21 | footer, 22 | header, 23 | hgroup, 24 | nav, 25 | section, 26 | summary { 27 | display: block; 28 | } 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | audio:not([controls]) { 37 | display: none; 38 | height: 0; 39 | } 40 | 41 | [hidden] { 42 | display: none; 43 | } 44 | 45 | html { 46 | font-family: sans-serif; 47 | -webkit-text-size-adjust: 100%; 48 | -ms-text-size-adjust: 100%; 49 | } 50 | 51 | body { 52 | margin: 0; 53 | } 54 | 55 | a:focus { 56 | outline: thin dotted; 57 | } 58 | 59 | a:active, 60 | a:hover { 61 | outline: 0; 62 | } 63 | 64 | h1 { 65 | font-size: 2em; 66 | } 67 | 68 | abbr[title] { 69 | border-bottom: 1px dotted; 70 | } 71 | 72 | b, 73 | strong { 74 | font-weight: bold; 75 | } 76 | 77 | dfn { 78 | font-style: italic; 79 | } 80 | 81 | mark { 82 | background: #ff0; 83 | color: #000; 84 | } 85 | 86 | code, 87 | kbd, 88 | pre, 89 | samp { 90 | font-family: monospace, serif; 91 | font-size: 1em; 92 | } 93 | 94 | pre { 95 | white-space: pre; 96 | white-space: pre-wrap; 97 | word-wrap: break-word; 98 | } 99 | 100 | q { 101 | quotes: "\201C" "\201D" "\2018" "\2019"; 102 | } 103 | 104 | small { 105 | font-size: 80%; 106 | } 107 | 108 | sub, 109 | sup { 110 | font-size: 75%; 111 | line-height: 0; 112 | position: relative; 113 | vertical-align: baseline; 114 | } 115 | 116 | sup { 117 | top: -0.5em; 118 | } 119 | 120 | sub { 121 | bottom: -0.25em; 122 | } 123 | 124 | img { 125 | border: 0; 126 | } 127 | 128 | svg:not(:root) { 129 | overflow: hidden; 130 | } 131 | 132 | figure { 133 | margin: 0; 134 | } 135 | 136 | fieldset { 137 | border: 1px solid silver; 138 | margin: 0 2px; 139 | padding: 0.35em 0.625em 0.75em; 140 | } 141 | 142 | legend { 143 | border: 0; 144 | padding: 0; 145 | } 146 | 147 | button, 148 | input, 149 | select, 150 | textarea { 151 | font-family: inherit; 152 | font-size: 100%; 153 | margin: 0; 154 | } 155 | 156 | button, 157 | input { 158 | line-height: normal; 159 | } 160 | 161 | button, 162 | html input[type="button"], 163 | input[type="reset"], 164 | input[type="submit"] { 165 | -webkit-appearance: button; 166 | cursor: pointer; 167 | } 168 | 169 | button[disabled], 170 | input[disabled] { 171 | cursor: default; 172 | } 173 | 174 | input[type="checkbox"], 175 | input[type="radio"] { 176 | box-sizing: border-box; 177 | padding: 0; 178 | } 179 | 180 | input[type="search"] { 181 | -webkit-appearance: textfield; 182 | -moz-box-sizing: content-box; 183 | -webkit-box-sizing: content-box; 184 | box-sizing: content-box; 185 | } 186 | 187 | input[type="search"]::-webkit-search-cancel-button, 188 | input[type="search"]::-webkit-search-decoration { 189 | -webkit-appearance: none; 190 | } 191 | 192 | button::-moz-focus-inner, 193 | input::-moz-focus-inner { 194 | border: 0; 195 | padding: 0; 196 | } 197 | 198 | textarea { 199 | overflow: auto; 200 | vertical-align: top; 201 | } 202 | 203 | table { 204 | border-collapse: collapse; 205 | border-spacing: 0; 206 | } 207 | 208 | ul, ol { 209 | padding: 0; 210 | list-style: none; 211 | } 212 | 213 | h1, h2, h3, h4, h5, h6, p, ul, ol { 214 | margin: 0; 215 | } 216 | 217 | a { 218 | text-decoration: none; 219 | } 220 | 221 | body { 222 | color: #333; 223 | position: relative; 224 | width: 100%; 225 | min-width: 20em; 226 | background: #333333; 227 | } 228 | 229 | .highlight { 230 | background: #fff699; 231 | padding: 0 0.5em; 232 | } 233 | 234 | .prose ul, .prose ol { 235 | list-style: outside disc; 236 | font-size: 1em; 237 | line-height: 1.5em; 238 | margin-bottom: 1.5em; 239 | } 240 | .prose p { 241 | font-size: 1em; 242 | line-height: 1.5em; 243 | margin-bottom: 1.5em; 244 | } 245 | .prose p.small { 246 | color: #666; 247 | font-size: 0.8125em; 248 | line-height: 1.84615em; 249 | margin-bottom: 1.84615em; 250 | } 251 | .prose p.medium { 252 | color: #666; 253 | font-size: 0.875em; 254 | line-height: 1.71429em; 255 | margin-bottom: 1.71429em; 256 | } 257 | .prose p:last-child { 258 | margin-bottom: 0; 259 | } 260 | .prose h1 { 261 | font-size: 1.875em; 262 | line-height: 1.2em; 263 | margin-bottom: 0.4em; 264 | } 265 | .prose h2 { 266 | font-size: 1.5em; 267 | line-height: 1.25em; 268 | margin-bottom: 0.5em; 269 | } 270 | .prose a { 271 | color: #6d7173; 272 | border-bottom: 1px solid #a1cfe5; 273 | text-decoration: none; 274 | outline: none; 275 | } 276 | .prose a:focus, .prose a:hover { 277 | color: #4ab336; 278 | border-bottom-color: #77b36b; 279 | } 280 | 281 | .block { 282 | position: relative; 283 | margin: 0 auto; 284 | padding: 1.5em 1.25em; 285 | max-width: 60em; 286 | } 287 | 288 | .close-btn { 289 | display: block; 290 | width: 2.625em; 291 | height: 2.25em; 292 | padding: 0; 293 | border: 0; 294 | outline: none; 295 | background: #333333 url("../img/close-btn.svg") left center no-repeat; 296 | background-size: 1.875em 1.875em; 297 | overflow: hidden; 298 | white-space: nowrap; 299 | text-indent: 100%; 300 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 301 | opacity: 1; 302 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 303 | } 304 | .no-svg .close-btn { 305 | background-image: url("../img/close-btn.png"); 306 | } 307 | .close-btn:focus, .close-btn:hover { 308 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 309 | opacity: 1; 310 | } 311 | 312 | .nav-btn { 313 | display: block; 314 | width: 2.625em; 315 | height: 2.25em; 316 | padding: 0; 317 | border: 0; 318 | outline: none; 319 | background: #333333 url("../img/nav-icon.svg") left center no-repeat; 320 | background-size: 1.875em 1.5em; 321 | overflow: hidden; 322 | white-space: nowrap; 323 | text-indent: 100%; 324 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 325 | opacity: 0.7; 326 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 327 | } 328 | .no-svg .nav-btn { 329 | background-image: url("../img/nav-icon.png"); 330 | } 331 | .nav-btn:hover, .nav-btn:focus { 332 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 333 | opacity: 1; 334 | } 335 | 336 | #outer-wrap { 337 | position: relative; 338 | overflow: hidden; 339 | width: 100%; 340 | } 341 | 342 | #inner-wrap { 343 | position: relative; 344 | width: 100%; 345 | } 346 | 347 | #nav { 348 | z-index: 200; 349 | position: relative; 350 | overflow: hidden; 351 | width: 100%; 352 | color: #fff; 353 | } 354 | #nav .close-btn { 355 | display: none; 356 | } 357 | #nav .block-title { 358 | border: 0; 359 | clip: rect(0 0 0 0); 360 | height: 1px; 361 | margin: -1px; 362 | overflow: hidden; 363 | padding: 0; 364 | position: absolute; 365 | width: 1px; 366 | } 367 | #nav .block { 368 | z-index: 2; 369 | position: relative; 370 | padding: 0.75em 1.25em; 371 | background: #333333; 372 | } 373 | #nav ul { 374 | *zoom: 1; 375 | display: block; 376 | } 377 | #nav ul:before, #nav ul:after { 378 | content: ""; 379 | display: table; 380 | } 381 | #nav ul:after { 382 | clear: both; 383 | } 384 | #nav li { 385 | display: block; 386 | } 387 | #nav li a { 388 | display: block; 389 | color: #ccc; 390 | font-size: 0.875em; 391 | line-height: 1.28571em; 392 | font-weight: bold; 393 | outline: none; 394 | } 395 | #nav li a:focus, #nav li a:hover { 396 | color: #fff; 397 | background: rgba(255, 255, 255, 0.1); 398 | } 399 | #nav li.is-active a { 400 | color: #fff; 401 | } 402 | 403 | #top { 404 | z-index: 100; 405 | position: relative; 406 | color: #fff; 407 | background: #333333; 408 | } 409 | #top .block-title { 410 | margin: 0; 411 | font-size: 1.875em; 412 | line-height: 1.2em; 413 | text-align: center; 414 | white-space: nowrap; 415 | } 416 | #top .nav-btn { 417 | position: absolute; 418 | top: 1.5em; 419 | left: 1.875em; 420 | } 421 | 422 | #main { 423 | background: #fff; 424 | } 425 | #main .block { 426 | padding: 2.625em 1.875em; 427 | } 428 | 429 | footer[role="contentinfo"] { 430 | background: #ddd; 431 | } 432 | 433 | @media screen and (min-width: 45.0625em) { 434 | #top .nav-btn { 435 | border: 0; 436 | clip: rect(0 0 0 0); 437 | height: 1px; 438 | margin: -1px; 439 | overflow: hidden; 440 | padding: 0; 441 | position: absolute; 442 | width: 1px; 443 | } 444 | 445 | #nav .close-btn { 446 | border: 0; 447 | clip: rect(0 0 0 0); 448 | height: 1px; 449 | margin: -1px; 450 | overflow: hidden; 451 | padding: 0; 452 | position: absolute; 453 | width: 1px; 454 | } 455 | #nav .block-title { 456 | border: 0; 457 | clip: rect(0 0 0 0); 458 | height: 1px; 459 | margin: -1px; 460 | overflow: hidden; 461 | padding: 0; 462 | position: absolute; 463 | width: 1px; 464 | } 465 | #nav ul { 466 | text-align: center; 467 | white-space: nowrap; 468 | } 469 | #nav li { 470 | display: inline-block; 471 | border-right: 1px solid rgba(255, 255, 255, 0.1); 472 | } 473 | #nav li:last-child { 474 | border-right: none; 475 | } 476 | #nav li a { 477 | padding: 0.42857em 0.85714em; 478 | } 479 | } 480 | @media screen and (max-width: 45em) { 481 | #nav { 482 | position: absolute; 483 | top: 0; 484 | padding-top: 5.25em; 485 | } 486 | #nav:not(:target) { 487 | z-index: 1; 488 | height: 0; 489 | } 490 | #nav:target .close-btn { 491 | display: block; 492 | } 493 | #nav .close-btn { 494 | position: absolute; 495 | top: -3.75em; 496 | left: 1.875em; 497 | } 498 | #nav .block { 499 | position: relative; 500 | padding: 0; 501 | } 502 | #nav li { 503 | position: relative; 504 | border-top: 1px solid rgba(255, 255, 255, 0.1); 505 | } 506 | #nav li:last-child { 507 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 508 | } 509 | #nav li.is-active:after { 510 | z-index: 50; 511 | display: block; 512 | content: ""; 513 | position: absolute; 514 | top: 50%; 515 | right: -0.03125em; 516 | margin-top: -0.625em; 517 | border-top: 0.625em transparent solid; 518 | border-bottom: 0.625em transparent solid; 519 | border-right: 0.625em white solid; 520 | } 521 | #nav li a { 522 | padding: 0.85714em 2.14286em; 523 | } 524 | 525 | .js-ready #nav { 526 | height: 100%; 527 | width: 70%; 528 | background: #333333; 529 | -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 530 | -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 531 | box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 532 | } 533 | .js-ready #nav .block { 534 | background: transparent; 535 | } 536 | .js-ready #nav .close-btn { 537 | display: block; 538 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 539 | opacity: 0.7; 540 | } 541 | .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { 542 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 543 | opacity: 1; 544 | } 545 | 546 | .js-ready #nav { 547 | left: -70%; 548 | } 549 | .js-ready #inner-wrap { 550 | left: 0; 551 | } 552 | 553 | .js-nav #inner-wrap { 554 | left: 70%; 555 | } 556 | 557 | .csstransforms3d.csstransitions.js-ready #nav { 558 | left: 0; 559 | -webkit-transform: translate3d(-100%, 0, 0); 560 | -moz-transform: translate3d(-100%, 0, 0); 561 | -ms-transform: translate3d(-100%, 0, 0); 562 | -o-transform: translate3d(-100%, 0, 0); 563 | transform: translate3d(-100%, 0, 0); 564 | -webkit-backface-visibility: hidden; 565 | -moz-backface-visibility: hidden; 566 | -ms-backface-visibility: hidden; 567 | -o-backface-visibility: hidden; 568 | backface-visibility: hidden; 569 | } 570 | .csstransforms3d.csstransitions.js-ready #inner-wrap { 571 | left: 0 !important; 572 | -webkit-transform: translate3d(0, 0, 0); 573 | -moz-transform: translate3d(0, 0, 0); 574 | -ms-transform: translate3d(0, 0, 0); 575 | -o-transform: translate3d(0, 0, 0); 576 | transform: translate3d(0, 0, 0); 577 | -webkit-transition: -webkit-transform 500ms ease; 578 | -moz-transition: -moz-transform 500ms ease; 579 | -o-transition: -o-transform 500ms ease; 580 | transition: transform 500ms ease; 581 | -webkit-backface-visibility: hidden; 582 | -moz-backface-visibility: hidden; 583 | -ms-backface-visibility: hidden; 584 | -o-backface-visibility: hidden; 585 | backface-visibility: hidden; 586 | } 587 | 588 | .csstransforms3d.csstransitions.js-nav #inner-wrap { 589 | -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 590 | -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 591 | -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 592 | -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 593 | transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 594 | } 595 | } 596 | -------------------------------------------------------------------------------- /css/step4.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @-ms-viewport { 3 | width: device-width; 4 | } 5 | 6 | @viewport { 7 | width: device-width; 8 | } 9 | 10 | /* 11 | * 12 | * Copyright (c) David Bushell | http://dbushell.com/ 13 | * 14 | */ 15 | /* normalize.css v2.0.1 | MIT License | git.io/normalize */ 16 | article, 17 | aside, 18 | details, 19 | figcaption, 20 | figure, 21 | footer, 22 | header, 23 | hgroup, 24 | nav, 25 | section, 26 | summary { 27 | display: block; 28 | } 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | audio:not([controls]) { 37 | display: none; 38 | height: 0; 39 | } 40 | 41 | [hidden] { 42 | display: none; 43 | } 44 | 45 | html { 46 | font-family: sans-serif; 47 | -webkit-text-size-adjust: 100%; 48 | -ms-text-size-adjust: 100%; 49 | } 50 | 51 | body { 52 | margin: 0; 53 | } 54 | 55 | a:focus { 56 | outline: thin dotted; 57 | } 58 | 59 | a:active, 60 | a:hover { 61 | outline: 0; 62 | } 63 | 64 | h1 { 65 | font-size: 2em; 66 | } 67 | 68 | abbr[title] { 69 | border-bottom: 1px dotted; 70 | } 71 | 72 | b, 73 | strong { 74 | font-weight: bold; 75 | } 76 | 77 | dfn { 78 | font-style: italic; 79 | } 80 | 81 | mark { 82 | background: #ff0; 83 | color: #000; 84 | } 85 | 86 | code, 87 | kbd, 88 | pre, 89 | samp { 90 | font-family: monospace, serif; 91 | font-size: 1em; 92 | } 93 | 94 | pre { 95 | white-space: pre; 96 | white-space: pre-wrap; 97 | word-wrap: break-word; 98 | } 99 | 100 | q { 101 | quotes: "\201C" "\201D" "\2018" "\2019"; 102 | } 103 | 104 | small { 105 | font-size: 80%; 106 | } 107 | 108 | sub, 109 | sup { 110 | font-size: 75%; 111 | line-height: 0; 112 | position: relative; 113 | vertical-align: baseline; 114 | } 115 | 116 | sup { 117 | top: -0.5em; 118 | } 119 | 120 | sub { 121 | bottom: -0.25em; 122 | } 123 | 124 | img { 125 | border: 0; 126 | } 127 | 128 | svg:not(:root) { 129 | overflow: hidden; 130 | } 131 | 132 | figure { 133 | margin: 0; 134 | } 135 | 136 | fieldset { 137 | border: 1px solid silver; 138 | margin: 0 2px; 139 | padding: 0.35em 0.625em 0.75em; 140 | } 141 | 142 | legend { 143 | border: 0; 144 | padding: 0; 145 | } 146 | 147 | button, 148 | input, 149 | select, 150 | textarea { 151 | font-family: inherit; 152 | font-size: 100%; 153 | margin: 0; 154 | } 155 | 156 | button, 157 | input { 158 | line-height: normal; 159 | } 160 | 161 | button, 162 | html input[type="button"], 163 | input[type="reset"], 164 | input[type="submit"] { 165 | -webkit-appearance: button; 166 | cursor: pointer; 167 | } 168 | 169 | button[disabled], 170 | input[disabled] { 171 | cursor: default; 172 | } 173 | 174 | input[type="checkbox"], 175 | input[type="radio"] { 176 | box-sizing: border-box; 177 | padding: 0; 178 | } 179 | 180 | input[type="search"] { 181 | -webkit-appearance: textfield; 182 | -moz-box-sizing: content-box; 183 | -webkit-box-sizing: content-box; 184 | box-sizing: content-box; 185 | } 186 | 187 | input[type="search"]::-webkit-search-cancel-button, 188 | input[type="search"]::-webkit-search-decoration { 189 | -webkit-appearance: none; 190 | } 191 | 192 | button::-moz-focus-inner, 193 | input::-moz-focus-inner { 194 | border: 0; 195 | padding: 0; 196 | } 197 | 198 | textarea { 199 | overflow: auto; 200 | vertical-align: top; 201 | } 202 | 203 | table { 204 | border-collapse: collapse; 205 | border-spacing: 0; 206 | } 207 | 208 | ul, ol { 209 | padding: 0; 210 | list-style: none; 211 | } 212 | 213 | h1, h2, h3, h4, h5, h6, p, ul, ol { 214 | margin: 0; 215 | } 216 | 217 | a { 218 | text-decoration: none; 219 | } 220 | 221 | body { 222 | color: #333; 223 | position: relative; 224 | width: 100%; 225 | min-width: 20em; 226 | background: #333333; 227 | } 228 | 229 | .highlight { 230 | background: #fff699; 231 | padding: 0 0.5em; 232 | } 233 | 234 | .prose ul, .prose ol { 235 | list-style: outside disc; 236 | font-size: 1em; 237 | line-height: 1.5em; 238 | margin-bottom: 1.5em; 239 | } 240 | .prose p { 241 | font-size: 1em; 242 | line-height: 1.5em; 243 | margin-bottom: 1.5em; 244 | } 245 | .prose p.small { 246 | color: #666; 247 | font-size: 0.8125em; 248 | line-height: 1.84615em; 249 | margin-bottom: 1.84615em; 250 | } 251 | .prose p.medium { 252 | color: #666; 253 | font-size: 0.875em; 254 | line-height: 1.71429em; 255 | margin-bottom: 1.71429em; 256 | } 257 | .prose p:last-child { 258 | margin-bottom: 0; 259 | } 260 | .prose h1 { 261 | font-size: 1.875em; 262 | line-height: 1.2em; 263 | margin-bottom: 0.4em; 264 | } 265 | .prose h2 { 266 | font-size: 1.5em; 267 | line-height: 1.25em; 268 | margin-bottom: 0.5em; 269 | } 270 | .prose a { 271 | color: #6d7173; 272 | border-bottom: 1px solid #a1cfe5; 273 | text-decoration: none; 274 | outline: none; 275 | } 276 | .prose a:focus, .prose a:hover { 277 | color: #4ab336; 278 | border-bottom-color: #77b36b; 279 | } 280 | 281 | .block { 282 | position: relative; 283 | margin: 0 auto; 284 | padding: 1.5em 1.25em; 285 | max-width: 60em; 286 | } 287 | 288 | .close-btn { 289 | display: block; 290 | width: 2.625em; 291 | height: 2.25em; 292 | padding: 0; 293 | border: 0; 294 | outline: none; 295 | background: #333333 url("../img/close-btn.svg") left center no-repeat; 296 | background-size: 1.875em 1.875em; 297 | overflow: hidden; 298 | white-space: nowrap; 299 | text-indent: 100%; 300 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 301 | opacity: 1; 302 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 303 | } 304 | .no-svg .close-btn { 305 | background-image: url("../img/close-btn.png"); 306 | } 307 | .close-btn:focus, .close-btn:hover { 308 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 309 | opacity: 1; 310 | } 311 | 312 | .nav-btn { 313 | display: block; 314 | width: 2.625em; 315 | height: 2.25em; 316 | padding: 0; 317 | border: 0; 318 | outline: none; 319 | background: #333333 url("../img/nav-icon.svg") left center no-repeat; 320 | background-size: 1.875em 1.5em; 321 | overflow: hidden; 322 | white-space: nowrap; 323 | text-indent: 100%; 324 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 325 | opacity: 0.7; 326 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 327 | } 328 | .no-svg .nav-btn { 329 | background-image: url("../img/nav-icon.png"); 330 | } 331 | .nav-btn:hover, .nav-btn:focus { 332 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 333 | opacity: 1; 334 | } 335 | 336 | #outer-wrap { 337 | position: relative; 338 | overflow: hidden; 339 | width: 100%; 340 | } 341 | 342 | #inner-wrap { 343 | position: relative; 344 | width: 100%; 345 | } 346 | 347 | #nav { 348 | z-index: 200; 349 | position: relative; 350 | overflow: hidden; 351 | width: 100%; 352 | color: #fff; 353 | } 354 | #nav .close-btn { 355 | display: none; 356 | } 357 | #nav .block-title { 358 | border: 0; 359 | clip: rect(0 0 0 0); 360 | height: 1px; 361 | margin: -1px; 362 | overflow: hidden; 363 | padding: 0; 364 | position: absolute; 365 | width: 1px; 366 | } 367 | #nav .block { 368 | z-index: 2; 369 | position: relative; 370 | padding: 0.75em 1.25em; 371 | background: #333333; 372 | } 373 | #nav ul { 374 | *zoom: 1; 375 | display: block; 376 | } 377 | #nav ul:before, #nav ul:after { 378 | content: ""; 379 | display: table; 380 | } 381 | #nav ul:after { 382 | clear: both; 383 | } 384 | #nav li { 385 | display: block; 386 | } 387 | #nav li a { 388 | display: block; 389 | color: #ccc; 390 | font-size: 0.875em; 391 | line-height: 1.28571em; 392 | font-weight: bold; 393 | outline: none; 394 | } 395 | #nav li a:focus, #nav li a:hover { 396 | color: #fff; 397 | background: rgba(255, 255, 255, 0.1); 398 | } 399 | #nav li.is-active a { 400 | color: #fff; 401 | } 402 | 403 | #top { 404 | z-index: 100; 405 | position: relative; 406 | color: #fff; 407 | background: #333333; 408 | } 409 | #top .block-title { 410 | margin: 0; 411 | font-size: 1.875em; 412 | line-height: 1.2em; 413 | text-align: center; 414 | white-space: nowrap; 415 | } 416 | #top .nav-btn { 417 | position: absolute; 418 | top: 1.5em; 419 | left: 1.875em; 420 | } 421 | 422 | #main { 423 | background: #fff; 424 | } 425 | #main .block { 426 | padding: 2.625em 1.875em; 427 | } 428 | 429 | footer[role="contentinfo"] { 430 | background: #ddd; 431 | } 432 | 433 | @media screen and (min-width: 45.0625em) { 434 | #top .nav-btn { 435 | border: 0; 436 | clip: rect(0 0 0 0); 437 | height: 1px; 438 | margin: -1px; 439 | overflow: hidden; 440 | padding: 0; 441 | position: absolute; 442 | width: 1px; 443 | } 444 | 445 | #nav .close-btn { 446 | border: 0; 447 | clip: rect(0 0 0 0); 448 | height: 1px; 449 | margin: -1px; 450 | overflow: hidden; 451 | padding: 0; 452 | position: absolute; 453 | width: 1px; 454 | } 455 | #nav .block-title { 456 | border: 0; 457 | clip: rect(0 0 0 0); 458 | height: 1px; 459 | margin: -1px; 460 | overflow: hidden; 461 | padding: 0; 462 | position: absolute; 463 | width: 1px; 464 | } 465 | #nav ul { 466 | text-align: center; 467 | white-space: nowrap; 468 | } 469 | #nav li { 470 | display: inline-block; 471 | border-right: 1px solid rgba(255, 255, 255, 0.1); 472 | } 473 | #nav li:last-child { 474 | border-right: none; 475 | } 476 | #nav li a { 477 | padding: 0.42857em 0.85714em; 478 | } 479 | } 480 | @media screen and (max-width: 45em) { 481 | #nav { 482 | position: absolute; 483 | top: 0; 484 | padding-top: 5.25em; 485 | } 486 | #nav:not(:target) { 487 | z-index: 1; 488 | height: 0; 489 | } 490 | #nav:target .close-btn { 491 | display: block; 492 | } 493 | #nav .close-btn { 494 | position: absolute; 495 | top: -3.75em; 496 | left: 1.875em; 497 | } 498 | #nav .block { 499 | position: relative; 500 | padding: 0; 501 | } 502 | #nav li { 503 | position: relative; 504 | border-top: 1px solid rgba(255, 255, 255, 0.1); 505 | } 506 | #nav li:last-child { 507 | border-bottom: 1px solid rgba(255, 255, 255, 0.1); 508 | } 509 | #nav li.is-active:after { 510 | z-index: 50; 511 | display: block; 512 | content: ""; 513 | position: absolute; 514 | top: 50%; 515 | right: -0.03125em; 516 | margin-top: -0.625em; 517 | border-top: 0.625em transparent solid; 518 | border-bottom: 0.625em transparent solid; 519 | border-right: 0.625em white solid; 520 | } 521 | #nav li a { 522 | padding: 0.85714em 2.14286em; 523 | } 524 | 525 | .js-ready #nav { 526 | height: 100%; 527 | width: 70%; 528 | background: #333333; 529 | -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 530 | -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 531 | box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); 532 | } 533 | .js-ready #nav .block { 534 | background: transparent; 535 | } 536 | .js-ready #nav .close-btn { 537 | display: block; 538 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 539 | opacity: 0.7; 540 | } 541 | .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover { 542 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 543 | opacity: 1; 544 | } 545 | 546 | .js-ready #nav { 547 | left: -70%; 548 | } 549 | .js-ready #inner-wrap { 550 | left: 0; 551 | } 552 | 553 | .js-nav #inner-wrap { 554 | left: 70%; 555 | } 556 | 557 | .csstransforms3d.csstransitions.js-ready #nav { 558 | left: 0; 559 | -webkit-transform: translate3d(-100%, 0, 0); 560 | -moz-transform: translate3d(-100%, 0, 0); 561 | -ms-transform: translate3d(-100%, 0, 0); 562 | -o-transform: translate3d(-100%, 0, 0); 563 | transform: translate3d(-100%, 0, 0); 564 | -webkit-backface-visibility: hidden; 565 | -moz-backface-visibility: hidden; 566 | -ms-backface-visibility: hidden; 567 | -o-backface-visibility: hidden; 568 | backface-visibility: hidden; 569 | } 570 | .csstransforms3d.csstransitions.js-ready #inner-wrap { 571 | left: 0 !important; 572 | -webkit-transform: translate3d(0, 0, 0); 573 | -moz-transform: translate3d(0, 0, 0); 574 | -ms-transform: translate3d(0, 0, 0); 575 | -o-transform: translate3d(0, 0, 0); 576 | transform: translate3d(0, 0, 0); 577 | -webkit-transition: -webkit-transform 500ms ease; 578 | -moz-transition: -moz-transform 500ms ease; 579 | -o-transition: -o-transform 500ms ease; 580 | transition: transform 500ms ease; 581 | -webkit-backface-visibility: hidden; 582 | -moz-backface-visibility: hidden; 583 | -ms-backface-visibility: hidden; 584 | -o-backface-visibility: hidden; 585 | backface-visibility: hidden; 586 | } 587 | 588 | .csstransforms3d.csstransitions.js-nav #inner-wrap { 589 | -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 590 | -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 591 | -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 592 | -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 593 | transform: translate3d(70%, 0, 0) scale3d(1, 1, 1); 594 | } 595 | 596 | .csstransforms3d.csstransitions.js-ready #nav .block { 597 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 598 | opacity: 0.7; 599 | -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease; 600 | -webkit-transition-delay: ease, 0s; 601 | -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease; 602 | -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease; 603 | transition: opacity 300ms 100ms ease, transform 500ms ease; 604 | -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); 605 | -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); 606 | -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); 607 | -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); 608 | transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9); 609 | -webkit-transform-origin: 50% 0%; 610 | -moz-transform-origin: 50% 0%; 611 | -ms-transform-origin: 50% 0%; 612 | -o-transform-origin: 50% 0%; 613 | transform-origin: 50% 0%; 614 | } 615 | 616 | .csstransforms3d.csstransitions.js-nav #nav .block { 617 | filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 618 | opacity: 1; 619 | -webkit-transform: translate3d(0, 0, 0); 620 | -moz-transform: translate3d(0, 0, 0); 621 | -ms-transform: translate3d(0, 0, 0); 622 | -o-transform: translate3d(0, 0, 0); 623 | transform: translate3d(0, 0, 0); 624 | } 625 | } 626 | -------------------------------------------------------------------------------- /extras/js/jquery.animate-enhanced.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | jquery.animate-enhanced plugin v0.99 3 | --- 4 | http://github.com/benbarnett/jQuery-Animate-Enhanced 5 | http://benbarnett.net 6 | @benpbarnett 7 | */ 8 | (function(c,I,J){function O(a,b,c,f,l,k,h,p,q){var t=!1,h=!0===h&&!0===p,b=b||{};b.original||(b.original={},t=!0);b.properties=b.properties||{};b.secondary=b.secondary||{};for(var p=b.meta,m=b.original,g=b.properties,P=b.secondary,B=r.length-1;0<=B;B--){var D=r[B]+"transition-property",E=r[B]+"transition-duration",i=r[B]+"transition-timing-function",c=h?r[B]+"transform":c;t&&(m[D]=a.css(D)||"",m[E]=a.css(E)||"",m[i]=a.css(i)||"");P[c]=h?(!0===q||!0===y&&!1!==q)&&K?"translate3d("+p.left+"px, "+p.top+ 9 | "px, 0)":"translate("+p.left+"px,"+p.top+"px)":k;g[D]=(g[D]?g[D]+",":"")+c;g[E]=(g[E]?g[E]+",":"")+f+"ms";g[i]=(g[i]?g[i]+",":"")+l}return b}function z(a){for(var c in a)return!1;return!0}function G(a){return parseFloat(a.replace(a.match(/\D+$/),""))}function L(a){var c=!0;a.each(function(a,f){return c=c&&f.ownerDocument});return c}var Q="top right bottom left opacity height width".split(" "),H=["top","right","bottom","left"],r=["-webkit-","-moz-","-o-",""],R=["avoidTransforms","useTranslate3d","leaveTransforms"], 10 | S=/^([+-]=)?([\d+-.]+)(.*)$/,T=/([A-Z])/g,U={secondary:{},meta:{top:0,right:0,bottom:0,left:0}},M=null,F=!1,A=(document.body||document.documentElement).style,N=void 0!==A.WebkitTransition||void 0!==A.MozTransition||void 0!==A.OTransition||void 0!==A.transition,K="WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix,y=K;c.expr&&c.expr.filters&&(M=c.expr.filters.animated,c.expr.filters.animated=function(a){return c(a).data("events")&&c(a).data("events")["webkitTransitionEnd oTransitionEnd transitionend"]? 11 | !0:M.call(this,a)});c.extend({toggle3DByDefault:function(){return y=!y},toggleDisabledByDefault:function(){return F=!F}});c.fn.translation=function(){if(!this[0])return null;var a=window.getComputedStyle(this[0],null),c={x:0,y:0};if(a)for(var n=r.length-1;0<=n;n--){var f=a.getPropertyValue(r[n]+"transform");if(f&&/matrix/i.test(f)){a=f.replace(/^matrix\(/i,"").split(/, |\)$/g);c={x:parseInt(a[4],10),y:parseInt(a[5],10)};break}}return c};c.fn.animate=function(a,b,n,f){var a=a||{},l=!("undefined"!== 12 | typeof a.bottom||"undefined"!==typeof a.right),k=c.speed(b,n,f),h=this,p=0,q=function(){p--;0===p&&"function"===typeof k.complete&&k.complete.apply(h,arguments)},t;if(!(t=!0===("undefined"!==typeof a.avoidCSSTransitions?a.avoidCSSTransitions:F)))if(!(t=!N))if(!(t=z(a))){var m;a:{for(m in a)if(("width"==m||"height"==m)&&("show"==a[m]||"hide"==a[m]||"toggle"==a[m])){m=!0;break a}m=!1}t=m||0>=k.duration||!0===c.fn.animate.defaults.avoidTransforms&&!1!==a.avoidTransforms}return t?I.apply(this,arguments): 13 | this[!0===k.queue?"queue":"each"](function(){var g=c(this),b=c.extend({},k),h=function(b){var f=g.data("jQe")||{original:{}},e={};if(2==b.eventPhase){if(!0!==a.leaveTransforms){for(b=r.length-1;0<=b;b--)e[r[b]+"transform"]="";if(l&&"undefined"!==typeof f.meta)for(var b=0,d;d=H[b];++b)e[d]=f.meta[d+"_o"]+"px",c(this).css(d,e[d])}g.unbind("webkitTransitionEnd oTransitionEnd transitionend").css(f.original).css(e).data("jQe",null);"hide"===a.opacity&&g.css({display:"none",opacity:""});q.call(this)}}, 14 | f={bounce:"cubic-bezier(0.0, 0.35, .5, 1.3)",linear:"linear",swing:"ease-in-out",easeInQuad:"cubic-bezier(0.550, 0.085, 0.680, 0.530)",easeInCubic:"cubic-bezier(0.550, 0.055, 0.675, 0.190)",easeInQuart:"cubic-bezier(0.895, 0.030, 0.685, 0.220)",easeInQuint:"cubic-bezier(0.755, 0.050, 0.855, 0.060)",easeInSine:"cubic-bezier(0.470, 0.000, 0.745, 0.715)",easeInExpo:"cubic-bezier(0.950, 0.050, 0.795, 0.035)",easeInCirc:"cubic-bezier(0.600, 0.040, 0.980, 0.335)",easeInBack:"cubic-bezier(0.600, -0.280, 0.735, 0.045)", 15 | easeOutQuad:"cubic-bezier(0.250, 0.460, 0.450, 0.940)",easeOutCubic:"cubic-bezier(0.215, 0.610, 0.355, 1.000)",easeOutQuart:"cubic-bezier(0.165, 0.840, 0.440, 1.000)",easeOutQuint:"cubic-bezier(0.230, 1.000, 0.320, 1.000)",easeOutSine:"cubic-bezier(0.390, 0.575, 0.565, 1.000)",easeOutExpo:"cubic-bezier(0.190, 1.000, 0.220, 1.000)",easeOutCirc:"cubic-bezier(0.075, 0.820, 0.165, 1.000)",easeOutBack:"cubic-bezier(0.175, 0.885, 0.320, 1.275)",easeInOutQuad:"cubic-bezier(0.455, 0.030, 0.515, 0.955)",easeInOutCubic:"cubic-bezier(0.645, 0.045, 0.355, 1.000)", 16 | easeInOutQuart:"cubic-bezier(0.770, 0.000, 0.175, 1.000)",easeInOutQuint:"cubic-bezier(0.860, 0.000, 0.070, 1.000)",easeInOutSine:"cubic-bezier(0.445, 0.050, 0.550, 0.950)",easeInOutExpo:"cubic-bezier(1.000, 0.000, 0.000, 1.000)",easeInOutCirc:"cubic-bezier(0.785, 0.135, 0.150, 0.860)",easeInOutBack:"cubic-bezier(0.680, -0.550, 0.265, 1.550)"},m={},f=f[b.easing||"swing"]?f[b.easing||"swing"]:b.easing||"swing",i;for(i in a)if(-1===c.inArray(i,R)){var n=-1 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 | [J] Treasure Island 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | 35 | 36 | 59 | 60 |
61 |
62 | 63 |

Treasure Island

64 | 65 |

SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having 66 | asked me to write down the whole particulars about Treasure Island, from 67 | the beginning to the end, keeping nothing back but the bearings of the 68 | island, and that only because there is still treasure not yet lifted, I 69 | take up my pen in the year of grace 17__ and go back to the time when 70 | my father kept the Admiral Benbow inn and the brown old seaman with the 71 | sabre cut first took up his lodging under our roof.

72 |

I remember him as if it were yesterday, as he came plodding to the 73 | inn door, his sea-chest following behind him in a hand-barrow—a 74 | tall, strong, heavy, nut-brown man, his tarry pigtail falling over the 75 | shoulder of his soiled blue coat, his hands ragged and scarred, with 76 | black, broken nails, and the sabre cut across one cheek, a dirty, livid 77 | white. I remember him looking round the cover and whistling to himself 78 | as he did so, and then breaking out in that old sea-song that he sang so 79 | often afterwards:

80 |

in the high, old tottering voice that seemed to have been tuned and 81 | broken at the capstan bars. Then he rapped on the door with a bit of 82 | stick like a handspike that he carried, and when my father appeared, 83 | called roughly for a glass of rum. This, when it was brought to him, 84 | he drank slowly, like a connoisseur, lingering on the taste and still 85 | looking about him at the cliffs and up at our signboard.

86 |

"This is a handy cove," says he at length; "and a pleasant sittyated 87 | grog-shop. Much company, mate?"

88 |

My father told him no, very little company, the more was the pity.

89 |

"Well, then," said he, "this is the berth for me. Here you, matey," he 90 | cried to the man who trundled the barrow; "bring up alongside and help 91 | up my chest. I'll stay here a bit," he continued. "I'm a plain man; rum 92 | and bacon and eggs is what I want, and that head up there for to watch 93 | ships off. What you mought call me? You mought call me captain. Oh, I 94 | see what you're at—there"; and he threw down three or four gold pieces 95 | on the threshold. "You can tell me when I've worked through that," says 96 | he, looking as fierce as a commander.

97 |

And indeed bad as his clothes were and coarsely as he spoke, he had none 98 | of the appearance of a man who sailed before the mast, but seemed like 99 | a mate or skipper accustomed to be obeyed or to strike. The man who came 100 | with the barrow told us the mail had set him down the morning before at 101 | the Royal George, that he had inquired what inns there were along the 102 | coast, and hearing ours well spoken of, I suppose, and described as 103 | lonely, had chosen it from the others for his place of residence. And 104 | that was all we could learn of our guest.

105 |

He was a very silent man by custom. All day he hung round the cove or 106 | upon the cliffs with a brass telescope; all evening he sat in a corner 107 | of the parlour next the fire and drank rum and water very strong. Mostly 108 | he would not speak when spoken to, only look up sudden and fierce and 109 | blow through his nose like a fog-horn; and we and the people who came 110 | about our house soon learned to let him be. Every day when he came back 111 | from his stroll he would ask if any seafaring men had gone by along the 112 | road. At first we thought it was the want of company of his own kind 113 | that made him ask this question, but at last we began to see he was 114 | desirous to avoid them. When a seaman did put up at the Admiral Benbow 115 | (as now and then some did, making by the coast road for Bristol) he 116 | would look in at him through the curtained door before he entered the 117 | parlour; and he was always sure to be as silent as a mouse when any such 118 | was present. For me, at least, there was no secret about the matter, for 119 | I was, in a way, a sharer in his alarms. He had taken me aside one day 120 | and promised me a silver fourpenny on the first of every month if I 121 | would only keep my "weather-eye open for a seafaring man with one leg" 122 | and let him know the moment he appeared. Often enough when the first 123 | of the month came round and I applied to him for my wage, he would only 124 | blow through his nose at me and stare me down, but before the week was 125 | out he was sure to think better of it, bring me my four-penny piece, and 126 | repeat his orders to look out for "the seafaring man with one leg."

127 |

How that personage haunted my dreams, I need scarcely tell you. On 128 | stormy nights, when the wind shook the four corners of the house and 129 | the surf roared along the cove and up the cliffs, I would see him in a 130 | thousand forms, and with a thousand diabolical expressions. Now the leg 131 | would be cut off at the knee, now at the hip; now he was a monstrous 132 | kind of a creature who had never had but the one leg, and that in the 133 | middle of his body. To see him leap and run and pursue me over hedge and 134 | ditch was the worst of nightmares. And altogether I paid pretty dear for 135 | my monthly fourpenny piece, in the shape of these abominable fancies.

136 |

But though I was so terrified by the idea of the seafaring man with one 137 | leg, I was far less afraid of the captain himself than anybody else who 138 | knew him. There were nights when he took a deal more rum and water 139 | than his head would carry; and then he would sometimes sit and sing his 140 | wicked, old, wild sea-songs, minding nobody; but sometimes he would call 141 | for glasses round and force all the trembling company to listen to his 142 | stories or bear a chorus to his singing. Often I have heard the house 143 | shaking with "Yo-ho-ho, and a bottle of rum," all the neighbours joining 144 | in for dear life, with the fear of death upon them, and each singing 145 | louder than the other to avoid remark. For in these fits he was the most 146 | overriding companion ever known; he would slap his hand on the table for 147 | silence all round; he would fly up in a passion of anger at a question, 148 | or sometimes because none was put, and so he judged the company was not 149 | following his story. Nor would he allow anyone to leave the inn till he 150 | had drunk himself sleepy and reeled off to bed.

151 |

His stories were what frightened people worst of all. Dreadful stories 152 | they were—about hanging, and walking the plank, and storms at sea, and 153 | the Dry Tortugas, and wild deeds and places on the Spanish Main. By his 154 | own account he must have lived his life among some of the wickedest men 155 | that God ever allowed upon the sea, and the language in which he told 156 | these stories shocked our plain country people almost as much as the 157 | crimes that he described. My father was always saying the inn would be 158 | ruined, for people would soon cease coming there to be tyrannized over 159 | and put down, and sent shivering to their beds; but I really believe his 160 | presence did us good. People were frightened at the time, but on looking 161 | back they rather liked it; it was a fine excitement in a quiet country 162 | life, and there was even a party of the younger men who pretended to 163 | admire him, calling him a "true sea-dog" and a "real old salt" and 164 | such like names, and saying there was the sort of man that made England 165 | terrible at sea.

166 |

In one way, indeed, he bade fair to ruin us, for he kept on staying week 167 | after week, and at last month after month, so that all the money had 168 | been long exhausted, and still my father never plucked up the heart to 169 | insist on having more. If ever he mentioned it, the captain blew through 170 | his nose so loudly that you might say he roared, and stared my poor 171 | father out of the room. I have seen him wringing his hands after such a 172 | rebuff, and I am sure the annoyance and the terror he lived in must have 173 | greatly hastened his early and unhappy death.

174 |

All the time he lived with us the captain made no change whatever in his 175 | dress but to buy some stockings from a hawker. One of the cocks of his 176 | hat having fallen down, he let it hang from that day forth, though it 177 | was a great annoyance when it blew. I remember the appearance of his 178 | coat, which he patched himself upstairs in his room, and which, before 179 | the end, was nothing but patches. He never wrote or received a letter, 180 | and he never spoke with any but the neighbours, and with these, for the 181 | most part, only when drunk on rum. The great sea-chest none of us had 182 | ever seen open.

183 |

He was only once crossed, and that was towards the end, when my poor 184 | father was far gone in a decline that took him off. Dr. Livesey came 185 | late one afternoon to see the patient, took a bit of dinner from my 186 | mother, and went into the parlour to smoke a pipe until his horse should 187 | come down from the hamlet, for we had no stabling at the old Benbow. I 188 | followed him in, and I remember observing the contrast the neat, bright 189 | doctor, with his powder as white as snow and his bright, black eyes and 190 | pleasant manners, made with the coltish country folk, and above all, 191 | with that filthy, heavy, bleared scarecrow of a pirate of ours, sitting, 192 | far gone in rum, with his arms on the table. Suddenly he—the captain, 193 | that is—began to pipe up his eternal song:

194 |

At first I had supposed "the dead man's chest" to be that identical big 195 | box of his upstairs in the front room, and the thought had been mingled 196 | in my nightmares with that of the one-legged seafaring man. But by this 197 | time we had all long ceased to pay any particular notice to the song; it 198 | was new, that night, to nobody but Dr. Livesey, and on him I observed it 199 | did not produce an agreeable effect, for he looked up for a moment quite 200 | angrily before he went on with his talk to old Taylor, the gardener, on 201 | a new cure for the rheumatics. In the meantime, the captain gradually 202 | brightened up at his own music, and at last flapped his hand upon 203 | the table before him in a way we all knew to mean silence. The voices 204 | stopped at once, all but Dr. Livesey's; he went on as before speaking 205 | clear and kind and drawing briskly at his pipe between every word or 206 | two. The captain glared at him for a while, flapped his hand again, 207 | glared still harder, and at last broke out with a villainous, low oath, 208 | "Silence, there, between decks!"

209 |

"Were you addressing me, sir?" says the doctor; and when the ruffian had 210 | told him, with another oath, that this was so, "I have only one thing to 211 | say to you, sir," replies the doctor, "that if you keep on drinking rum, 212 | the world will soon be quit of a very dirty scoundrel!"

213 |

The old fellow's fury was awful. He sprang to his feet, drew and opened 214 | a sailor's clasp-knife, and balancing it open on the palm of his hand, 215 | threatened to pin the doctor to the wall.

216 |

The doctor never so much as moved. He spoke to him as before, over his 217 | shoulder and in the same tone of voice, rather high, so that all the 218 | room might hear, but perfectly calm and steady: "If you do not put that 219 | knife this instant in your pocket, I promise, upon my honour, you shall 220 | hang at the next assizes."

221 |

Then followed a battle of looks between them, but the captain soon 222 | knuckled under, put up his weapon, and resumed his seat, grumbling like 223 | a beaten dog.

224 |

"And now, sir," continued the doctor, "since I now know there's such a 225 | fellow in my district, you may count I'll have an eye upon you day and 226 | night. I'm not a doctor only; I'm a magistrate; and if I catch a breath 227 | of complaint against you, if it's only for a piece of incivility like 228 | tonight's, I'll take effectual means to have you hunted down and routed 229 | out of this. Let that suffice."

230 |

Soon after, Dr. Livesey's horse came to the door and he rode away, but 231 | the captain held his peace that evening, and for many evenings to come.

232 | 233 |
234 |
235 | 236 | 242 | 243 |
244 | 245 |
246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /extras/step3-jquery-enhanced.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 11 | 12 | 13 | [J] Treasure Island 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | 35 | 36 | 59 | 60 |
61 |
62 | 63 |

Treasure Island

64 | 65 |

SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having 66 | asked me to write down the whole particulars about Treasure Island, from 67 | the beginning to the end, keeping nothing back but the bearings of the 68 | island, and that only because there is still treasure not yet lifted, I 69 | take up my pen in the year of grace 17__ and go back to the time when 70 | my father kept the Admiral Benbow inn and the brown old seaman with the 71 | sabre cut first took up his lodging under our roof.

72 |

I remember him as if it were yesterday, as he came plodding to the 73 | inn door, his sea-chest following behind him in a hand-barrow—a 74 | tall, strong, heavy, nut-brown man, his tarry pigtail falling over the 75 | shoulder of his soiled blue coat, his hands ragged and scarred, with 76 | black, broken nails, and the sabre cut across one cheek, a dirty, livid 77 | white. I remember him looking round the cover and whistling to himself 78 | as he did so, and then breaking out in that old sea-song that he sang so 79 | often afterwards:

80 |

in the high, old tottering voice that seemed to have been tuned and 81 | broken at the capstan bars. Then he rapped on the door with a bit of 82 | stick like a handspike that he carried, and when my father appeared, 83 | called roughly for a glass of rum. This, when it was brought to him, 84 | he drank slowly, like a connoisseur, lingering on the taste and still 85 | looking about him at the cliffs and up at our signboard.

86 |

"This is a handy cove," says he at length; "and a pleasant sittyated 87 | grog-shop. Much company, mate?"

88 |

My father told him no, very little company, the more was the pity.

89 |

"Well, then," said he, "this is the berth for me. Here you, matey," he 90 | cried to the man who trundled the barrow; "bring up alongside and help 91 | up my chest. I'll stay here a bit," he continued. "I'm a plain man; rum 92 | and bacon and eggs is what I want, and that head up there for to watch 93 | ships off. What you mought call me? You mought call me captain. Oh, I 94 | see what you're at—there"; and he threw down three or four gold pieces 95 | on the threshold. "You can tell me when I've worked through that," says 96 | he, looking as fierce as a commander.

97 |

And indeed bad as his clothes were and coarsely as he spoke, he had none 98 | of the appearance of a man who sailed before the mast, but seemed like 99 | a mate or skipper accustomed to be obeyed or to strike. The man who came 100 | with the barrow told us the mail had set him down the morning before at 101 | the Royal George, that he had inquired what inns there were along the 102 | coast, and hearing ours well spoken of, I suppose, and described as 103 | lonely, had chosen it from the others for his place of residence. And 104 | that was all we could learn of our guest.

105 |

He was a very silent man by custom. All day he hung round the cove or 106 | upon the cliffs with a brass telescope; all evening he sat in a corner 107 | of the parlour next the fire and drank rum and water very strong. Mostly 108 | he would not speak when spoken to, only look up sudden and fierce and 109 | blow through his nose like a fog-horn; and we and the people who came 110 | about our house soon learned to let him be. Every day when he came back 111 | from his stroll he would ask if any seafaring men had gone by along the 112 | road. At first we thought it was the want of company of his own kind 113 | that made him ask this question, but at last we began to see he was 114 | desirous to avoid them. When a seaman did put up at the Admiral Benbow 115 | (as now and then some did, making by the coast road for Bristol) he 116 | would look in at him through the curtained door before he entered the 117 | parlour; and he was always sure to be as silent as a mouse when any such 118 | was present. For me, at least, there was no secret about the matter, for 119 | I was, in a way, a sharer in his alarms. He had taken me aside one day 120 | and promised me a silver fourpenny on the first of every month if I 121 | would only keep my "weather-eye open for a seafaring man with one leg" 122 | and let him know the moment he appeared. Often enough when the first 123 | of the month came round and I applied to him for my wage, he would only 124 | blow through his nose at me and stare me down, but before the week was 125 | out he was sure to think better of it, bring me my four-penny piece, and 126 | repeat his orders to look out for "the seafaring man with one leg."

127 |

How that personage haunted my dreams, I need scarcely tell you. On 128 | stormy nights, when the wind shook the four corners of the house and 129 | the surf roared along the cove and up the cliffs, I would see him in a 130 | thousand forms, and with a thousand diabolical expressions. Now the leg 131 | would be cut off at the knee, now at the hip; now he was a monstrous 132 | kind of a creature who had never had but the one leg, and that in the 133 | middle of his body. To see him leap and run and pursue me over hedge and 134 | ditch was the worst of nightmares. And altogether I paid pretty dear for 135 | my monthly fourpenny piece, in the shape of these abominable fancies.

136 |

But though I was so terrified by the idea of the seafaring man with one 137 | leg, I was far less afraid of the captain himself than anybody else who 138 | knew him. There were nights when he took a deal more rum and water 139 | than his head would carry; and then he would sometimes sit and sing his 140 | wicked, old, wild sea-songs, minding nobody; but sometimes he would call 141 | for glasses round and force all the trembling company to listen to his 142 | stories or bear a chorus to his singing. Often I have heard the house 143 | shaking with "Yo-ho-ho, and a bottle of rum," all the neighbours joining 144 | in for dear life, with the fear of death upon them, and each singing 145 | louder than the other to avoid remark. For in these fits he was the most 146 | overriding companion ever known; he would slap his hand on the table for 147 | silence all round; he would fly up in a passion of anger at a question, 148 | or sometimes because none was put, and so he judged the company was not 149 | following his story. Nor would he allow anyone to leave the inn till he 150 | had drunk himself sleepy and reeled off to bed.

151 |

His stories were what frightened people worst of all. Dreadful stories 152 | they were—about hanging, and walking the plank, and storms at sea, and 153 | the Dry Tortugas, and wild deeds and places on the Spanish Main. By his 154 | own account he must have lived his life among some of the wickedest men 155 | that God ever allowed upon the sea, and the language in which he told 156 | these stories shocked our plain country people almost as much as the 157 | crimes that he described. My father was always saying the inn would be 158 | ruined, for people would soon cease coming there to be tyrannized over 159 | and put down, and sent shivering to their beds; but I really believe his 160 | presence did us good. People were frightened at the time, but on looking 161 | back they rather liked it; it was a fine excitement in a quiet country 162 | life, and there was even a party of the younger men who pretended to 163 | admire him, calling him a "true sea-dog" and a "real old salt" and 164 | such like names, and saying there was the sort of man that made England 165 | terrible at sea.

166 |

In one way, indeed, he bade fair to ruin us, for he kept on staying week 167 | after week, and at last month after month, so that all the money had 168 | been long exhausted, and still my father never plucked up the heart to 169 | insist on having more. If ever he mentioned it, the captain blew through 170 | his nose so loudly that you might say he roared, and stared my poor 171 | father out of the room. I have seen him wringing his hands after such a 172 | rebuff, and I am sure the annoyance and the terror he lived in must have 173 | greatly hastened his early and unhappy death.

174 |

All the time he lived with us the captain made no change whatever in his 175 | dress but to buy some stockings from a hawker. One of the cocks of his 176 | hat having fallen down, he let it hang from that day forth, though it 177 | was a great annoyance when it blew. I remember the appearance of his 178 | coat, which he patched himself upstairs in his room, and which, before 179 | the end, was nothing but patches. He never wrote or received a letter, 180 | and he never spoke with any but the neighbours, and with these, for the 181 | most part, only when drunk on rum. The great sea-chest none of us had 182 | ever seen open.

183 |

He was only once crossed, and that was towards the end, when my poor 184 | father was far gone in a decline that took him off. Dr. Livesey came 185 | late one afternoon to see the patient, took a bit of dinner from my 186 | mother, and went into the parlour to smoke a pipe until his horse should 187 | come down from the hamlet, for we had no stabling at the old Benbow. I 188 | followed him in, and I remember observing the contrast the neat, bright 189 | doctor, with his powder as white as snow and his bright, black eyes and 190 | pleasant manners, made with the coltish country folk, and above all, 191 | with that filthy, heavy, bleared scarecrow of a pirate of ours, sitting, 192 | far gone in rum, with his arms on the table. Suddenly he—the captain, 193 | that is—began to pipe up his eternal song:

194 |

At first I had supposed "the dead man's chest" to be that identical big 195 | box of his upstairs in the front room, and the thought had been mingled 196 | in my nightmares with that of the one-legged seafaring man. But by this 197 | time we had all long ceased to pay any particular notice to the song; it 198 | was new, that night, to nobody but Dr. Livesey, and on him I observed it 199 | did not produce an agreeable effect, for he looked up for a moment quite 200 | angrily before he went on with his talk to old Taylor, the gardener, on 201 | a new cure for the rheumatics. In the meantime, the captain gradually 202 | brightened up at his own music, and at last flapped his hand upon 203 | the table before him in a way we all knew to mean silence. The voices 204 | stopped at once, all but Dr. Livesey's; he went on as before speaking 205 | clear and kind and drawing briskly at his pipe between every word or 206 | two. The captain glared at him for a while, flapped his hand again, 207 | glared still harder, and at last broke out with a villainous, low oath, 208 | "Silence, there, between decks!"

209 |

"Were you addressing me, sir?" says the doctor; and when the ruffian had 210 | told him, with another oath, that this was so, "I have only one thing to 211 | say to you, sir," replies the doctor, "that if you keep on drinking rum, 212 | the world will soon be quit of a very dirty scoundrel!"

213 |

The old fellow's fury was awful. He sprang to his feet, drew and opened 214 | a sailor's clasp-knife, and balancing it open on the palm of his hand, 215 | threatened to pin the doctor to the wall.

216 |

The doctor never so much as moved. He spoke to him as before, over his 217 | shoulder and in the same tone of voice, rather high, so that all the 218 | room might hear, but perfectly calm and steady: "If you do not put that 219 | knife this instant in your pocket, I promise, upon my honour, you shall 220 | hang at the next assizes."

221 |

Then followed a battle of looks between them, but the captain soon 222 | knuckled under, put up his weapon, and resumed his seat, grumbling like 223 | a beaten dog.

224 |

"And now, sir," continued the doctor, "since I now know there's such a 225 | fellow in my district, you may count I'll have an eye upon you day and 226 | night. I'm not a doctor only; I'm a magistrate; and if I catch a breath 227 | of complaint against you, if it's only for a piece of incivility like 228 | tonight's, I'll take effectual means to have you hunted down and routed 229 | out of this. Let that suffice."

230 |

Soon after, Dr. Livesey's horse came to the door and he rode away, but 231 | the captain held his peace that evening, and for many evenings to come.

232 | 233 |
234 |
235 | 236 | 242 | 243 |
244 | 245 |
246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | -------------------------------------------------------------------------------- /img/close-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbushell/Responsive-Off-Canvas-Menu/9facc8cd66f4cbfa87d30ded1c335883f312e2d2/img/close-btn.png -------------------------------------------------------------------------------- /img/close-btn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /img/nav-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbushell/Responsive-Off-Canvas-Menu/9facc8cd66f4cbfa87d30ded1c335883f312e2d2/img/nav-icon.png -------------------------------------------------------------------------------- /img/nav-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /js/main.jquery.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * Copyright (c) David Bushell | http://dbushell.com/ 4 | * 5 | */ 6 | (function(window, document, undefined) 7 | { 8 | 9 | window.App = (function() 10 | { 11 | 12 | var _init = false, app = { }; 13 | 14 | app.init = function() 15 | { 16 | if (_init) { 17 | return; 18 | } 19 | _init = true; 20 | 21 | var nav_open = false, 22 | $inner = $('#inner-wrap'); 23 | 24 | $('#nav-open-btn').on('click', function() 25 | { 26 | if (!nav_open) { 27 | $inner.animate({ left: '70%' }, 500); 28 | nav_open = true; 29 | return false; 30 | } 31 | }); 32 | 33 | $('#nav-close-btn').on('click', function() 34 | { 35 | if (nav_open) { 36 | $inner.animate({ left: '0' }, 500); 37 | nav_open = false; 38 | return false; 39 | } 40 | }); 41 | 42 | $(document.documentElement).addClass('js-ready'); 43 | }; 44 | 45 | return app; 46 | 47 | })(); 48 | 49 | $.fn.ready(function() 50 | { 51 | window.App.init(); 52 | }); 53 | 54 | })(window, window.document); 55 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * 3 | * Copyright (c) David Bushell | http://dbushell.com/ 4 | * 5 | */ 6 | (function(window, document, undefined) 7 | { 8 | 9 | // helper functions 10 | 11 | var trim = function(str) 12 | { 13 | return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,''); 14 | }; 15 | 16 | var hasClass = function(el, cn) 17 | { 18 | return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1; 19 | }; 20 | 21 | var addClass = function(el, cn) 22 | { 23 | if (!hasClass(el, cn)) { 24 | el.className = (el.className === '') ? cn : el.className + ' ' + cn; 25 | } 26 | }; 27 | 28 | var removeClass = function(el, cn) 29 | { 30 | el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' ')); 31 | }; 32 | 33 | var hasParent = function(el, id) 34 | { 35 | if (el) { 36 | do { 37 | if (el.id === id) { 38 | return true; 39 | } 40 | if (el.nodeType === 9) { 41 | break; 42 | } 43 | } 44 | while((el = el.parentNode)); 45 | } 46 | return false; 47 | }; 48 | 49 | // normalize vendor prefixes 50 | 51 | var doc = document.documentElement; 52 | 53 | var transform_prop = window.Modernizr.prefixed('transform'), 54 | transition_prop = window.Modernizr.prefixed('transition'), 55 | transition_end = (function() { 56 | var props = { 57 | 'WebkitTransition' : 'webkitTransitionEnd', 58 | 'MozTransition' : 'transitionend', 59 | 'OTransition' : 'oTransitionEnd otransitionend', 60 | 'msTransition' : 'MSTransitionEnd', 61 | 'transition' : 'transitionend' 62 | }; 63 | return props.hasOwnProperty(transition_prop) ? props[transition_prop] : false; 64 | })(); 65 | 66 | window.App = (function() 67 | { 68 | 69 | var _init = false, app = { }; 70 | 71 | var inner = document.getElementById('inner-wrap'), 72 | 73 | nav_open = false, 74 | 75 | nav_class = 'js-nav'; 76 | 77 | 78 | app.init = function() 79 | { 80 | if (_init) { 81 | return; 82 | } 83 | _init = true; 84 | 85 | var closeNavEnd = function(e) 86 | { 87 | if (e && e.target === inner) { 88 | document.removeEventListener(transition_end, closeNavEnd, false); 89 | } 90 | nav_open = false; 91 | }; 92 | 93 | app.closeNav =function() 94 | { 95 | if (nav_open) { 96 | // close navigation after transition or immediately 97 | var duration = (transition_end && transition_prop) ? parseFloat(window.getComputedStyle(inner, '')[transition_prop + 'Duration']) : 0; 98 | if (duration > 0) { 99 | document.addEventListener(transition_end, closeNavEnd, false); 100 | } else { 101 | closeNavEnd(null); 102 | } 103 | } 104 | removeClass(doc, nav_class); 105 | }; 106 | 107 | app.openNav = function() 108 | { 109 | if (nav_open) { 110 | return; 111 | } 112 | addClass(doc, nav_class); 113 | nav_open = true; 114 | }; 115 | 116 | app.toggleNav = function(e) 117 | { 118 | if (nav_open && hasClass(doc, nav_class)) { 119 | app.closeNav(); 120 | } else { 121 | app.openNav(); 122 | } 123 | if (e) { 124 | e.preventDefault(); 125 | } 126 | }; 127 | 128 | // open nav with main "nav" button 129 | document.getElementById('nav-open-btn').addEventListener('click', app.toggleNav, false); 130 | 131 | // close nav with main "close" button 132 | document.getElementById('nav-close-btn').addEventListener('click', app.toggleNav, false); 133 | 134 | // close nav by touching the partial off-screen content 135 | document.addEventListener('click', function(e) 136 | { 137 | if (nav_open && !hasParent(e.target, 'nav')) { 138 | e.preventDefault(); 139 | app.closeNav(); 140 | } 141 | }, 142 | true); 143 | 144 | addClass(doc, 'js-ready'); 145 | 146 | }; 147 | 148 | return app; 149 | 150 | })(); 151 | 152 | if (window.addEventListener) { 153 | window.addEventListener('DOMContentLoaded', window.App.init, false); 154 | } 155 | 156 | })(window, window.document); 157 | -------------------------------------------------------------------------------- /js/modernizr.js: -------------------------------------------------------------------------------- 1 | document.documentElement.innerHTML = ''; 2 | alert('do not load this script directly from Github!'); 3 | -------------------------------------------------------------------------------- /js/modernizr.min.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-svg-touch-shiv-mq-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function B(a){j.cssText=a}function C(a,b){return B(m.join(a+";")+(b||""))}function D(a,b){return typeof a===b}function E(a,b){return!!~(""+a).indexOf(b)}function F(a,b){for(var d in a){var e=a[d];if(!E(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function G(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:D(f,"function")?f.bind(d||b):f}return!1}function H(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return D(b,"string")||D(b,"undefined")?F(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),G(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={svg:"http://www.w3.org/2000/svg"},r={},s={},t={},u=[],v=u.slice,w,x=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},y=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return x("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},z={}.hasOwnProperty,A;!D(z,"undefined")&&!D(z.call,"undefined")?A=function(a,b){return z.call(a,b)}:A=function(a,b){return b in a&&D(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=v.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(v.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(v.call(arguments)))};return e}),r.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:x(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},r.csstransforms=function(){return!!H("transform")},r.csstransforms3d=function(){var a=!!H("perspective");return a&&"webkitPerspective"in g.style&&x("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},r.csstransitions=function(){return H("transition")},r.svg=function(){return!!b.createElementNS&&!!b.createElementNS(q.svg,"svg").createSVGRect};for(var I in r)A(r,I)&&(w=I.toLowerCase(),e[w]=r[I](),u.push((e[w]?"":"no-")+w));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)A(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},B(""),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=m,e._domPrefixes=p,e._cssomPrefixes=o,e.mq=y,e.testProp=function(a){return F([a])},e.testAllProps=H,e.testStyles=x,e.prefixed=function(a,b,c){return b?H(a,b,c):H(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+u.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