Permalink
Browse files

MozCamp updates

  • Loading branch information...
1 parent 0343ef6 commit 2cecffb64851f02ba5a5270a651ea5e60d953ece @codepo8 committed Sep 9, 2012
Showing with 303 additions and 3 deletions.
  1. +279 −0 mozilla-mission.html
  2. +6 −3 scripts/script.js
  3. +18 −0 themes/mozilla/styles/style.css
View
@@ -0,0 +1,279 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+ <title>{title}</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=1274, user-scalable=no">
+ <link rel="stylesheet" href="themes/mozilla/styles/style.css">
+ <style type="text/css">
+ h1,h2 { font-weight: normal; }
+ h2 span {
+ display: block;
+ font-size: 20px;
+ }
+ .full .slide { background:url(themes/mozilla/images/bg-sandstone-2.png); }
+ #cover .byline {
+ bottom: 80px;
+ top: auto;
+ right: 140px;
+ width: auto;
+ padding: 5px 10px;
+ }
+ #cover h2 { padding-left: 30px; }
+ #word, #wordvalue {
+ letter-spacing: 5px;
+ width: 500px;
+ text-transform: uppercase;
+ font-family: inherit;
+ font-size: 60px;
+ color: #333;
+ padding: 5px 10px;
+ border: none;
+ background: transparent;
+ border-bottom: 2px solid #666;
+ }
+ #wordvalue { border: none; }
+ #word:focus { outline: 0; }
+ .full .slide section {
+ -moz-transition: opacity 1s;
+ -webkit-transition: opacity 1s;
+ opacity: 0;
+ }
+ .full .slide:target section { opacity: 1; }
+ .full .slide:target figure.middle {
+ -moz-animation: swing linear 2s infinite;
+ -moz-transform-origin: 0 -55%;
+ -webkit-animation: swing ease-in-out 2s infinite;
+ -webkit-transform-origin: 0 -55%;
+ -o-animation: swing ease-in-out 20s infinite;
+ -o-transform-origin: 0 -55%;
+ animation: swing ease-in-out 20s infinite;
+ transform-origin: 0 -55%;
+ box-shadow: 5px 10px 10px rgba(0,0,0,.35);
+ }
+ .middle img { border: 5px solid #f8f8f8; z-index: 2; display: block; }
+ .middle::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: -10px;
+ left: 50%;
+ margin-left: -10px;
+ width: 20px;
+ height: 20px;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg );
+ transform: rotate(45deg);
+ border-style: solid;
+ border-color: #666;
+ border-width: 1px 0 0 1px;
+ }
+ .middle::before {
+ content: '';
+ display: block;
+ width: 5px;
+ height: 5px;
+ background-image:
+ -webkit-linear-gradient(top, #f1f1f1 0%, #333 80%, #000 95%);
+ background-image:
+ -moz-linear-gradient(to bottom, #f1f1f1 0%, #333 80%, #000 95%);
+ background-image:
+ linear-gradient(to bottom, #f1f1f1 0%, #333 80%, #000 95%);
+ border-radius: 50%;
+ border: 1px solid #666;
+ position: absolute;
+ top: -15px;
+ left: 50%;
+ margin-left: -3px;
+ }
+ p.demourl { bottom: 0; margin: 0 0 10px 0; }
+ .slide section { padding: 40px 120px; }
+ ul.demourl li { display: inline; padding-right: 1em; }
+ ul.demourl li::before, ul.inner li::before { content: '';}
+ .full .cover:target .middle {
+ -moz-animation: none;
+ -webkit-animation: none;
+ -o-animation: none;
+ animation: none;
+ }
+ @-moz-keyframes swing {
+ 0% { -moz-transform: rotate3d(0deg,0,0) translate3d(-50%, -50%, 0); }
+ 25% { -moz-transform: rotate(3deg) translate(-50%, -50%); }
+ 50% { -moz-transform: rotate(0deg) translate(-50%, -50%); }
+ 75% { -moz-transform: rotate(-3deg) translate(-50%, -50%); }
+ 100% { -moz-transform: rotate(0deg) translate(-50%, -50%); }
+ }
+ @-webkit-keyframes swing {
+ 0% {-webkit-transform: rotate(-3deg) translate(-50%, -50%); }
+ 50% {-webkit-transform: rotate(3deg) translate(-50%, -50%); }
+ 100% {-webkit-transform: rotate(-3deg) translate(-50%, -50%); }
+ }
+
+ @-o-keyframes swing {
+ 0% { -o-transform: rotate(-3deg) translate(-50%, -50%); }
+ 50% { -o-transform: rotate(3deg) translate(-50%, -50%); }
+ 100% { -o-transform: rotate(-3deg) translate(-50%, -50%); }
+ }
+ @keyframes swing {
+ 0% { transform: rotate(-3deg) translate(-50%, -50%); }
+ 50% { transform: rotate(3deg) translate(-50%, -50%); }
+ 100% { transform: rotate(-3deg) translate(-50%, -50%); }
+ }
+ blockquote { font-size: 40px;}
+ </style>
+</head>
+<body class="list">
+
+ <header class="caption">
+ <h1>{title}</h1>
+ <p class="footer">{name}, <a href="http://twitter.com/">{twitter}</a> or <a href="mailto:">you@mail.com</a></p>
+ </header>
+
+ <div id="cover" class="slide"><div>
+ <section>
+ <header>
+ <h2>{title}</h2>
+ </header>
+ <footer class="byline">{Name}, Mozilla, {event}, {location}, {date}</footer>
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="agenda" class="slide"><div>
+ <section>
+ <header>
+ <h2>Agenda</h2>
+ </header>
+ <ul>
+ <li>Who is Mozilla
+ <ul>
+ <li>{your slides}</li>
+ </ul>
+ </li>
+ <li>Conclusion & call to action</li>
+ <li>Questions and Answers</li>
+ </ul>
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="mozilla-is" class="slide"><div>
+ <section>
+ <header>
+ <h2>Mozilla is&hellip;</h2>
+ </header>
+ <blockquote>
+ a global community of people who believe that <strong>openness</strong>, <strong>innovation</strong>, and <strong>opportunity</strong> are key to the continued health of the Internet.
+ </blockquote>
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="firefox" class="slide"><div>
+ <section>
+ <header>
+ <h2>We’re known for the Firefox Web Browser</h2>
+ </header>
+ <img src="themes/mozilla/images/Fx-logo.png" class="middle" width="400" alt="Firefox">
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="manifesto" class="slide"><div>
+ <section>
+ <header>
+ <h2>Mozilla Manifesto</h2>
+ </header>
+ <ul class="inner">
+ <li class="active">The Internet is a <strong>global public resource</strong> that must <strong>remain open</strong> and <strong>accessible</strong>.</li>
+ <li>The <strong>Internet should enrich the lives</strong> of individual human beings.</li>
+ <li>Individuals' <strong>security</strong> on the Internet is <strong>fundamental</strong> and cannot be treated as optional.</li>
+ <li>Individuals must have the <strong>ability to shape their own experiences</strong> on the Internet.</li>
+ </ul>
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="yourslides" class="slide"><div>
+ <section>
+ <header>
+ <h2>Your slides here</h2>
+ </header>
+ <p>Your content goes here,
+after the Mission intro and the before the call to action & Q&A</p>
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="drawing" class="slide"><div>
+ <section>
+ <header>
+ <h2>And now?</h2>
+ </header>
+ <ul>
+ <li>Use Firefox Beta: <a href="http://mozilla.org/beta">mozilla.org/beta</a></li>
+ <li>File bugs on <a href="http://bugzilla.mozilla.org">bugzilla.mozilla.org</a></li>
+ <li>Try our new Developer tools</li>
+ <li>Use (and contribute?) to the <a href="http://developer.mozilla.org">Mozilla Developer Network</a></li>
+ </ul>
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="qanda" class="slide"><div>
+ <section>
+ <header>
+ <h2>Questions & Answers</h2>
+ </header>
+ <ul>
+ <li><a href="http://www.mozilla.org/about/manifesto.en.html">http://www.mozilla.org/about/manifesto.en.html</a></li>
+ <li><a href="https://wiki.mozilla.org/WebAPI">https://wiki.mozilla.org/WebAPI</a></li>
+ <li><a href="https://wiki.mozilla.org/Apps">https://wiki.mozilla.org/Apps</a></li>
+ <li><a href="https://marketplace.mozilla.org">https://marketplace.mozilla.org</a></li>
+ <li><a href="http://www.mozilla.org/b2g/">http://www.mozilla.org/b2g/</a></li>
+ <li><a href="http://blog.mozilla.org/beyond-the-code/">http://blog.mozilla.org/beyond-the-code/</a></li>
+ </ul>
+ <footer class="notes">
+ </footer>
+ </section>
+ </div></div>
+
+ <div id="thanks" class="slide"><div>
+ <section>
+ <header>
+ <h2>Thanks</h2>
+ </header>
+ <figure class="middle">
+ <img src="pictures/redpanda.jpg"
+ alt="Red panda (Firefox)">
+ </figure>
+ <ul class="demourl">
+ <li>{name}</li>
+ <li><a href="http://twitter.com/">{twitter}</a></li>
+ <li><a href="{slideurl}">
+ {slideurl}
+ </a></li>
+ </ul>
+ <small class="credits">
+ <a href="http://www.flickr.com/photos/yortw/5798336827/">
+ Photo by Yortw
+ </a>
+ </small>
+ <footer class="notes">
+ Thanks for listening!
+ </footer>
+ </section>
+ </div></div>
+
+ <div class="progress"><div></div></div>
+ <script src="scripts/script.js"></script>
+ <!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
+</body>
+</html>
View
@@ -5,14 +5,16 @@
progress = document.querySelector('div.progress div'),
slideList = [],
l = slides.length, i;
+ if (typeof keysalive === 'undefined') {
+ keysalive = true;
+ }
for (i = 0; i < l; i++) {
slideList.push({
id: slides[i].id,
hasInnerNavigation: null !== slides[i].querySelector('.inner')
});
}
-
function getTransform() {
var denominator = Math.max(
body.clientWidth / window.innerWidth,
@@ -58,7 +60,7 @@
var currentSlide = document.getElementById(slideList[slideNumber].id);
- if (null != currentSlide) {
+ if (null !== currentSlide) {
window.scrollTo(0, currentSlide.offsetTop);
}
}
@@ -144,7 +146,7 @@
if (window.console && slideList[slideNumber]) {
var notes = document.querySelector('#' +slideList[slideNumber].id + ' .notes');
if (notes) {
- console.info(notes.innerHTML.replace(/\n\s+/g,'\n'))
+ console.info(notes.innerHTML.replace(/\n\s+/g,'\n'));
}
if (slideList[slideNumber+1]) {
var next = document.querySelector('#' +slideList[slideNumber + 1].id + ' header');
@@ -186,6 +188,7 @@
}, false);
document.addEventListener('keydown', function (e) {
+ if (!keysalive) { return; }
// Shortcut for alt, shift and meta keys
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
@@ -135,6 +135,20 @@ body:after {
counter-increment:list;
content:counter(list)'.';
}
+ /* Inner navigation */
+ .inner li {
+ opacity: 0.05;
+ -webkit-transition: opacity 1s;
+ -o-transition: opacity 1s;
+ -ms-transition: opacity 1s;
+ -moz-transition: opacity 1s;
+ transition: opacity 1s;
+ }
+ .inner .active {
+ opacity: 1;
+ }
+
+
/* Code */
.slide pre {
@@ -443,6 +457,10 @@ body:after {
.right {
float: right;
}
+.left {
+ float: left;
+ padding-right: 80px;
+ }
.credits {
font-size: 10px;
position: absolute;

0 comments on commit 2cecffb

Please sign in to comment.