diff --git a/LICENSE b/LICENSE new file mode 100755 index 0000000..23a2d5a --- /dev/null +++ b/LICENSE @@ -0,0 +1,19 @@ +Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..9f4450c --- /dev/null +++ b/README.md @@ -0,0 +1,46 @@ +Photoshop for Web Design +====================== + +Materials for Photoshop for Web Design, developed by [Zoe Rooney](http://zoerooney.com) for Girl Develop It - Philadelphia. Template forked from [Intro to Web Concepts](https://github.com/girldevelopit/gdi-intro-web-concepts). + +The course is meant to be taught in a single 2.5 hour workshop. + +## Suggested course description is below: + +Photoshop is one of the most popular tools out there for web design. In this course, you'll learn how designers and front-end developers use Photoshop as part of their workflow. If you've ever wondered if you're making the most use of Photoshop when you're designing, or if you're creating files that are optimal for making the transition to development, this course is for you. + +In this workshop, we'll cover: + +* Setting up and saving your Photoshop workspace for web work (including units, tools & shortcuts) +* Tips and tricks for setting up your files for pixel-perfection +* Organizing your files and working with layers +* Working with graphics in a way that optimizes "code-ability" +* Slicing and saving for the web + +You'll walk away a Photoshop-for-web-design power-user, with lots of tricks, efficiencies, and shortcuts at your fingertips for your next site project. + +This course is open to all proficiency levels - we may reference some basic HTML and CSS concepts but we won't be writing any code. No prior experience with Photoshop is necessary, although this class will still benefit users who are experienced working with Photoshop but not as familiar with using it to design for the web. + +*Required Software:* Photoshop + +With a free Creative Cloud membership, you can download a 30-day trial version of Photoshop - https://creative.adobe.com/plans - just make sure you've downloaded (and preferably opened) Photoshop prior to the class so you're certain it's fully installed and working on your computer! + +## Theme customization + +You can change theme colors by changing the theme css to any of the following options: +```html + + + + +``` +You can change the text editor theme by changing the highlight.js css to the following options: +```html + + +``` +You can change transition by changing the reveal transition property in Reveal.initialize +```javascript + Reveal.initialize({ + transition: 'default', // default/cube/page/concave/zoom/linear/none + }); \ No newline at end of file diff --git a/css/images/pink-logo.png b/css/images/pink-logo.png new file mode 100755 index 0000000..40e0ec1 Binary files /dev/null and b/css/images/pink-logo.png differ diff --git a/css/images/white-logo.png b/css/images/white-logo.png new file mode 100755 index 0000000..559c510 Binary files /dev/null and b/css/images/white-logo.png differ diff --git a/css/print/paper.css b/css/print/paper.css new file mode 100755 index 0000000..61fa0a9 --- /dev/null +++ b/css/print/paper.css @@ -0,0 +1,173 @@ +/* Default Print Stylesheet Template + by Rob Glazebrook of CSSnewbie.com + Last Updated: June 4, 2008 + + Feel free (nay, compelled) to edit, append, and + manipulate this file as you see fit. */ + + +/* SECTION 1: Set default width, margin, float, and + background. This prevents elements from extending + beyond the edge of the printed page, and prevents + unnecessary background images from printing */ +body { + background: #fff; + font-size: 13pt; + width: auto; + height: auto; + border: 0; + margin: 0 5%; + padding: 0; + float: none !important; + overflow: visible; +} +html { + background: #fff; + width: auto; + height: auto; + overflow: visible; +} + +/* SECTION 2: Remove any elements not needed in print. + This would include navigation, ads, sidebars, etc. */ +.nestedarrow, +.controls, +.reveal .progress, +.reveal.overview, +.fork-reveal, +.share-reveal, +.state-background { + display: none !important; +} + +/* SECTION 3: Set body font face, size, and color. + Consider using a serif font for readability. */ +body, p, td, li, div, a { + font-size: 16pt!important; + font-family: Georgia, "Times New Roman", Times, serif !important; + color: #000; +} + +/* SECTION 4: Set heading font face, sizes, and color. + Diffrentiate your headings from your body text. + Perhaps use a large sans-serif for distinction. */ +h1,h2,h3,h4,h5,h6 { + color: #000!important; + height: auto; + line-height: normal; + font-family: Georgia, "Times New Roman", Times, serif !important; + text-shadow: 0 0 0 #000 !important; + text-align: left; + letter-spacing: normal; +} +/* Need to reduce the size of the fonts for printing */ +h1 { font-size: 26pt !important; } +h2 { font-size: 22pt !important; } +h3 { font-size: 20pt !important; } +h4 { font-size: 20pt !important; font-variant: small-caps; } +h5 { font-size: 19pt !important; } +h6 { font-size: 18pt !important; font-style: italic; } + +/* SECTION 5: Make hyperlinks more usable. + Ensure links are underlined, and consider appending + the URL to the end of the link for usability. */ +a:link, +a:visited { + color: #000 !important; + font-weight: bold; + text-decoration: underline; +} +/* +.reveal a:link:after, +.reveal a:visited:after { + content: " (" attr(href) ") "; + color: #222 !important; + font-size: 90%; +} +*/ + + +/* SECTION 6: more reveal.js specific additions by @skypanther */ +ul, ol, div, p { + visibility: visible; + position: static; + width: auto; + height: auto; + display: block; + overflow: visible; + margin: auto; + text-align: left !important; +} +.reveal .slides { + position: static; + width: auto; + height: auto; + + left: auto; + top: auto; + margin-left: auto; + margin-top: auto; + padding: auto; + + overflow: visible; + display: block; + + text-align: center; + -webkit-perspective: none; + -moz-perspective: none; + -ms-perspective: none; + perspective: none; + + -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ + -moz-perspective-origin: 50% 50%; + -ms-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; +} +.reveal .slides>section, +.reveal .slides>section>section { + + visibility: visible !important; + position: static !important; + width: 90% !important; + height: auto !important; + display: block !important; + overflow: visible !important; + + left: 0% !important; + top: 0% !important; + margin-left: 0px !important; + margin-top: 0px !important; + padding: 20px 0px !important; + + opacity: 1 !important; + + -webkit-transform-style: flat !important; + -moz-transform-style: flat !important; + -ms-transform-style: flat !important; + transform-style: flat !important; + + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.reveal section { + page-break-after: always !important; + display: block !important; +} +.reveal section.stack { + page-break-after: avoid !important; +} +.reveal section .fragment { + opacity: 1 !important; +} +.reveal section:last-of-type { + page-break-after: avoid !important; +} +.reveal section img { + display: block; + margin: 15px 0px; + background: rgba(255,255,255,1); + border: 1px solid #666; + box-shadow: none; +} \ No newline at end of file diff --git a/css/print/pdf.css b/css/print/pdf.css new file mode 100755 index 0000000..7c1a496 --- /dev/null +++ b/css/print/pdf.css @@ -0,0 +1,159 @@ +/* Default Print Stylesheet Template + by Rob Glazebrook of CSSnewbie.com + Last Updated: June 4, 2008 + + Feel free (nay, compelled) to edit, append, and + manipulate this file as you see fit. */ + + +/* SECTION 1: Set default width, margin, float, and + background. This prevents elements from extending + beyond the edge of the printed page, and prevents + unnecessary background images from printing */ +* { + -webkit-print-color-adjust: exact; +} + +body { + font-size: 18pt; + width: auto; + height: auto; + border: 0; + margin: 0 5%; + padding: 0; + float: none !important; + overflow: visible; + background-image: none; +} + +html { + width: auto; + height: auto; + overflow: visible; +} + +/* SECTION 2: Remove any elements not needed in print. + This would include navigation, ads, sidebars, etc. */ +.nestedarrow, +.controls, +.reveal .progress, +.reveal.overview, +.fork-reveal, +.share-reveal, +.state-background { + display: none !important; +} + +/* SECTION 3: Set body font face, size, and color. + Consider using a serif font for readability. */ +body, p, td, li, div { + font-size: 18pt; +} + +/* SECTION 4: Set heading font face, sizes, and color. + Diffrentiate your headings from your body text. + Perhaps use a large sans-serif for distinction. */ +h1,h2,h3,h4,h5,h6 { + text-shadow: 0 0 0 #000 !important; +} + +/* SECTION 5: Make hyperlinks more usable. + Ensure links are underlined, and consider appending + the URL to the end of the link for usability. */ +a:link, +a:visited { + font-weight: bold; + text-decoration: underline; +} + + +/* SECTION 6: more reveal.js specific additions by @skypanther */ +ul, ol, div, p { + visibility: visible; + position: static; + width: auto; + height: auto; + display: block; + overflow: visible; + margin: auto; +} +.reveal .slides { + position: static; + width: 100%; + height: auto; + + left: auto; + top: auto; + margin-left: auto; + margin-top: auto; + padding: auto; + + overflow: visible; + display: block; + + text-align: center; + -webkit-perspective: none; + -moz-perspective: none; + -ms-perspective: none; + perspective: none; + + -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */ + -moz-perspective-origin: 50% 50%; + -ms-perspective-origin: 50% 50%; + perspective-origin: 50% 50%; +} +.reveal .slides>section, .reveal .slides>section>section { + + visibility: visible !important; + position: static !important; + width: 100% !important; + height: auto !important; + min-height: initial !important; + display: block !important; + overflow: visible !important; + + left: 0% !important; + top: 0% !important; + margin-left: 0px !important; + margin-top: 50px !important; + padding: 20px 0px !important; + + opacity: 1 !important; + + -webkit-transform-style: flat !important; + -moz-transform-style: flat !important; + -ms-transform-style: flat !important; + transform-style: flat !important; + + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; +} +.reveal section { + page-break-after: always !important; + display: block !important; +} +.reveal section.stack { + margin: 0px !important; + padding: 0px !important; + page-break-after: avoid !important; +} +.reveal section .fragment { + opacity: 1 !important; +} +.reveal img { + box-shadow: none; +} +.reveal .roll { + overflow: visible; + line-height: 1em; +} + +.reveal small a { + font-size: 16pt !important; +} + +pre { + font-size: 9pt !important; +} diff --git a/css/reveal.css b/css/reveal.css new file mode 100755 index 0000000..b2e033b --- /dev/null +++ b/css/reveal.css @@ -0,0 +1,1137 @@ +@charset "UTF-8"; + +/*! + * reveal.js + * http://lab.hakim.se/reveal-js + * MIT licensed + * + * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se + */ + + +/********************************************* + * RESET STYLES + *********************************************/ + +html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe, +.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre, +.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code, +.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp, +.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var, +.reveal b, .reveal u, .reveal i, .reveal center, +.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li, +.reveal fieldset, .reveal form, .reveal label, .reveal legend, +.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td, +.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed, +.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup, +.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary, +.reveal time, .reveal mark, .reveal audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure, +.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section { + display: block; +} + + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +html, +body { + width: 100%; + height: 100%; + min-height: 600px; + overflow: hidden; +} + +body { + position: relative; + line-height: 1; +} + +::selection { + background:#FF5E99; + color:#fff; + text-shadow: none; +} + +@media screen and (max-width: 900px) { + .reveal { + font-size: 30px; + } +} +.reveal footer{ + position: fixed; + height: 40px; + width: 100%; + bottom: 3px; + left: 0; + z-index: 10; + font-size: 35%; + text-align:right; + background-image: url(../css/images/pink-logo.png); + background-repeat: no-repeat; + background-size: auto 100%; + font-family:; +} +.reveal footer .copyright{ + margin:15px 5px 0 100px; + font-style: italic; +} +.reveal footer .copyright a img{ + vertical-align: middle; +} +/********************************************* +* OVERRIDES +**********************************************/ +.left-align{text-align:left} +.right-align{ text-align:right} +.left{float:left} +.right{float:right} +.clear{clear:both} +.blue{color:#01A9B4 } +.green{color:#92BB44} +.yellow{color:#EDAB23} +.pink{color:#F05B62} +.red{color:#8B0036} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1 { font-size: 3.77em; } +.reveal h2 { font-size: 2.11em; } +.reveal h3 { font-size: 1.55em; } +.reveal h4 { font-size: 1em; } + + +/********************************************* + * VIEW FRAGMENTS + *********************************************/ + +.reveal .slides section .fragment { + opacity: 0; + + -webkit-transition: all .2s ease; + -moz-transition: all .2s ease; + -ms-transition: all .2s ease; + -o-transition: all .2s ease; + transition: all .2s ease; +} + .reveal .slides section .fragment.visible { + opacity: 1; + } + +.reveal .slides section .fragment.grow { + opacity: 1; +} + .reveal .slides section .fragment.grow.visible { + -webkit-transform: scale( 1.3 ); + -moz-transform: scale( 1.3 ); + -ms-transform: scale( 1.3 ); + -o-transform: scale( 1.3 ); + transform: scale( 1.3 ); + } + +.reveal .slides section .fragment.shrink { + opacity: 1; +} + .reveal .slides section .fragment.shrink.visible { + -webkit-transform: scale( 0.7 ); + -moz-transform: scale( 0.7 ); + -ms-transform: scale( 0.7 ); + -o-transform: scale( 0.7 ); + transform: scale( 0.7 ); + } + +.reveal .slides section .fragment.roll-in { + opacity: 0; + + -webkit-transform: rotateX( 90deg ); + -moz-transform: rotateX( 90deg ); + -ms-transform: rotateX( 90deg ); + -o-transform: rotateX( 90deg ); + transform: rotateX( 90deg ); +} + .reveal .slides section .fragment.roll-in.visible { + opacity: 1; + + -webkit-transform: rotateX( 0 ); + -moz-transform: rotateX( 0 ); + -ms-transform: rotateX( 0 ); + -o-transform: rotateX( 0 ); + transform: rotateX( 0 ); + } + +.reveal .slides section .fragment.fade-out { + opacity: 1; +} + .reveal .slides section .fragment.fade-out.visible { + opacity: 0; + } + +.reveal .slides section .fragment.highlight-red, +.reveal .slides section .fragment.highlight-green, +.reveal .slides section .fragment.highlight-blue { + opacity: 1; +} + .reveal .slides section .fragment.highlight-red.visible { + color: #ff2c2d + } + .reveal .slides section .fragment.highlight-green.visible { + color: #17ff2e; + } + .reveal .slides section .fragment.highlight-blue.visible { + color: #1b91ff; + } + + +/********************************************* + * DEFAULT ELEMENT STYLES + *********************************************/ + +.reveal .slides section { + line-height: 1.2em; + font-weight: normal; +} + +.reveal img { + /* preserve aspect ratio and scale image so it's bound within the section */ + max-width: 100%; + max-height: 100%; +} + +.reveal strong, +.reveal b { + font-weight: bold; +} + +.reveal em, +.reveal i { + font-style: italic; +} + +.reveal ol, +.reveal ul { + display: inline-block; + + text-align: left; + margin: 0 0 0 1em; +} + +.reveal ol { + list-style-type: decimal; +} + +.reveal ul { + list-style-type: disc; +} + +.reveal ul ul { + list-style-type: square; +} + +.reveal ul ul ul { + list-style-type: circle; +} + +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { + display: block; + margin-left: 40px; +} + +.reveal p { + margin-bottom: 10px; + line-height: 1.2em; +} + +.reveal q, +.reveal blockquote { + quotes: none; +} + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 5px auto; + padding: 5px; + + font-style: italic; + background: rgba(255, 255, 255, 0.05); + box-shadow: 0px 0px 2px rgba(0,0,0,0.2); +} + .reveal blockquote:before { + content: '\201C'; + } + .reveal blockquote:after { + content: '\201D'; + } + +.reveal q { + font-style: italic; +} + .reveal q:before { + content: '\201C'; + } + .reveal q:after { + content: '\201D'; + } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 15px auto; + + text-align: left; + font-size: 0.55em; + font-family: monospace; + line-height: 1.2em; + + word-wrap: break-word; +} +.reveal pre code { + box-shadow: 0px 0px 6px rgba(0,0,0,0.3); + padding: 5px; +} + +.reveal code { + font-family: monospace; + overflow: auto; + max-height: 400px; +} + +.reveal table th, +.reveal table td { + text-align: left; + padding-right: .3em; +} + +.reveal table th { + text-shadow: rgb(255,255,255) 1px 1px 2px; +} + +.reveal sup { + vertical-align: super; +} +.reveal sub { + vertical-align: sub; +} + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; +} + +.reveal small * { + vertical-align: top; +} + + +/********************************************* + * CONTROLS + *********************************************/ + +.reveal .controls { + display: none; + position: fixed; + width: 110px; + height: 110px; + z-index: 30; + right: 10px; + bottom: 10px; +} + +.reveal .controls div { + position: absolute; + opacity: 0.1; + width: 0; + height: 0; + border: 12px solid transparent; + + -webkit-transition: opacity 0.2s ease; + -moz-transition: opacity 0.2s ease; + -ms-transition: opacity 0.2s ease; + -o-transition: opacity 0.2s ease; + transition: opacity 0.2s ease; +} + +.reveal .controls div.enabled { + opacity: 0.6; + cursor: pointer; +} + +.reveal .controls div.enabled:active { + margin-top: 1px; +} + +.reveal .controls div.left { + top: 42px; + + border-right-width: 22px; + border-right-color: #eee; +} + +.reveal .controls div.right { + left: 74px; + top: 42px; + + border-left-width: 22px; + border-left-color: #eee; +} + +.reveal .controls div.up { + left: 42px; + + border-bottom-width: 22px; + border-bottom-color: #eee; +} + +.reveal .controls div.down { + left: 42px; + top: 74px; + + border-top-width: 22px; + border-top-color: #eee; +} + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + position: fixed; + display: none; + height: 3px; + width: 100%; + bottom: 0; + left: 0; + z-index: 10; +} + .reveal .progress:after { + content: ''; + display: 'block'; + position: absolute; + height: 20px; + width: 100%; + top: -20px; + } + .reveal .progress span { + display: block; + height: 100%; + width: 0px; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } + + +/********************************************* + * SLIDES + *********************************************/ + +.reveal .slides { + position: absolute; + max-width: 900px; + width: 80%; + height: 60%; + left: 50%; + top: 50%; + margin-top: -320px; + padding: 20px 0px; + overflow: visible; + z-index: 1; + + text-align: center; + + -webkit-transition: -webkit-perspective .4s ease; + -moz-transition: -moz-perspective .4s ease; + -ms-transition: -ms-perspective .4s ease; + -o-transition: -o-perspective .4s ease; + transition: perspective .4s ease; + + -webkit-perspective: 600px; + -moz-perspective: 600px; + -ms-perspective: 600px; + perspective: 600px; + + -webkit-perspective-origin: 0% 25%; + -moz-perspective-origin: 0% 25%; + -ms-perspective-origin: 0% 25%; + perspective-origin: 0% 25%; +} + +.reveal .slides>section, +.reveal .slides>section>section { + display: none; + position: absolute; + width: 100%; + min-height: 600px; + + z-index: 10; + + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; + + -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.reveal .slides>section.present { + display: block; + z-index: 11; + opacity: 1; +} + +.reveal .slides>section { + margin-left: -50%; +} + + +/********************************************* + * DEFAULT TRANSITION + *********************************************/ + +.reveal .slides>section.past { + display: block; + opacity: 0; + + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); +} +.reveal .slides>section.future { + display: block; + opacity: 0; + + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); +} + +.reveal .slides>section>section.past { + display: block; + opacity: 0; + + -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); + -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); + -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); +} +.reveal .slides>section>section.future { + display: block; + opacity: 0; + + -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); + -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); + -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); + transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0); +} + + +/********************************************* + * CONCAVE TRANSITION + *********************************************/ + +.reveal.concave .slides>section.past { + -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); +} +.reveal.concave .slides>section.future { + -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); +} + +.reveal.concave .slides>section>section.past { + -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); + -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); + -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); + transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); +} +.reveal.concave .slides>section>section.future { + -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); + -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); + -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); + transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); +} + + +/********************************************* + * ZOOM TRANSITION + *********************************************/ + +.reveal.zoom .slides>section, +.reveal.zoom .slides>section>section { + -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); +} + +.reveal.zoom .slides>section.past { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(16); + -moz-transform: scale(16); + -ms-transform: scale(16); + -o-transform: scale(16); + transform: scale(16); +} +.reveal.zoom .slides>section.future { + opacity: 0; + visibility: hidden; + + -webkit-transform: scale(0.2); + -moz-transform: scale(0.2); + -ms-transform: scale(0.2); + -o-transform: scale(0.2); + transform: scale(0.2); +} + +.reveal.zoom .slides>section>section.past { + -webkit-transform: translate(0, -150%); + -moz-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + -o-transform: translate(0, -150%); + transform: translate(0, -150%); +} +.reveal.zoom .slides>section>section.future { + -webkit-transform: translate(0, 150%); + -moz-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + -o-transform: translate(0, 150%); + transform: translate(0, 150%); +} + + +/********************************************* + * LINEAR TRANSITION + *********************************************/ + +.reveal.linear .slides>section.past { + -webkit-transform: translate(-150%, 0); + -moz-transform: translate(-150%, 0); + -ms-transform: translate(-150%, 0); + -o-transform: translate(-150%, 0); + transform: translate(-150%, 0); +} +.reveal.linear .slides>section.future { + -webkit-transform: translate(150%, 0); + -moz-transform: translate(150%, 0); + -ms-transform: translate(150%, 0); + -o-transform: translate(150%, 0); + transform: translate(150%, 0); +} + +.reveal.linear .slides>section>section.past { + -webkit-transform: translate(0, -150%); + -moz-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + -o-transform: translate(0, -150%); + transform: translate(0, -150%); +} +.reveal.linear .slides>section>section.future { + -webkit-transform: translate(0, 150%); + -moz-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + -o-transform: translate(0, 150%); + transform: translate(0, 150%); +} + + +/********************************************* + * CUBE TRANSITION + *********************************************/ + +.reveal.cube .slides { + -webkit-perspective-origin: 0% 25%; + -moz-perspective-origin: 0% 25%; + -ms-perspective-origin: 0% 25%; + perspective-origin: 0% 25%; + + -webkit-perspective: 1300px; + -moz-perspective: 1300px; + -ms-perspective: 1300px; + perspective: 1300px; +} + +.reveal.cube .slides section { + padding: 30px; + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + .reveal.cube .slides section:not(.stack):before { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: rgba(0,0,0,0.1); + border-radius: 4px; + + -webkit-transform: translateZ( -20px ); + -moz-transform: translateZ( -20px ); + -ms-transform: translateZ( -20px ); + -o-transform: translateZ( -20px ); + transform: translateZ( -20px ); + } + .reveal.cube .slides section:not(.stack):after { + content: ''; + position: absolute; + display: block; + width: 90%; + height: 30px; + left: 5%; + bottom: 0; + background: none; + z-index: 1; + + border-radius: 4px; + box-shadow: 0px 95px 25px rgba(0,0,0,0.2); + + -webkit-transform: translateZ(-90px) rotateX( 65deg ); + -moz-transform: translateZ(-90px) rotateX( 65deg ); + -ms-transform: translateZ(-90px) rotateX( 65deg ); + -o-transform: translateZ(-90px) rotateX( 65deg ); + transform: translateZ(-90px) rotateX( 65deg ); + } + +.reveal.cube .slides>section.stack { + padding: 0; + background: none; +} + +.reveal.cube .slides>section.past { + -webkit-transform-origin: 100% 0%; + -moz-transform-origin: 100% 0%; + -ms-transform-origin: 100% 0%; + transform-origin: 100% 0%; + + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg); + -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg); + -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg); + transform: translate3d(-100%, 0, 0) rotateY(-90deg); +} + +.reveal.cube .slides>section.future { + -webkit-transform-origin: 0% 0%; + -moz-transform-origin: 0% 0%; + -ms-transform-origin: 0% 0%; + transform-origin: 0% 0%; + + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg); + -moz-transform: translate3d(100%, 0, 0) rotateY(90deg); + -ms-transform: translate3d(100%, 0, 0) rotateY(90deg); + transform: translate3d(100%, 0, 0) rotateY(90deg); +} + +.reveal.cube .slides>section>section.past { + -webkit-transform-origin: 0% 100%; + -moz-transform-origin: 0% 100%; + -ms-transform-origin: 0% 100%; + transform-origin: 0% 100%; + + -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg); + -moz-transform: translate3d(0, -100%, 0) rotateX(90deg); + -ms-transform: translate3d(0, -100%, 0) rotateX(90deg); + transform: translate3d(0, -100%, 0) rotateX(90deg); +} + +.reveal.cube .slides>section>section.future { + -webkit-transform-origin: 0% 0%; + -moz-transform-origin: 0% 0%; + -ms-transform-origin: 0% 0%; + transform-origin: 0% 0%; + + -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg); + -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg); + -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg); + transform: translate3d(0, 100%, 0) rotateX(-90deg); +} + + +/********************************************* + * PAGE TRANSITION + *********************************************/ + +.reveal.page .slides { + -webkit-perspective-origin: 0% 50%; + -moz-perspective-origin: 0% 50%; + -ms-perspective-origin: 0% 50%; + perspective-origin: 0% 50%; + + -webkit-perspective: 3000px; + -moz-perspective: 3000px; + -ms-perspective: 3000px; + perspective: 3000px; +} + +.reveal.page .slides section { + padding: 30px; + + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + .reveal.page .slides section.past { + z-index: 12; + } + .reveal.page .slides section:not(.stack):before { + content: ''; + position: absolute; + display: block; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: rgba(0,0,0,0.1); + + -webkit-transform: translateZ( -20px ); + -moz-transform: translateZ( -20px ); + -ms-transform: translateZ( -20px ); + -o-transform: translateZ( -20px ); + transform: translateZ( -20px ); + } + .reveal.page .slides section:not(.stack):after { + content: ''; + position: absolute; + display: block; + width: 90%; + height: 30px; + left: 5%; + bottom: 0; + background: none; + z-index: 1; + + border-radius: 4px; + box-shadow: 0px 95px 25px rgba(0,0,0,0.2); + + -webkit-transform: translateZ(-90px) rotateX( 65deg ); + } + +.reveal.page .slides>section.stack { + padding: 0; + background: none; +} + +.reveal.page .slides>section.past { + -webkit-transform-origin: 0% 0%; + -moz-transform-origin: 0% 0%; + -ms-transform-origin: 0% 0%; + transform-origin: 0% 0%; + + -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg); + -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg); + -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg); + transform: translate3d(-40%, 0, 0) rotateY(-80deg); +} + +.reveal.page .slides>section.future { + -webkit-transform-origin: 100% 0%; + -moz-transform-origin: 100% 0%; + -ms-transform-origin: 100% 0%; + transform-origin: 100% 0%; + + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.reveal.page .slides>section>section.past { + -webkit-transform-origin: 0% 0%; + -moz-transform-origin: 0% 0%; + -ms-transform-origin: 0% 0%; + transform-origin: 0% 0%; + + -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg); + -moz-transform: translate3d(0, -40%, 0) rotateX(80deg); + -ms-transform: translate3d(0, -40%, 0) rotateX(80deg); + transform: translate3d(0, -40%, 0) rotateX(80deg); +} + +.reveal.page .slides>section>section.future { + -webkit-transform-origin: 0% 100%; + -moz-transform-origin: 0% 100%; + -ms-transform-origin: 0% 100%; + transform-origin: 0% 100%; + + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + + +/********************************************* + * TILE-FLIP TRANSITION (CSS shader) + *********************************************/ + +.reveal.tileflip .slides section.present { + -webkit-transform: none; + -webkit-transition-duration: 800ms; + + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 0, randomness 0, flipAxis 0 1 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides section.past { + -webkit-transform: none; + -webkit-transition-duration: 800ms; + + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides section.future { + -webkit-transform: none; + -webkit-transition-duration: 800ms; + + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 0, flipAxis 0 1 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides>section>section.present { + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 0, randomness 2, flipAxis 1 0 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides>section>section.past { + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1 + ); +} + +.reveal.tileflip .slides>section>section.future { + -webkit-filter: custom( url(shaders/tile-flip.vs) mix(url(shaders/tile-flip.fs) multiply source-atop), 10 10 border-box detached, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), + amount 1, randomness 2, flipAxis 1 0 0, tileOutline 1 + ); +} + + +/********************************************* + * NO TRANSITION + *********************************************/ + +.reveal.none .slides section { + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + -o-transform: none; + transform: none; + + -webkit-transition: none; + -moz-transition: none; + -ms-transition: none; + -o-transition: none; + transition: none; +} + + +/********************************************* + * OVERVIEW + *********************************************/ + +.reveal.overview .slides { + -webkit-perspective: 700px; + -moz-perspective: 700px; + -ms-perspective: 700px; + perspective: 700px; +} + +.reveal.overview .slides section { + padding: 20px 0; + max-height: 600px; + overflow: hidden; + opacity: 1!important; + visibility: visible!important; + cursor: pointer; + background: rgba(0,0,0,0.1); +} +.reveal.overview .slides section .fragment { + opacity: 1; +} +.reveal.overview .slides section:after, +.reveal.overview .slides section:before { + display: none !important; +} +.reveal.overview .slides section>section { + opacity: 1; + cursor: pointer; +} + .reveal.overview .slides section:hover { + background: rgba(0,0,0,0.3); + } + + .reveal.overview .slides section.present { + background: rgba(0,0,0,0.3); + } +.reveal.overview .slides>section.stack { + background: none; + padding: 0; + overflow: visible; +} + + +/********************************************* + * PAUSED MODE + *********************************************/ + +.reveal .pause-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: black; + visibility: hidden; + opacity: 0; + z-index: 100; + + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -ms-transition: all 1s ease; + -o-transition: all 1s ease; + transition: all 1s ease; +} +.reveal.paused .pause-overlay { + visibility: visible; + opacity: 1; +} + + +/********************************************* + * FALLBACK + *********************************************/ + +.no-transforms { + overflow-y: auto; +} + +.no-transforms .slides section { + display: block!important; + opacity: 1!important; + position: relative!important; + height: auto; + min-height: auto; + margin-bottom: 100px; + + -webkit-transform: none; + -moz-transform: none; + -ms-transform: none; + transform: none; +} + + +/********************************************* + * BACKGROUND STATES + *********************************************/ + +.reveal .state-background { + position: absolute; + width: 100%; + height: 100%; + background: rgba( 0, 0, 0, 0 ); + + -webkit-transition: background 800ms ease; + -moz-transition: background 800ms ease; + -ms-transition: background 800ms ease; + -o-transition: background 800ms ease; + transition: background 800ms ease; +} +.alert .reveal .state-background { + background: rgba( 200, 50, 30, 0.6 ); +} +.soothe .reveal .state-background { + background: rgba( 50, 200, 90, 0.4 ); +} +.blackout .reveal .state-background { + background: rgba( 0, 0, 0, 0.6 ); +} + + +/********************************************* + * SPEAKER NOTES + *********************************************/ + +.reveal aside.notes { + display: none; +} + + +/********************************************* + * ZOOM PLUGIN + *********************************************/ + +.zoomed .reveal *, +.zoomed .reveal *:before, +.zoomed .reveal *:after { + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + transform: none !important; + + -webkit-backface-visibility: visible !important; + -moz-backface-visibility: visible !important; + -ms-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +.zoomed .reveal .progress, +.zoomed .reveal .controls { + opacity: 0; +} + +.zoomed .reveal .roll span { + background: none; +} + +.zoomed .reveal .roll span:after { + visibility: hidden; +} + + diff --git a/css/shaders/tile-flip.fs b/css/shaders/tile-flip.fs new file mode 100755 index 0000000..3481a48 --- /dev/null +++ b/css/shaders/tile-flip.fs @@ -0,0 +1,64 @@ +/* + * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved. + * Copyright (c) 2012 Branislav Ulicny + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +precision mediump float; + +// Uniform values from CSS + +uniform float amount; +uniform float tileOutline; + +// Built-in uniforms + +uniform vec2 u_meshSize; +uniform vec2 u_textureSize; + +// Varyings passed in from vertex shader + +varying float v_depth; +varying vec2 v_uv; + +// Main + +void main() +{ + // FIXME: Must swap x and y as a workaround for: + // https://bugs.webkit.org/show_bug.cgi?id=96285 + vec2 u_meshSize = u_meshSize.yx; + + vec4 c = vec4(1.0); + + // Fade out. + c.a = 1.0 - v_depth; + + // Show grid outline. + if (tileOutline >= 0.5) { + float cell_width = u_textureSize.x / u_meshSize.y; + float cell_height = u_textureSize.y / u_meshSize.x; + float dd = 1.0; + + if (mod(v_uv.x * u_textureSize.x + dd, cell_width) < 2.0 + || mod(v_uv.y * u_textureSize.y + dd, cell_height) < 2.0) { + if (amount > 0.0) + c.rgb = vec3(1.0 - sqrt(amount)); + } + } + css_ColorMatrix = mat4(c.r, 0.0, 0.0, 0.0, + 0.0, c.g, 0.0, 0.0, + 0.0, 0.0, c.b, 0.0, + 0.0, 0.0, 0.0, c.a); +} diff --git a/css/shaders/tile-flip.vs b/css/shaders/tile-flip.vs new file mode 100755 index 0000000..498e446 --- /dev/null +++ b/css/shaders/tile-flip.vs @@ -0,0 +1,141 @@ +/* + * Copyright (c)2012 Adobe Systems Incorporated. All rights reserved. + * Copyright (c)2012 Branislav Ulicny + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +precision mediump float; + +// Built-in attributes + +attribute vec4 a_position; +attribute vec2 a_texCoord; +attribute vec3 a_triangleCoord; + +// Built-in uniforms + +uniform mat4 u_projectionMatrix; +uniform vec2 u_meshSize; +uniform vec2 u_textureSize; + +// Uniform passed in from CSS + +uniform mat4 transform; +uniform float amount; +uniform float randomness; +uniform vec3 flipAxis; + +// Varyings + +varying float v_depth; +varying vec2 v_uv; + +// Constants + +const float PI2 = 1.5707963267948966; + +// Create perspective matrix + +mat4 perspectiveMatrix(float p) +{ + float perspective = - 1.0 / p; + return mat4( + 1.0, 0.0, 0.0, 0.0, + 0.0, 1.0, 0.0, 0.0, + 0.0, 0.0, 1.0, perspective, + 0.0, 0.0, 0.0, 1.0 + ); +} + +// Rotate vector + +vec3 rotateVectorByQuaternion(vec3 v, vec4 q) +{ + vec3 dest = vec3(0.0); + + float x = v.x, y = v.y, z = v.z; + float qx = q.x, qy = q.y, qz = q.z, qw = q.w; + + // Calculate quaternion * vector. + + float ix = qw * x + qy * z - qz * y, + iy = qw * y + qz * x - qx * z, + iz = qw * z + qx * y - qy * x, + iw = -qx * x - qy * y - qz * z; + + // Calculate result * inverse quaternion. + + dest.x = ix * qw + iw * -qx + iy * -qz - iz * -qy; + dest.y = iy * qw + iw * -qy + iz * -qx - ix * -qz; + dest.z = iz * qw + iw * -qz + ix * -qy - iy * -qx; + + return dest; +} + +// Convert rotation. + +vec4 axisAngleToQuaternion(vec3 axis, float angle) +{ + vec4 dest = vec4(0.0); + + float halfAngle = angle / 2.0; + float s = sin(halfAngle); + + dest.x = axis.x * s; + dest.y = axis.y * s; + dest.z = axis.z * s; + dest.w = cos(halfAngle); + + return dest; +} + +// Random function based on the tile coordinate. +// This will return the same value for all the vertices in the same tile (i.e. two triangles). + +float random(vec2 scale) +{ + // Use the fragment position as a different seed per-pixel. + return fract(sin(dot(vec2(a_triangleCoord.x, a_triangleCoord.y), scale)) * 4000.0); +} + +// Main + +void main() +{ + // FIXME: We must swap x and y as a workaround for: + // https://bugs.webkit.org/show_bug.cgi?id=96285 + vec2 u_meshSize = u_meshSize.yx; + + vec4 pos = a_position; + float aspect = u_textureSize.x / u_textureSize.y; + + float cx = a_triangleCoord.x / u_meshSize.y - 0.5 + 0.5 / u_meshSize.y; + float cy = a_triangleCoord.y / u_meshSize.x - 0.5 + 0.5 / u_meshSize.x; + + vec3 centroid = vec3(cx, cy, 0.0); + float r = random(vec2(10.0, 80.0)); + float rr = mix(0.0, PI2, amount * (1.0 + randomness * r)); + + vec4 rotation = vec4(flipAxis, rr); + vec4 qRotation = axisAngleToQuaternion(normalize(rotation.xyz), rotation.w); + + vec3 newPosition = rotateVectorByQuaternion((pos.xyz - centroid)* vec3(aspect, 1., 1.0), qRotation) * vec3(1.0 / aspect, 1.0, 1.0) + centroid; + pos.xyz = newPosition; + + gl_Position = u_projectionMatrix * transform * pos; + + // Pass varyings to the fragment shader. + v_depth = abs(rr)/ PI2; + v_uv = a_texCoord; +} diff --git a/css/theme/README.md b/css/theme/README.md new file mode 100755 index 0000000..137bdf2 --- /dev/null +++ b/css/theme/README.md @@ -0,0 +1,5 @@ +Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Find out how to install Sass here http://sass-lang.com/, once Sass is installed run the follwing command to start monitoring the source files for changes. + +``` +sass --watch css/theme/source/:css/theme --style expanded +``` \ No newline at end of file diff --git a/css/theme/fonts/Gotham/Gotham-Bold.otf b/css/theme/fonts/Gotham/Gotham-Bold.otf new file mode 100755 index 0000000..8486e9c Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-Bold.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-BoldIta.otf b/css/theme/fonts/Gotham/Gotham-BoldIta.otf new file mode 100755 index 0000000..86ec1ff Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-BoldIta.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-BoldItalic.otf b/css/theme/fonts/Gotham/Gotham-BoldItalic.otf new file mode 100755 index 0000000..f3610f8 Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-BoldItalic.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-Book.otf b/css/theme/fonts/Gotham/Gotham-Book.otf new file mode 100755 index 0000000..d729c4e Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-Book.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-BookIta.otf b/css/theme/fonts/Gotham/Gotham-BookIta.otf new file mode 100755 index 0000000..d297122 Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-BookIta.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-BookItalic.otf b/css/theme/fonts/Gotham/Gotham-BookItalic.otf new file mode 100755 index 0000000..0f4379f Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-BookItalic.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-Medium.otf b/css/theme/fonts/Gotham/Gotham-Medium.otf new file mode 100755 index 0000000..484e6b2 Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-Medium.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-MediumIta.otf b/css/theme/fonts/Gotham/Gotham-MediumIta.otf new file mode 100755 index 0000000..98a48b0 Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-MediumIta.otf differ diff --git a/css/theme/fonts/Gotham/Gotham-MediumItalic.otf b/css/theme/fonts/Gotham/Gotham-MediumItalic.otf new file mode 100755 index 0000000..bcfabe1 Binary files /dev/null and b/css/theme/fonts/Gotham/Gotham-MediumItalic.otf differ diff --git a/css/theme/fonts/league_gothic-webfont.eot b/css/theme/fonts/league_gothic-webfont.eot new file mode 100755 index 0000000..598dcbc Binary files /dev/null and b/css/theme/fonts/league_gothic-webfont.eot differ diff --git a/css/theme/fonts/league_gothic-webfont.svg b/css/theme/fonts/league_gothic-webfont.svg new file mode 100755 index 0000000..201cfe1 --- /dev/null +++ b/css/theme/fonts/league_gothic-webfont.svg @@ -0,0 +1,230 @@ + + + \ No newline at end of file diff --git a/css/theme/fonts/league_gothic-webfont.ttf b/css/theme/fonts/league_gothic-webfont.ttf new file mode 100755 index 0000000..29f896a Binary files /dev/null and b/css/theme/fonts/league_gothic-webfont.ttf differ diff --git a/css/theme/fonts/league_gothic-webfont.woff b/css/theme/fonts/league_gothic-webfont.woff new file mode 100755 index 0000000..71117fb Binary files /dev/null and b/css/theme/fonts/league_gothic-webfont.woff differ diff --git a/css/theme/fonts/league_gothic_license b/css/theme/fonts/league_gothic_license new file mode 100755 index 0000000..29513e9 --- /dev/null +++ b/css/theme/fonts/league_gothic_license @@ -0,0 +1,2 @@ +SIL Open Font License (OFL) +http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL diff --git a/css/theme/gdicool.css b/css/theme/gdicool.css new file mode 100755 index 0000000..b59a7bb --- /dev/null +++ b/css/theme/gdicool.css @@ -0,0 +1,145 @@ +@font-face { + font-family: "Gotham"; + src: local("Gotham"), url("fonts/Gotham/Gotham-Medium.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Book"; + src: local("Gotham-Book"), url("fonts/Gotham/Gotham-Book.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Italic"; + src: local("Gotham-Italic"), url("fonts/Gotham/Gotham-MediumItalic.otf") format("opentype"); + font-weight: normal; + font-style: italic; } + +@font-face { + font-family: "Gotham-Bold"; + src: local("Gotham-Bold"), url("fonts/Gotham/Gotham-Bold.otf") format("opentype"); + font-weight: bold; + font-style: bold; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #e9f1da; + background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #e9f1da 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #e9f1da)); + background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #e9f1da 100%); + background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #e9f1da 100%); + background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #e9f1da 100%); + background: radial-gradient(center, circle cover, #f7fbfc 0%, #e9f1da 100%); + background-color: #92bb44; } + +.reveal { + font-family: "Gotham-Book", "Helvetica", Arial, sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; } + +::selection { + color: white; + background: #134674; + text-shadow: none; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #8b0036; + font-family: "Gotham-Bold", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: uppercase; + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #01a9b4; + text-decoration: none; } + +.reveal a:not(.image):hover { + color: #f9b8bb; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #01a9b4; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px; + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #01a9b4; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #01a9b4; } + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #01a9b4; } + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #01a9b4; } + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #01a9b4; } + +.reveal .controls div.left.enabled:hover { + border-right-color: #f9b8bb; } + +.reveal .controls div.right.enabled:hover { + border-left-color: #f9b8bb; } + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #f9b8bb; } + +.reveal .controls div.down.enabled:hover { + border-top-color: #f9b8bb; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #01a9b4; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/gdidefault.css b/css/theme/gdidefault.css new file mode 100755 index 0000000..158a0f2 --- /dev/null +++ b/css/theme/gdidefault.css @@ -0,0 +1,153 @@ +@font-face { + font-family: "Gotham"; + src: local("Gotham"), url("fonts/Gotham/Gotham-Medium.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Book"; + src: local("Gotham-Book"), url("fonts/Gotham/Gotham-Book.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Italic"; + src: local("Gotham-Italic"), url("fonts/Gotham/Gotham-MediumItalic.otf") format("opentype"); + font-weight: normal; + font-style: italic; } + +@font-face { + font-family: "Gotham-Bold"; + src: local("Gotham-Bold"), url("fonts/Gotham/Gotham-Bold.otf") format("opentype"); + font-weight: bold; + font-style: bold; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #1c1e20; + background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); + background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); + background-color: #2b2b2b; } + +.reveal { + font-family: "Gotham-Book", "Helvetica", Arial, sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #eeeeee; } + +::selection { + color: white; + background: #f9b8bb; + text-shadow: none; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #f05b62; + font-family: "Gotham-Bold", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: uppercase; + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #01a9b4; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; } + +.reveal a:not(.image):hover { + color: #f9b8bb; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #01a9b4; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #eeeeee; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #01a9b4; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #01a9b4; } + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #01a9b4; } + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #01a9b4; } + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #01a9b4; } + +.reveal .controls div.left.enabled:hover { + border-right-color: #f9b8bb; } + +.reveal .controls div.right.enabled:hover { + border-left-color: #f9b8bb; } + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #f9b8bb; } + +.reveal .controls div.down.enabled:hover { + border-top-color: #f9b8bb; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #01a9b4; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/gdilight.css b/css/theme/gdilight.css new file mode 100755 index 0000000..187a874 --- /dev/null +++ b/css/theme/gdilight.css @@ -0,0 +1,153 @@ +@font-face { + font-family: "Gotham"; + src: local("Gotham"), url("fonts/Gotham/Gotham-Medium.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Book"; + src: local("Gotham-Book"), url("fonts/Gotham/Gotham-Book.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Italic"; + src: local("Gotham-Italic"), url("fonts/Gotham/Gotham-MediumItalic.otf") format("opentype"); + font-weight: normal; + font-style: italic; } + +@font-face { + font-family: "Gotham-Bold"; + src: local("Gotham-Bold"), url("fonts/Gotham/Gotham-Bold.otf") format("opentype"); + font-weight: bold; + font-style: bold; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: white; + background: -moz-radial-gradient(center, circle cover, #f2f2f2 0%, white 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f2f2f2), color-stop(100%, white)); + background: -webkit-radial-gradient(center, circle cover, #f2f2f2 0%, white 100%); + background: -o-radial-gradient(center, circle cover, #f2f2f2 0%, white 100%); + background: -ms-radial-gradient(center, circle cover, #f2f2f2 0%, white 100%); + background: radial-gradient(center, circle cover, #f2f2f2 0%, white 100%); + background-color: white; } + +.reveal { + font-family: "Gotham-Book", "Helvetica", Arial, sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; } + +::selection { + color: white; + background: rgba(11, 79, 81, 0.99); + text-shadow: none; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #f05b62; + font-family: "Gotham-Bold", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: 0.02em; + text-transform: none; + text-shadow: #cccccc; } + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #01a9b4; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; } + +.reveal a:not(.image):hover { + color: #f9b8bb; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #01a9b4; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #333333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #01a9b4; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #01a9b4; } + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #01a9b4; } + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #01a9b4; } + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #01a9b4; } + +.reveal .controls div.left.enabled:hover { + border-right-color: #f9b8bb; } + +.reveal .controls div.right.enabled:hover { + border-left-color: #f9b8bb; } + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #f9b8bb; } + +.reveal .controls div.down.enabled:hover { + border-top-color: #f9b8bb; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #01a9b4; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/gdisunny.css b/css/theme/gdisunny.css new file mode 100755 index 0000000..39d7394 --- /dev/null +++ b/css/theme/gdisunny.css @@ -0,0 +1,153 @@ +@font-face { + font-family: "Gotham"; + src: local("Gotham"), url("fonts/Gotham/Gotham-Medium.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Book"; + src: local("Gotham-Book"), url("fonts/Gotham/Gotham-Book.otf") format("opentype"); + font-weight: normal; + font-style: normal; } + +@font-face { + font-family: "Gotham-Italic"; + src: local("Gotham-Italic"), url("fonts/Gotham/Gotham-MediumItalic.otf") format("opentype"); + font-weight: normal; + font-style: italic; } + +@font-face { + font-family: "Gotham-Bold"; + src: local("Gotham-Bold"), url("fonts/Gotham/Gotham-Bold.otf") format("opentype"); + font-weight: bold; + font-style: bold; } + +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #fcf3e0; + background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #fcf3e0 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #fcf3e0)); + background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #fcf3e0 100%); + background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #fcf3e0 100%); + background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #fcf3e0 100%); + background: radial-gradient(center, circle cover, #f7fbfc 0%, #fcf3e0 100%); + background-color: #f7fbfc; } + +.reveal { + font-family: "Gotham-Book", "Helvetica", Arial, sans-serif; + font-size: 36px; + font-weight: 200; + letter-spacing: -0.02em; + color: #333333; } + +::selection { + color: white; + background: #134674; + text-shadow: none; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #f05b62; + font-family: "Gotham-Bold", Impact, sans-serif; + line-height: 0.9em; + letter-spacing: -0.08em; + text-transform: uppercase; + text-shadow: none; } + +.reveal h1 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +/********************************************* + * LINKS + *********************************************/ +.reveal a:not(.image) { + color: #92bb44; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; } + +.reveal a:not(.image):hover { + color: #f9b8bb; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #92bb44; } + +/********************************************* + * IMAGES + *********************************************/ +.reveal section img { + margin: 15px; + background: rgba(255, 255, 255, 0.12); + border: 4px solid #333333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; } + +.reveal a:hover img { + background: rgba(255, 255, 255, 0.2); + border-color: #92bb44; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: #92bb44; } + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: #92bb44; } + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: #92bb44; } + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: #92bb44; } + +.reveal .controls div.left.enabled:hover { + border-right-color: #f9b8bb; } + +.reveal .controls div.right.enabled:hover { + border-left-color: #f9b8bb; } + +.reveal .controls div.up.enabled:hover { + border-bottom-color: #f9b8bb; } + +.reveal .controls div.down.enabled:hover { + border-top-color: #f9b8bb; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #92bb44; + -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/source/gdicool.scss b/css/theme/source/gdicool.scss new file mode 100755 index 0000000..f3c05a3 --- /dev/null +++ b/css/theme/source/gdicool.scss @@ -0,0 +1,22 @@ +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Override theme settings (see ../template/settings.scss) +$mainColor: #333; +$headingColor: #8B0036; +$backgroundColor: #92BB44; +$linkColor: #01A9B4; +$selectionBackgroundColor: #134674; + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( lighten($backgroundColor, 40% ), #f7fbfc ); +} + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/gdidefault.scss b/css/theme/source/gdidefault.scss new file mode 100755 index 0000000..1296c69 --- /dev/null +++ b/css/theme/source/gdidefault.scss @@ -0,0 +1,17 @@ +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + +// Override theme settings (see ../template/settings.scss) +$linkColor: #01A9B4; +// Background generator +@mixin bodyBackground() { + @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); +} + + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/gdilight.scss b/css/theme/source/gdilight.scss new file mode 100755 index 0000000..9ff6670 --- /dev/null +++ b/css/theme/source/gdilight.scss @@ -0,0 +1,21 @@ +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Override theme settings (see ../template/settings.scss) +$mainColor: #333; +$headingTextShadow: #ccc; +$headingTextTransform: none; +$backgroundColor: #fff; +$linkColor: #01A9B4; +$selectionBackgroundColor: rgba(11, 79, 81, 0.99); + +@mixin bodyBackground() { + @include radial-gradient($backgroundColor, darken($backgroundColor, 5%)); +} + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/source/gdisunny.scss b/css/theme/source/gdisunny.scss new file mode 100755 index 0000000..1f52642 --- /dev/null +++ b/css/theme/source/gdisunny.scss @@ -0,0 +1,23 @@ +// Default mixins and settings ----------------- +@import "../template/mixins"; +@import "../template/settings"; +// --------------------------------------------- + + +// Override theme settings (see ../template/settings.scss) +$mainColor: #333; +$headingLetterSpacing: -0.08em; +$headingTextShadow: none; +$backgroundColor: #f7fbfc; +$linkColor: #92BB44; +$selectionBackgroundColor: #134674; + +// Background generator +@mixin bodyBackground() { + @include radial-gradient( lighten(#EDAB23, 40% ), #f7fbfc ); +} + + +// Theme template ------------------------------ +@import "../template/theme"; +// --------------------------------------------- \ No newline at end of file diff --git a/css/theme/template/mixins.scss b/css/theme/template/mixins.scss new file mode 100755 index 0000000..e0c5606 --- /dev/null +++ b/css/theme/template/mixins.scss @@ -0,0 +1,29 @@ +@mixin vertical-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); + background: -o-linear-gradient( top, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); + background: linear-gradient( top, $top 0%, $bottom 100% ); +} + +@mixin horizontal-gradient( $top, $bottom ) { + background: $top; + background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); + background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); + background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); + background: -o-linear-gradient( left, $top 0%, $bottom 100% ); + background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); + background: linear-gradient( left, $top 0%, $bottom 100% ); +} + +@mixin radial-gradient( $outer, $inner, $type: circle ) { + background: $outer; + background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); + background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); + background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); +} \ No newline at end of file diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss new file mode 100755 index 0000000..46a6e97 --- /dev/null +++ b/css/theme/template/settings.scss @@ -0,0 +1,63 @@ +// Base settings for all themes that can optionally be +// overridden by the super-theme + +// Include theme-specific fonts +@font-face { + font-family: "Gotham"; + src: local("Gotham"), + url("fonts/Gotham/Gotham-Medium.otf") format("opentype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Gotham-Book"; + src: local("Gotham-Book"), + url("fonts/Gotham/Gotham-Book.otf") format("opentype"); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "Gotham-Italic"; + src: local("Gotham-Italic"), + url("fonts/Gotham/Gotham-MediumIta.otf") format("opentype"); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: "Gotham-Bold"; + src: local("Gotham-Bold"), + url("fonts/Gotham/Gotham-Bold.otf") format("opentype"); + font-weight: bold; + font-style: bold; +} + +// Background of the presentation +$backgroundColor: #2b2b2b; + +// Primary/body text +$mainFont: 'Gotham-Book', 'Helvetica', Arial, sans-serif; +$mainFontSize: 36px; +$mainColor: #eee; + +// Headings +$headingFont: 'Gotham-Bold', Impact, sans-serif; +$headingColor: #F05B62; +$headingLineHeight: 0.9em; +$headingLetterSpacing: 0.02em; +$headingTextTransform: uppercase; +$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); +$heading1TextShadow: $headingTextShadow; + +// Links and actions +$linkColor: #F05B62; +$linkColorHover: lighten( $linkColor, 20% ); + +// Text selection +$selectionBackgroundColor: lighten( $linkColor, 20% ); +$selectionColor: #fff; + +// Generates the presentation background, can be overridden +// to return a background image or gradient +@mixin bodyBackground() { + background: $backgroundColor; +} \ No newline at end of file diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss new file mode 100755 index 0000000..7e0d686 --- /dev/null +++ b/css/theme/template/theme.scss @@ -0,0 +1,163 @@ +// Base theme template for reveal.js + +/********************************************* + * GLOBAL STYLES + *********************************************/ + +body { + @include bodyBackground(); + background-color: $backgroundColor; +} + +.reveal { + font-family: $mainFont; + font-size: $mainFontSize; + font-weight: 200; + letter-spacing: -0.02em; + color: $mainColor; +} + +::selection { + color: $selectionColor; + background: $selectionBackgroundColor; + text-shadow: none; +} + +/********************************************* + * HEADERS + *********************************************/ + +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: $headingColor; + + font-family: $headingFont; + line-height: $headingLineHeight; + letter-spacing: $headingLetterSpacing; + + text-transform: $headingTextTransform; + text-shadow: $headingTextShadow; +} + +.reveal h1 { + text-shadow: $heading1TextShadow; +} + + +/********************************************* + * LINKS + *********************************************/ + +.reveal a:not(.image) { + color: $linkColor; + text-decoration: none; + + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + -ms-transition: color .15s ease; + -o-transition: color .15s ease; + transition: color .15s ease; +} + .reveal a:not(.image):hover { + color: $linkColorHover; + + text-shadow: none; + border: none; + } + +.reveal .roll span:after { + color: #fff; + background: $linkColor; +} + + +/********************************************* + * IMAGES + *********************************************/ + +.reveal section img { + margin: 15px; + background: rgba(255,255,255,0.12); + border: 4px solid $mainColor; + + box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); + + -webkit-transition: all .2s linear; + -moz-transition: all .2s linear; + -ms-transition: all .2s linear; + -o-transition: all .2s linear; + transition: all .2s linear; +} + + .reveal a:hover img { + background: rgba(255,255,255,0.2); + border-color: $linkColor; + + box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); + } + + +/********************************************* + * NAVIGATION CONTROLS + *********************************************/ + +.reveal .controls div.left, +.reveal .controls div.left.enabled { + border-right-color: $linkColor; +} + +.reveal .controls div.right, +.reveal .controls div.right.enabled { + border-left-color: $linkColor; +} + +.reveal .controls div.up, +.reveal .controls div.up.enabled { + border-bottom-color: $linkColor; +} + +.reveal .controls div.down, +.reveal .controls div.down.enabled { + border-top-color: $linkColor; +} + +.reveal .controls div.left.enabled:hover { + border-right-color: $linkColorHover; +} + +.reveal .controls div.right.enabled:hover { + border-left-color: $linkColorHover; +} + +.reveal .controls div.up.enabled:hover { + border-bottom-color: $linkColorHover; +} + +.reveal .controls div.down.enabled:hover { + border-top-color: $linkColorHover; +} + + +/********************************************* + * PROGRESS BAR + *********************************************/ + +.reveal .progress { + background: rgba(0,0,0,0.2); +} + .reveal .progress span { + background: $linkColor; + + -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); + } + + diff --git a/favicon.ico b/favicon.ico new file mode 100755 index 0000000..4c73757 Binary files /dev/null and b/favicon.ico differ diff --git a/images/file-types.gif b/images/file-types.gif new file mode 100644 index 0000000..3e96309 Binary files /dev/null and b/images/file-types.gif differ diff --git a/images/gdi_logo_badge.png b/images/gdi_logo_badge.png new file mode 100644 index 0000000..797ea96 Binary files /dev/null and b/images/gdi_logo_badge.png differ diff --git a/images/new-document.png b/images/new-document.png new file mode 100644 index 0000000..5fbaf05 Binary files /dev/null and b/images/new-document.png differ diff --git a/images/photoshop-icon.png b/images/photoshop-icon.png new file mode 100644 index 0000000..747aabc Binary files /dev/null and b/images/photoshop-icon.png differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..2627fb6 --- /dev/null +++ b/index.html @@ -0,0 +1,371 @@ + + + +
+ + +"+w.value+"
";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p