├── favicon.ico ├── assets ├── img │ ├── sax.png │ ├── tone.png │ ├── kingmix.png │ ├── aliens-bg.jpg │ ├── logo-black.png │ ├── logo-white.png │ ├── mi1-stacked-0.png │ ├── mi1-stacked-1.png │ ├── mi1-stacked-2.png │ ├── mi1-stacked-3.png │ ├── mi1-stacked-4.png │ ├── mi1-stacked-5.png │ ├── mi1-stacked-6.png │ ├── mi2-original.jpg │ ├── share-image.jpg │ ├── genereavventura.jpg │ ├── mi2-concept-art.jpg │ ├── logo-white-shadow.png │ └── mi2-special-edition.jpg ├── fonts │ ├── Amaranth-webfont.eot │ ├── Amaranth-webfont.ttf │ ├── Amaranth-webfont.woff │ ├── Amaranth-Bold-webfont.eot │ ├── Amaranth-Bold-webfont.ttf │ ├── Amaranth-Bold-webfont.woff │ ├── Amaranth-Italic-webfont.eot │ ├── Amaranth-Italic-webfont.ttf │ ├── Amaranth-Italic-webfont.woff │ ├── Amaranth-BoldItalic-webfont.eot │ ├── Amaranth-BoldItalic-webfont.ttf │ ├── Amaranth-BoldItalic-webfont.woff │ ├── Amaranth SIL OFL Font License 1.1.txt │ ├── Amaranth-Bold-webfont.svg │ └── Amaranth-webfont.svg ├── css │ ├── reset.css │ └── prism.css └── js │ └── prism.js ├── .gitignore ├── LICENSE.md ├── js ├── brav1toolbox.js └── flowtime.min.js ├── css ├── flowtime.css └── themes │ └── default.css ├── README.md └── index.html /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/favicon.ico -------------------------------------------------------------------------------- /assets/img/sax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/sax.png -------------------------------------------------------------------------------- /assets/img/tone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/tone.png -------------------------------------------------------------------------------- /assets/img/kingmix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/kingmix.png -------------------------------------------------------------------------------- /assets/img/aliens-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/aliens-bg.jpg -------------------------------------------------------------------------------- /assets/img/logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/logo-black.png -------------------------------------------------------------------------------- /assets/img/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/logo-white.png -------------------------------------------------------------------------------- /assets/img/mi1-stacked-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi1-stacked-0.png -------------------------------------------------------------------------------- /assets/img/mi1-stacked-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi1-stacked-1.png -------------------------------------------------------------------------------- /assets/img/mi1-stacked-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi1-stacked-2.png -------------------------------------------------------------------------------- /assets/img/mi1-stacked-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi1-stacked-3.png -------------------------------------------------------------------------------- /assets/img/mi1-stacked-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi1-stacked-4.png -------------------------------------------------------------------------------- /assets/img/mi1-stacked-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi1-stacked-5.png -------------------------------------------------------------------------------- /assets/img/mi1-stacked-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi1-stacked-6.png -------------------------------------------------------------------------------- /assets/img/mi2-original.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi2-original.jpg -------------------------------------------------------------------------------- /assets/img/share-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/share-image.jpg -------------------------------------------------------------------------------- /assets/img/genereavventura.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/genereavventura.jpg -------------------------------------------------------------------------------- /assets/img/mi2-concept-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi2-concept-art.jpg -------------------------------------------------------------------------------- /assets/fonts/Amaranth-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-webfont.eot -------------------------------------------------------------------------------- /assets/fonts/Amaranth-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-webfont.ttf -------------------------------------------------------------------------------- /assets/img/logo-white-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/logo-white-shadow.png -------------------------------------------------------------------------------- /assets/fonts/Amaranth-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-webfont.woff -------------------------------------------------------------------------------- /assets/img/mi2-special-edition.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/img/mi2-special-edition.jpg -------------------------------------------------------------------------------- /assets/fonts/Amaranth-Bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-Bold-webfont.eot -------------------------------------------------------------------------------- /assets/fonts/Amaranth-Bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-Bold-webfont.ttf -------------------------------------------------------------------------------- /assets/fonts/Amaranth-Bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-Bold-webfont.woff -------------------------------------------------------------------------------- /assets/fonts/Amaranth-Italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-Italic-webfont.eot -------------------------------------------------------------------------------- /assets/fonts/Amaranth-Italic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-Italic-webfont.ttf -------------------------------------------------------------------------------- /assets/fonts/Amaranth-Italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-Italic-webfont.woff -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .svn 3 | demo 4 | demo-candy 5 | demo-skyline 6 | *.sublime-project 7 | *.sublime-workspace 8 | *.dev.* 9 | _wip -------------------------------------------------------------------------------- /assets/fonts/Amaranth-BoldItalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-BoldItalic-webfont.eot -------------------------------------------------------------------------------- /assets/fonts/Amaranth-BoldItalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-BoldItalic-webfont.ttf -------------------------------------------------------------------------------- /assets/fonts/Amaranth-BoldItalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneesha/flowtime.js/master/assets/fonts/Amaranth-BoldItalic-webfont.woff -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012-2013 Marco Lago, http://marcolago.com 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /assets/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | strong, b { 35 | font-weight: bold; 36 | } 37 | ol, ul { 38 | list-style: none; 39 | } 40 | blockquote, q { 41 | quotes: none; 42 | } 43 | blockquote:before, blockquote:after, 44 | q:before, q:after { 45 | content: ''; 46 | content: none; 47 | } 48 | table { 49 | border-collapse: collapse; 50 | border-spacing: 0; 51 | } -------------------------------------------------------------------------------- /assets/css/prism.css: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js Dark theme for JavaScript, CSS and HTML 3 | * Based on the slides of the talk “/Reg(exp){2}lained/” 4 | * @author Lea Verou 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: white; 10 | text-shadow: 0 -.1em .2em black; 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | 17 | -moz-tab-size: 4; 18 | -o-tab-size: 4; 19 | tab-size: 4; 20 | 21 | -webkit-hyphens: none; 22 | -moz-hyphens: none; 23 | -ms-hyphens: none; 24 | hyphens: none; 25 | } 26 | 27 | pre[class*="language-"], 28 | :not(pre) > code[class*="language-"] { 29 | background: hsl(30,20%,25%); 30 | } 31 | 32 | /* Code blocks */ 33 | pre[class*="language-"] { 34 | padding: 1em; 35 | margin: .5em 0; 36 | overflow: auto; 37 | border: .3em solid hsl(30,20%,40%); 38 | border-radius: .5em; 39 | box-shadow: 1px 1px .5em black inset; 40 | } 41 | 42 | /* Inline code */ 43 | :not(pre) > code[class*="language-"] { 44 | padding: .15em .2em .05em; 45 | border-radius: .3em; 46 | border: .13em solid hsl(30,20%,40%); 47 | box-shadow: 1px 1px .3em -.1em black inset; 48 | } 49 | 50 | .token.comment, 51 | .token.prolog, 52 | .token.doctype, 53 | .token.cdata { 54 | color: hsl(30,20%,50%); 55 | } 56 | 57 | .token.punctuation { 58 | opacity: .7; 59 | } 60 | 61 | .namespace { 62 | opacity: .7; 63 | } 64 | 65 | .token.property, 66 | .token.tag, 67 | .token.boolean, 68 | .token.number { 69 | color: hsl(350, 40%, 70%); 70 | } 71 | 72 | .token.selector, 73 | .token.attr-name, 74 | .token.string { 75 | color: hsl(75, 70%, 60%); 76 | } 77 | 78 | .token.operator, 79 | .token.entity, 80 | .token.url, 81 | .language-css .token.string, 82 | .style .token.string { 83 | color: hsl(40, 90%, 60%); 84 | } 85 | 86 | .token.atrule, 87 | .token.attr-value, 88 | .token.keyword { 89 | color: hsl(350, 40%, 70%); 90 | } 91 | 92 | 93 | .token.regex, 94 | .token.important { 95 | color: #e90; 96 | } 97 | 98 | .token.important { 99 | font-weight: bold; 100 | } 101 | 102 | .token.entity { 103 | cursor: help; 104 | } 105 | pre[data-line] { 106 | position: relative; 107 | padding: 1em 0 1em 3em; 108 | } 109 | 110 | .line-highlight { 111 | position: absolute; 112 | left: 0; 113 | right: 0; 114 | padding: inherit 0; 115 | margin-top: 1em; /* Same as .prism’s padding-top */ 116 | 117 | background: hsla(24, 20%, 50%,.08); 118 | background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 119 | background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 120 | background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 121 | background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0)); 122 | 123 | pointer-events: none; 124 | 125 | line-height: inherit; 126 | white-space: pre; 127 | } 128 | 129 | .line-highlight:before, 130 | .line-highlight[data-end]:after { 131 | content: attr(data-start); 132 | position: absolute; 133 | top: .4em; 134 | left: .6em; 135 | min-width: 1em; 136 | padding: 0 .5em; 137 | background-color: hsla(24, 20%, 50%,.4); 138 | color: hsl(24, 20%, 95%); 139 | font: bold 65%/1.5 sans-serif; 140 | text-align: center; 141 | vertical-align: .3em; 142 | border-radius: 999px; 143 | text-shadow: none; 144 | box-shadow: 0 1px white; 145 | } 146 | 147 | .line-highlight[data-end]:after { 148 | content: attr(data-end); 149 | top: auto; 150 | bottom: .4em; 151 | } 152 | .token a { 153 | color: inherit; 154 | } 155 | -------------------------------------------------------------------------------- /js/brav1toolbox.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Brav1Toolbox.js - common utility scripts and polyfills 3 | * http://marcolago.com/ 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2012 Marco Lago, http://marcolago.com 7 | */ 8 | var Brav1Toolbox = (function() 9 | { 10 | var cssPrefixes = ["", "-webkit-", "-moz-", "-ms-", "-o-"]; 11 | var styleObject; 12 | 13 | /** 14 | * cache a Style Collection Object for future use 15 | */ 16 | if (window.getComputedStyle) 17 | { 18 | styleObject = window.getComputedStyle(document.body); 19 | } 20 | else 21 | { 22 | styleObject = document.documentElement.style; 23 | } 24 | 25 | /** 26 | * shortcut to add a listener for modern browsers and IE8- 27 | */ 28 | function _addListener(element, type, handler, useCapture) 29 | { 30 | if (element.addEventListener) 31 | { 32 | element.addEventListener(type, handler, useCapture); 33 | } 34 | else if (element.attachEvent) 35 | { 36 | element.attachEvent(type, handler); 37 | } 38 | } 39 | 40 | /** 41 | * checks if a CSS property is supported 42 | * including the prefixed ones 43 | */ 44 | function _testCSS(prop) 45 | { 46 | return _getPrefixed(prop) != ""; 47 | } 48 | 49 | /** 50 | * returns the standard or the prefixed CSS property 51 | * use: element[Brav1Toolbox.getPrefixed(CSSProperty)]; 52 | */ 53 | function _getPrefixed(prop) 54 | { 55 | for (var i = 0; i < cssPrefixes.length; i++) 56 | { 57 | var pre = cssPrefixes[i].replace(/-/g, ""); 58 | var p = prop; 59 | if (pre.length > 0) 60 | { 61 | p = p.charAt(0).toUpperCase() + p.substr(1); 62 | } 63 | p = pre + p; 64 | if (p in styleObject == true) 65 | { 66 | return p; 67 | } 68 | } 69 | return ""; 70 | } 71 | 72 | /** 73 | * returns the type of the object passed 74 | */ 75 | function _typeOf(obj) 76 | { 77 | return !!obj && Object.prototype.toString.call(obj).match(/(\w+)\]/)[1]; 78 | } 79 | 80 | /** 81 | * classList API polyfill 82 | */ 83 | 84 | /** 85 | * adds the specified class to the specified element 86 | */ 87 | function _addClass(el, c) 88 | { 89 | if (el.classList) 90 | { 91 | el.classList.add(c); 92 | } 93 | else 94 | { 95 | if (_hasClass(el, c) == false) 96 | { 97 | var cl = el.className; 98 | if (cl.length > 0) 99 | { 100 | cl += " "; 101 | } 102 | el.className = cl + c; 103 | } 104 | } 105 | } 106 | 107 | /** 108 | * removes the specified class from the specified element 109 | */ 110 | function _removeClass(el, c) 111 | { 112 | if (el.classList) 113 | { 114 | el.classList.remove(c); 115 | } 116 | else 117 | { 118 | var cl = el.className; 119 | if (cl.indexOf(c) != -1) 120 | { 121 | if (cl.indexOf(" " + c) != -1) 122 | { 123 | cl = cl.replace(" " + c, ""); 124 | } 125 | else if (cl.indexOf(c + " ") != -1) 126 | { 127 | cl = cl.replace(c + " ", ""); 128 | } 129 | else 130 | { 131 | cl = cl.replace(c, ""); 132 | } 133 | } 134 | el.className = cl; 135 | } 136 | } 137 | 138 | /** 139 | * checks if the specified class is assigned to the specified element 140 | */ 141 | function _hasClass(el, c) 142 | { 143 | if (el.classList) 144 | { 145 | return el.classList.contains(c); 146 | } 147 | else 148 | { 149 | return el.className.indexOf(c) != -1; 150 | } 151 | } 152 | 153 | /** 154 | * creates and dispatch a custom event 155 | */ 156 | function _dispatchEvent(t, ps) 157 | { 158 | if (document.createEvent) 159 | { 160 | var e = document.createEvent( "HTMLEvents"); 161 | e.initEvent(t, true, true); 162 | for (var p in ps) 163 | { 164 | e[p] = ps[p]; 165 | } 166 | document.dispatchEvent(e); 167 | } 168 | } 169 | 170 | /** 171 | * returns the absolute distance from two points 172 | */ 173 | function _distance(pA, pB) 174 | { 175 | var cX; 176 | var cY; 177 | cX = pB.x - pA.x; 178 | cX *= cX; 179 | cY = pB.y - pA.y; 180 | cY *= cY; 181 | 182 | return Math.abs(Math.sqrt( cX + cY )); 183 | } 184 | 185 | return { 186 | addListener: _addListener, 187 | dispatchEvent: _dispatchEvent, 188 | testCSS: _testCSS, 189 | getPrefixed: _getPrefixed, 190 | typeOf: _typeOf, 191 | addClass: _addClass, 192 | removeClass: _removeClass, 193 | hasClass: _hasClass, 194 | distance: _distance 195 | } 196 | })(); 197 | 198 | -------------------------------------------------------------------------------- /assets/fonts/Amaranth SIL OFL Font License 1.1.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Gesine Todt (hallo@gesine-todt.de), 2 | with Reserved Font Name Amaranth. 3 | 4 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 5 | This license is copied below, and is also available with a FAQ at: 6 | http://scripts.sil.org/OFL 7 | 8 | 9 | ----------------------------------------------------------- 10 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 11 | ----------------------------------------------------------- 12 | 13 | PREAMBLE 14 | The goals of the Open Font License (OFL) are to stimulate worldwide 15 | development of collaborative font projects, to support the font creation 16 | efforts of academic and linguistic communities, and to provide a free and 17 | open framework in which fonts may be shared and improved in partnership 18 | with others. 19 | 20 | The OFL allows the licensed fonts to be used, studied, modified and 21 | redistributed freely as long as they are not sold by themselves. The 22 | fonts, including any derivative works, can be bundled, embedded, 23 | redistributed and/or sold with any software provided that any reserved 24 | names are not used by derivative works. The fonts and derivatives, 25 | however, cannot be released under any other type of license. The 26 | requirement for fonts to remain under this license does not apply 27 | to any document created using the fonts or their derivatives. 28 | 29 | DEFINITIONS 30 | "Font Software" refers to the set of files released by the Copyright 31 | Holder(s) under this license and clearly marked as such. This may 32 | include source files, build scripts and documentation. 33 | 34 | "Reserved Font Name" refers to any names specified as such after the 35 | copyright statement(s). 36 | 37 | "Original Version" refers to the collection of Font Software components as 38 | distributed by the Copyright Holder(s). 39 | 40 | "Modified Version" refers to any derivative made by adding to, deleting, 41 | or substituting -- in part or in whole -- any of the components of the 42 | Original Version, by changing formats or by porting the Font Software to a 43 | new environment. 44 | 45 | "Author" refers to any designer, engineer, programmer, technical 46 | writer or other person who contributed to the Font Software. 47 | 48 | PERMISSION & CONDITIONS 49 | Permission is hereby granted, free of charge, to any person obtaining 50 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 51 | redistribute, and sell modified and unmodified copies of the Font 52 | Software, subject to the following conditions: 53 | 54 | 1) Neither the Font Software nor any of its individual components, 55 | in Original or Modified Versions, may be sold by itself. 56 | 57 | 2) Original or Modified Versions of the Font Software may be bundled, 58 | redistributed and/or sold with any software, provided that each copy 59 | contains the above copyright notice and this license. These can be 60 | included either as stand-alone text files, human-readable headers or 61 | in the appropriate machine-readable metadata fields within text or 62 | binary files as long as those fields can be easily viewed by the user. 63 | 64 | 3) No Modified Version of the Font Software may use the Reserved Font 65 | Name(s) unless explicit written permission is granted by the corresponding 66 | Copyright Holder. This restriction only applies to the primary font name as 67 | presented to the users. 68 | 69 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 70 | Software shall not be used to promote, endorse or advertise any 71 | Modified Version, except to acknowledge the contribution(s) of the 72 | Copyright Holder(s) and the Author(s) or with their explicit written 73 | permission. 74 | 75 | 5) The Font Software, modified or unmodified, in part or in whole, 76 | must be distributed entirely under this license, and must not be 77 | distributed under any other license. The requirement for fonts to 78 | remain under this license does not apply to any document created 79 | using the Font Software. 80 | 81 | TERMINATION 82 | This license becomes null and void if any of the above conditions are 83 | not met. 84 | 85 | DISCLAIMER 86 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 87 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 88 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 89 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 90 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 91 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 92 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 93 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 94 | OTHER DEALINGS IN THE FONT SOFTWARE. -------------------------------------------------------------------------------- /assets/js/prism.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Prism: Lightweight, robust, elegant syntax highlighting 3 | * MIT license http://www.opensource.org/licenses/mit-license.php/ 4 | * @author Lea Verou http://lea.verou.me 5 | */(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(//g,">").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data));l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r){return n.stringify(t.tokenize(e,r))},tokenize:function(e,n){var r=t.Token,i=[e],s=n.rest;if(s){for(var o in s)n[o]=s[o];delete n.rest}e:for(var o in n){if(!n.hasOwnProperty(o)||!n[o])continue;var u=n[o],a=u.inside,f=!!u.lookbehind||0;u=u.pattern||u;for(var l=0;le.length)break e;if(c instanceof r)continue;u.lastIndex=0;var h=u.exec(c);if(h){f&&(f=h[1].length);var p=h.index-1+f,h=h[0].slice(f),d=h.length,v=p+d,m=c.slice(0,p+1),g=c.slice(v+1),y=[l,1];m&&y.push(m);var b=new r(o,a?t.tokenize(h,a):h);y.push(b);g&&y.push(g);Array.prototype.splice.apply(i,y)}}}return i},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]"){for(var r=0;r"+i.content+""};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();; 6 | Prism.languages.markup={comment:/<!--[\w\W]*?--(>|>)/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]+?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 7 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:/@[\w-]+?(\s+[^;{]+)?(?=\s*{|\s*;)/gi,url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,property:/(\b|\B)[a-z-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,ignore:/&(lt|gt|amp);/gi,punctuation:/[\{\};:]/g};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<|<)style[\w\W]*?(>|>)[\w\W]*?(<|<)\/style(>|>)/ig,inside:{tag:{pattern:/(<|<)style[\w\W]*?(>|>)|(<|<)\/style(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 8 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,number:/\b-?(0x)?\d*\.?[\da-f]+\b/g,operator:/[-+]{1,2}|!|=?<|=?>|={1,2}|(&){1,2}|\|?\||\?|\*|\//g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 9 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|new|with|typeof|try|catch|finally|null|break|continue)\b/g,number:/\b(-?(0x)?\d*\.?[\da-f]+|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});; 10 | (function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function n(e,t,n){var r=t.replace(/\s+/g,"").split(","),i=+e.getAttribute("data-line-offset")||0,s=parseFloat(getComputedStyle(e).lineHeight);for(var o=0,u;u=r[o++];){u=u.split("-");var a=+u[0],f=+u[1]||a,l=document.createElement("div");l.textContent=Array(f-a+2).join(" \r\n");l.className=(n||"")+" line-highlight";l.setAttribute("data-start",a);f>a&&l.setAttribute("data-end",f);l.style.top=(a-i-1)*s+"px";(e.querySelector("code")||e).appendChild(l)}}function r(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var r=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(!r||document.getElementById(t))return;var i=t.slice(0,t.lastIndexOf(".")),s=document.getElementById(i);if(!s)return;s.hasAttribute("data-line")||s.setAttribute("data-line","");n(s,r,"temporary ");document.querySelector(".temporary.line-highlight").scrollIntoView()}if(!window.Prism)return;var t=crlf=/\r?\n|\r/g,i=0;Prism.hooks.add("after-highlight",function(t){var s=t.element.parentNode,o=s&&s.getAttribute("data-line");if(!s||!o||!/pre/i.test(s.nodeName))return;clearTimeout(i);e(".line-highlight",s).forEach(function(e){e.parentNode.removeChild(e)});n(s,o);i=setTimeout(r,1)});addEventListener("hashchange",r)})();; 11 | (function(){if(!self.Prism)return;var e=/\b([a-z]{3,7}:\/\/|tel:)[\w-+%~/.]+/,t=/\b\S+@[\w.]+[a-z]{2}/,n=/\[([^\]]+)]\(([^)]+)\)/,r=["comment","url","attr-value","string"];for(var i in Prism.languages){var s=Prism.languages[i];Prism.languages.DFS(s,function(i,s){if(r.indexOf(i)>-1){s.pattern||(s=this[i]={pattern:s});s.inside=s.inside||{};i=="comment"&&(s.inside["md-link"]=n);s.inside["url-link"]=e;s.inside["email-link"]=t}});s["url-link"]=e;s["email-link"]=t}Prism.hooks.add("wrap",function(e){if(/-link$/.test(e.type)){e.tag="a";var t=e.content;if(e.type=="email-link")t="mailto:"+t;else if(e.type=="md-link"){var r=e.content.match(n);t=r[2];e.content=r[1]}e.attributes.href=t}})})();; 12 | -------------------------------------------------------------------------------- /css/flowtime.css: -------------------------------------------------------------------------------- 1 | /* STRUCTURE */ 2 | 3 | html, body { 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | white-space: nowrap; /* disable the wrapping of the space between articles */ 10 | } 11 | 12 | .flowtime { 13 | font-size: 0; /* removes the white spaces between inline-block elements */ 14 | /* WARNING! this technique does non remove the white-space in Safari for Windows */ 15 | /* unless you use this hack: http://absolide.tumblr.com/post/36597829434/safari-inline-block-white-spaces-bug-fix */ 16 | /* you can use any other white-space removal technique as per: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ 17 | width: 100%; 18 | height: 100%; 19 | -o-transform-origin: 0 0; 20 | -ms-transform-origin: 0 0; 21 | -moz-transform-origin: 0 0; 22 | -webkit-transform-origin: 0 0; 23 | transform-origin: 0 0; 24 | -o-transform: translateZ(0); 25 | -ms-transform: translateZ(0); 26 | -moz-transform: translateZ(0); 27 | -webkit-transform: translateZ(0); 28 | transform: translateZ(0); 29 | -o-backface-visibility: hidden; 30 | -ms-backface-visibility: hidden; 31 | -moz-backface-visibility: hidden; 32 | -webkit-backface-visibility: hidden; 33 | backface-visibility: hidden; 34 | -o-transition: -o-transform 0.5s cubic-bezier(.77, .10, .22, 1); 35 | -moz-transition: -moz-transform 0.5s cubic-bezier(.77, .10, .22, 1); 36 | -webkit-transition: -webkit-transform 0.5s cubic-bezier(.77, .10, .22, 1); 37 | transition: transform 0.5s cubic-bezier(.77, .10, .22, 1); 38 | } 39 | 40 | .flowtime.no-transition { 41 | -o-transition: -o-transform 0s; 42 | -moz-transition: -moz-transform 0s; 43 | -webkit-transition: -webkit-transform 0s; 44 | transition: transform 0s; 45 | } 46 | 47 | /* SECTIONS (COLUMNS) */ 48 | 49 | /* base section */ 50 | .ft-section { 51 | width: 100%; 52 | height: 100%; 53 | 54 | position: relative; 55 | -o-transform: translateZ(0); 56 | -ms-transform: translateZ(0); 57 | -moz-transform: translateZ(0); 58 | -webkit-transform: translateZ(0); 59 | transform: translateZ(0); 60 | } 61 | 62 | /* section and section thumb alignment */ 63 | .ft-section, .ft-section-thumb { 64 | font-size: 16px; /* reset the regular font size, in the old way… */ 65 | font-size: 1rem; /* and in the modern way */ 66 | white-space: normal; 67 | display: inline-block; /* let the block elements stay on the same line */ 68 | /* used together the white-space: nowrap; declaration */ 69 | /* the elements doesn't break the line */ 70 | vertical-align: top; /* fix the default alignement for the inline-block elements (default: baseline) */ 71 | /* if different from "top" set Flowtime.slideWithPx(true) */ 72 | } 73 | 74 | /* PAGES */ 75 | 76 | /* base page */ 77 | .ft-page { 78 | -moz-box-sizing: border-box; 79 | -webkit-box-sizing: border-box; 80 | box-sizing: border-box; 81 | width: 100%; 82 | height: 100%; 83 | position: relative; 84 | z-index: auto; 85 | -o-transform: translateZ(0); 86 | -ms-transform: translateZ(0); 87 | -moz-transform: translateZ(0); 88 | -webkit-transform: translateZ(0); 89 | transform: translateZ(0); 90 | } 91 | 92 | .ft-page.actual { 93 | z-index: 100; 94 | } 95 | 96 | /* pages in overview mode */ 97 | .ft-overview .ft-page { 98 | opacity: 0.5; 99 | cursor: pointer; 100 | -o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 101 | -moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 102 | -webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 103 | transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 104 | -o-transform: scale(0.95); 105 | -ms-transform: scale(0.95); 106 | -moz-transform: scale(0.95); 107 | -webkit-transform: scale(0.95); 108 | transform: scale(0.95); 109 | -o-transform-origin: 50% 50%; 110 | -ms-transform-origin: 50% 50%; 111 | -moz-transform-origin: 50% 50%; 112 | -webkit-transform-origin: 50% 50%; 113 | transform-origin: 50% 50%; 114 | } 115 | 116 | .ft-overview .ft-page * { 117 | pointer-events: none; 118 | } 119 | 120 | /* JAVASCRIPT NAVIGATION HOOKS */ 121 | 122 | .ft-absolute-nav { 123 | overflow: hidden; 124 | } 125 | 126 | 127 | .ft-absolute-nav .flowtime { 128 | position: absolute; 129 | } 130 | 131 | /* EYE CANDY OVERRIDABLE CLASSES AND PROPERTIES */ 132 | 133 | /* FRAGMENTS */ 134 | 135 | .ft-fragment { 136 | opacity: 0; 137 | -o-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 138 | -moz-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 139 | -webkit-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 140 | transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 141 | } 142 | 143 | .ft-fragment.revealed, .ft-fragment.revealed-temp { 144 | opacity: 1; 145 | } 146 | 147 | /* DEFAULT PROGRESS */ 148 | 149 | .ft-default-progress { 150 | position: fixed; 151 | bottom: 16px; 152 | bottom: 1rem; 153 | right: 16px; 154 | right: 1rem; 155 | z-index: 1000; 156 | opacity: 0.3; 157 | -o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 158 | -moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 159 | -webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 160 | transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 161 | } 162 | 163 | .ft-default-progress:hover { 164 | opacity: 1; 165 | } 166 | 167 | /* default progress disappears when in overview mode */ 168 | .ft-overview .ft-default-progress { 169 | opacity: 0; 170 | pointer-events: none; 171 | } 172 | 173 | /* default progress page thumb */ 174 | .ft-page-thumb { 175 | -moz-box-sizing: border-box; 176 | -webkit-box-sizing: border-box; 177 | box-sizing: border-box; 178 | width: 1rem; 179 | height: 0.7rem; 180 | margin-right: 1px; 181 | margin-bottom: 1px; 182 | background-color: rgba(0,0,0,0.7); 183 | cursor: pointer; 184 | -o-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 185 | -moz-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 186 | -webkit-transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 187 | transition: all 0.5s cubic-bezier(.77, .10, .22, 1); 188 | } 189 | 190 | .ft-page-thumb:hover { 191 | background-color: rgba(255,255,255,0.7); 192 | } 193 | 194 | .ft-page-thumb.actual { 195 | background-color: rgba(255,255,255,0.5); 196 | border: 1px solid #ffffff; 197 | } 198 | 199 | /* overview mode page highlighting */ 200 | 201 | .ft-overview .ft-page.actual { 202 | opacity: 0.25; 203 | } 204 | 205 | .ft-overview .ft-page.hilite { 206 | opacity: 1; 207 | } 208 | 209 | .ft-overview .ft-page:hover { 210 | opacity: 1; 211 | } 212 | 213 | /* HARDWARE ACCELERATED ELEMENTS */ 214 | /* I've not used * because causes issues with current Chrome */ 215 | 216 | img { 217 | -o-transform: translate3d(0, 0, 0); 218 | -ms-transform: translate3d(0, 0, 0); 219 | -moz-transform: translate3d(0, 0, 0); 220 | -webkit-transform: translate3d(0, 0, 0); 221 | transform: translate3d(0, 0, 0); 222 | -o-backface-visibility: hidden; 223 | -ms-backface-visibility: hidden; 224 | -moz-backface-visibility: hidden; 225 | -webkit-backface-visibility: hidden; 226 | backface-visibility: hidden; 227 | } 228 | 229 | /* PARALLAX MANAGEMENT */ 230 | 231 | .parallax { 232 | position: relative; 233 | -o-transition: all 0.5s cubic-bezier(.50, .10, .50, 1); 234 | -moz-transition: all 0.5s cubic-bezier(.50, .10, .50, 1); 235 | -webkit-transition: all 0.5s cubic-bezier(.50, .10, .50, 1); 236 | transition: all 0.5s cubic-bezier(.50, .10, .50, 1); 237 | } 238 | 239 | .ft-overview .parallax { 240 | -o-transform: translate3d(0, 0, 0) !important; 241 | -ms-transform: translate3d(0, 0, 0) !important; 242 | -moz-transform: translate3d(0, 0, 0) !important; 243 | -webkit-transform: translate3d(0, 0, 0) !important; 244 | transform: translate3d(0, 0, 0) !important; 245 | } -------------------------------------------------------------------------------- /css/themes/default.css: -------------------------------------------------------------------------------- 1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 22, 2012 05:21:39 PM America/New_York */ 2 | @font-face { 3 | font-family: 'ChunkFiveRegular'; 4 | src: url('../../assets/fonts/Chunkfive-webfont.eot'); 5 | src: url('../../assets/fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), 6 | url('../../assets/fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'), 7 | url('../../assets/fonts/Chunkfive-webfont.woff') format('woff'), 8 | url('../../assets/fonts/Chunkfive-webfont.ttf') format('truetype'); 9 | font-weight: bold; 10 | font-style: normal; 11 | } 12 | 13 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 29, 2012 05:04:11 AM America/New_York */ 14 | 15 | @font-face { 16 | font-family: 'AmaranthRegular'; 17 | src: url('../../assets/fonts/Amaranth-webfont.eot'); 18 | src: url('../../assets/fonts/Amaranth-webfont.eot?#iefix') format('embedded-opentype'), 19 | url('../../assets/fonts/Amaranth-webfont.woff') format('woff'), 20 | url('../../assets/fonts/Amaranth-webfont.ttf') format('truetype'), 21 | url('../../assets/fonts/Amaranth-webfont.svg#AmaranthRegular') format('svg'); 22 | font-weight: normal; 23 | font-style: normal; 24 | 25 | } 26 | 27 | @font-face { 28 | font-family: 'AmaranthItalic'; 29 | src: url('../../assets/fonts/Amaranth-Italic-webfont.eot'); 30 | src: url('../../assets/fonts/Amaranth-Italic-webfont.eot?#iefix') format('embedded-opentype'), 31 | url('../../assets/fonts/Amaranth-Italic-webfont.woff') format('woff'), 32 | url('../../assets/fonts/Amaranth-Italic-webfont.ttf') format('truetype'), 33 | url('../../assets/fonts/Amaranth-Italic-webfont.svg#AmaranthItalic') format('svg'); 34 | font-weight: normal; 35 | font-style: italic; 36 | 37 | } 38 | 39 | @font-face { 40 | font-family: 'AmaranthBold'; 41 | src: url('../../assets/fonts/Amaranth-Bold-webfont.eot'); 42 | src: url('../../assets/fonts/Amaranth-Bold-webfont.eot?#iefix') format('embedded-opentype'), 43 | url('../../assets/fonts/Amaranth-Bold-webfont.woff') format('woff'), 44 | url('../../assets/fonts/Amaranth-Bold-webfont.ttf') format('truetype'), 45 | url('../../assets/fonts/Amaranth-Bold-webfont.svg#AmaranthBold') format('svg'); 46 | font-weight: bold; 47 | font-style: normal; 48 | 49 | } 50 | 51 | @font-face { 52 | font-family: 'AmaranthBoldItalic'; 53 | src: url('../../assets/fonts/Amaranth-BoldItalic-webfont.eot'); 54 | src: url('../../assets/fonts/Amaranth-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), 55 | url('../../assets/fonts/Amaranth-BoldItalic-webfont.woff') format('woff'), 56 | url('../../assets/fonts/Amaranth-BoldItalic-webfont.ttf') format('truetype'), 57 | url('../../assets/fonts/Amaranth-BoldItalic-webfont.svg#AmaranthBoldItalic') format('svg'); 58 | font-weight: bold; 59 | font-style: italic; 60 | 61 | } 62 | 63 | /* theme */ 64 | 65 | html { 66 | font-size: 100%; 67 | line-height: 1.5rem; 68 | background-color: #333333; 69 | color: #ffffff; 70 | text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4); 71 | } 72 | 73 | body { 74 | font-family: "AmaranthRegular", sans-serif; 75 | } 76 | 77 | .navigation, .credits, .switches { 78 | display: none; 79 | } 80 | 81 | .ft-page { 82 | padding: 2rem; 83 | background-color: #424242; 84 | } 85 | 86 | .flowtime h1, 87 | .flowtime h2, 88 | .flowtime h3, 89 | .flowtime h4, 90 | .flowtime h5, 91 | .flowtime h6, 92 | .flowtime p, 93 | .flowtime ul, 94 | .flowtime ol, 95 | .flowtime dl, 96 | .flowtime li, 97 | .flowtime dt, 98 | .flowtime dd { 99 | display: block; 100 | -o-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 101 | -moz-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 102 | -webkit-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 103 | transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 104 | } 105 | 106 | /* headings */ 107 | 108 | .flowtime h1, 109 | .flowtime h2, 110 | .flowtime h3, 111 | .flowtime h4, 112 | .flowtime h5, 113 | .flowtime h6 { 114 | font-family: "AmaranthBold"; 115 | font-weight: bold; 116 | color: #cccccc; 117 | text-shadow: 1px 2px 0 rgba(255,255,255,0.2); 118 | } 119 | 120 | .flowtime h1 { 121 | font-size: 3.5rem; 122 | line-height: 3rem; 123 | margin: 1rem 0 2rem 0; 124 | } 125 | 126 | .flowtime h2 { 127 | font-size: 2.5rem; 128 | line-height: 2.5rem; 129 | margin: 2rem 0; 130 | } 131 | 132 | .flowtime h3 { 133 | font-size: 2rem; 134 | line-height: 2rem; 135 | margin: 2rem 0; 136 | } 137 | 138 | .flowtime h4, 139 | .flowtime h5, 140 | .flowtime h6 { 141 | font-size: 1.75rem; 142 | line-height: 2rem; 143 | margin: 2rem 0; 144 | } 145 | 146 | /* paragraph */ 147 | 148 | .flowtime p { 149 | font-size: 1.75rem; 150 | line-height: 2rem; 151 | margin: 2rem 0; 152 | } 153 | 154 | /* lists */ 155 | 156 | .flowtime ul, 157 | .flowtime ol, 158 | .flowtime dl { 159 | font-size: 1.75rem; 160 | line-height: 2rem; 161 | margin: 2rem 0; 162 | } 163 | 164 | .flowtime ul, 165 | .flowtime ol, 166 | .flowtime dl { 167 | margin: 0 2rem; 168 | } 169 | 170 | .flowtime li, 171 | .flowtime dd { 172 | line-height: 1.75rem; 173 | margin-bottom: 1rem; 174 | position: relative; 175 | } 176 | 177 | .flowtime dt { 178 | position: relative; 179 | } 180 | 181 | .flowtime ul li:before, 182 | .flowtime dl dt:before { 183 | content: "\2022"; 184 | text-align: right; 185 | color: #ffdd00; 186 | margin-right: 0.5rem; 187 | display: inline-block; 188 | position: absolute; 189 | left: -1rem; 190 | } 191 | 192 | .flowtime ol { 193 | counter-reset: list; 194 | } 195 | 196 | .flowtime ol li:before { 197 | content: counter(list) "."; 198 | counter-increment: list; 199 | font-size: 0.75em; 200 | color: #ffdd00; 201 | margin-right: 0.5rem; 202 | display: inline-block; 203 | position: relative; 204 | top: -0.075em; 205 | } 206 | 207 | .flowtime dl dd { 208 | font-size: 0.8em; 209 | margin-left: 1rem; 210 | } 211 | 212 | .flowtime small { 213 | font-size: 0.6em; 214 | vertical-align: middle; 215 | } 216 | 217 | .flowtime pre, 218 | .flowtime code { 219 | font-family: monospace; 220 | margin: 1rem 0; 221 | } 222 | 223 | .flowtime strong { 224 | font-weight: bold; 225 | color: #ffdd00; 226 | text-shadow: 1px 2px 0 #000000, 1px -1px 0 rgba(0,0,0,0.3), -1px -1px 0 rgba(0,0,0,0.3), -1px 1px 0 rgba(0,0,0,0.3) 227 | } 228 | 229 | /* quotes and citations */ 230 | 231 | .flowtime q { 232 | quotes: "“" "”"; 233 | } 234 | 235 | .flowtime q:before { 236 | content: open-quote; 237 | } 238 | 239 | .flowtime q:after { 240 | content: close-quote; 241 | } 242 | 243 | .flowtime blockquote { 244 | font-size: 1.5rem; 245 | margin: 1.5rem 2rem; 246 | padding: 1rem; 247 | background-color: rgba(0,0,0,0.3); 248 | border-left: 0.5rem solid rgba(255,255,255,0.5); 249 | border-radius: 0.5rem; 250 | } 251 | 252 | .flowtime q, 253 | .flowtime cite, 254 | .flowtime blockquote { 255 | font-style: italic; 256 | } 257 | 258 | /* variations */ 259 | 260 | .flowtime .small { 261 | font-size: 0.6em; 262 | } 263 | 264 | .flowtime .attention { 265 | color: #ff0000; 266 | text-shadow: 1px 2px 0 #000000, 1px -1px 0 rgba(0,0,0,0.3), -1px -1px 0 rgba(0,0,0,0.3), -1px 1px 0 rgba(0,0,0,0.3) 267 | } 268 | 269 | .flowtime sup { 270 | font-size: 0.7em; 271 | position: relative; 272 | top: -0.5em; 273 | } 274 | 275 | /* links and focus */ 276 | 277 | .flowtime a, 278 | .flowtime a:link, 279 | .flowtime a:visited, 280 | .flowtime a:hover, 281 | .flowtime a:active, 282 | .flowtime a:focus, 283 | .flowtime a:hover img, 284 | .flowtime a:active img, 285 | .flowtime a:focus img { 286 | color: #32affc; 287 | text-shadow: 1px 1px 0 #000000; 288 | -o-transition: all 0.3s; 289 | -moz-transition: all 0.3s; 290 | -webkit-transition: all 0.3s; 291 | transition: all 0.3s; 292 | } 293 | 294 | .flowtime a:hover, 295 | .flowtime a:active, 296 | .flowtime a:focus, 297 | .flowtime a:hover img, 298 | .flowtime a:active img, 299 | .flowtime a:focus img { 300 | color: #ff9900; 301 | outline: none; 302 | background-color: rgba(255,255,255,0.2); 303 | -webkit-box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.5); 304 | box-shadow: 1px 2px 10px 0 rgba(0,0,0,0.5); 305 | } 306 | 307 | .flowtime a:hover img, 308 | .flowtime a:active img, 309 | .flowtime a:focus img { 310 | -webkit-box-shadow: 1px 2px 10px 5px rgba(0,0,0,0.5); 311 | box-shadow: 1px 2px 10px 5px rgba(0,0,0,0.5); 312 | } 313 | 314 | /* stackable content */ 315 | 316 | .flowtime .stack { 317 | width: 100%; 318 | height: 100%; 319 | margin: 1rem 0; 320 | position: relative; 321 | } 322 | 323 | .flowtime .stacked { 324 | width: 100%; 325 | max-height: 50%; 326 | position: absolute; 327 | top: 0; 328 | left: 0; 329 | } 330 | 331 | .flowtime img { 332 | max-width: 100%; 333 | max-height: 100%; 334 | display: block; 335 | } 336 | 337 | /* horizontally and vertically centered stackable content */ 338 | 339 | .flowtime .stack-center { 340 | text-align: center; 341 | white-space: nowrap; 342 | position: absolute; 343 | top: 2rem; 344 | right: 2rem; 345 | bottom: 2rem; 346 | left: 2rem; 347 | } 348 | 349 | .flowtime .stack-center:before { 350 | content: ""; 351 | height: 100%; 352 | display: inline-block; 353 | vertical-align: middle; 354 | } 355 | 356 | .flowtime .stack-center .stacked-center { 357 | white-space: normal; 358 | max-width: 100%; 359 | max-height: 100%; 360 | display: inline-block; 361 | vertical-align: middle; 362 | } 363 | 364 | /* media queries */ 365 | 366 | @media screen and (min-height: 40em) and (min-width: 80em) 367 | { 368 | html { 369 | font-size: 120%; 370 | } 371 | 372 | .ft-page { 373 | 374 | } 375 | } 376 | 377 | @media screen and (min-height: 50em) and (min-width: 90em) 378 | { 379 | html { 380 | font-size: 140%; 381 | } 382 | 383 | .ft-page { 384 | 385 | } 386 | } 387 | 388 | /* parallax demo */ 389 | 390 | .parallax-demo { 391 | overflow: hidden; 392 | } 393 | 394 | .parallax-demo .kingmix { 395 | position: absolute; 396 | left: 20%; 397 | bottom: -10%; 398 | z-index: 50; 399 | } 400 | 401 | .parallax-demo .sax { 402 | position: absolute; 403 | left: 6%; 404 | bottom: -18%; 405 | z-index: 40; 406 | } 407 | 408 | .parallax-demo .tone { 409 | position: absolute; 410 | left: 49%; 411 | bottom: -32%; 412 | z-index: 30; 413 | } -------------------------------------------------------------------------------- /js/flowtime.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Brav1Toolbox.js - common utility scripts and polyfills 3 | * http://marcolago.com/ 4 | * MIT licensed 5 | * 6 | * Copyright (C) 2012 Marco Lago, http://marcolago.com 7 | */ 8 | var Brav1Toolbox=function(){function n(e,t,n,r){if(e.addEventListener){e.addEventListener(t,n,r)}else if(e.attachEvent){e.attachEvent(t,n)}}function r(e){return i(e)!=""}function i(n){for(var r=0;r0){s=s.charAt(0).toUpperCase()+s.substr(1)}s=i+s;if(s in t==true){return s}}return""}function s(e){return!!e&&Object.prototype.toString.call(e).match(/(\w+)\]/)[1]}function o(e,t){if(e.classList){e.classList.add(t)}else{if(a(e,t)==false){var n=e.className;if(n.length>0){n+=" "}e.className=n+t}}}function u(e,t){if(e.classList){e.classList.remove(t)}else{var n=e.className;if(n.indexOf(t)!=-1){if(n.indexOf(" "+t)!=-1){n=n.replace(" "+t,"")}else if(n.indexOf(t+" ")!=-1){n=n.replace(t+" ","")}else{n=n.replace(t,"")}}e.className=n}}function a(e,t){if(e.classList){return e.classList.contains(t)}else{return e.className.indexOf(t)!=-1}}function f(e,t){if(document.createEvent){var n=document.createEvent("HTMLEvents");n.initEvent(e,true,true);for(var r in t){n[r]=t[r]}document.dispatchEvent(n)}}function l(e,t){var n;var r;n=t.x-e.x;n*=n;r=t.y-e.y;r*=r;return Math.abs(Math.sqrt(n+r))}var e=["","-webkit-","-moz-","-ms-","-o-"];var t;if(window.getComputedStyle){t=window.getComputedStyle(document.body)}else{t=document.documentElement.style}return{addListener:n,dispatchEvent:f,testCSS:r,getPrefixed:i,typeOf:s,addClass:o,removeClass:u,hasClass:a,distance:l}}(); 9 | /*! 10 | * Flowtime.js 11 | * http://marcolago.com/flowtime-js/ 12 | * MIT licensed 13 | * 14 | * Copyright (C) 2012 Marco Lago, http://marcolago.com 15 | */ 16 | var Flowtime=function(){function U(e){var t=e.target.getAttribute("href");if(t&&t.substr(0,1)=="#"){e.target.blur();e.preventDefault();var n=t;var r=R.setPage(n);et(r,true,true)}if(S&&Brav1Toolbox.hasClass(e.target,i)){et(e.target,null,true)}if(Brav1Toolbox.hasClass(e.target,d)){var s=Number(Z(e.target.getAttribute("data-section")));var o=Number(Z(e.target.getAttribute("data-page")));St(s,o)}}function z(e){b=false;var t;if(e.state){t=e.state.token.replace("#/","")}else{t=document.location.hash.replace("#/","")}var n=R.setPage(t);et(n,false)}function W(e,t){if(b||t){var n=document.location.hash.replace("#/","");var r=R.setPage(n);et(r,false)}}function V(t){if(!e){t.preventDefault();it()}else if(e){if(X==true){var n={x:window.pageXOffset,y:window.pageYOffset};var r;var i;var s=R.getAllPages();for(var o=0;o0){var t=e.replace("#/","").split("/");var n=document.querySelector(r+"[data-id=__"+t[0]+"]")||document.querySelector(r+"[data-prog=__"+t[0]+"]");if(n!=null){var i=null;if(t.length>1){i=n.querySelector(s+"[data-id=__"+t[1]+"]")||n.querySelector(s+"[data-prog=__"+t[1]+"]")}if(i==null){i=n.querySelector(s)}return i}}return}function K(){R.update();W(null,true)}function Q(e){var t=x;var n=R.getCurrentPage().getAttribute("data-title");if(n==null){var r=e.split("/");for(var i=0;ir){f=-a.pX}if(t.pages){l=-a.pY}if(P){a.style[Brav1Toolbox.getPrefixed("transform")]="translateX("+f+"px) translateY("+l+"px)"}else{a.style[Brav1Toolbox.getPrefixed("transform")]="translateX("+f+"%) translateY("+l+"%)"}}}}}}}}function it(){if(!e){window.scrollTo(0,0)}}function ot(){var e=document.createDocumentFragment();C=document.createElement("div");C.className=l;e.appendChild(C);for(var t=0;t=37&&e.keyCode<=40){e.preventDefault()}}}function mt(e){var t=e.target.tagName;var n;if(t!="INPUT"&&t!="TEXTAREA"&&t!="SELECT"){e.preventDefault();switch(e.keyCode){case 27:lt(true);break;case 33:Nt();break;case 34:Ct();break;case 35:Tt();break;case 36:xt();break;case 37:bt(e.shiftKey);break;case 39:yt(e.shiftKey);break;case 38:Et(e.shiftKey);break;case 40:wt(e.shiftKey);break;case 13:{if(S){St(R.getCurrentHilited())}break};default:break}}}function gt(){if(D&&C==null){ot()}if(document.location.hash.length>0){Brav1Toolbox.addClass(g,"no-transition");W(null,true);Brav1Toolbox.removeClass(g,"no-transition")}else{if(gt.arguments.length>0){St.apply(this,gt.arguments)}else{St(0,0);at()}}}function yt(e){var t=R.getNextSection(e,k,S);if(t!=undefined){et(t)}else{if(S&&M){ht()}}}function bt(e){var t=R.getPrevSection(e,k,S);if(t!=undefined){et(t)}else{if(S&&M){ht()}}}function wt(e){var t=R.getNextPage(e,S);if(t!=undefined){et(t)}else{if(S&&M){ht()}}}function Et(e){var t=R.getPrevPage(e,S);if(t!=undefined){et(t)}else{if(S&&M){ht()}}}function St(){var e=St.arguments;if(e.length>0){if(e.length==1){if(Brav1Toolbox.typeOf(e[0])==="Object"){var t=e[0];var n=t.section;var i=t.page;if(n!=null&&n!=undefined){var o=document.querySelector(r+"[data-id="+Y(n)+"]");if(i!=null&&i!=undefined){var u=o.querySelector(s+"[data-id="+Y(i)+"]");if(u!=null){et(u);return}}}}else if(e[0].nodeName!=undefined){et(e[0],null,true)}}if(Brav1Toolbox.typeOf(e[0])==="Number"||e[0]===0){var u=R.getPageByIndex(e[1],e[0]);et(u);return}}}function xt(){St(0,0)}function Tt(){var e=R.getSectionsLength()-1;St(e,R.getPages(e).length-1)}function Nt(){var e=R.getPageIndex();St(e.section,0)}function Ct(){var e=R.getPageIndex();St(e.section,R.getPages(e.section).length-1)}function kt(e,t,n){Brav1Toolbox.addListener(document,e,t,n)}function Lt(e){k=e;At(e)}function At(e){L=e}function Ot(e){t=e}function Mt(e){A=e;et()}function _t(e){O=e}function Dt(e){O=!e}function Pt(e){M=e}function Ht(e){_=e}function Bt(t){if(e){D=false}else{D=t}if(D){if(C==null){ot()}at()}else{if(C!=null){ut()}}}function jt(e,t){H=e;B=t==undefined?H:t;R.update()}function Ft(e){P=e}var e="ontouchstart"in document.documentElement;var t=window.history.pushState;var n="ft-section";var r="."+n;var i="ft-page";var s="."+i;var o="ft-fragment";var u="."+o;var a="revealed";var f="revealed-temp";var l="ft-default-progress";var c="."+l;var h="ft-section-thumb";var p="."+h;var d="ft-page-thumb";var v="."+d;var m="flowtimenavigation";var g=document.querySelector(".flowtime");var y=document.querySelector("body");var b=false;var w="";var E={section:0,page:0};var S=false;var x=document.title;var T;var N=22;var C=null;var k=false;var L=true;var A=false;var O=false;var M=false;var _=false;var D=false;var P=false;var H=50;var B=50;var j=document.querySelector(".parallax")!=null;var F=true;try{var I=document.querySelector("html").className.toLowerCase();if(I.indexOf("ie7")!=-1||I.indexOf("ie8")!=-1||I.indexOf("lt-ie9")!=-1){F=false}}catch(q){F=false}if(F){Brav1Toolbox.addClass(y,"ft-absolute-nav")}var R=function(){function x(){t=[];c=[];i=document.querySelectorAll(u);o=[];e=g.querySelectorAll(".flowtime > "+r);n=g.querySelectorAll(".flowtime "+s);for(var a=0;a0){for(var i=0;i1){u=a[1]}}s.pX=o;s.pY=u;c[t][n].push(s)}}}}function N(){return c}function C(){for(var e=0;e0&&l[v][m]t.length-1){i=m}v=Math.min(v+1,t.length-1);return M(t[v],i,r)}return P(t[v][m],r)}function A(e,n,r){var i=m;var s=e==!O;if(n==true&&o[v][m].length>0&&l[v][m]>=0&&s!=true&&r==false){I(v,m)}else{var i=0;i=0;if(s==true&&v-1>=0){i=0}else if(s!=true||L==true||v-1<0){i=m}v=Math.max(v-1,0);return M(t[v],i,r)}return P(t[v][m],r)}function M(e,t,n){var r=e[t];if(r==undefined){for(var i=t;i>=0;i--){if(e[i]!=undefined){r=e[i];t=i;break}}}m=t;if(!S){z()}return P(r,n)}function _(e,n){if(o[v][m].length>0&&l[v][m]0&&l[v][m]>=0&&e!=true&&n==false){I(v,m)}else{if(m==0&&t[v-1]!=undefined){v-=1;m=t[v].length-1}else{m=Math.max(m-1,0)}}return P(t[v][m],n)}function P(e,t){if(t==true){mt(e);return}else{return e}}function F(e,t,n){if(n!=undefined){l[e][t]=n}else{n=l[e][t]+=1}Brav1Toolbox.addClass(o[e][t][n],a)}function I(e,t,n){if(n!=undefined){l[e][t]=n}else{n=l[e][t]}Brav1Toolbox.removeClass(o[e][t][n],a);Brav1Toolbox.removeClass(o[e][t][n],f);l[e][t]-=1}function q(){for(var e=0;e0){if(e>v){for(var i=r.length-1;i>=0;i--){I(e,n,i)}}else if(em){for(var i=r.length-1;i>=0;i--){I(e,n,i)}}else if(nR.getPageIndex().section||E.page>R.getPageIndex().page){F(e,n,i)}else{I(e,n,i)}}}if(L==false){l[e][n]=-1}else{if(E.section>R.getPageIndex().section||E.page>R.getPageIndex().page){l[e][n]=i-1}else{l[e][n]=-1}}}}}}}}function W(e){if(e){}return v}function X(e){if(e){}return m}function V(){return e}function $(e){return t[e]}function K(){return n}function Q(){return h}function Y(){return p}function et(){return d}function tt(e){var t=v;var n=m;if(e!=undefined){t=e.parentNode.index;n=e.index}return{section:t,page:n}}function nt(t){return e[t]}function rt(e,n){return t[n][e]}function st(){return e[v]}function ot(){return t[v][m]}function ut(){return o[v][m][at()]}function at(){return l[v][m]}function ft(){return v0}function ct(){return m0}function pt(){if(v==0&&m==0){return 0}var e=0;for(var n=0;n1){var s=t[v][m];r+="/"+G(s)}return r}function vt(n){var r=J(n);if(r){var i=r.parentNode;for(var s=0;sr){Brav1Toolbox.addClass(u,"future-section")}if(u.indexe.index){Brav1Toolbox.addClass(u,"future-page")}}}}Brav1Toolbox.addClass(e,"hilite");if(n){yt(e)}w=e}function gt(){return w}function yt(e){Brav1Toolbox.addClass(e,"actual")}var e;var t;var n;var i;var o;var l=[];var c=[];var h=0;var p=0;var d=0;var v=0;var m=0;var y=0;var b=0;var w;x();return{update:x,updateFragments:z,showFragments:q,hideFragments:U,getSection:W,getPage:X,getSections:V,getPages:$,getAllPages:K,getNextSection:k,getPrevSection:A,getNextPage:_,getPrevPage:D,getSectionsLength:Q,getPagesLength:Y,getPagesTotalLength:et,getPageIndex:tt,getSectionByIndex:nt,getPageByIndex:rt,getCurrentSection:st,getCurrentPage:ot,getCurrentFragment:ut,getCurrentFragmentIndex:at,getProgress:pt,getHash:dt,setPage:vt,switchActivePage:mt,getCurrentHilited:gt,hasNextSection:ft,hasPrevSection:lt,hasNextPage:ct,hasPrevPage:ht,updateOffsets:C,getParallaxElements:N}}();if(F){Brav1Toolbox.addListener(document,"click",U,false)}if(b==false&&window.history.pushState){window.onpopstate=z}else{b=true}Brav1Toolbox.addListener(window,"hashchange",W);var X=true;Brav1Toolbox.addListener(window,"scroll",V);var $=function(){function n(){r();if(!S){t=setTimeout(i,300)}}function r(){clearTimeout(t)}function i(){R.updateOffsets();et()}var t=NaN;Brav1Toolbox.addListener(window,"resize",n);return{enable:n,disable:r}}();var C=null;var st=null;Brav1Toolbox.addListener(window,"keydown",vt);Brav1Toolbox.addListener(window,"keyup",mt);return{start:gt,updateNavigation:K,nextSection:yt,prevSection:bt,next:wt,prev:Et,nextFragment:wt,prevFragment:Et,gotoPage:St,gotoHome:xt,gotoTop:Nt,gotoBottom:Ct,gotoEnd:Tt,toggleOverview:lt,fragmentsOnSide:Lt,fragmentsOnBack:At,useHistory:Ot,slideInPx:Mt,sectionsSlideToTop:_t,gridNavigation:Dt,useOverviewVariant:Pt,twoStepsSlide:Ht,showProgress:Bt,addEventListener:kt,defaultParallaxValues:jt,parallaxInPx:Ft,getDefaultProgress:ft}}() -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Flowtime.js](https://github.com/marcolago/flowtime.js/raw/master/assets/img/logo-black.png "Flowtime.js Logo") 2 | 3 | ### Flowtime.js is a framework for easily build HTML presentations or websites. 4 | 5 | You can take a look at the [sample presentation](http://flowtime-js.marcolago.com) to quick learn about the possibilities: 6 | 7 | **For more information check the [wiki](https://github.com/marcolago/flowtime.js/wiki)** 8 | - [Browser Support](https://github.com/marcolago/flowtime.js/wiki/Browser-Support) 9 | - [Made with Flowtime.js](https://github.com/marcolago/flowtime.js/wiki/Made-With-Flowtime.js) 10 | - [Credits and Thanks](https://github.com/marcolago/flowtime.js/wiki/Credits-and-Thanks) 11 | 12 | ## Main Features 13 | 14 | **Full Page Fluid Layout Boilerplate**. 15 | Flowtime.js is designed to perfectly fit your viewport and is based on a solid `display: inline-block;` foundation. 16 | This frameworks doesn't style your presentations or sites for you but it takes care of all the annoying things like navigation and deep-linking, so you are free to style every single element of your design as you like. 17 | But for the ones who need a ready-to-use tool it comes with a default theme that you can edit or you can add new themes just by linking your css files. 18 | 19 | **Multiple Controls Navigation**. 20 | You can navigate through pages via links, keyboard or deep-linking. 21 | Links are managed using the href value targeting a formatted hash destination; see the demos source code for more examples. 22 | Keyboard navigation is based on arrow keys with the Shift key as a modifier to jump over fragments or sections, see the command list: 23 | 24 | - **Down or Up Arrows**: navigate to the previous or the next page. This is the main navigation input; the entire content is navigable using this keys only. If there are fragments in the page every input shows or hides a fragment. 25 | - **Shift + Down or Up Arrows**: navigate to the prev o next page jumping all the fragments. 26 | - **Left or Right Arrows**: navigate to the prev or next section. By default the destination will be the page at the same index of the starting point (if you are at page 3 in the section 2 you will go to the page 3 in the section 3). If the same index does not exist the destination will be the higher available index.. 27 | - **Shift + Left or Right Arrows**: Navigate to the first page of the previous or next section. 28 | - **Page Up**: navigates to the first page of the current section. 29 | - **Page Down**: navigates to the last page of the current section. 30 | - **Home**: navigates to the first page of the presentation. 31 | - **End**: navigates to the last page of the presentation. 32 | - **ESC**: toggles the overview mode. 33 | 34 | **Fragments Support**. 35 | Navigate step by step in a page or jump directly to the next or previous page. 36 | 37 | **Overview Mode**. 38 | Overview mode allows you to look at the entire site/presentation structure in a single view or from a distant point of view (alternate version). 39 | When in overview mode you can navigate to a page by click on it or using the arrow keys and **then press Return to go**. 40 | 41 | **History Management**. 42 | Flowtime.js is built on top of the **HTML History APIs** so you can navigate using the browser's back and forward buttons and deep-link a page for sharing. 43 | Flowtime.js is a client side only framework so if you want to optimize SEO you have to add a server side logic to serve only the single page content to search engines. 44 | If the History APIs were not available the framework degrades well using the hashchange event. 45 | 46 | **Transitions**. 47 | Flowtime.js animate the page transition using **native CSS3 transitions**. Where transitions were not available (IE9) the page change is immediate but works. 48 | 49 | **Parallax Support** 50 | Integrated native parallax support based on CSS3 transformations and configurable by data- attributes. 51 | 52 | **Browser Support** 53 | Flowtime.js is tested and works on **every modern desktop browser and IE9 and above**. 54 | Where the basic support is not available the framework degrades to a native scrolling with anchor links but the full page fluid layouts remains intact. 55 | 56 | ## How to build the markup 57 | 58 | Markup for Flowtime.js is really simple and easy to learn. 59 | All you have to do is wrap some divs in a parent `
`, then, marking up the section with `class="ft-section"` and the single page with `class="ft-page"`. 60 | To better understand the markup take a look at this snippet: 61 | 62 | ```html 63 |
64 |
65 |
Section 1 / Page 1
66 |
Section 1 / Page 2
67 |
68 |
69 | ``` 70 | 71 | Every single page is a full window view - or a single slide if you prefer - and it's a relative formatting context. 72 | Even if you have only single slides ordered in a row you have to nest the pages in sections; take a look at this markup which creates two slides one aside the other: 73 | 74 | ```html 75 |
76 |
77 |
Section 1 / Page 1
78 |
79 |
80 |
Section 2 / Page 1
81 |
82 |
83 | ``` 84 | 85 | ### Titles and Pages URL 86 | 87 | Flowtime.js sets automatically the title in the browser's tab on navigation reading it from the first `h1` on the page. If you want to override a title or use a different string instead of the heading content you can set a `data-title` attribute to the page. 88 | You can add the `data-title` attribute both to `ft-section` and to `ft-page` elements; if a `data-title` attribute was found on a section it will be used to write the title in the browser tab with this schema: 89 | 90 | ` text content [ | data-title on ft-section ] | h1 text content or data-title on ft-page` 91 | 92 | A `data-prog` attribute is added to every div marked as `ft-section` or as `ft-page` in order to manage the navigation. 93 | If you want to customize the URL and the hashtag you can add some data attributes to any section or page. 94 | You can add the `data-id` attribute both to `ft-section` and to `ft-page` elements; if this attribute was found it will be used to build the page URL. 95 | To better understand the use of data attributes here it is an example: 96 | 97 | ```html 98 | <div class="flowtime"> 99 | <div class="ft-section" data-id="section-1"> 100 | <div class="ft-page" data-id="page-1"> 101 | <h1>Heading Title</h1> 102 | When navigating to this page the title will be "site name | Heading Title" 103 | and the URL will be "http://site_URL/#/section-1/page-1/" 104 | </div> 105 | </div> 106 | <div class="ft-section" data-title="Section 2 Title" data-id="section-2"> 107 | <div class="ft-page" data-title="Page 1 Title" data-id="page-1"> 108 | When navigating to this page the title will be "site name | Section 2 Title | Page 1 Title" 109 | and the URL will be "http://site_URL/#/section-2/page-1/" 110 | </div> 111 | </div> 112 | <div class="ft-section"data-id="section-3"> 113 | <div class="ft-page" data-title="Page Title" data-id="page-1"> 114 | When navigating to this page the title will be "site name | Page Title" 115 | and the URL will be "http://site_URL/#/section-3/page-1/" 116 | </div> 117 | </div> 118 | </div> 119 | ``` 120 | 121 | ### Fragments 122 | 123 | If you want to delay the showing and navigate single parts in a page just put the class `ft-fragment` on the element you want to delay. Here it is an example. 124 | 125 | ```html 126 | <div class="flowtime"> 127 | <div class="ft-section" data-title="Section 1 Title" data-id="section-1"> 128 | <div class="ft-page" data-title="Page 1 Title" data-id="page-1"> 129 | <p>First Paragraph; this text is visible from start.</p> 130 | <p class="ft-fragment">This paragraph shows up only when you navigate forward and disappears when you navigate back.</p> 131 | </div> 132 | </div> 133 | </div> 134 | ``` 135 | 136 | ### Parallax 137 | 138 | If you want to enable the parallax effect on some elements add a `parallax` class to these elements and, optionally, sets the parallax distance value adding a `data-parallax` attribute specifieng the `x` and `y` values separated by a comma. If you doesn't specify a `data-parallax` attribute will be used the default lengths. 139 | 140 | ```html 141 | <div class="flowtime"> 142 | <div class="ft-section" data-id="section-1"> 143 | <div class="ft-page" data-id="page-1"> 144 | <p class="parallax">Parallaxed element. Will use the default lengths.</p> 145 | <p class="parallax" data-parallax="100,150">Parallaxed element. Will use the data-parallax attribute values.</p> 146 | <p class="parallax" data-parallax="200">Parallaxed element. Will use the data-parallax attribute value; x and y will be the same length.</p> 147 | </div> 148 | </div> 149 | </div> 150 | ``` 151 | 152 | ## Javascript API 153 | 154 | Flowtime.js comes with configuration APIs useful for customizing the experience and the installation and with navigation APIs for controlling navigation and get the state of the application. 155 | 156 | ### Configuration API 157 | 158 | ```javascript 159 | Flowtime.start(); 160 | ``` 161 | 162 | Starts the application logic. This method is optional but is required if you change some configuration parameters. 163 | If you does'n call the `start()` method Flowtime.js starts itself but some configuration parameters will be applied only after the first navigation action. 164 | You can pass as optional parameters the same parameters that are accepted by the `gotoPage` method (see below) to let the presentation navigating to a specific page at start. 165 | 166 | ```javascript 167 | Flowtime.updateNavigation(); 168 | ``` 169 | 170 | Force the update of the navigation object which stores the data about every possibile destination in the site (the sub pages). 171 | If you change the number of sub pages at runtime call this method after the DOM manipulation. 172 | 173 | ```javascript 174 | Flowtime.showProgress(Boolean show); 175 | ``` 176 | 177 | Default `false`. Show the default progress when in page mode (the standard content navigation mode). 178 | The default progress is a miniature of the structure placed in the lower left corner with the current page highlighted. 179 | Clicking on a page thumb in the default progress indicator triggers the navigation to that page. 180 | The default value is false, so if you wanto to show the progress you have to call `Flowtime.showProgress(true);` and then start the presentation. 181 | Calling this API during the navigation cause the progress to appear or disappear manipulating the DOM so watch out for performance issues. 182 | You are not limited to the default progress indicator. If you want to buil your own progress bar or another indicator with a custom logic you can listen for the navigation events and use the event properties (check out the event section). 183 | 184 | ```javascript 185 | Flowtime.fragmentsOnSide(Boolean show); 186 | ``` 187 | 188 | Default `false`. Enable the fragments navigation also on section navigation (left and right arrows) and no only on page navigation. 189 | If true it also set `fragmentsOnBack` on `true`. 190 | 191 | ```javascript 192 | Flowtime.fragmentsOnBack(Boolean show); 193 | ``` 194 | 195 | Default `true`. Shows or hide the fragments when navigating back from a section to a page with fragments inside. 196 | 197 | ```javascript 198 | Flowtime.useHistory(Boolean use); 199 | ``` 200 | 201 | Default `true`. Enable or disable the use of HTML History API; 202 | If History API is not used Flowtime.js fallbacks on the hashchange event. 203 | 204 | ```javascript 205 | Flowtime.slideInPx(Boolean usePx); 206 | ``` 207 | 208 | Default `false`. If true performs the calculation for the container translation in pixels and not in % values. 209 | Use true if you want to alter the default placement of the sections (i.e. setting `vertical-align` different from `top`) or in any case the pages does not perfectly fit the viewport (i.e. Safari for Windows with the `font-size: 0;` bug). 210 | 211 | ```javascript 212 | Flowtime.sectionsSlideToTop(Boolean toTop); 213 | ``` 214 | 215 | Default `true`. Set to false if you want to customize the fragment animation with a more complex behaviour. This methd enables or disables the animation only and not the internal fragments counter logic. See the event section for more info on how manage a custom fragment navigation. 216 | 217 | ```javascript 218 | Flowtime.gridNavigation(Boolean useGrid); 219 | ``` 220 | 221 | Default `false`. Just a proxy for `Flowtime.sectionsSlideToTop` but with reversed value; if `true` sets `Flowtime.sectionsSlideToTop` to `False`. Implemented just because the more semantic and easy to understand naming. 222 | 223 | ```javascript 224 | Flowtime.useOverviewVariant(Boolean true); 225 | ``` 226 | 227 | Default `false`. Uses a built in overview variant which does not show all the pages in a single view but center the current page in the available space scroualtirlling the view when navigating with the arrows. 228 | In Webkit browsers the default overview mode can cause rendering problems if the pages are too much; using the variant you can minimize the problem. 229 | 230 | ```javascript 231 | Flowtime.defaultParallaxValues(Number x, [Number y]); 232 | ``` 233 | 234 | Sets the default values for parallax elements so you doesn't have to set the values for every single element. 235 | If you only pass the `x` value the `y` value will be the same. 236 | 237 | ```javascript 238 | Flowtime.parallaxInPx(Boolean usePx); 239 | ``` 240 | 241 | Default `false`. By default all the parallax length are computed in % units. If true the lenght expressed in `defaultParallaxValues` and in `data-parallax` attributes will be computed in pixels. 242 | 243 | ### Navigation API 244 | 245 | ```javascript 246 | Flowtime.prevSection([Boolean top]);` and `Flowtime.nextSection([Boolean top]); 247 | ``` 248 | 249 | Navigate to the previous or the next section. 250 | If the optional `top` parameter is `true` the section starts at the first page; if the `top` parameter is `false` the section starts at the page with the same index than the previous section or, if the index does not exist, at the last page available. 251 | 252 | ```javascript 253 | Flowtime.prev([Boolean jump]);` and `Flowtime.next([Boolean jump]); 254 | ``` 255 | 256 | Navigate to the previous or the next page or, if there are fragments, to the previous or next fragment. 257 | If the optional `jump` parameter is `true` all the fragments will be jumped. 258 | 259 | ```javascript 260 | Flowtime.prevFragment();` and `Flowtime.nextFragment(); 261 | ``` 262 | 263 | Navigate to the previous or the next fragment. 264 | 265 | ```javascript 266 | Flowtime.gotoHome() 267 | ``` 268 | 269 | Navigate to the first page of the presentation. 270 | 271 | ```javascript 272 | Flowtime.gotoEnd() 273 | ``` 274 | 275 | Navigate to the last page of the presentation. 276 | 277 | ```javascript 278 | Flowtime.gotoTop() 279 | ``` 280 | 281 | Navigate to the first page of the current section. 282 | 283 | ```javascript 284 | Flowtime.gotoBottom() 285 | ``` 286 | 287 | Navigate to the last page of the current section. 288 | 289 | ```javascript 290 | Flowtime.gotoPage(Number sectionIndex, Number pageIndex) 291 | ``` 292 | 293 | Navigate to the section/page pair. 294 | 295 | ```javascript 296 | Flowtime.gotoPage(String sectionId, String pageId) 297 | ``` 298 | 299 | Navigate to the section/page pair. 300 | 301 | ```javascript 302 | Flowtime.gotoPage(HTMLElement target) 303 | ``` 304 | 305 | Navigate to the page element. 306 | 307 | ```javascript 308 | Flowtime.toggleOverview([Boolean back]); 309 | ``` 310 | 311 | Toggles the overview mode switching between overview and page mode. 312 | If the optional `back` paramerter is `true` toggling the overview mode when in overview does not navigate to the highlighted page but will returns to the active page; default `false`. 313 | 314 | ### Events 315 | 316 | When navigating Flowtime.js dispatches a `flowtimenavigation` event useful for create custom behaviours and callbacks. 317 | You can register the event using `Flowtime.addEventListener("flowtimenavigation", callback, useCapture);` API. 318 | The callback receive an `event` parameter with some custom properties useful to manage the navigation status. 319 | Here it is the list of the properties, supposing the event parameter is named `e`: 320 | 321 | ```javascript 322 | e.section 323 | ``` 324 | 325 | The HTMLElement reference to the current section. 326 | 327 | ```javascript 328 | e.page 329 | ``` 330 | 331 | The HTMLElement reference to the current page. 332 | 333 | ```javascript 334 | e.sectionIndex 335 | ``` 336 | 337 | The current section index starting at 0. 338 | 339 | ```javascript 340 | e.pageIndex 341 | ``` 342 | 343 | The current page index starting at 0. 344 | 345 | ```javascript 346 | e.pastSectionIndex 347 | ``` 348 | 349 | The previous visited section index starting at 0. 350 | 351 | ```javascript 352 | e.pastPageIndex 353 | ``` 354 | 355 | The previous visited page index starting at 0. 356 | 357 | ```javascript 358 | e.prevSection 359 | ``` 360 | 361 | Boolean value, if `true` there is a previous section. 362 | 363 | ```javascript 364 | e.nextSection 365 | ``` 366 | 367 | Boolean value, if `true` there is a next section. 368 | 369 | ```javascript 370 | e.prevPage 371 | ``` 372 | 373 | Boolean value, if `true` there is a previous page. 374 | 375 | ```javascript 376 | e.nextPage 377 | ``` 378 | 379 | Boolean value, if `true` there is a next page. 380 | 381 | ```javascript 382 | e.fragment 383 | ``` 384 | 385 | If the navigation targets a fragment returns the fragment itself as HTMLElement, otherwise returns `undefined`. 386 | 387 | ```javascript 388 | e.fragmentIndex 389 | ``` 390 | 391 | Returns the index of the current fragment starting at 0; otherwise returns `-1`. 392 | 393 | ```javascript 394 | e.isOverview 395 | ``` 396 | 397 | Boolean value, `true` if the overview mode is on, `false` if the overview mode is off. 398 | 399 | ```javascript 400 | e.progress 401 | ``` 402 | 403 | The current page sequential index number starting at 0. 404 | 405 | ```javascript 406 | e.total 407 | ``` 408 | 409 | The last page sequential index. 410 | 411 | ## Customizing and Styling Default Components and Behaviours 412 | 413 | As said before Flowtime.js comes with some default components like the two overview variants and a progress indicator. 414 | You can change the way this parts appears editing or overwriting some CSS properties. 415 | 416 | ### Calculating the Completion Percentage for Custom Visualization 417 | 418 | In the `flowtimenavigation` event handler calculate the progress in % using this formula: 419 | 420 | ```javascript 421 | function navigationHandler(e) 422 | { 423 | var value = Math.round(e.progress * 100 / e.total); 424 | console.log('Completion: ' + value + '%'); 425 | } 426 | ``` 427 | 428 | The first page of the first section **ever returns 0 as progress value**. 429 | `progress` and `total` values does not consider fragments. 430 | 431 | ### Customize the Fragments Animation 432 | 433 | Every animation in Flowtime.js is managed with native CSS3 transitions so if you would customize the fragment animation (and you want to do this on a website, I know) just edit the following CSS classes to override the transitions or set the default value of the `opacity` to `1`. 434 | 435 | ```css 436 | .ft-fragment { 437 | opacity: 0; 438 | -o-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 439 | -ms-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 440 | -moz-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 441 | -webkit-transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 442 | transition: all 0.3s cubic-bezier(.77, .10, .22, 1); 443 | } 444 | 445 | .ft-fragment.revealed, .ft-fragment.revealed-temp { 446 | opacity: 1; 447 | } 448 | 449 | .ft-overview .ft-default-progress { 450 | opacity: 0; 451 | pointer-events: none; 452 | } 453 | ``` 454 | 455 | ### Customize the Look of Pages in Overview Mode 456 | 457 | To customize the way the thumbnails in overview mode look when idle, hovered and higlighted edit or override this CSS classes: 458 | 459 | ```css 460 | /* default progress page thumb */ 461 | 462 | .ft-page-thumb { 463 | -moz-box-sizing: border-box; 464 | -webkit-box-sizing: border-box; 465 | box-sizing: border-box; 466 | width: 1rem; 467 | height: 0.7rem; 468 | margin-right: 1px; 469 | margin-bottom: 1px; 470 | background-color: rgba(0,0,0,0.7); 471 | cursor: pointer; 472 | -o-transition: background-color 0.5s; 473 | -ms-transition: background-color 0.5s; 474 | -moz-transition: background-color 0.5s; 475 | -webkit-transition: background-color 0.5s; 476 | transition: background-color 0.5s; 477 | } 478 | 479 | .ft-page-thumb:hover { 480 | background-color: rgba(255,255,255,0.7); 481 | } 482 | 483 | .ft-page-thumb.actual { 484 | background-color: rgba(255,255,255,0.5); 485 | border: 1px solid #ffffff; 486 | } 487 | 488 | /* overview mode page highlighting */ 489 | 490 | .ft-overview .ft-page.actual { 491 | opacity: 0.3; 492 | } 493 | 494 | .ft-overview .ft-page.hilite { 495 | opacity: 1; 496 | } 497 | 498 | .ft-overview .ft-page:hover { 499 | opacity: 1; 500 | } 501 | ``` 502 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE HTML> 2 | <!--[if IE 6]> 3 | <html id="ie6" lang="en-US" class="ie ie6 lt-ie9"> 4 | <![endif]--> 5 | <!--[if IE 7]> 6 | <html id="ie7" lang="en-US" class="ie ie7 lt-ie9"> 7 | <![endif]--> 8 | <!--[if IE 8]> 9 | <html id="ie8" lang="en-US" class="ie ie8 lt-ie9"> 10 | <![endif]--> 11 | <!--[if gte IE 9]> 12 | <html lang="en-US" class="ie ie9"> 13 | <![endif]--> 14 | <!--[if !(IE)]><!--> 15 | <html lang="en-US" class=""> 16 | <!--<![endif]--> 17 | <head> 18 | <meta charset="UTF-8"> 19 | <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 20 | <meta name="author" content="marcolago"> 21 | 22 | <meta property="og:title" content="Flowtime.js A HTML Presentation Framework"> 23 | <meta property="og:type" content="website"> 24 | <meta property="og:url" content="http://flowtime-js.marcolago.com"> 25 | <meta property="og:image" content="http://flowtime-js.marcolago.com/assets/img/share-image.jpg"> 26 | <meta property="og:site_name" content="Flowtime.js"> 27 | <meta property="fb:admins" content="1293500397"> 28 | 29 | <meta name="twitter:card" content="summary"> 30 | <meta name="twitter:url" content="http://flowtime-js.marcolago.com"> 31 | <meta name="twitter:title" content="Flowtime.js - A HTML Presentation Framework"> 32 | <meta name="twitter:description" content="Flowtime.js is an open source framework for easily building HTML presentations or websites. It’s built with web standards in mind and on top of a solid full page grid layout powered by CSS3 hardware accelerated transition and comes with a complete set of Javascript API for deep customization."> 33 | <meta name="twitter:image" content="http://flowtime-js.marcolago.com/assets/img/share-image.jpg"> 34 | <meta name="twitter:creator" content="@marcolago"> 35 | 36 | <meta name="description" content="Flowtime.js is an open source framework for easily building HTML presentations or websites. It’s built with web standards in mind and on top of a solid full page grid layout powered by CSS3 hardware accelerated transition and comes with a complete set of Javascript API for deep customization."> 37 | 38 | <title>Flowtime.js 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
47 |
48 |
49 |
50 |

A Presentation Framework by @marcolago

Press Down Key to continue

51 |
52 |
53 |
54 |

What is it?

55 |

Flowtime.js is a framework for easily building HTML presentations or websites.

56 |

It’s built with web standards in mind and on top of a solid full page grid layout.

57 |

The animations are managed with native and accelerated CSS3 transitions.
58 | Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.

59 |

Press Down Key to continue.

60 |
61 |
62 |

Compatibility and Support

63 |

Flowtime.js is fully compatible with real moderns browsers:

64 |
    65 |
  • Firefox
    • 66 |
  • Chrome
    • 67 |
  • Safari
    • 68 |
  • Opera
    • 69 |
  • Internet Explorer 10
    • 70 |
71 |

Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities works.

72 |

In older browsers degrades to a bi-directional scrolling navigation with anchor links.

73 |
74 |
75 |

Touch Devices Support

76 |

Full support for touch devices is currently under development.

77 |

Stay tuned for updates.

78 |
79 |
80 |
81 |
82 |

Mastering the Navigation

83 |

You can navigate in many ways. The most common way is using the keyboard.

84 |

Navigation Keys and default behaviours:

85 |
    86 |
  • Down Key goes to the next page or shows up the next fragment (we’ll see this later).
    • 87 |
  • Up Key goes to the previous page or hides the fragment.
    • 88 |
  • Right Key goes to the adjacent page in the next section (if available, it’s like a grid, otherwise it goes to the last page in the next section).
    • 89 |
  • Left Key goes to the adjacent page in the previous section.
    • 90 |
91 |
92 |
93 |

Alternate Navigation Control

94 |

Pressing the Shift Key you can alternate the the default navigation keys behaviour; let’s see how:

95 |
    96 |
  • Down Key goes to the next page skipping all the fragments.
    • 97 |
  • Up Key goes to the previous page skipping all the fragments.
    • 98 |
  • Right Key goes to the first page in the next section.
    • 99 |
  • Left Key goes to the first page in the previous section.
    • 100 |
101 |
102 |
103 |

Some Other Keys

104 |

Because: the more, the better.

105 |
    106 |
  • Page Up Key goes to the first page of the current section.
    • 107 |
  • Page Down Key goes to the last page of the current section.
    • 108 |
  • Home Key goes to the first page of the first section.
    • 109 |
  • End Key goes to the last page of the last section.
    • 110 |
111 |
112 |
113 |

Overview Mode.

114 |

You can look at the entire presentation by pressing ESC Key.
115 | When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.

116 |

Try it out!

117 |

WARNING! Experimental Feature. If you experience problems in webkit browser you can use the alternate Overview Mode; see the documentation for more info.

118 |
119 |
120 |

Navigating the Overview

121 |

In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press Return or Enter Key or click on the desired page.

122 |
123 |
124 |

Navigate via links or Javascript API

125 |

You can links every page by simply building the href value using this schema:

126 | 

127 | <a href="#/[section data-id attribute]/[page data-id attribute]">
128 |
129 |

Where data-id attribute is an optional attribute you can add to every section or page.
130 | I.e.: if you want to go to back to the first page click here (press backspace to come back to this page).

131 |

You can also trigger every navigation behaviour using the Flowtime.js Javascript API.
Take a look at the documentation if you want to learn more.

132 |
133 |
134 |

Navigate With History

135 |

Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.

136 |

This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.

137 |
138 |
139 |

Fragments Navigation

140 |

The built in fragments navigation allows to advance step by step inside a page.
141 | Press down to try.

142 |

You can discover single elements or even a single part of an element, one at time.

143 |

Fragments navigation is deeply customizable with some configuration options
144 | You can learn how in the documentation.

145 |
146 |
147 |

Progress Indicator

148 |

You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.

149 |

Look at the bottom right corner and you can see a miniature of the presentation structure.

150 |

Clicking on a page thumb will navigate to that page.

151 |
152 |
153 | 154 |
155 |
156 |

Default HTML Structures

157 |

Flowtime.js comes with a default theme that styles the most common HTML structures, like:

158 |

1st Level Heading

159 |

2nd Level Heading

160 |

3rd Level Heading

161 |

4th, 5th and 6th Level Heading

162 |
163 |
164 |

Unordered Lists

165 |
    166 |
  • An item.
    • 167 |
  • Another item.
    • 168 |
  • Just another item.
    • 169 |
  • Ok, we get it!
    • 170 |
171 |
172 |
173 |

Ordered Lists

174 |
    175 |
  1. One.
    2. 176 |
  2. Two.
    3. 177 |
  3. Three.
    4. 178 |
  4. Four.
    5. 179 |
180 |
181 |
182 |

Definition Lists

183 |
184 |
One:
185 |
a single unit of everything.
186 |
Two:
187 |
the only even prime number.
188 |
Three:
189 |
without the “h” is a plant.
190 |
Four:
191 |
“Quattro” in italian.
192 |
193 |
194 |
195 |

Quotes and Citations

196 |

My favourite quotation: The bad craftsman blames his tools.

197 |
198 | Sotto un cespo di rose scarlatte dai al rospo the caldo col latte.
199 | Sotto un cespo di rose paonazze tocca al rospo lavare le tazze. 200 |
201 |

Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute on HTML5 Doctor.

202 |
203 |
204 |

Theme and Styling

205 |

If you don’t like the default theme or you want to build your own (or both things),
206 | or if you want to build a website on top of Flowtime.js,
207 | you can write your own theme and replace the default one.

208 |

Theme and core css are in separate files so you can’t break the layout (unless you override some classes).

209 |

Fluid Layout

210 |

Everything can be fluid, just use em, rem and % units if you want to make an element resizable.

211 |
212 |
213 | 214 |
215 |
216 |

Image Management

217 |

Images are fluid like all the other content.

218 |

You can insert images in the flow or stack images ones on top the others with a minimal markup overhead to create some fancy fragments tricks.

219 |

Go to the next pages to see fluid images in action and how stacked images can be managed, both in the flow or centered in the slide.
220 | Look at the source code to learn how to write the markup.

221 |
222 |
223 | 224 |
225 |
226 |

Stacked Images

227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |

Centered Stacked Images

240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |

About the centered stack

249 |

You can center anything, not only images!

250 |

Just like this content.
Useful for splash pages and titles.

251 |

And you are not limited to stacks, you can center what you want.

252 |
253 |
254 |
255 |
256 | 257 |
258 |
259 |

Native Parallax Support

260 |

By popular demand Flowtime.js includes native parallax support*.

261 |

Simply add a parallax class to anything you want to have parallax enabled and configure the amount of distance for all elements or for a single element using data-parallax attribute.

262 |

For an example go to the next page; for more info read the documentation.

263 |

* By the way: I’m not a parallax fan; but ehi… this is the "web 3.0".

264 |
265 |
266 |

The Invaders from Audiogalaxy

267 | 268 | 269 | 270 |
271 |
272 |

This Page Is Just for Testing the Parallax

273 |

In the previous page, from left to right:

274 |
275 |
Sax:
276 |
King Mix’s most trusted servant. After a diploma in the music conservatory in the…
277 |
King Mix:
278 |
son of the noble dynasty of the Mix of Censor, he soon shows his…
279 |
Tone:
280 |
the most feared space intruder on Mixer. He flunked the musical exam…
281 |
282 |

More info about this villains on www.genereavventura.com. 283 |

284 |
285 | 286 |
287 |
288 |

Code Snippets Highlight

289 |

Code highlight is a courtesy of Lea Verou’s Prism.
Because I really didn’t want to re-invent the wheel.
You can use what you want, it’s not a dependency (but it’s very smart and cool).

290 | 
function saySomethingSmart()
291 | {
292 | 	alert("The bad craftsman blames his tools!");
293 | }
294 | 
.is-not-water {
295 | 	display: inline-block;
296 | }
297 | 
<h1>The Bad Craftsman Blames His Tools!</h1>
298 |
299 | 300 |
301 |

Events and Custom Implementations

302 |

When navigated to a page Flowtime.js fires a custom flowtimenavigation event full of useful properties to customize or build your components or behaviours.

303 |

Read the documentation to learn more about this event and its properties.

304 |
305 |
306 | 307 | 308 | 309 |
310 |
311 |

Use It! It’s Free

312 |

This project is open source, feel free to contribute to the development on Github.

313 |

Feedbacks, suggestions and bug reports are welcomes.

314 |

Use it as you wish and build great things.
And when you’ll have done let me know the URL, I will appreciate it.

315 |
316 | 317 |
318 |

Thank You

319 |

Designed and coded by Marco Lago
320 | Interaction/Experience/Game/Designer/Developer

321 |

You can find me on Twitter as @marcolago

322 |

If you like this work spread the word, you know how ;)

323 |

Have Fun

324 |
325 |
326 |
327 | 328 | Fork me on GitHub 329 | 330 | 331 | 332 | 333 | 334 | 370 | 371 | 382 | 383 | -------------------------------------------------------------------------------- /assets/fonts/Amaranth-Bold-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Copyright c 2011 by Gesine Todt All rights reserved 7 | Designer : Gesine Todt 8 | Foundry : Gesine Todt 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | -------------------------------------------------------------------------------- /assets/fonts/Amaranth-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Copyright c 2011 by Gesine Todt All rights reserved 7 | Designer : Gesine Todt 8 | Foundry : Gesine Todt 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | --------------------------------------------------------------------------------