Ridiculous giant update
This commit is contained in:
parent
7c1c3f6b66
commit
0edf3dff76
39 changed files with 2584 additions and 98 deletions
278
GPL-license.txt
Normal file
278
GPL-license.txt
Normal file
|
@ -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.
|
21
MIT-license.txt
Normal file
21
MIT-license.txt
Normal file
|
@ -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.
|
400
core/deck.core.css
Normal file
400
core/deck.core.css
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
40
core/deck.core.html
Normal file
40
core/deck.core.html
Normal file
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Deck Skeleton</title>
|
||||
|
||||
<!-- Replace path with correct path to deck.core.css. -->
|
||||
<link rel="stylesheet" href="/PATH/TO/CSS/deck.core.css" type="text/css">
|
||||
|
||||
<!-- Any other extension CSS files go here. -->
|
||||
|
||||
<!-- Replace path with correct path to Modernizr file. -->
|
||||
<script src="/PATH/TO/JS/modernizr.custom.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="deck-container">
|
||||
<!-- Create any number of elements with class slide within the container -->
|
||||
<div class="slide">
|
||||
<!-- Slide content HTML goes here! -->
|
||||
</div>
|
||||
|
||||
<!-- Other extension HTML snippets go here, at the bottom of the deck container. -->
|
||||
</div>
|
||||
|
||||
<!-- Update these paths to point to the correct files. -->
|
||||
<script src="/PATH/TO/JS/jquery.min.js"></script>
|
||||
<script src="/PATH/TO/JS/deck.core.js"></script>
|
||||
|
||||
<!-- Add any other extension JS files here -->
|
||||
|
||||
|
||||
<!-- Initialize the deck. You can put this in an external file if desired. -->
|
||||
<script>
|
||||
$(function() {
|
||||
$.deck('.slide');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -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',
|
||||
|
||||
/*
|
||||
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,9 +149,8 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Only deal with init events and bindings once
|
||||
if (!keysbound) {
|
||||
$d.bind('keydown.deck', function(e) {
|
||||
/* 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();
|
||||
|
@ -88,14 +161,19 @@
|
|||
}
|
||||
});
|
||||
|
||||
$d.trigger(events.keysbound);
|
||||
keysbound = true;
|
||||
}
|
||||
|
||||
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);
|
243
core/deck.core.scss
Executable file
243
core/deck.core.scss
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
1
extensions/goto/deck.goto.css
Normal file
1
extensions/goto/deck.goto.css
Normal file
|
@ -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}}
|
6
extensions/goto/deck.goto.html
Normal file
6
extensions/goto/deck.goto.html
Normal file
|
@ -0,0 +1,6 @@
|
|||
<!-- Place the following snippet at the bottom of the deck container. -->
|
||||
<form action="." method="get" class="goto-form">
|
||||
<label for="goto-slide">Go to slide:</label>
|
||||
<input type="number" name="slidenum" id="goto-slide">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
|
@ -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
|
||||
/*
|
||||
Extends defaults/options.
|
||||
|
||||
$[pd]('extend', 'showGoTo', function() {
|
||||
$[pd]('getContainer').addClass($[pd]('getOptions').classes.goto);
|
||||
$($[pd]('getOptions').selectors.gotoInput).focus();
|
||||
});
|
||||
options.classes.goto
|
||||
This class is added to the deck container when showing the Go To Slide
|
||||
form.
|
||||
|
||||
$[pd]('extend', 'hideGoTo', function() {
|
||||
$[pd]('getContainer').removeClass($[pd]('getOptions').classes.goto);
|
||||
$($[pd]('getOptions').selectors.gotoInput).blur();
|
||||
});
|
||||
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.
|
||||
|
||||
$[pd]('extend', 'toggleGoTo', function() {
|
||||
$[pd]($[pd]('getContainer').hasClass($[pd]('getOptions').classes.goto) ? 'hideGoTo' : 'showGoTo');
|
||||
});
|
||||
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.
|
||||
|
||||
// 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');
|
||||
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
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
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();
|
||||
});
|
||||
|
||||
/*
|
||||
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();
|
||||
});
|
||||
|
||||
/*
|
||||
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('');
|
||||
}
|
||||
|
||||
|
|
48
extensions/goto/deck.goto.scss
Executable file
48
extensions/goto/deck.goto.scss
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
1
extensions/menu/deck.menu.css
Normal file
1
extensions/menu/deck.menu.css
Normal file
|
@ -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}
|
|
@ -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
|
||||
/*
|
||||
Extends defaults/options.
|
||||
|
||||
$[pd]('extend', 'showMenu', function() {
|
||||
$[pd]('getContainer').addClass($[pd]('getOptions').classes.menu);
|
||||
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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
26
extensions/menu/deck.menu.scss
Executable file
26
extensions/menu/deck.menu.scss
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
1
extensions/navigation/deck.navigation.css
Normal file
1
extensions/navigation/deck.navigation.css
Normal file
|
@ -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}}
|
3
extensions/navigation/deck.navigation.html
Normal file
3
extensions/navigation/deck.navigation.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<!-- Place the following snippet at the bottom of the deck container. -->
|
||||
<a href="#" class="deck-prev-link" title="Previous">«</a>
|
||||
<a href="#" class="deck-next-link" title="Next">»</a>
|
|
@ -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);
|
||||
|
|
52
extensions/navigation/deck.navigation.scss
Executable file
52
extensions/navigation/deck.navigation.scss
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
1
extensions/status/deck.status.css
Normal file
1
extensions/status/deck.status.css
Normal file
|
@ -0,0 +1 @@
|
|||
.deck-status{position:absolute;bottom:10px;right:0;color:#888;z-index:3;margin:0}@media print{.deck-status{display:none}}
|
6
extensions/status/deck.status.html
Normal file
6
extensions/status/deck.status.html
Normal file
|
@ -0,0 +1,6 @@
|
|||
<!-- Place the following snippet at the bottom of the deck container. -->
|
||||
<p class="deck-status">
|
||||
<span class="deck-status-current"></span>
|
||||
/
|
||||
<span class="deck-status-total"></span>
|
||||
</p>
|
|
@ -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');
|
||||
|
||||
|
|
14
extensions/status/deck.status.scss
Executable file
14
extensions/status/deck.status.scss
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
219
introduction/index.html
Normal file
219
introduction/index.html
Normal file
|
@ -0,0 +1,219 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
|
||||
<title>Getting Started with Deck JS</title>
|
||||
|
||||
<meta name="description" content="A jQuery library for modern HTML presentations">
|
||||
<meta name="author" content="Caleb Troughton">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Core and extension CSS files -->
|
||||
<link rel="stylesheet" href="../core/deck.core.css">
|
||||
<link rel="stylesheet" href="../extensions/goto/deck.goto.css">
|
||||
<link rel="stylesheet" href="../extensions/menu/deck.menu.css">
|
||||
<link rel="stylesheet" href="../extensions/navigation/deck.navigation.css">
|
||||
<link rel="stylesheet" href="../extensions/status/deck.status.css">
|
||||
|
||||
<!-- Theme CSS files (menu swaps these out) -->
|
||||
<link rel="stylesheet" id="style-theme-link" href="../themes/style/web-2.0.css">
|
||||
<link rel="stylesheet" id="transition-theme-link" href="../themes/transition/horizontal-slide.css">
|
||||
|
||||
<!-- Custom CSS just for this page -->
|
||||
<link rel="stylesheet" href="introduction.css">
|
||||
|
||||
<script src="../modernizr.custom.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="theme-menu">
|
||||
<h2>Themes</h2>
|
||||
|
||||
<label for="style-themes">Style:</label>
|
||||
<select id="style-themes">
|
||||
<option selected value="../themes/style/web-2.0.css">Web 2.0</option>
|
||||
<option value="../themes/style/swiss.css">Swiss</option>
|
||||
<option value="../themes/style/neon.css">Neon</option>
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
|
||||
<label for="transition-themes">Transition:</label>
|
||||
<select id="transition-themes">
|
||||
<option selected value="../themes/transition/horizontal-slide.css">Horizontal Slide</option>
|
||||
<option value="../themes/transition/vertical-slide.css">Vertical Slide</option>
|
||||
<option value="../themes/transition/fade.css">Fade</option>
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="deck-container">
|
||||
<div class="slide">
|
||||
<h1>Getting Started with Deck JS</h1>
|
||||
</div>
|
||||
|
||||
<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 JS extensions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>The Markup</h2>
|
||||
<p>Slides are just HTML elements with a class of <code>slide</code>.</p>
|
||||
<pre><code><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></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Core Files</h2>
|
||||
<h3>Deck JS</h3>
|
||||
<p>Handles all the dirty work of initializing and moving through slides. It also exposes an API for working with and extending Deck JS.</p>
|
||||
<pre><code><script src="path/to/js/deck.core.js"></script></code></pre>
|
||||
<h3>Deck CSS</h3>
|
||||
<p>Contains basic layout of slides and content styles.</p>
|
||||
<pre><code><link rel="stylesheet" href="/path/to/css/deck.core.css"></code></pre>
|
||||
<h3>Modernizr</h3>
|
||||
<p>Feature detection tool used by core and extension CSS files.</p>
|
||||
<pre><code><script src="path/to/js/modernizr.custom.js"></script></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Style Themes</h2>
|
||||
<p>Customizes the colors, typography, and layout of slide content.</p>
|
||||
<pre><code><link rel="stylesheet" href="/path/to/css/style-theme.css"></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Transition Themes</h2>
|
||||
<p>Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But <strong>you</strong> aren’t using <em>those</em> browsers to give your presentations, are you…</p>
|
||||
<pre><code><link rel="stylesheet" href="/path/to/css/transition-theme.css"></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Extensions</h2>
|
||||
<p>Deck Core gives you basic slide functionality with left and right arrow navigation, but you may want more.</p>
|
||||
|
||||
<ul>
|
||||
<li class="slide">
|
||||
<h3>deck.goto</h3>
|
||||
<p>Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit enter.</p>
|
||||
</li>
|
||||
|
||||
<li class="slide">
|
||||
<h3>deck.menu</h3>
|
||||
<p>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.</p>
|
||||
</li>
|
||||
|
||||
<li class="slide">
|
||||
<h3>deck.navigation</h3>
|
||||
<p>Adds clickable left and right buttons for the less keyboard inclined.</p>
|
||||
</li>
|
||||
|
||||
<li class="slide">
|
||||
<h3>deck.status</h3>
|
||||
<p>Adds a page number indicator. (current/total)</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Nested Slides</h2>
|
||||
<p>That last slide had a few steps. To create substeps in slides, just nest them:</p>
|
||||
<pre><code><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></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Other Useful Elements: Images</h2>
|
||||
<img src="http://placekitten.com/600/375" alt="Kitties">
|
||||
<pre><code><img src="http://placekitten.com/600/375" alt="Kitties"></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Other Useful Elements: Blockquotes</h2>
|
||||
<blockquote cite="http://example.org">
|
||||
<p>Food is an important part of a balanced diet.</p>
|
||||
<p><cite>Fran Lebowitz</cite></p>
|
||||
</blockquote>
|
||||
<pre><code><blockquote cite="http://example.org">
|
||||
<p>Food is an important part of a balanced diet.</p>
|
||||
<p><cite>Fran Lebowitz</cite></p>
|
||||
</blockquote></code></pre>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="slide">
|
||||
<h2>Other Useful Elements: Video Embeds</h2>
|
||||
<p>Embed videos using embed codes from your favorite online video service or with an HTML5 video element.</p>
|
||||
|
||||
<iframe src="http://player.vimeo.com/video/1063136?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
|
||||
|
||||
<pre><code><iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe></code></pre>
|
||||
</div>
|
||||
|
||||
<div class="slide">
|
||||
<h2>Digging Deeper</h2>
|
||||
<p>If you want to learn about making your own themes, creating your own completely custom CSS, extending Deck JS, and more, check out the <a href="../docs/">Deck JS Docs</a>.</p>
|
||||
</div>
|
||||
|
||||
<a href="#" class="deck-prev-link" title="Previous">«</a>
|
||||
<a href="#" class="deck-next-link" title="Next">»</a>
|
||||
|
||||
<p class="deck-status">
|
||||
<span class="deck-status-current"></span>
|
||||
/
|
||||
<span class="deck-status-total"></span>
|
||||
</p>
|
||||
|
||||
<form action="." method="get" class="goto-form">
|
||||
<label for="goto-slide">Go to slide:</label>
|
||||
<input type="number" name="slidenum" id="goto-slide">
|
||||
<input type="submit" value="Go">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js">\x3C/script>')</script>
|
||||
|
||||
<!-- Deck Core and extensions -->
|
||||
<script src="../core/deck.core.js"></script>
|
||||
<script src="../extensions/menu/deck.menu.js"></script>
|
||||
<script src="../extensions/goto/deck.goto.js"></script>
|
||||
<script src="../extensions/status/deck.status.js"></script>
|
||||
<script src="../extensions/navigation/deck.navigation.js"></script>
|
||||
|
||||
<!-- Specific to this page -->
|
||||
<script src="introduction.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
1
introduction/introduction.css
Normal file
1
introduction/introduction.css
Normal file
|
@ -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}}
|
13
introduction/introduction.js
Normal file
13
introduction/introduction.js
Normal file
|
@ -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());
|
||||
});
|
||||
});
|
||||
|
52
introduction/introduction.scss
Executable file
52
introduction/introduction.scss
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
4
modernizr.custom.js
Normal file
4
modernizr.custom.js
Normal file
File diff suppressed because one or more lines are too long
|
@ -1,4 +1,4 @@
|
|||
describe('Deck JS Status Indicator', function() {
|
||||
describe('Deck JS Navigation Buttons', function() {
|
||||
beforeEach(function() {
|
||||
loadFixtures('standard.html');
|
||||
$.deck('.slide');
|
||||
|
@ -6,13 +6,17 @@ describe('Deck JS Status Indicator', function() {
|
|||
|
||||
it('should go to the next slide if next link is clicked', function() {
|
||||
$(defaults.selectors.nextLink).click();
|
||||
setTimeout(function() {
|
||||
expect($.deck('getSlide')).toHaveClass('slide2');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('should go to the previous slide if previous link is clicked', function() {
|
||||
$.deck('go', 2);
|
||||
$(defaults.selectors.previousLink).click();
|
||||
setTimeout(function() {
|
||||
expect($.deck('getSlide')).toHaveClass('slide2');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
it('should add the disabled class to the previous link if on first slide', function() {
|
||||
|
|
1
themes/style/neon.css
Normal file
1
themes/style/neon.css
Normal file
|
@ -0,0 +1 @@
|
|||
body{background:#000}.deck-container{font-family:"Gill Sans", "Gill Sans MT", Calibri, sans-serif;font-size:1.25em;background:#000;color:#aaa}.deck-container .slide{background:#000}.deck-container h1{color:#0af;font-weight:normal;font-weight:100;text-shadow:0 0 50px #0af, 0 0 3px #fff}.deck-container h2{color:#af0;border-bottom-color:#ccc;font-weight:normal;font-weight:100;text-shadow:0 0 15px #af0, 0 0 2px #fff;border-bottom:1px solid #333}.deck-container h3{color:#fff;font-weight:normal;font-weight:100;text-shadow:0 0 10px #fff, 0 0 2px #fff}.deck-container pre{border-color:#333}.deck-container pre code{color:#fff}.deck-container code{color:#f0a}.deck-container blockquote{font-size:2em;padding:15px 30px;color:#fff;border-left:5px solid #fff}.deck-container blockquote p{margin:0}.deck-container blockquote cite{font-size:.5em;font-style:normal;font-weight:normal;font-weight:100;color:#aaa;text-shadow:0 0 15px #fff, 0 0 2px #fff}.deck-container ::-moz-selection{background:#a0f}.deck-container ::selection{background:#a0f}.deck-container a,.deck-container a:active,.deck-container a:visited{color:#f0a;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:#f0a;text-shadow:0 0 3px #fff;line-height:26px}.csstransitions .deck-container .deck-prev-link,.csstransitions .deck-container .deck-next-link{-webkit-transition:text-indent 100ms ease-in-out;-moz-transition:text-indent 100ms ease-in-out;-ms-transition:text-indent 100ms ease-in-out;-o-transition:text-indent 100ms ease-in-out;transition:text-indent 100ms ease-in-out}.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:#fff}.deck-container .deck-prev-link:hover,.deck-container .deck-prev-link:focus,.deck-container .deck-next-link:hover,.deck-container .deck-next-link:focus{text-decoration:none}.boxshadow .deck-container .deck-prev-link:hover,.boxshadow .deck-container .deck-prev-link:focus,.boxshadow .deck-container .deck-next-link:hover,.boxshadow .deck-container .deck-next-link:focus{-webkit-box-shadow:0 0 20px #f0a, 0 0 5px #fff;-moz-box-shadow:0 0 20px #f0a, 0 0 5px #fff;box-shadow:0 0 20px #f0a, 0 0 5px #fff}.deck-container .deck-status{font-size:0.6666em}.deck-container.deck-menu .deck-current{background:#444}.boxshadow .deck-container.deck-menu .deck-current{background:#000;-webkit-box-shadow:0 0 20px #f0a, 0 0 5px #fff;-moz-box-shadow:0 0 20px #f0a, 0 0 5px #fff;box-shadow:0 0 20px #f0a, 0 0 5px #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
|
131
themes/style/neon.scss
Normal file
131
themes/style/neon.scss
Normal file
|
@ -0,0 +1,131 @@
|
|||
body {
|
||||
background:#000;
|
||||
}
|
||||
|
||||
.deck-container {
|
||||
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
|
||||
font-size:1.25em;
|
||||
background:#000;
|
||||
color:#aaa;
|
||||
|
||||
.slide {
|
||||
background:#000;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:#0af;
|
||||
font-weight:normal;
|
||||
font-weight:100;
|
||||
text-shadow:0 0 50px #0af, 0 0 3px #fff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color:#af0;
|
||||
border-bottom-color:#ccc;
|
||||
font-weight:normal;
|
||||
font-weight:100;
|
||||
text-shadow:0 0 15px #af0, 0 0 2px #fff;
|
||||
border-bottom:1px solid #333;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color:#fff;
|
||||
font-weight:normal;
|
||||
font-weight:100;
|
||||
text-shadow:0 0 10px #fff, 0 0 2px #fff;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-color:#333;
|
||||
|
||||
code {
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color:#f0a;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size:2em;
|
||||
padding:15px 30px;
|
||||
color:#fff;
|
||||
border-left:5px solid #fff;
|
||||
|
||||
p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-size:.5em;
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
font-weight:100;
|
||||
color:#aaa;
|
||||
text-shadow:0 0 15px #fff, 0 0 2px #fff;
|
||||
}
|
||||
}
|
||||
|
||||
::-moz-selection{ background:#a0f; }
|
||||
::selection { background:#a0f; }
|
||||
|
||||
a {
|
||||
&, &:active, &:visited {
|
||||
color:#f0a;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.deck-prev-link, .deck-next-link {
|
||||
background:#f0a;
|
||||
text-shadow:0 0 3px #fff;
|
||||
line-height:26px;
|
||||
|
||||
.csstransitions & {
|
||||
-webkit-transition:text-indent 100ms ease-in-out;
|
||||
-moz-transition:text-indent 100ms ease-in-out;
|
||||
-ms-transition:text-indent 100ms ease-in-out;
|
||||
-o-transition:text-indent 100ms ease-in-out;
|
||||
transition:text-indent 100ms ease-in-out;
|
||||
}
|
||||
|
||||
&, &:active, &:visited {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration:none;
|
||||
|
||||
.boxshadow & {
|
||||
-webkit-box-shadow:0 0 20px #f0a, 0 0 5px #fff;
|
||||
-moz-box-shadow:0 0 20px #f0a, 0 0 5px #fff;
|
||||
box-shadow:0 0 20px #f0a, 0 0 5px #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.deck-status {
|
||||
font-size:0.6666em;
|
||||
}
|
||||
|
||||
&.deck-menu {
|
||||
.deck-current {
|
||||
background:#444;
|
||||
|
||||
.boxshadow & {
|
||||
background:#000;
|
||||
-webkit-box-shadow:0 0 20px #f0a, 0 0 5px #fff;
|
||||
-moz-box-shadow:0 0 20px #f0a, 0 0 5px #fff;
|
||||
box-shadow:0 0 20px #f0a, 0 0 5px #fff;
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
1
themes/style/swiss.css
Normal file
1
themes/style/swiss.css
Normal file
|
@ -0,0 +1 @@
|
|||
.deck-container{font-family:"Helvetica Neue", sans-serif;font-size:1.25em;background:#fff}.deck-container .slide{background:#fff}.deck-container h1{color:#000}.deck-container h2{color:#c00;border-bottom-color:#ccc}.deck-container h3{color:#888}.deck-container pre{border-color:#ccc}.deck-container code{color:#888}.deck-container blockquote{font-size:2em;font-style:italic;padding:15px 30px;color:#000;border-left:5px solid #ccc}.deck-container blockquote p{margin:0}.deck-container blockquote cite{font-size:.5em;font-style:normal;font-weight:bold;color:#888}.deck-container ::-moz-selection{background:#c00}.deck-container ::selection{background:#c00}.deck-container a,.deck-container a:active,.deck-container a:visited{color:#c00;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:#ccc;line-height:28px}.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:#fff}.deck-container .deck-prev-link:hover,.deck-container .deck-prev-link:focus,.deck-container .deck-next-link:hover,.deck-container .deck-next-link:focus{background:#c00;text-decoration:none}.deck-container .deck-status{font-size:0.6666em}
|
81
themes/style/swiss.scss
Normal file
81
themes/style/swiss.scss
Normal file
|
@ -0,0 +1,81 @@
|
|||
.deck-container {
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
font-size:1.25em;
|
||||
background:#fff;
|
||||
|
||||
.slide {
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color:#000;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color:#c00;
|
||||
border-bottom-color:#ccc;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color:#888;
|
||||
}
|
||||
|
||||
pre {
|
||||
border-color:#ccc;
|
||||
}
|
||||
|
||||
code {
|
||||
color:#888;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size:2em;
|
||||
font-style:italic;
|
||||
padding:15px 30px;
|
||||
color:#000;
|
||||
border-left:5px solid #ccc;
|
||||
|
||||
p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-size:.5em;
|
||||
font-style:normal;
|
||||
font-weight:bold;
|
||||
color:#888;
|
||||
}
|
||||
}
|
||||
|
||||
::-moz-selection{ background:#c00; }
|
||||
::selection { background:#c00; }
|
||||
|
||||
a {
|
||||
&, &:active, &:visited {
|
||||
color:#c00;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration:underline;
|
||||
}
|
||||
}
|
||||
|
||||
.deck-prev-link, .deck-next-link {
|
||||
background:#ccc;
|
||||
line-height:28px;
|
||||
|
||||
&, &:active, &:visited {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background:#c00;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
|
||||
.deck-status {
|
||||
font-size:0.6666em;
|
||||
}
|
||||
}
|
1
themes/style/web-2.0.css
Normal file
1
themes/style/web-2.0.css
Normal file
File diff suppressed because one or more lines are too long
223
themes/style/web-2.0.scss
Normal file
223
themes/style/web-2.0.scss
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
1
themes/transition/fade.css
Normal file
1
themes/transition/fade.css
Normal file
|
@ -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}
|
67
themes/transition/fade.scss
Normal file
67
themes/transition/fade.scss
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
1
themes/transition/horizontal-slide.css
Normal file
1
themes/transition/horizontal-slide.css
Normal file
|
@ -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}
|
86
themes/transition/horizontal-slide.scss
Normal file
86
themes/transition/horizontal-slide.scss
Normal file
|
@ -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;
|
||||
}
|
1
themes/transition/vertical-slide.css
Normal file
1
themes/transition/vertical-slide.css
Normal file
|
@ -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}
|
105
themes/transition/vertical-slide.scss
Normal file
105
themes/transition/vertical-slide.scss
Normal file
|
@ -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;
|
||||
}
|
Loading…
Reference in a new issue