From 0edf3dff7663e574d10eff8544937208bd76311b Mon Sep 17 00:00:00 2001 From: imakewebthings Date: Mon, 8 Aug 2011 11:19:46 +0800 Subject: [PATCH] Ridiculous giant update --- GPL-license.txt | 278 ++++++++++++++ MIT-license.txt | 21 ++ core/deck.core.css | 400 +++++++++++++++++++++ core/deck.core.html | 40 +++ core/deck.core.js | 239 ++++++++++-- core/deck.core.scss | 243 +++++++++++++ extensions/goto/deck.goto.css | 1 + extensions/goto/deck.goto.html | 6 + extensions/goto/deck.goto.js | 118 ++++-- extensions/goto/deck.goto.scss | 48 +++ extensions/menu/deck.menu.css | 1 + extensions/menu/deck.menu.js | 74 +++- extensions/menu/deck.menu.scss | 26 ++ extensions/navigation/deck.navigation.css | 1 + extensions/navigation/deck.navigation.html | 3 + extensions/navigation/deck.navigation.js | 69 +++- extensions/navigation/deck.navigation.scss | 52 +++ extensions/status/deck.status.css | 1 + extensions/status/deck.status.html | 6 + extensions/status/deck.status.js | 43 ++- extensions/status/deck.status.scss | 14 + introduction/index.html | 219 +++++++++++ introduction/introduction.css | 1 + introduction/introduction.js | 13 + introduction/introduction.scss | 52 +++ modernizr.custom.js | 4 + test/spec.navigation.js | 10 +- themes/style/neon.css | 1 + themes/style/neon.scss | 131 +++++++ themes/style/swiss.css | 1 + themes/style/swiss.scss | 81 +++++ themes/style/web-2.0.css | 1 + themes/style/web-2.0.scss | 223 ++++++++++++ themes/transition/fade.css | 1 + themes/transition/fade.scss | 67 ++++ themes/transition/horizontal-slide.css | 1 + themes/transition/horizontal-slide.scss | 86 +++++ themes/transition/vertical-slide.css | 1 + themes/transition/vertical-slide.scss | 105 ++++++ 39 files changed, 2584 insertions(+), 98 deletions(-) create mode 100644 GPL-license.txt create mode 100644 MIT-license.txt create mode 100644 core/deck.core.css create mode 100644 core/deck.core.html create mode 100755 core/deck.core.scss create mode 100644 extensions/goto/deck.goto.css create mode 100644 extensions/goto/deck.goto.html create mode 100755 extensions/goto/deck.goto.scss create mode 100644 extensions/menu/deck.menu.css create mode 100755 extensions/menu/deck.menu.scss create mode 100644 extensions/navigation/deck.navigation.css create mode 100644 extensions/navigation/deck.navigation.html create mode 100755 extensions/navigation/deck.navigation.scss create mode 100644 extensions/status/deck.status.css create mode 100644 extensions/status/deck.status.html create mode 100755 extensions/status/deck.status.scss create mode 100644 introduction/index.html create mode 100644 introduction/introduction.css create mode 100644 introduction/introduction.js create mode 100755 introduction/introduction.scss create mode 100644 modernizr.custom.js create mode 100644 themes/style/neon.css create mode 100644 themes/style/neon.scss create mode 100644 themes/style/swiss.css create mode 100644 themes/style/swiss.scss create mode 100644 themes/style/web-2.0.css create mode 100644 themes/style/web-2.0.scss create mode 100644 themes/transition/fade.css create mode 100644 themes/transition/fade.scss create mode 100644 themes/transition/horizontal-slide.css create mode 100644 themes/transition/horizontal-slide.scss create mode 100644 themes/transition/vertical-slide.css create mode 100644 themes/transition/vertical-slide.scss diff --git a/GPL-license.txt b/GPL-license.txt new file mode 100644 index 0000000..336e7be --- /dev/null +++ b/GPL-license.txt @@ -0,0 +1,278 @@ +GNU GENERAL PUBLIC LICENSE + Version 2, June 1991 + + Copyright (C) 1989, 1991 Free Software Foundation, Inc. + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + Everyone is permitted to copy and distribute verbatim copies + of this license document, but changing it is not allowed. + + Preamble + + The licenses for most software are designed to take away your +freedom to share and change it. By contrast, the GNU General Public +License is intended to guarantee your freedom to share and change free +software--to make sure the software is free for all its users. This +General Public License applies to most of the Free Software +Foundation's software and to any other program whose authors commit to +using it. (Some other Free Software Foundation software is covered by +the GNU Lesser General Public License instead.) You can apply it to +your programs, too. + + When we speak of free software, we are referring to freedom, not +price. Our General Public Licenses are designed to make sure that you +have the freedom to distribute copies of free software (and charge for +this service if you wish), that you receive source code or can get it +if you want it, that you can change the software or use pieces of it +in new free programs; and that you know you can do these things. + + To protect your rights, we need to make restrictions that forbid +anyone to deny you these rights or to ask you to surrender the rights. +These restrictions translate to certain responsibilities for you if you +distribute copies of the software, or if you modify it. + + For example, if you distribute copies of such a program, whether +gratis or for a fee, you must give the recipients all the rights that +you have. You must make sure that they, too, receive or can get the +source code. And you must show them these terms so they know their +rights. + + We protect your rights with two steps: (1) copyright the software, and +(2) offer you this license which gives you legal permission to copy, +distribute and/or modify the software. + + Also, for each author's protection and ours, we want to make certain +that everyone understands that there is no warranty for this free +software. If the software is modified by someone else and passed on, we +want its recipients to know that what they have is not the original, so +that any problems introduced by others will not reflect on the original +authors' reputations. + + Finally, any free program is threatened constantly by software +patents. We wish to avoid the danger that redistributors of a free +program will individually obtain patent licenses, in effect making the +program proprietary. To prevent this, we have made it clear that any +patent must be licensed for everyone's free use or not licensed at all. + + The precise terms and conditions for copying, distribution and +modification follow. + + GNU GENERAL PUBLIC LICENSE + TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. This License applies to any program or other work which contains +a notice placed by the copyright holder saying it may be distributed +under the terms of this General Public License. The "Program", below, +refers to any such program or work, and a "work based on the Program" +means either the Program or any derivative work under copyright law: +that is to say, a work containing the Program or a portion of it, +either verbatim or with modifications and/or translated into another +language. (Hereinafter, translation is included without limitation in +the term "modification".) Each licensee is addressed as "you". + +Activities other than copying, distribution and modification are not +covered by this License; they are outside its scope. The act of +running the Program is not restricted, and the output from the Program +is covered only if its contents constitute a work based on the +Program (independent of having been made by running the Program). +Whether that is true depends on what the Program does. + + 1. You may copy and distribute verbatim copies of the Program's +source code as you receive it, in any medium, provided that you +conspicuously and appropriately publish on each copy an appropriate +copyright notice and disclaimer of warranty; keep intact all the +notices that refer to this License and to the absence of any warranty; +and give any other recipients of the Program a copy of this License +along with the Program. + +You may charge a fee for the physical act of transferring a copy, and +you may at your option offer warranty protection in exchange for a fee. + + 2. You may modify your copy or copies of the Program or any portion +of it, thus forming a work based on the Program, and copy and +distribute such modifications or work under the terms of Section 1 +above, provided that you also meet all of these conditions: + + a) You must cause the modified files to carry prominent notices + stating that you changed the files and the date of any change. + + b) You must cause any work that you distribute or publish, that in + whole or in part contains or is derived from the Program or any + part thereof, to be licensed as a whole at no charge to all third + parties under the terms of this License. + + c) If the modified program normally reads commands interactively + when run, you must cause it, when started running for such + interactive use in the most ordinary way, to print or display an + announcement including an appropriate copyright notice and a + notice that there is no warranty (or else, saying that you provide + a warranty) and that users may redistribute the program under + these conditions, and telling the user how to view a copy of this + License. (Exception: if the Program itself is interactive but + does not normally print such an announcement, your work based on + the Program is not required to print an announcement.) + +These requirements apply to the modified work as a whole. If +identifiable sections of that work are not derived from the Program, +and can be reasonably considered independent and separate works in +themselves, then this License, and its terms, do not apply to those +sections when you distribute them as separate works. But when you +distribute the same sections as part of a whole which is a work based +on the Program, the distribution of the whole must be on the terms of +this License, whose permissions for other licensees extend to the +entire whole, and thus to each and every part regardless of who wrote it. + +Thus, it is not the intent of this section to claim rights or contest +your rights to work written entirely by you; rather, the intent is to +exercise the right to control the distribution of derivative or +collective works based on the Program. + +In addition, mere aggregation of another work not based on the Program +with the Program (or with a work based on the Program) on a volume of +a storage or distribution medium does not bring the other work under +the scope of this License. + + 3. You may copy and distribute the Program (or a work based on it, +under Section 2) in object code or executable form under the terms of +Sections 1 and 2 above provided that you also do one of the following: + + a) Accompany it with the complete corresponding machine-readable + source code, which must be distributed under the terms of Sections + 1 and 2 above on a medium customarily used for software interchange; or, + + b) Accompany it with a written offer, valid for at least three + years, to give any third party, for a charge no more than your + cost of physically performing source distribution, a complete + machine-readable copy of the corresponding source code, to be + distributed under the terms of Sections 1 and 2 above on a medium + customarily used for software interchange; or, + + c) Accompany it with the information you received as to the offer + to distribute corresponding source code. (This alternative is + allowed only for noncommercial distribution and only if you + received the program in object code or executable form with such + an offer, in accord with Subsection b above.) + +The source code for a work means the preferred form of the work for +making modifications to it. For an executable work, complete source +code means all the source code for all modules it contains, plus any +associated interface definition files, plus the scripts used to +control compilation and installation of the executable. However, as a +special exception, the source code distributed need not include +anything that is normally distributed (in either source or binary +form) with the major components (compiler, kernel, and so on) of the +operating system on which the executable runs, unless that component +itself accompanies the executable. + +If distribution of executable or object code is made by offering +access to copy from a designated place, then offering equivalent +access to copy the source code from the same place counts as +distribution of the source code, even though third parties are not +compelled to copy the source along with the object code. + + 4. You may not copy, modify, sublicense, or distribute the Program +except as expressly provided under this License. Any attempt +otherwise to copy, modify, sublicense or distribute the Program is +void, and will automatically terminate your rights under this License. +However, parties who have received copies, or rights, from you under +this License will not have their licenses terminated so long as such +parties remain in full compliance. + + 5. You are not required to accept this License, since you have not +signed it. However, nothing else grants you permission to modify or +distribute the Program or its derivative works. These actions are +prohibited by law if you do not accept this License. Therefore, by +modifying or distributing the Program (or any work based on the +Program), you indicate your acceptance of this License to do so, and +all its terms and conditions for copying, distributing or modifying +the Program or works based on it. + + 6. Each time you redistribute the Program (or any work based on the +Program), the recipient automatically receives a license from the +original licensor to copy, distribute or modify the Program subject to +these terms and conditions. You may not impose any further +restrictions on the recipients' exercise of the rights granted herein. +You are not responsible for enforcing compliance by third parties to +this License. + + 7. If, as a consequence of a court judgment or allegation of patent +infringement or for any other reason (not limited to patent issues), +conditions are imposed on you (whether by court order, agreement or +otherwise) that contradict the conditions of this License, they do not +excuse you from the conditions of this License. If you cannot +distribute so as to satisfy simultaneously your obligations under this +License and any other pertinent obligations, then as a consequence you +may not distribute the Program at all. For example, if a patent +license would not permit royalty-free redistribution of the Program by +all those who receive copies directly or indirectly through you, then +the only way you could satisfy both it and this License would be to +refrain entirely from distribution of the Program. + +If any portion of this section is held invalid or unenforceable under +any particular circumstance, the balance of the section is intended to +apply and the section as a whole is intended to apply in other +circumstances. + +It is not the purpose of this section to induce you to infringe any +patents or other property right claims or to contest validity of any +such claims; this section has the sole purpose of protecting the +integrity of the free software distribution system, which is +implemented by public license practices. Many people have made +generous contributions to the wide range of software distributed +through that system in reliance on consistent application of that +system; it is up to the author/donor to decide if he or she is willing +to distribute software through any other system and a licensee cannot +impose that choice. + +This section is intended to make thoroughly clear what is believed to +be a consequence of the rest of this License. + + 8. If the distribution and/or use of the Program is restricted in +certain countries either by patents or by copyrighted interfaces, the +original copyright holder who places the Program under this License +may add an explicit geographical distribution limitation excluding +those countries, so that distribution is permitted only in or among +countries not thus excluded. In such case, this License incorporates +the limitation as if written in the body of this License. + + 9. The Free Software Foundation may publish revised and/or new versions +of the General Public License from time to time. Such new versions will +be similar in spirit to the present version, but may differ in detail to +address new problems or concerns. + +Each version is given a distinguishing version number. If the Program +specifies a version number of this License which applies to it and "any +later version", you have the option of following the terms and conditions +either of that version or of any later version published by the Free +Software Foundation. If the Program does not specify a version number of +this License, you may choose any version ever published by the Free Software +Foundation. + + 10. If you wish to incorporate parts of the Program into other free +programs whose distribution conditions are different, write to the author +to ask for permission. For software which is copyrighted by the Free +Software Foundation, write to the Free Software Foundation; we sometimes +make exceptions for this. Our decision will be guided by the two goals +of preserving the free status of all derivatives of our free software and +of promoting the sharing and reuse of software generally. + + NO WARRANTY + + 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY +FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN +OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES +PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED +OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS +TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE +PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, +REPAIR OR CORRECTION. + + 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING +WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR +REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, +INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING +OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED +TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY +YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER +PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE +POSSIBILITY OF SUCH DAMAGES. \ No newline at end of file diff --git a/MIT-license.txt b/MIT-license.txt new file mode 100644 index 0000000..de57ea6 --- /dev/null +++ b/MIT-license.txt @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2011 Caleb Troughton + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/core/deck.core.css b/core/deck.core.css new file mode 100644 index 0000000..1ac369f --- /dev/null +++ b/core/deck.core.css @@ -0,0 +1,400 @@ +/* + +The core CSS files are written for decks to be standalone pages. +If you are embedding a deck in an existing page, you may wish to +remove or change some of the styles below. + +*/ +/* HTML5 ✰ Boilerplate (http://html5boilerplate.com/) */ +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; + content: none; +} + +ins { + background-color: #ff9; + color: #000; + text-decoration: none; +} + +mark { + background-color: #ff9; + color: #000; + font-style: italic; + font-weight: bold; +} + +del { + text-decoration: line-through; +} + +abbr[title], dfn[title] { + border-bottom: 1px dotted; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, select { + vertical-align: middle; +} + +body { + font: 13px/1.231 sans-serif; + *font-size: small; +} + +select, input, textarea, button { + font: 99% sans-serif; +} + +pre, code, kbd, samp { + font-family: monospace, sans-serif; +} + +a:hover, a:active { + outline: none; +} + +ul, ol { + margin-left: 2em; +} + +ol { + list-style-type: decimal; +} + +nav ul, nav li { + margin: 0; + list-style: none; + list-style-image: none; +} + +small { + font-size: 85%; +} + +strong, th { + font-weight: bold; +} + +td { + vertical-align: top; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + padding: 15px; +} + +textarea { + overflow: auto; +} + +.ie6 legend, .ie7 legend { + margin-left: -7px; +} + +input[type="radio"] { + vertical-align: text-bottom; +} + +input[type="checkbox"] { + vertical-align: bottom; +} + +.ie7 input[type="checkbox"] { + vertical-align: baseline; +} + +.ie6 input { + vertical-align: text-bottom; +} + +label, input[type="button"], input[type="submit"], input[type="image"], button { + cursor: pointer; +} + +button, input, select, textarea { + margin: 0; +} + +input:invalid, textarea:invalid { + border-radius: 1px; + -moz-box-shadow: 0px 0px 5px red; + -webkit-box-shadow: 0px 0px 5px red; + box-shadow: 0px 0px 5px red; +} + +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { + background-color: #f0dddd; +} + +::-moz-selection { + background: #FF5E99; + color: #fff; + text-shadow: none; +} + +::selection { + background: #FF5E99; + color: #fff; + text-shadow: none; +} + +a:link { + -webkit-tap-highlight-color: #FF5E99; +} + +button { + width: auto; + overflow: visible; +} + +.ie7 img { + -ms-interpolation-mode: bicubic; +} + +body, select, input, textarea { + color: #444; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; +} + +a, a:active, a:visited { + color: #607890; +} + +a:hover { + color: #036; +} + +/* End HTML5 ✰ Boilerplate */ +body, html { + height: 100%; + font-size: 16px; + line-height: 1.25; +} + +.deck-container { + position: relative; + height: 100%; + width: 70%; + margin: 0 auto; + padding: 0 48px; +} +.js .deck-container { + visibility: hidden; +} +.ready .deck-container { + visibility: visible; +} +.deck-container h1 { + font-size: 4.5em; + text-align: center; + padding-top: 1em; +} +.deck-container h2 { + font-size: 2.25em; + padding-top: .5em; + margin: 0 0 .66666em 0; + border-bottom: 3px solid #888; +} +.deck-container h3 { + font-size: 1.4375em; + margin-bottom: .30435em; +} +.deck-container h4 { + font-size: 1.25em; + margin-bottom: .25em; +} +.deck-container h5 { + font-size: 1.125em; + margin-bottom: .2222em; +} +.deck-container h6 { + font-size: 1em; +} +.deck-container img, .deck-container iframe, .deck-container video { + display: block; + max-width: 100%; +} +.deck-container video, .deck-container iframe, .deck-container img { + display: block; + margin: 0 auto; +} +.deck-container p, .deck-container blockquote, .deck-container iframe, .deck-container img, .deck-container ul, .deck-container ol, .deck-container pre, .deck-container video { + margin-bottom: 1em; +} +.deck-container pre { + border: 1px solid #888; +} +.deck-container em { + font-style: italic; +} + +.slide { + width: auto; + min-height: 100%; + position: relative; +} + +.deck-before, .deck-previous, .deck-next, .deck-after { + position: absolute; + left: -999em; + top: -999em; +} + +.deck-current { + z-index: 2; +} + +.slide .slide { + visibility: hidden; + position: static; +} + +.deck-child-current { + position: static; + z-index: 2; +} +.deck-child-current .slide { + visibility: hidden; +} +.deck-child-current .deck-previous, .deck-child-current .deck-before, .deck-child-current .deck-current { + visibility: visible; +} + +@media all and (orientation:portrait) {} +@media all and (orientation:landscape) {} +@media screen and (max-device-width: 480px) { + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + +@media print { + * { + background: transparent !important; + color: black !important; + text-shadow: none !important; + filter: none !important; + -ms-filter: none !important; + } + + a, a:visited { + color: #444 !important; + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { + content: ""; + } + + pre, blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; + } + + tr, img { + page-break-inside: avoid; + } + + @page { + margin: 0.5cm; +} + + p, h2, h3 { + orphans: 3; + widows: 3; + } + + h2, h3 { + page-break-after: avoid; + } + + .slide { + position: static !important; + visibility: visible !important; + display: block !important; + } + + .deck-container > .slide { + page-break-after: always; + } + + .deck-container { + display: block !important; + } + + script { + display: none; + } +} diff --git a/core/deck.core.html b/core/deck.core.html new file mode 100644 index 0000000..d3c3334 --- /dev/null +++ b/core/deck.core.html @@ -0,0 +1,40 @@ + + + + + Deck Skeleton + + + + + + + + + + + +
+ +
+ +
+ + +
+ + + + + + + + + + + + diff --git a/core/deck.core.js b/core/deck.core.js index af50f43..220bfca 100644 --- a/core/deck.core.js +++ b/core/deck.core.js @@ -1,16 +1,64 @@ -(function($, pd, document, undefined) { - '$:nomunge'; +/*! +Deck JS - deck.core - v1.0 +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +The deck.core module provides all the basic functionality for creating and +moving through a deck. It does so by applying classes to indicate the state of +the deck and its slides, allowing CSS to take care of the visual representation +of each state. It also provides methods for navigating the deck and inspecting +its state, as well as basic key bindings for going to the next and previous +slides. More functionality is provided by wholly separate extension modules +that use the API provided by core. +*/ +(function($, deck, document, undefined) { + var slides, // Array of all the uh, slides... + current, // Array index of the current slide - var slides, - $d = $(document), - current, - keysbound = false, events = { + /* + This event fires whenever the current slide changes, whether by way of + next, prev, or go. The callback function is passed two parameters, from + and to, equal to the indices of the old slide and the new slide + respectively. + + $(document).bind('deck.change', function(event, from, to) { + alert('Moving from slide ' + from + ' to ' + to); + }); + */ change: 'deck.change', - keysbound: 'deck.keysbound', - initialize: 'deck.init' + + /* + This event fires at the end of deck initialization. Extensions should + implement any code that relies on user extensible options (key bindings, + element selectors, classes) within a handler for this event. Native + events associated with Deck JS should be scoped under a .deck event + namespace, as with the example below: + + var $d = $(document); + $.deck.defaults.keys.myExtensionKeycode = 70; // 'h' + $d.bind('deck.init', function() { + $d.bind('keydown.deck', function(event) { + if (event.which == $.deck.getOptions().keys.myExtensionKeycode) { + // Rock out + } + }); + }); + */ + initialize: 'deck.init' }, + options = {}, + $d = $(document), + + /* + Internal function. Updates slide and container classes based on which + slide is the current slide. + */ updateStates = function() { var oc = options.classes, osc = options.selectors.container, @@ -58,12 +106,38 @@ }); } }, + + /* Methods exposed in the jQuery.deck namespace */ methods = { + + /* + jQuery.deck(selector, options) + + selector: string | jQuery | array + options: object, optional + + Initializes the deck, using each element matched by selector as a slide. + May also be passed an array of string selectors or jQuery objects, in + which case each selector in the array is considered a slide. The second + parameter is an optional options object which will extend the default + values. + + $.deck('.slide'); + + or + + $.deck([ + '#first-slide', + '#second-slide', + '#etc' + ]); + */ init: function(elements, opts) { - $.extend(true, options, $[pd].defaults, opts); + $.extend(true, options, $[deck].defaults, opts); slides = []; current = 0; + // Fill slides array depending on parameter type if ($.isArray(elements)) { $.each(elements, function(i, e) { slides.push($(e)); @@ -75,27 +149,31 @@ }); } - // Only deal with init events and bindings once - if (!keysbound) { - $d.bind('keydown.deck', function(e) { - switch (e.which) { - case options.keys.next: - methods.next(); - break; - case options.keys.previous: - methods.prev(); - break; - } - }); - - $d.trigger(events.keysbound); - keysbound = true; - } + /* Remove any previous bindings, and rebind key events */ + $d.unbind('keydown.deck').bind('keydown.deck', function(e) { + switch (e.which) { + case options.keys.next: + methods.next(); + break; + case options.keys.previous: + methods.prev(); + break; + } + }); updateStates(); $d.trigger(events.initialize); }, + /* + jQuery.deck('go', index) + + index: integer + + Moves to the slide at the specified index. Index is 0-based, so + $.deck('go', 0); will move to the first slide. If index is out of bounds + or not a number the call is ignored. + */ go: function(index) { if (typeof index != 'number' || index < 0 || index >= slides.length) return; @@ -104,38 +182,94 @@ updateStates(); }, + /* + jQuery.deck('next') + + Moves to the next slide. If the last slide is already active, the call + is ignored. + */ next: function() { methods.go(current+1); }, + /* + jQuery.deck('prev') + + Moves to the previous slide. If the first slide is already active, the + call is ignored. + */ prev: function() { methods.go(current-1); }, + /* + jQuery.deck('getSlide', index) + + index: integer, optional + + Returns a jQuery object containing the slide at index. If index is not + specified, the current slide is returned. + */ getSlide: function(index) { var i = index ? index : current; if (typeof i != 'number' || i < 0 || i >= slides.length) return null; return slides[i]; }, + /* + jQuery.deck('getSlides') + + Returns all slides as an array of jQuery objects. + */ getSlides: function() { return slides; }, + /* + jQuery.deck('getContainer') + + Returns a jQuery object containing the deck container as defined by the + container option. + */ getContainer: function() { return $(options.selectors.container); }, + /* + jQuery.deck('getOptions') + + Returns the options object for the deck, including any overrides that + were defined at initialization. + */ getOptions: function() { return options; }, - extend: function(name, f) { - methods[name] = f; + /* + jQuery.deck('extend', name, method) + + name: string + method: function + + Adds method to the deck namespace with the key of name. This doesn’t + give access to any private member data — public methods must still be + used within method — but lets extension authors piggyback on the deck + namespace rather than pollute jQuery. + + $.deck('extend', 'alert', function(msg) { + alert(msg); + }); + + // Alerts 'boom' + $.deck('alert', 'boom'); + */ + extend: function(name, method) { + methods[name] = method; } }; - $[pd] = function(method, arg) { + /* jQuery extension */ + $[deck] = function(method, arg) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } @@ -144,7 +278,50 @@ } }; - $[pd].defaults = { + /* + The default settings object for a deck. All deck extensions should extend + this object to add defaults for any of their options. + + options.classes.after + This class is added to all slides that appear after the 'next' slide. + + options.classes.before + This class is added to all slides that appear before the 'previous' + slide. + + options.classes.childCurrent + This class is added to all elements in the DOM tree between the + 'current' slide and the deck container. For standard slides, this is + mostly seen and used for nested slides. + + options.classes.current + This class is added to the current slide. + + options.classes.next + This class is added to the slide immediately following the 'current' + slide. + + options.classes.onPrefix + This prefix, concatenated with the current slide index, is added to the + deck container as you change slides. + + options.classes.previous + This class is added to the slide immediately preceding the 'current' + slide. + + options.selectors.container + Elements matched by this CSS selector will be considered the deck + container. The deck container is used to scope certain states of the + deck, as with the onPrefix option, or with extensions such as deck.goto + and deck.menu. + + options.keys.next + The numeric keycode used to go to the next slide. + + options.keys.previous + The numeric keycode used to go to the previous slide. + */ + $[deck].defaults = { classes: { after: 'deck-after', before: 'deck-before', @@ -164,4 +341,8 @@ previous: 37 // left arrow key } }; + + $d.ready(function() { + $('html').addClass('ready'); + }); })(jQuery, 'deck', document); \ No newline at end of file diff --git a/core/deck.core.scss b/core/deck.core.scss new file mode 100755 index 0000000..2ed4471 --- /dev/null +++ b/core/deck.core.scss @@ -0,0 +1,243 @@ +/* + +The core CSS files are written for decks to be standalone pages. +If you are embedding a deck in an existing page, you may wish to +remove or change some of the styles below. + +*/ + +/* HTML5 ✰ Boilerplate (http://html5boilerplate.com/) */ +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } +ins { background-color: #ff9; color: #000; text-decoration: none; } +mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } +del { text-decoration: line-through; } +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } +table { border-collapse: collapse; border-spacing: 0; } +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } +input, select { vertical-align: middle; } + +body { font:13px/1.231 sans-serif; *font-size:small; } +select, input, textarea, button { font:99% sans-serif; } +pre, code, kbd, samp { font-family: monospace, sans-serif; } + +a:hover, a:active { outline: none; } +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal; } +nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } +small { font-size: 85%; } +strong, th { font-weight: bold; } +td { vertical-align: top; } +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; } +textarea { overflow: auto; } +.ie6 legend, .ie7 legend { margin-left: -7px; } +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } +button, input, select, textarea { margin: 0; } +input:valid, textarea:valid { } +input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; } +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } + +::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; } +a:link { -webkit-tap-highlight-color: #FF5E99; } +button { width: auto; overflow: visible; } +.ie7 img { -ms-interpolation-mode: bicubic; } + +body, select, input, textarea { color: #444; } +h1, h2, h3, h4, h5, h6 { font-weight: bold; } +a, a:active, a:visited { color: #607890; } +a:hover { color: #036; } + +/* End HTML5 ✰ Boilerplate */ + + +body, html { + height:100%; + font-size:16px; + line-height:1.25; +} + +.deck-container { + position:relative; + height:100%; + width:70%; + margin:0 auto; + padding:0 48px; + + .js & { + visibility:hidden; + } + + .ready & { + visibility:visible; + } + + h1 { + font-size:4.5em; + text-align:center; + padding-top:1em; + } + + h2 { + font-size:2.25em; + padding-top:.5em; + margin:0 0 .66666em 0; + border-bottom:3px solid #888; + } + + h3 { + font-size:1.4375em; + margin-bottom:.30435em; + } + + h4 { + font-size:1.25em; + margin-bottom:.25em; + } + + h5 { + font-size:1.125em; + margin-bottom:.2222em; + } + + h6 { + font-size:1em; + } + + img, iframe, video { + display:block; + max-width:100%; + } + + video, iframe, img { + display:block; + margin:0 auto; + } + + p, blockquote, iframe, img, ul, ol, pre, video { + margin-bottom:1em; + } + + pre { + border:1px solid #888; + } + + em { + font-style:italic; + } +} + +.slide { + width:auto; + min-height:100%; + position:relative; +} + +.deck-before, .deck-previous, .deck-next, .deck-after { + position:absolute; + left:-999em; + top:-999em; +} + +.deck-current { + z-index:2; +} + +.slide .slide { + visibility:hidden; + position:static; +} + +.deck-child-current { + position:static; + z-index:2; + + .slide { + visibility:hidden; + } + + + .deck-previous, .deck-before, .deck-current { + visibility:visible; + } +} + + + +@media all and (orientation:portrait) { + +} + +@media all and (orientation:landscape) { + +} + +@media screen and (max-device-width: 480px) { + + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } + + .slide { + position:static !important; + visibility:visible !important; + display:block !important; + } + + .deck-container > .slide { + page-break-after: always; + } + + .deck-container { + display:block !important; + } + + script { + display:none; + } +} \ No newline at end of file diff --git a/extensions/goto/deck.goto.css b/extensions/goto/deck.goto.css new file mode 100644 index 0000000..64933a8 --- /dev/null +++ b/extensions/goto/deck.goto.css @@ -0,0 +1 @@ +.goto-form{position:absolute;z-index:3;bottom:10px;left:50%;width:13.75em;height:1.75em;margin:0 0 0 -6.875em;line-height:1.75em;padding:0.625em;display:none;background:#ccc;overflow:hidden}.borderradius .goto-form{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}.deck-goto .goto-form{display:block}.goto-form label{font-weight:bold}.goto-form label,.goto-form input{float:left}.goto-form input[type="submit"]{margin-top:0.25em}#goto-slide{width:4.375em;margin:0 0.625em;height:1.4375em}@media print{.goto-form,#goto-slide{display:none !important}} diff --git a/extensions/goto/deck.goto.html b/extensions/goto/deck.goto.html new file mode 100644 index 0000000..da96066 --- /dev/null +++ b/extensions/goto/deck.goto.html @@ -0,0 +1,6 @@ + +
+ + + +
\ No newline at end of file diff --git a/extensions/goto/deck.goto.js b/extensions/goto/deck.goto.js index 7796987..f948628 100644 --- a/extensions/goto/deck.goto.js +++ b/extensions/goto/deck.goto.js @@ -1,45 +1,105 @@ -(function($, pd, undefined) { +/*! +Deck JS - deck.goto - v1.0 +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds the necessary methods and key bindings to show and hide a form +for jumping to any slide number in the deck (and processes that form +accordingly). The form-showing state is indicated by the presence of a class on +the deck container. +*/ +(function($, deck, undefined) { var $d = $(document); - // Extend defaults/options - $[pd].defaults.classes.goto = 'deck-goto'; - $[pd].defaults.selectors.gotoForm = '.goto-form'; - $[pd].defaults.selectors.gotoInput = '#goto-slide'; - $[pd].defaults.keys.goto = 71; // g - - $[pd]('extend', 'showGoTo', function() { - $[pd]('getContainer').addClass($[pd]('getOptions').classes.goto); - $($[pd]('getOptions').selectors.gotoInput).focus(); + /* + Extends defaults/options. + + options.classes.goto + This class is added to the deck container when showing the Go To Slide + form. + + options.selectors.gotoForm + The element that matches this selector is the form that is submitted + when a user hits enter after typing a slide number in the gotoInput + element. + + options.selectors.gotoInput + The element that matches this selector is the text input field for + entering a slide number in the Go To Slide form. + + options.keys.goto + The numeric keycode used to toggle between showing and hiding the Go To + Slide form. + */ + $.extend(true, $[deck].defaults, { + classes: { + goto: 'deck-goto' + }, + + selectors: { + gotoForm: '.goto-form', + gotoInput: '#goto-slide' + }, + + keys: { + goto: 71 // g + } }); - $[pd]('extend', 'hideGoTo', function() { - $[pd]('getContainer').removeClass($[pd]('getOptions').classes.goto); - $($[pd]('getOptions').selectors.gotoInput).blur(); + /* + jQuery.deck('showGoTo') + + Shows the Go To Slide form by adding the class specified by the goto class + option to the deck container. + */ + $[deck]('extend', 'showGoTo', function() { + $[deck]('getContainer').addClass($[deck]('getOptions').classes.goto); + $($[deck]('getOptions').selectors.gotoInput).focus(); }); - $[pd]('extend', 'toggleGoTo', function() { - $[pd]($[pd]('getContainer').hasClass($[pd]('getOptions').classes.goto) ? 'hideGoTo' : 'showGoTo'); + /* + jQuery.deck('hideGoTo') + + Hides the Go To Slide form by removing the class specified by the goto class + option from the deck container. + */ + $[deck]('extend', 'hideGoTo', function() { + $[deck]('getContainer').removeClass($[deck]('getOptions').classes.goto); + $($[deck]('getOptions').selectors.gotoInput).blur(); }); - // Bind key events - $d.bind('deck.keysbound', function() { - $d.bind('keydown.deck', function(e) { - if (e.which == $[pd]('getOptions').keys.goto) { - e.preventDefault(); - $[pd]('toggleGoTo'); - } - }); + /* + jQuery.deck('toggleGoTo') + + Toggles between showing and hiding the Go To Slide form. + */ + $[deck]('extend', 'toggleGoTo', function() { + $[deck]($[deck]('getContainer').hasClass($[deck]('getOptions').classes.goto) ? 'hideGoTo' : 'showGoTo'); }); - // Goto form handler $d.bind('deck.init', function() { - $($[pd]('getOptions').selectors.gotoForm).submit(function(e) { - var $field = ($($[pd]('getOptions').selectors.gotoInput)), + // Bind key events + $d.bind('keydown.deck', function(e) { + if (e.which == $[deck]('getOptions').keys.goto) { + e.preventDefault(); + $[deck]('toggleGoTo'); + } + }); + + // Process form submittal, go to the slide entered + $($[deck]('getOptions').selectors.gotoForm) + .unbind('submit.deck') + .bind('submit.deck', function(e) { + var $field = ($($[deck]('getOptions').selectors.gotoInput)), i = parseInt($field.val(), 10); - if (!($.isNaN(i) || i < 1 || i > $[pd]('getSlides').length)) { - $[pd]('go', i - 1); - $[pd]('hideGoTo'); + if (!($.isNaN(i) || i < 1 || i > $[deck]('getSlides').length)) { + $[deck]('go', i - 1); + $[deck]('hideGoTo'); $field.val(''); } diff --git a/extensions/goto/deck.goto.scss b/extensions/goto/deck.goto.scss new file mode 100755 index 0000000..c7b2c99 --- /dev/null +++ b/extensions/goto/deck.goto.scss @@ -0,0 +1,48 @@ +.goto-form { + position:absolute; + z-index:3; + bottom:10px; + left:50%; + width:13.75em; + height:1.75em; + margin:0 0 0 -6.875em; + line-height:1.75em; + padding:0.625em; + display:none; + background:#ccc; + overflow:hidden; + + .borderradius & { + -webkit-border-radius:10px; + -moz-border-radius:10px; + border-radius:10px; + } + + .deck-goto & { + display:block; + } + + label { + font-weight:bold; + } + + label, input { + float:left; + } + + input[type="submit"] { + margin-top:0.25em; + } +} + +#goto-slide { + width:4.375em; + margin:0 0.625em; + height:1.4375em; +} + +@media print { + .goto-form, #goto-slide { + display:none !important; + } +} \ No newline at end of file diff --git a/extensions/menu/deck.menu.css b/extensions/menu/deck.menu.css new file mode 100644 index 0000000..a0d1e6d --- /dev/null +++ b/extensions/menu/deck.menu.css @@ -0,0 +1 @@ +.deck-menu > .slide{float:left;width:22%;height:22%;min-height:0;margin:1%;font-size:0.22em;overflow:hidden;padding:0 0.5%}.deck-menu .slide{background:#eee;position:static;visibility:visible}.deck-menu iframe,.deck-menu img,.deck-menu video{max-width:100%}.deck-menu .deck-current{background:#ddf} diff --git a/extensions/menu/deck.menu.js b/extensions/menu/deck.menu.js index 427a3e1..9b02a25 100644 --- a/extensions/menu/deck.menu.js +++ b/extensions/menu/deck.menu.js @@ -1,27 +1,73 @@ -(function($, pd, undefined) { +/*! +Deck JS - deck.menu - v1.0 +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds the methods and key binding to show and hide a menu of all +slides in the deck. The deck menu state is indicated by the presence of a class +on the deck container. +*/ +(function($, deck, undefined) { var $d = $(document); - // Extend defaults/options - $[pd].defaults.classes.menu = 'deck-menu'; - $[pd].defaults.keys.menu = 77; // m - - $[pd]('extend', 'showMenu', function() { - $[pd]('getContainer').addClass($[pd]('getOptions').classes.menu); + /* + Extends defaults/options. + + options.classes.menu + This class is added to the deck container when showing the slide menu. + + options.keys.menu + The numeric keycode used to toggle between showing and hiding the slide + menu. + */ + $.extend(true, $[deck].defaults, { + classes: { + menu: 'deck-menu' + }, + + keys: { + menu: 77 // m + } }); - $[pd]('extend', 'hideMenu', function() { - $[pd]('getContainer').removeClass($[pd]('getOptions').classes.menu); + /* + jQuery.deck('showMenu') + + Shows the slide menu by adding the class specified by the menu class option + to the deck container. + */ + $[deck]('extend', 'showMenu', function() { + $[deck]('getContainer').addClass($[deck]('getOptions').classes.menu); }); - $[pd]('extend', 'toggleMenu', function() { - $[pd]('getContainer').toggleClass($[pd]('getOptions').classes.menu); + /* + jQuery.deck('hideMenu') + + Hides the slide menu by removing the class specified by the menu class + option from the deck container. + */ + $[deck]('extend', 'hideMenu', function() { + $[deck]('getContainer').removeClass($[deck]('getOptions').classes.menu); + }); + + /* + jQuery.deck('toggleMenu') + + Toggles between showing and hiding the slide menu. + */ + $[deck]('extend', 'toggleMenu', function() { + $[deck]('getContainer').toggleClass($[deck]('getOptions').classes.menu); }); - // Bind key events $d.bind('deck.init', function() { + // Bind key events $d.bind('keydown.deck', function(e) { - if (e.which == $[pd]('getOptions').keys.menu) { - $[pd]('toggleMenu'); + if (e.which == $[deck]('getOptions').keys.menu) { + $[deck]('toggleMenu'); } }); }); diff --git a/extensions/menu/deck.menu.scss b/extensions/menu/deck.menu.scss new file mode 100755 index 0000000..25cad89 --- /dev/null +++ b/extensions/menu/deck.menu.scss @@ -0,0 +1,26 @@ +.deck-menu { + > .slide { + float:left; + width:22%; + height:22%; + min-height:0; + margin:1%; + font-size:0.22em; + overflow:hidden; + padding:0 0.5%; + } + + .slide { + background:#eee; + position:static; + visibility:visible; + } + + iframe, img, video { + max-width:100%; + } + + .deck-current { + background:#ddf; + } +} \ No newline at end of file diff --git a/extensions/navigation/deck.navigation.css b/extensions/navigation/deck.navigation.css new file mode 100644 index 0000000..711a305 --- /dev/null +++ b/extensions/navigation/deck.navigation.css @@ -0,0 +1 @@ +.deck-prev-link,.deck-next-link{display:none;position:absolute;z-index:3;top:50%;width:32px;height:32px;margin-top:-16px;font-size:26px;line-height:30px;vertical-align:middle;text-align:center;text-decoration:none;color:#fff;background:#888}.borderradius .deck-prev-link,.borderradius .deck-next-link{-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.deck-prev-link:active,.deck-prev-link:visited,.deck-next-link:active,.deck-next-link:visited{color:#fff}.deck-container:hover .deck-prev-link,.deck-container:hover .deck-next-link{display:block}.deck-container:hover .deck-prev-link.deck-nav-disabled,.deck-container:hover .deck-next-link.deck-nav-disabled{display:none}.deck-prev-link{left:0}.deck-next-link{right:0}@media print{.deck-prev-link,.deck-next-link{display:none !important}} diff --git a/extensions/navigation/deck.navigation.html b/extensions/navigation/deck.navigation.html new file mode 100644 index 0000000..81d8745 --- /dev/null +++ b/extensions/navigation/deck.navigation.html @@ -0,0 +1,3 @@ + +« +» \ No newline at end of file diff --git a/extensions/navigation/deck.navigation.js b/extensions/navigation/deck.navigation.js index d1ef6ca..b2c8109 100644 --- a/extensions/navigation/deck.navigation.js +++ b/extensions/navigation/deck.navigation.js @@ -1,30 +1,69 @@ -(function($, pd, undefined) { +/*! +Deck JS - deck.navigation - v1.0 +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds clickable previous and next links to the deck. +*/ +(function($, deck, undefined) { var $d = $(document); - // Extend defaults/options - $[pd].defaults.classes.navDisabled = 'deck-disabled'; - $[pd].defaults.selectors.nextLink = '.deck-next-link'; - $[pd].defaults.selectors.previousLink = '.deck-prev-link'; - $[pd].defaults.navDelay = 1000; + /* + Extends defaults/options. + + options.classes.navDisabled + This class is added to a navigation link when that action is disabled. + It is added to the previous link when on the first slide, and to the + next link when on the last slide. + + options.selectors.nextLink + The elements that match this selector will move the deck to the next + slide when clicked. + + options.selectors.previousLink + The elements that match this selector will move to deck to the previous + slide when clicked. + */ + $.extend(true, $[deck].defaults, { + classes: { + navDisabled: 'deck-nav-disabled' + }, + + selectors: { + nextLink: '.deck-next-link', + previousLink: '.deck-prev-link' + } + }); - // Bind key events $d.bind('deck.init', function() { - var opts = $[pd]('getOptions'); + var opts = $[deck]('getOptions'); - $(opts.selectors.previousLink).click(function(e) { - $[pd]('prev'); + // Setup prev/next link events + $(opts.selectors.previousLink) + .unbind('click.deck') + .bind('click.deck', function(e) { + $[deck]('prev'); e.preventDefault(); }); - $(opts.selectors.nextLink).click(function(e) { - $[pd]('next'); + $(opts.selectors.nextLink) + .unbind('click.deck') + .bind('click.deck', function(e) { + $[deck]('next'); e.preventDefault(); }); + // Start on first slide, previous link is disabled $(opts.selectors.previousLink).addClass(opts.classes.navDisabled); - }).bind('deck.change', function(e, from, to) { - var opts = $[pd]('getOptions'), - last = $[pd]('getSlides').length - 1; + }) + /* Update disabled states on deck change if last/first slide */ + .bind('deck.change', function(e, from, to) { + var opts = $[deck]('getOptions'), + last = $[deck]('getSlides').length - 1; $(opts.selectors.previousLink).toggleClass(opts.classes.navDisabled, !to); $(opts.selectors.nextLink).toggleClass(opts.classes.navDisabled, to == last); diff --git a/extensions/navigation/deck.navigation.scss b/extensions/navigation/deck.navigation.scss new file mode 100755 index 0000000..dd16d9c --- /dev/null +++ b/extensions/navigation/deck.navigation.scss @@ -0,0 +1,52 @@ +@mixin border-radius($r) { + -webkit-border-radius:$r; + -moz-border-radius:$r; + border-radius:$r; +} + +.deck-prev-link, .deck-next-link { + display:none; + position:absolute; + z-index:3; + top:50%; + width:32px; + height:32px; + margin-top:-16px; + font-size:26px; + line-height:30px; + vertical-align:middle; + text-align:center; + text-decoration:none; + color:#fff; + background:#888; + + .borderradius & { + @include border-radius(16px); + } + + &:active, &:visited { + color:#fff; + } + + .deck-container:hover & { + display:block; + + &.deck-nav-disabled { + display:none; + } + } +} + +.deck-prev-link { + left:0; +} + +.deck-next-link { + right:0; +} + +@media print { + .deck-prev-link, .deck-next-link { + display:none !important; + } +} diff --git a/extensions/status/deck.status.css b/extensions/status/deck.status.css new file mode 100644 index 0000000..072460a --- /dev/null +++ b/extensions/status/deck.status.css @@ -0,0 +1 @@ +.deck-status{position:absolute;bottom:10px;right:0;color:#888;z-index:3;margin:0}@media print{.deck-status{display:none}} diff --git a/extensions/status/deck.status.html b/extensions/status/deck.status.html new file mode 100644 index 0000000..310a025 --- /dev/null +++ b/extensions/status/deck.status.html @@ -0,0 +1,6 @@ + +

+ + / + +

\ No newline at end of file diff --git a/extensions/status/deck.status.js b/extensions/status/deck.status.js index 8e3d22e..0ed90a0 100644 --- a/extensions/status/deck.status.js +++ b/extensions/status/deck.status.js @@ -1,15 +1,42 @@ -(function($, pd, undefined) { +/*! +Deck JS - deck.status - v1.0 +Copyright (c) 2011 Caleb Troughton +Dual licensed under the MIT license and GPL license. +https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt +https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt +*/ + +/* +This module adds a (current)/(total) style status indicator to the deck. +*/ +(function($, deck, undefined) { var $d = $(document); - // Extend defaults/options - $[pd].defaults.selectors.statusTotal = '.deck-status-total'; - $[pd].defaults.selectors.statusCurrent = '.deck-status-current'; + /* + Extends defaults/options. + + options.selectors.statusCurrent + The element matching this selector displays the current slide number. + + options.selectors.statusTotal + The element matching this selector displays the total number of slides. + */ + $.extend(true, $[deck].defaults, { + selectors: { + statusCurrent: '.deck-status-current', + statusTotal: '.deck-status-total' + } + }); $d.bind('deck.init', function() { - $($[pd]('getOptions').selectors.statusCurrent).text(1); - $($[pd]('getOptions').selectors.statusTotal).text($[pd]('getSlides').length); - }).bind('deck.change', function(e, from, to) { - $($[pd]('getOptions').selectors.statusCurrent).text(to + 1); + // Start on first slide + $($[deck]('getOptions').selectors.statusCurrent).text(1); + // Set total slides once + $($[deck]('getOptions').selectors.statusTotal).text($[deck]('getSlides').length); + }) + /* Update current slide number with each change event */ + .bind('deck.change', function(e, from, to) { + $($[deck]('getOptions').selectors.statusCurrent).text(to + 1); }); })(jQuery, 'deck'); diff --git a/extensions/status/deck.status.scss b/extensions/status/deck.status.scss new file mode 100755 index 0000000..445688c --- /dev/null +++ b/extensions/status/deck.status.scss @@ -0,0 +1,14 @@ +.deck-status { + position:absolute; + bottom:10px; + right:0; + color:#888; + z-index:3; + margin:0; +} + +@media print { + .deck-status { + display:none; + } +} \ No newline at end of file diff --git a/introduction/index.html b/introduction/index.html new file mode 100644 index 0000000..668153b --- /dev/null +++ b/introduction/index.html @@ -0,0 +1,219 @@ + + + + + + + + + + Getting Started with Deck JS + + + + + + + + + + + + + + + + + + + + + + + + +
+

Themes

+ + + + + + +
+ +
+
+

Getting Started with Deck JS

+
+ +
+

Your Typical Deck

+

Consists of:

+
    +
  • Slides in the form of HTML
    • +
  • The core Deck JS and CSS files
    • +
  • A style theme and transition theme
    • +
  • Any desired JS extensions
    • +
+
+ +
+

The Markup

+

Slides are just HTML elements with a class of slide.

+ 
<div class="slide">
+   <h2>Your Typical Deck</h2>
+   <h3>Consists of:</h3>
+   <ul>
+      <li>Slides in the form of HTML</li>
+      <li>The core Deck JS and CSS files</li>
+      <li>A style theme and transition theme</li>
+      <li>Any desired extenstions</li>
+   </ul>
+</div>
+
+ +
+

Core Files

+

Deck JS

+

Handles all the dirty work of initializing and moving through slides. It also exposes an API for working with and extending Deck JS.

+ 
<script src="path/to/js/deck.core.js"></script>
+

Deck CSS

+

Contains basic layout of slides and content styles.

+ 
<link rel="stylesheet" href="/path/to/css/deck.core.css">
+

Modernizr

+

Feature detection tool used by core and extension CSS files.

+ 
<script src="path/to/js/modernizr.custom.js"></script>
+
+ +
+

Style Themes

+

Customizes the colors, typography, and layout of slide content.

+ 
<link rel="stylesheet" href="/path/to/css/style-theme.css">
+
+ +
+

Transition Themes

+

Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But you aren’t using those browsers to give your presentations, are you…

+ 
<link rel="stylesheet" href="/path/to/css/transition-theme.css">
+
+ +
+

Extensions

+

Deck Core gives you basic slide functionality with left and right arrow navigation, but you may want more.

+ +
    +
  • +

    deck.goto

    +

    Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.

    +
    • + +
  • +

    deck.menu

    +

    Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view.

    +
    • + +
  • +

    deck.navigation

    +

    Adds clickable left and right buttons for the less keyboard inclined.

    +
    • + +
  • +

    deck.status

    +

    Adds a page number indicator. (current/total)

    +
    • +
+
+ +
+

Nested Slides

+

That last slide had a few steps. To create substeps in slides, just nest them:

+ 
<div class="slide">
+   <h2>Extensions</h2>
+   <p>Deck Core gives you basic slide functionality...</p>		
+   <ul>
+      <li class="slide">
+         <h3>deck.goto</h3>
+         <p>Adds a shortcut key to jump to any slide number...</p>
+      </li>
+      <li class="slide">...</li>	
+      <li class="slide">...</li>
+      <li class="slide">...</li>
+   </ul>
+</div>
+
+ +
+

Other Useful Elements: Images

+ Kitties + 
<img src="http://placekitten.com/600/375" alt="Kitties">
+
+ +
+

Other Useful Elements: Blockquotes

+
+

Food is an important part of a balanced diet.

+

Fran Lebowitz

+
+ 
<blockquote cite="http://example.org">
+   <p>Food is an important part of a balanced diet.</p>
+   <p><cite>Fran Lebowitz</cite></p>
+</blockquote>
+
+ + +
+

Other Useful Elements: Video Embeds

+

Embed videos using embed codes from your favorite online video service or with an HTML5 video element.

+ + + + 
<iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
+
+ +
+

Digging Deeper

+

If you want to learn about making your own themes, creating your own completely custom CSS, extending Deck JS, and more, check out the Deck JS Docs.

+
+ + « + » + +

+ + / + +

+ +
+ + + +
+
+ + + + + + + + + + + + + + + + diff --git a/introduction/introduction.css b/introduction/introduction.css new file mode 100644 index 0000000..db81ce3 --- /dev/null +++ b/introduction/introduction.css @@ -0,0 +1 @@ +.theme-menu{display:none;position:fixed;z-index:3;bottom:10px;left:10px;height:20px;line-height:20px;padding:5px;border:1px solid #ddd;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;overflow:hidden;background:#fff}.js .theme-menu{display:block}.theme-menu h2{float:left;font-size:20px;border:0;padding:5px 10px;height:20px;position:relative;top:-5px;left:-5px;background:#ccc}.theme-menu label{float:left;display:block;font-size:12px;vertical-align:baseline;margin:0 4px 0 15px}.theme-menu select{float:left;display:block}@media print{.theme-menu{display:none !important}} diff --git a/introduction/introduction.js b/introduction/introduction.js new file mode 100644 index 0000000..df37aeb --- /dev/null +++ b/introduction/introduction.js @@ -0,0 +1,13 @@ +$(function() { + // Deck initialization + $.deck('.slide'); + + $('#style-themes').change(function() { + $('#style-theme-link').attr('href', $(this).val()); + }); + + $('#transition-themes').change(function() { + $('#transition-theme-link').attr('href', $(this).val()); + }); +}); + diff --git a/introduction/introduction.scss b/introduction/introduction.scss new file mode 100755 index 0000000..1527e66 --- /dev/null +++ b/introduction/introduction.scss @@ -0,0 +1,52 @@ +.theme-menu { + display:none; + position:fixed; + z-index:3; + bottom:10px; + left:10px; + height:20px; + line-height:20px; + padding:5px; + border:1px solid #ddd; + -webkit-border-radius:5px; + -moz-border-radius:5px; + border-radius:5px; + overflow:hidden; + background:#fff; + + .js & { + display:block; + } + + h2 { + float:left; + font-size:20px; + border:0; + padding:5px 10px; + height:20px; + position:relative; + top:-5px; + left:-5px; + background:#ccc; + } + + label { + float:left; + display:block; + font-size:12px; + vertical-align:baseline; + margin:0 4px 0 15px; + } + + select { + float:left; + display:block; + } +} + +@media print { + .theme-menu { + display:none !important; + } +} + diff --git a/modernizr.custom.js b/modernizr.custom.js new file mode 100644 index 0000000..5a61917 --- /dev/null +++ b/modernizr.custom.js @@ -0,0 +1,4 @@ +/* Modernizr 2.0.6 (Custom Build) | MIT & BSD + * Contains: fontface | backgroundsize | borderimage | borderradius | boxshadow | flexbox | hsla | multiplebgs | opacity | rgba | textshadow | cssanimations | csscolumns | generatedcontent | cssgradients | cssreflections | csstransforms | csstransforms3d | csstransitions | applicationcache | canvas | canvastext | draganddrop | hashchange | history | audio | video | input | inputtypes | localstorage | postmessage | sessionstorage | websockets | webworkers | geolocation | inlinesvg | smil | svg | svgclippaths | touch | webgl | iepp | mq | cssclasses | teststyles | testprop | testallprops | hasevent | prefixes | domprefixes | load + */ +;window.Modernizr=function(a,b,c){function I(){e.input=function(a){for(var b=0,c=a.length;b",a,""].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},w=function(b){if(a.matchMedia)return matchMedia(b).matches;var c;v("@media "+b+" { #"+i+" { position: absolute; } }",function(b){c=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).position=="absolute"});return c},x=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=D(e[d],"function"),D(e[d],c)||(e[d]=c),e.removeAttribute(d))),e=null;return f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),y,z={}.hasOwnProperty,A;!D(z,c)&&!D(z.call,c)?A=function(a,b){return z.call(a,b)}:A=function(a,b){return b in a&&D(a.constructor.prototype[b],c)};var H=function(c,d){var f=c.join(""),g=d.length;v(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||j.touch.offsetTop===9,e.csstransforms3d=j.csstransforms3d.offsetLeft===9,e.generatedcontent=j.generatedcontent.offsetHeight>=1,e.fontface=/src/i.test(h)&&h.indexOf(d.split(" ")[0])===0},g,d)}(['@font-face {font-family:"font";src:url("https://")}',["@media (",o.join("touch-enabled),("),i,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",o.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join(""),['#generatedcontent:after{content:"',m,'";visibility:hidden}'].join("")],["fontface","touch","csstransforms3d","generatedcontent"]);r.flexbox=function(){function c(a,b,c,d){a.style.cssText=o.join(b+":"+c+";")+(d||"")}function a(a,b,c,d){b+=":",a.style.cssText=(b+o.join(c+";"+b)).slice(0,-b.length)+(d||"")}var d=b.createElement("div"),e=b.createElement("div");a(d,"display","box","width:42px;padding:0;"),c(e,"box-flex","1","width:10px;"),d.appendChild(e),g.appendChild(d);var f=e.offsetWidth===42;d.removeChild(e),g.removeChild(d);return f},r.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},r.canvastext=function(){return!!e.canvas&&!!D(b.createElement("canvas").getContext("2d").fillText,"function")},r.webgl=function(){return!!a.WebGLRenderingContext},r.touch=function(){return e.touch},r.geolocation=function(){return!!navigator.geolocation},r.postmessage=function(){return!!a.postMessage},r.hashchange=function(){return x("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},r.history=function(){return!!a.history&&!!history.pushState},r.draganddrop=function(){return x("dragstart")&&x("drop")},r.websockets=function(){for(var b=-1,c=p.length;++b";return(a.firstChild&&a.firstChild.namespaceURI)==q.svg},r.smil=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"animate")))},r.svgclippaths=function(){return!!b.createElementNS&&/SVG/.test(n.call(b.createElementNS(q.svg,"clipPath")))};for(var J in r)A(r,J)&&(y=J.toLowerCase(),e[y]=r[J](),u.push((e[y]?"":"no-")+y));e.input||I(),B(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b .slide{text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5);background:#f4fafe;background:-moz-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4fafe), color-stop(100%, #ccf0f0));background:-webkit-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);background:-o-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);background:-ms-linear-gradient(top, #f4fafe 0%, #ccf0f0 100%);background:linear-gradient(top, #f4fafe 0%, #ccf0f0 100%)}.deck-container h1,.deck-container h2,.deck-container h3,.deck-container h4,.deck-container h5,.deck-container h6{font-family:"Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif}.deck-container h1{color:#08455f}.deck-container h2{color:#0b7495;border-bottom:0}.cssreflections .deck-container h2{line-height:1;-webkit-box-reflect:below -0.556em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), color-stop(0.7, rgba(255, 255, 255, 0.1)), to(transparent));-moz-box-reflect:below -0.556em -moz-linear-gradient(top, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.3) 100%)}.deck-container h3{color:#000}.deck-container pre{border-color:#cde;background:#fff;position:relative}.borderradius .deck-container pre{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.csstransforms.boxshadow .deck-container pre:before,.csstransforms.boxshadow .deck-container pre:after{content:"";position:absolute;z-index:-1;bottom:15px;width:50%;height:20%;max-width:300px;-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);box-shadow:0 15px 10px rgba(0, 0, 0, 0.7)}.csstransforms.boxshadow .deck-container pre:before{left:10px;-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-ms-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}.csstransforms.boxshadow .deck-container pre:after{right:10px;-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-ms-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}.deck-container code{color:#789}.deck-container blockquote{font-family:"Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;font-size:2em;padding:20px 30px 20px 2em;color:#000;background:#fff;position:relative;border:1px solid #cde}.borderradius .deck-container blockquote{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.boxshadow .deck-container blockquote:after{content:"";position:absolute;z-index:-1;top:10px;bottom:10px;left:0;right:50%;-moz-border-radius:10px/100px;border-radius:10px/100px;-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 0 15px rgba(0, 0, 0, 0.6);box-shadow:0 0 15px rgba(0, 0, 0, 0.6)}.deck-container blockquote p{margin:0}.deck-container blockquote cite{font-size:.5em;font-style:normal;font-weight:bold;color:#888}.deck-container blockquote:before{content:"“";position:absolute;top:0;left:0;font-size:5em;line-height:1;color:#ccf0f0;z-index:1}.deck-container .borderradius img{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.deck-container ::-moz-selection{background:#08455f}.deck-container ::selection{background:#08455f}.deck-container a,.deck-container a:active,.deck-container a:visited{color:#599;text-decoration:none}.deck-container a:hover,.deck-container a:focus{text-decoration:underline}.deck-container .deck-prev-link,.deck-container .deck-next-link{background:#fff;opacity:0.5;line-height:26px}.deck-container .deck-prev-link,.deck-container .deck-prev-link:active,.deck-container .deck-prev-link:visited,.deck-container .deck-next-link,.deck-container .deck-next-link:active,.deck-container .deck-next-link:visited{color:#599}.deck-container .deck-prev-link:hover,.deck-container .deck-prev-link:focus,.deck-container .deck-next-link:hover,.deck-container .deck-next-link:focus{opacity:1;text-decoration:none}.deck-container .deck-status{font-size:0.6666em}.deck-container.deck-menu .slide{background:transparent;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.rgba .deck-container.deck-menu .slide{background:rgba(0, 0, 0, 0.1)}.deck-container.deck-menu .slide.deck-current,.rgba .deck-container.deck-menu .slide.deck-current{background:#fff}.deck-container .goto-form{background:#fff;border:1px solid #cde;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.boxshadow .deck-container .goto-form{-webkit-box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-moz-box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow:0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset} diff --git a/themes/style/web-2.0.scss b/themes/style/web-2.0.scss new file mode 100644 index 0000000..08783bd --- /dev/null +++ b/themes/style/web-2.0.scss @@ -0,0 +1,223 @@ +@mixin border-radius($r) { + -webkit-border-radius:$r; + -moz-border-radius:$r; + border-radius:$r; +} + +@mixin rotate($deg) { + -webkit-transform:rotate($deg); + -moz-transform:rotate($deg); + -ms-transform:rotate($deg); + -o-transform:rotate($deg); + transform:rotate($deg); +} + +@mixin box-shadow($x, $y, $blur, $color) { + -webkit-box-shadow:$x $y $blur $color; + -moz-box-shadow:$x $y $blur $color; + box-shadow:$x $y $blur $color; +} + +body { + background: rgb(244,250,254); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(244,250,254,1) 0%, rgba(204,240,240,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,250,254,1)), color-stop(100%,rgba(204,240,240,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* W3C */ +} + +.deck-container { + font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; + font-size:1.25em; + + > .slide { + text-shadow:1px 1px 1px rgba(255,255,255,.5); + background: rgb(244,250,254); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(244,250,254,1) 0%, rgba(204,240,240,1) 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,250,254,1)), color-stop(100%,rgba(204,240,240,1))); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* Opera11.10+ */ + background: -ms-linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* IE10+ */ + background: linear-gradient(top, rgba(244,250,254,1) 0%,rgba(204,240,240,1) 100%); /* W3C */ + } + + h1, h2, h3, h4, h5, h6 { + font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; + } + + h1 { + color:#08455f; + } + + h2 { + color:#0b7495; + border-bottom:0; + + .cssreflections & { + line-height:1; + -webkit-box-reflect:below -0.5555em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), color-stop(0.7, rgba(255,255,255,.1)), to(transparent)); + -moz-box-reflect:below -0.5555em -moz-linear-gradient(top, transparent 0%, transparent 30%, rgba(255,255,255,.3) 100%); + } + } + + h3 { + color:#000; + } + + pre { + border-color:#cde; + background:#fff; + position:relative; + + .borderradius & { + @include border-radius(5px); + } + + /* http://nicolasgallagher.com/css-drop-shadows-without-images/ */ + .csstransforms.boxshadow & { + &:before, &:after { + content:""; + position:absolute; + z-index:-1; + bottom:15px; + width:50%; + height:20%; + max-width:300px; + @include box-shadow(0, 15px, 10px, rgba(0, 0, 0, 0.7)); + } + + &:before { + left:10px; + @include rotate(-3deg); + } + + &:after { + right:10px; + @include rotate(3deg); + } + } + } + + code { + color:#789; + } + + blockquote { + font-family: "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; + font-size:2em; + padding:20px 30px 20px 2em; + color:#000; + background:#fff; + position:relative; + border:1px solid #cde; + + .borderradius & { + @include border-radius(5px); + } + + .boxshadow & { + &:after { + content:""; + position:absolute; + z-index:-1; + top: 10px; + bottom: 10px; + left: 0; + right: 50%; + -moz-border-radius: 10px / 100px; + border-radius: 10px / 100px; + @include box-shadow(0, 0, 15px, rgba(0,0,0,0.6)); + } + } + + p { + margin:0; + } + + cite { + font-size:.5em; + font-style:normal; + font-weight:bold; + color:#888; + } + + &:before { + content:"“"; + position:absolute; + top:0; + left:0; + font-size:5em; + line-height:1; + color:#ccf0f0; + z-index:1; + } + } + + .borderradius img { + @include border-radius(5px); + } + + ::-moz-selection{ background:#08455f; } + ::selection { background:#08455f; } + + a { + &, &:active, &:visited { + color:#599; + text-decoration:none; + } + + &:hover, &:focus { + text-decoration:underline; + } + } + + .deck-prev-link, .deck-next-link { + background:#fff; + opacity:0.5; + line-height:26px; + + &, &:active, &:visited { + color:#599; + } + + &:hover, &:focus { + opacity:1; + text-decoration:none; + } + } + + .deck-status { + font-size:0.6666em; + } + + &.deck-menu { + .slide { + background:transparent; + @include border-radius(5px); + + .rgba & { + background:rgba(0,0,0,.1); + } + + &.deck-current, .rgba &.deck-current { + background:#fff; + } + } + } + + .goto-form { + background:#fff; + border:1px solid #cde; + @include border-radius(5px); + + .boxshadow & { + -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; + } + } +} + + diff --git a/themes/transition/fade.css b/themes/transition/fade.css new file mode 100644 index 0000000..d700530 --- /dev/null +++ b/themes/transition/fade.css @@ -0,0 +1 @@ +.csstransitions.csstransforms .deck-container .slide{-webkit-transition:opacity 500ms ease-in-out 0ms;-moz-transition:opacity 500ms ease-in-out 0ms;-ms-transition:opacity 500ms ease-in-out 0ms;transition:opacity 500ms ease-in-out 0ms}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 48px}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide{position:relative;left:0;top:0;opacity:0}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-before,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-previous{opacity:0.4}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-current{opacity:1}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after{opacity:0;pointer-events:none}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide{visibility:visible}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current{opacity:1;visibility:visible}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-next,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current .deck-after{visibility:hidden} diff --git a/themes/transition/fade.scss b/themes/transition/fade.scss new file mode 100644 index 0000000..1cb9179 --- /dev/null +++ b/themes/transition/fade.scss @@ -0,0 +1,67 @@ +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -moz-transform:translate($x, $y); + -ms-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + -moz-transition:$prop $duration $easing $delay; + -ms-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +.csstransitions.csstransforms { + .deck-container .slide { + @include transition(opacity, 500ms); + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width:100%; + padding:0 48px; + + .slide { + position:relative; + left:0; + top:0; + opacity:0; + } + + .deck-before, .deck-previous { + opacity:0.4; + } + + .deck-current { + opacity:1; + } + } + + > .deck-previous, > .deck-before, > .deck-next, > .deck-after { + opacity:0; + pointer-events:none; + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + opacity:1; + visibility:visible; + + .deck-next, .deck-after { + visibility:hidden; + } + } + } +} diff --git a/themes/transition/horizontal-slide.css b/themes/transition/horizontal-slide.css new file mode 100644 index 0000000..c0a4b66 --- /dev/null +++ b/themes/transition/horizontal-slide.css @@ -0,0 +1 @@ +.csstransitions.csstransforms .deck-container > .slide{-webkit-transition:-webkit-transform 500ms ease-in-out;-moz-transition:-moz-transform 500ms ease-in-out;transition:transform 500ms ease-in-out}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 48px}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide{position:relative;left:0;top:0;-webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;-moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-before,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-previous,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-current{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate3d(0, 0, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after{visibility:visible;-webkit-transform:translate3d(200%, 0, 0);-moz-transform:translate(200%, 0);-ms-transform:translate(200%, 0);transform:translate3d(200%, 0, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-before,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-previous{opacity:0.4}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous{-webkit-transform:translate3d(-200%, 0, 0);-moz-transform:translate(-200%, 0);-ms-transform:translate(-200%, 0);transform:translate3d(-200%, 0, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before{-webkit-transform:translate3d(-400%, 0, 0);-moz-transform:translate(-400%, 0);-ms-transform:translate(-400%, 0);transform:translate3d(-400%, 0, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next{-webkit-transform:translate3d(200%, 0, 0);-moz-transform:translate(200%, 0);-ms-transform:translate(200%, 0);transform:translate3d(200%, 0, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after{-webkit-transform:translate3d(400%, 0, 0);-moz-transform:translate(400%, 0);-ms-transform:translate(400%, 0);transform:translate3d(400%, 0, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide{visibility:visible}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate3d(0, 0, 0)}body{overflow-x:hidden} diff --git a/themes/transition/horizontal-slide.scss b/themes/transition/horizontal-slide.scss new file mode 100644 index 0000000..3136fea --- /dev/null +++ b/themes/transition/horizontal-slide.scss @@ -0,0 +1,86 @@ +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -moz-transform:translate($x, $y); + -ms-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + -moz-transition:$prop $duration $easing $delay; + -ms-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +.csstransitions.csstransforms { + .deck-container > .slide { + -webkit-transition:-webkit-transform 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out; + transition:transform 500ms ease-in-out; + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width:100%; + padding:0 48px; + + .slide { + position:relative; + left:0; + top:0; + -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + } + + .deck-before, .deck-previous, .deck-current { + @include translate; + } + + .deck-next, .deck-after { + visibility:visible; + @include translate(200%); + } + + .deck-before, .deck-previous { + opacity:0.4; + } + } + + > .deck-previous { + @include translate(-200%); + } + + > .deck-before { + @include translate(-400%); + } + + > .deck-next { + @include translate(200%); + } + + > .deck-after { + @include translate(400%); + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + @include translate; + } + } +} + +body { + overflow-x:hidden; +} \ No newline at end of file diff --git a/themes/transition/vertical-slide.css b/themes/transition/vertical-slide.css new file mode 100644 index 0000000..c7bb2c4 --- /dev/null +++ b/themes/transition/vertical-slide.css @@ -0,0 +1 @@ +.csstransitions.csstransforms .deck-container > .slide{-webkit-transition:-webkit-transform 500ms ease-in-out;-moz-transition:-moz-transform 500ms ease-in-out;transition:transform 500ms ease-in-out}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide{position:absolute;top:0;left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0 48px}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide{position:relative;left:0;top:0;-webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;-moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-before,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-previous,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-current{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate3d(0, 0, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after{visibility:visible;-webkit-transform:translate3d(0, 1600px, 0);-moz-transform:translate(0, 1600px);-ms-transform:translate(0, 1600px);transform:translate3d(0, 1600px, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-before,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-previous{opacity:0.4}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous{-webkit-transform:translate3d(0, -200%, 0);-moz-transform:translate(0, -200%);-ms-transform:translate(0, -200%);transform:translate3d(0, -200%, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before{-webkit-transform:translate3d(0, -400%, 0);-moz-transform:translate(0, -400%);-ms-transform:translate(0, -400%);transform:translate3d(0, -400%, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next{-webkit-transform:translate3d(0, 200%, 0);-moz-transform:translate(0, 200%);-ms-transform:translate(0, 200%);transform:translate3d(0, 200%, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after{-webkit-transform:translate3d(0, 400%, 0);-moz-transform:translate(0, 400%);-ms-transform:translate(0, 400%);transform:translate3d(0, 400%, 0)}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide,.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide{visibility:visible}.csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate3d(0, 0, 0)}.csstransitions.csstransforms .deck-prev-link{left:auto;right:0;top:59px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.csstransitions.csstransforms .deck-next-link{top:99px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}body{overflow-y:hidden} diff --git a/themes/transition/vertical-slide.scss b/themes/transition/vertical-slide.scss new file mode 100644 index 0000000..2328c67 --- /dev/null +++ b/themes/transition/vertical-slide.scss @@ -0,0 +1,105 @@ +@mixin translate($x: 0, $y: 0, $z: 0) { + -webkit-transform:translate3d($x, $y, $z); + -moz-transform:translate($x, $y); + -ms-transform:translate($x, $y); + transform:translate3d($x, $y, $z); +} + +@mixin rotate($deg) { + -webkit-transform:rotate($deg); + -moz-transform:rotate($deg); + -ms-transform:rotate($deg); + transform:rotate($deg); +} + +@mixin transition($prop, $duration, $easing: ease-in-out, $delay: 0ms) { + -webkit-transition:$prop $duration $easing $delay; + -moz-transition:$prop $duration $easing $delay; + -ms-transition:$prop $duration $easing $delay; + transition:$prop $duration $easing $delay; +} + +.csstransitions.csstransforms { + .deck-container > .slide { + -webkit-transition:-webkit-transform 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out; + transition:transform 500ms ease-in-out; + } + + .deck-container:not(.deck-menu) { + > .slide { + position:absolute; + top:0; + left:0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width:100%; + padding:0 48px; + + .slide { + position:relative; + left:0; + top:0; + -webkit-transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + -moz-transition:-moz-transform 500ms ease-in-out, opacity 500ms ease-in-out; + transition:-webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; + } + + .deck-before, .deck-previous, .deck-current { + @include translate; + } + + .deck-next, .deck-after { + visibility:visible; + @include translate(0, 1600px); + } + + .deck-before, .deck-previous { + opacity:0.4; + } + } + + > .deck-previous { + @include translate(0, -200%); + } + + > .deck-before { + @include translate(0, -400%); + } + + > .deck-next { + @include translate(0, 200%); + } + + > .deck-after { + @include translate(0, 400%); + } + + > .deck-before, > .deck-previous { + .slide { + visibility:visible; + } + } + + > .deck-child-current { + @include translate; + } + } + + .deck-prev-link { + left:auto; + right:0; + top:59px; + @include rotate(90deg); + } + + .deck-next-link { + top:99px; + @include rotate(90deg); + } +} + +body { + overflow-y:hidden; +} \ No newline at end of file