From: Robert Kaiser Date: Sun, 21 Apr 2013 23:27:16 +0000 (+0200) Subject: add base of slide sets for both Linuxwochen 2013 talks, translating the new mozilla... X-Git-Url: https://git-public.kairo.at/?p=slides.git;a=commitdiff_plain;h=c598296b291df02ffe603c73a76f8ea8e85ac157;hp=dbf94fdfdd375bcebc1824ce6fcea93efde24e50;ds=inline add base of slide sets for both Linuxwochen 2013 talks, translating the new mozilla style to German and creating a new KaiRo.at style, most content is still missing, but everything else works --- diff --git a/linuxwochen2013-makey/cc-by-sa-80x15.png b/linuxwochen2013-makey/cc-by-sa-80x15.png new file mode 100644 index 0000000..c67509f Binary files /dev/null and b/linuxwochen2013-makey/cc-by-sa-80x15.png differ diff --git a/linuxwochen2013-makey/index.html b/linuxwochen2013-makey/index.html new file mode 100755 index 0000000..ec879d9 --- /dev/null +++ b/linuxwochen2013-makey/index.html @@ -0,0 +1,94 @@ + + + + + + MaKey MaKey - "Tastatur"-Kreativität + + + + + + + + + + +
+

Inhalt

+

MaKey MaKey - "Tastatur"-Kreativität

+ +
+

Folgende Folien sind in dieser Präsentation enthalten:

+
+
    +
+
+ +
+

MaKey MaKey - "Tastatur"-Kreativität

+

Ein Erfindungs-Bausatz für Jedermann

+ +
+Robert Kaiser, +"KaiRo" <kairo@kairo.at> +
Mozilla-Stabilitäts-Manager +
+ +
+

Folien: + http://slides.kairo.at/linuxwochen2013-makey/

+
+
    +
  • Erstellt für + Vortrag + auf den Linuxwochen 2013 in Wien.
    • +
  • Geschrieben in HTML 5 mit CSS 3 und JavaScript.
    • +
  • Navigation mit Links auf allen Folien, mit Accesskeys + (e.g. "n"/Alt+Shift+N für "next"/weiter) oder vor/zurück-Pfeilasten
    • +
  • Inhalt
    • +
  • Lizenziert unter CC-BY-SA, 04/2013 Robert Kaiser
    • +
+
+
+
+ +
+

Was ist "MaKey MaKey"?

+ +
+
    +
  • Entwicklung von 2 MIT-Studenten
    • +
  • +
  • +
+
+
+ +
+

Demo

+ +
+ +
+
+ + + diff --git a/linuxwochen2013-makey/slides.css b/linuxwochen2013-makey/slides.css new file mode 100644 index 0000000..f6adfbf --- /dev/null +++ b/linuxwochen2013-makey/slides.css @@ -0,0 +1,302 @@ +/************************** + * styles for talk slides * + * by Robert Kaiser * + * * + * (for Linuxwochen 2013) * + **************************/ + + +/***** base style *****/ + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-Regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-Italic-webfont.woff') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-Bold-webfont.woff') format('woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Liberation Sans'; + src: url('template/LiberationSans-BoldItalic-webfont.woff') format('woff'); + font-weight: bold; + font-style: italic; +} + +html { + overflow: hidden; /* to make translations not paint scrollbars */ + background: #FFFFEE; + height: 100%; +} + +body { + margin: 0px; + padding: 0px; + border: 0px; + font-family: "Liberation Sans", sans-serif; + font-size: 2em; + color: #336699; + background: url("template/page-background-top.png") top left repeat-x; + height: 100%; +} + +ul { + padding-left: 1.2em; + margin-bottom: 0.5em; +} + +ul:first-child, +ul:last-child { + margin-top: 0; +} + +#header { + height: 40px; + position: relative; + border-top: 1px solid white; +} + +#headerlogo { + position: absolute; + display: block; + right: 25px; + top: 3px; + text-indent: -2000px; + font-size: 1px; + overflow: hidden; + height: 37px; + width: 60px; + background: url("template/kairologo60.png") no-repeat; +} + +#header-text { + position: relative; + top: 5px; + left: 25px; + font-size: 20px; + font-weight: bold; + color: #336699; +} + +#header-text.neartime { + color: #80AACC; +} + +#header-text.ontime { + color: #80CC80; +} + +#header-text.overtime { + color: #FF8080; +} + +#subheader-text { + color: #336699; + position: relative; + top: 3px; + left: 25px; + font-size: 10px; +} + +#slidenav { + position: absolute; + right: 110px; + top: 15px; + font-size: 10px; +} + +#slidenav a:link, +#slidenav a:visited { + color: #669999; +} + +#slidenav a:hover, +#slidenav a:active { + color: #88BBBB; +} + +#slidenav .nolink { + color: #A0A0A0; +} + +article { + position: absolute; + width: 100%; + /* header is 40px, 7px to have a bit of distance, + * 3px height-reducing on the bottom for safety */ + top: 47px; + height: calc(100% - 50px); + overflow: auto; + + transition-property: transform, opacity; + transition-duration: 3s; + transition-timing-function: ease; + transform-origin: center 5em; + + opacity: 0; +/* + transform: translate(-100%, 0); +*/ +/* + transform: scale(0.1) rotate(360deg); +*/ + transform: scale(0.1) rotate(360deg) translate(-200%, 0); +} + +article[aria-selected="true"] { + opacity: 1; + transform: scale(1) rotate(0deg) translate(0, 0); +} + +article[aria-selected="true"] ~ article { + opacity: 0; +/* + transform: translate(100%, 0); +*/ +/* + transform: scale(0.1) rotate(-360deg); +*/ + transform: scale(0.1) rotate(-360deg) translate(200%, 0); +} + +/***** headers *****/ + +h1, h2, h3, h4 { + margin: 0.5em 0; + font-weight: bold; + color: #336699; + text-align: center; +} + +h1 { + margin-top: 0; + font-size: 1.7em; + text-shadow: #AAAA80 3px 3px 5px; +} + +h2 { + font-size: 1.3em; + text-shadow: #AAAA80 2px 2px 3px; +} + +h3 { + font-size: 1.1em; +} + +h4 { + font-size: 1em; + text-align: left; +} + +/***** boxes *****/ + +.simplebox { + padding: 0.5em; +} + +.captionedbox { + padding: 0px; +} + +.simplebox, +.captionedbox { + margin: 1em; + box-shadow: 0 0 0 1px #fff inset; + background: #fff; + background-image: radial-gradient(center 45px, ellipse farthest-corner, #FFFFEE 0, #fff 100%); + border: 1px solid #336699; + border-radius: .5em; + box-shadow: #AAAA80 1px 1px 3px 2px; +} + +.captionedbox-content { + margin: 0; + padding: 0.5em; + border: 0px; + border-top: 1px solid #89AACC; + border-radius: 0 0 .5em .5em; +} + +.captionedbox-caption { + margin: 0; + padding: 0.5em; + font-weight: bold; + text-shadow: #AAAA80 1px 1px 2px; +} + +/***** misc formatting *****/ + +mark { + font-weight: bold; + color: #FF6600; + background-color: transparent; + text-shadow: #AAAA80 2px 2px 3px; +} + +.border { + border: 1px solid #336699; + padding: 0.5em; +} + +.sshot { + box-shadow: #6d7581 1px 1px 3px 2px; +} + +ul > li { + margin: 0.5em 0; +} + +.cent { + text-align: center; +} + +.topmargin { + margin-top: 0.5em; +} + +.akey { + text-decoration: underline; +} + +a:link, a:visited { color: #669999; text-decoration: none; } +a:hover, a:active { color: #88BBBB; text-decoration: underline; } + +mark a:link, mark a:visited { color: #FF6600; } +mark a:hover, mark a:active { color: #FF6600; } + +/***** small stuff *****/ + +.small, +.small { + font-size: 0.75em; +} + +ul.small, +.small ul { + padding: 0px; + border: 0px; + margin: 0px 0px 0px 1em; +} + +ul.small > li +.small ul > li { + margin: 0px; + padding: 0px; + border: 0px; +} + +/***** specific slides *****/ + diff --git a/linuxwochen2013-makey/slides.js b/linuxwochen2013-makey/slides.js new file mode 100644 index 0000000..306a95c --- /dev/null +++ b/linuxwochen2013-makey/slides.js @@ -0,0 +1,200 @@ +/****************************** + * JavaScript for talk slides * + * by Robert Kaiser * + * * + * (for FOSDEM 2011) * + ******************************/ + +var slides = {}; +var articleNodes; +var currentSlide; +var currentIdx; +var defaultIdx = 1; // set to slide index to show by default +var firstIdx = 2; // set no value if to use first available +var lastIdx; // set no value if to use first available + +var pageTitle, headerText, subHeaderText; +var navPrev, navNext, navPrevNolink, navNextNolink; + +// Slide timer - color variation of headerText +var slideSeconds = 3 * 60; + +// Called when the document has been loaded. +function docLoaded() { + pageTitle = document.getElementsByTagName("title")[0]; + headerText = document.getElementById("header-text"); + subHeaderText = document.getElementById("subheader-text"); + navPrev = document.getElementById("nav-prev"); + navNext = document.getElementById("nav-next"); + navPrevNolink = document.getElementById("nav-prev-nolink"); + navNextNolink = document.getElementById("nav-next-nolink"); + articleNodes = document.getElementsByTagName("article"); + + if (!firstIdx) + firstIdx = 0; + if (!lastIdx) + lastIdx = articleNodes.length - 1; + + // Get a list of all slides (articles). + subHeaderText.textContent = articleNodes.length + " slides..."; + for (var i = 0; i < articleNodes.length; ++i) { + subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length; + if (!articleNodes[i].id) + articleNodes[i].id = "slide_" + i; + + slides[articleNodes[i].id] = + {"idx": i, + "name": articleNodes[i].id, + "title": articleNodes[i].title ? articleNodes[i].title : articleNodes[i].id, + "obj": articleNodes[i]}; + + if (location.hash.length && + (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) { + articleNodes[i].setAttribute("aria-selected", "true"); + currentSlide = slides[articleNodes[i].id]; + currentIdx = i; + } + } + + if (!currentSlide) { + currentIdx = defaultIdx; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + location.hash = "#" + currentSlide.name; + } + updateDisplay(); +} + +// Called when the hash part of the location changes. +function locationHashChanged() { + if (location.hash.length > 1) { + var hashtag = location.hash.substring(1); + // If not a number, treat as ID + if (isNaN(hashtag) && slides[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentSlide = slides[hashtag]; + currentIdx = currentSlide.idx; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + else if (articleNodes[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentIdx = hashtag; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + } +} +window.onhashchange = locationHashChanged; + +// Update the display after we updated what slide is shown. +function updateDisplay() { + if (currentIdx >= firstIdx && currentIdx <= lastIdx && + currentSlide.name != "toc") + subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" + + (lastIdx - firstIdx + 1) + " - " + + currentSlide.title; + else + subHeaderText.textContent = currentSlide.title; + pageTitle.textContent = headerText.textContent + ": " + currentSlide.title; + if (currentIdx > firstIdx && currentSlide.name != "toc") { + navPrev.hidden = false; + navPrev.href = "#" + articleNodes[currentIdx - 1].id; + navPrevNolink.hidden = true; + } + else { + navPrev.hidden = true; + navPrevNolink.hidden = false; + } + if (currentIdx < lastIdx && currentSlide.name != "toc") { + navNext.hidden = false; + navNext.href = "#" + articleNodes[currentIdx + 1].id; + navNextNolink.hidden = true; + } + else { + navNext.hidden = true; + navNextNolink.hidden = false; + } + headerText.className = ""; + slideStart = new Date(); + if (currentSlide.name == "toc") + createTOC(); + else + setTimeout("timerFired()", timerMSec); +} + +// Create TOC list. +function createTOC() { + var list = document.getElementById("toc-list"); + if (!list.getElementsByTagName("li").length) { + for (var slide in slides) { + if (slide != "toc") { + var item = document.createElement("li"); + var link = document.createElement("a"); + var slideHeaders = slides[slide].obj.getElementsByTagName("h1"); + if (slideHeaders.length) + link.textContent = slideHeaders[0].textContent; + else + link.textContent = slides[slide].title; + link.href = "#" + slides[slide].name; + item.appendChild(link); + list.appendChild(item); + } + } + } +} + +// Do timed color variation on slides. +function timerFired() { + var slideCurrent = new Date(); + var secondsDiff = Math.round((slideCurrent.getTime() - slideStart.getTime()) / 1000); + if (secondsDiff >= slideSeconds) { + headerText.className = "overtime"; + } + else if (secondsDiff >= Math.round(2 * slideSeconds / 3)) { + headerText.className = "ontime"; + setTimeout("timerFired()", timerMSec); + } + else if (secondsDiff >= Math.round(slideSeconds / 3)) { + headerText.className = "neartime"; + setTimeout("timerFired()", timerMSec); + } + else { + // We should never come here, but if we do, go into a 100ms loop until we get over the upcoming step. + setTimeout("timerFired()", 100); + } +} +var slideStart = new Date(); +var timerMSec = 1000 * (slideSeconds / 3); +setTimeout("timerFired()", timerMSec); + +// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007. +(function() { + function go(where) { + where = where || "next"; + var navElem = document.getElementById("nav-" + where); + if (!navElem.hidden) + window.location.href = navElem.href; + } + + function handleClick(e) { + e = e || event; + var target = (window.event) ? e.srcElement : e.target; + if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO") + go("next"); + } + + function handleKeyPress(e) { + e = e || event; + switch (e.keyCode) { + case e.DOM_VK_LEFT: + go("prev"); break; + case e.DOM_VK_RIGHT: + go("next"); break; + } + } + + window.onclick = handleClick; + window.onkeypress = handleKeyPress; +})(); diff --git a/linuxwochen2013-makey/template/LiberationSans-Bold-webfont.woff b/linuxwochen2013-makey/template/LiberationSans-Bold-webfont.woff new file mode 100644 index 0000000..974d4b6 Binary files /dev/null and b/linuxwochen2013-makey/template/LiberationSans-Bold-webfont.woff differ diff --git a/linuxwochen2013-makey/template/LiberationSans-BoldItalic-webfont.woff b/linuxwochen2013-makey/template/LiberationSans-BoldItalic-webfont.woff new file mode 100644 index 0000000..d9c813c Binary files /dev/null and b/linuxwochen2013-makey/template/LiberationSans-BoldItalic-webfont.woff differ diff --git a/linuxwochen2013-makey/template/LiberationSans-Italic-webfont.woff b/linuxwochen2013-makey/template/LiberationSans-Italic-webfont.woff new file mode 100644 index 0000000..0515cc7 Binary files /dev/null and b/linuxwochen2013-makey/template/LiberationSans-Italic-webfont.woff differ diff --git a/linuxwochen2013-makey/template/LiberationSans-Regular-webfont.woff b/linuxwochen2013-makey/template/LiberationSans-Regular-webfont.woff new file mode 100644 index 0000000..f119fc1 Binary files /dev/null and b/linuxwochen2013-makey/template/LiberationSans-Regular-webfont.woff differ diff --git a/linuxwochen2013-makey/template/LiberationSans_License.txt b/linuxwochen2013-makey/template/LiberationSans_License.txt new file mode 100644 index 0000000..c541756 --- /dev/null +++ b/linuxwochen2013-makey/template/LiberationSans_License.txt @@ -0,0 +1,78 @@ +LICENSE AGREEMENT AND LIMITED PRODUCT WARRANTY LIBERATION FONT SOFTWARE +This agreement governs the use of the Software and any updates to the +Software, regardless of the delivery mechanism. Subject to the following +terms, Red Hat, Inc. ("Red Hat") grants to the user ("Client") a license to +this collective work pursuant to the GNU General Public License v.2 with the +exceptions set forth below and such other terms as our set forth in this End +User License Agreement. +1. The Software and License Exception. LIBERATION font software (the +"Software") consists of TrueType-OpenType formatted font software for +rendering LIBERATION typefaces in sans serif, serif, and monospaced character +styles. You are licensed to use, modify, copy, and distribute the Software +pursuant to the GNU General Public License v.2 with the following exceptions: +1) As a special exception, if you create a document which uses this font, and +embed this font or unaltered portions of this font into the document, this +font does not by itself cause the resulting document to be covered by the GNU +General Public License.  This exception does not however invalidate any other +reasons why the document might be covered by the GNU General Public License.  +If you modify this font, you may extend this exception to your version of the +font, but you are not obligated to do so. If you do not wish to do so, delete +this exception statement from your version. + +2) As a further exception, any distribution of the object code of the Software +in a physical product must provide you the right to access and modify the +source code for the Software and to reinstall that modified version of the +Software in object code form on the same physical product on which you +received it. +2. Intellectual Property Rights. The Software and each of its components, +including the source code, documentation, appearance, structure and +organization are owned by Red Hat and others and are protected under copyright +and other laws. Title to the Software and any component, or to any copy, +modification, or merged portion shall remain with the aforementioned, subject +to the applicable license. The "LIBERATION" trademark is a trademark of Red +Hat, Inc. in the U.S. and other countries. This agreement does not permit +Client to distribute modified versions of the Software using Red Hat's +trademarks. If Client makes a redistribution of a modified version of the +Software, then Client must modify the files names to remove any reference to +the Red Hat trademarks and must not use the Red Hat trademarks in any way to +reference or promote the modified Software. +3. Limited Warranty. To the maximum extent permitted under applicable law, the +Software is provided and licensed "as is" without warranty of any kind, +expressed or implied, including the implied warranties of merchantability, +non-infringement or fitness for a particular purpose. Red Hat does not warrant +that the functions contained in the Software will meet Client's requirements +or that the operation of the Software will be entirely error free or appear +precisely as described in the accompanying documentation. +4. Limitation of Remedies and Liability. To the maximum extent permitted by +applicable law, Red Hat or any Red Hat authorized dealer will not be liable to +Client for any incidental or consequential damages, including lost profits or +lost savings arising out of the use or inability to use the Software, even if +Red Hat or such dealer has been advised of the possibility of such damages. +5. Export Control. As required by U.S. law, Client represents and warrants +that it: (a) understands that the Software is subject to export controls under +the U.S. Commerce Department's Export Administration Regulations ("EAR"); (b) +is not located in a prohibited destination country under the EAR or U.S. +sanctions regulations (currently Cuba, Iran, Iraq, Libya, North Korea, Sudan +and Syria); (c) will not export, re-export, or transfer the Software to any +prohibited destination, entity, or individual without the necessary export +license(s) or authorizations(s) from the U.S. Government; (d) will not use or +transfer the Software for use in any sensitive nuclear, chemical or biological +weapons, or missile technology end-uses unless authorized by the U.S. +Government by regulation or specific license; (e) understands and agrees that +if it is in the United States and exports or transfers the Software to +eligible end users, it will, as required by EAR Section 740.17(e), submit +semi-annual reports to the Commerce Department's Bureau of Industry & Security +(BIS), which include the name and address (including country) of each +transferee; and (f) understands that countries other than the United States +may restrict the import, use, or export of encryption products and that it +shall be solely responsible for compliance with any such import, use, or +export restrictions. +6. General. If any provision of this agreement is held to be unenforceable, +that shall not affect the enforceability of the remaining provisions. This +agreement shall be governed by the laws of the State of North Carolina and of +the United States, without regard to any conflict of laws provisions, except +that the United Nations Convention on the International Sale of Goods shall +not apply. +Copyright © 2007 Red Hat, Inc. All rights reserved. LIBERATION is a trademark +of Red Hat, Inc. + diff --git a/linuxwochen2013-makey/template/kairologo60.png b/linuxwochen2013-makey/template/kairologo60.png new file mode 100644 index 0000000..0c69de4 Binary files /dev/null and b/linuxwochen2013-makey/template/kairologo60.png differ diff --git a/linuxwochen2013-makey/template/page-background-top.png b/linuxwochen2013-makey/template/page-background-top.png new file mode 100644 index 0000000..666910c Binary files /dev/null and b/linuxwochen2013-makey/template/page-background-top.png differ diff --git a/linuxwochen2013-mozilla/cc-by-sa-80x15.png b/linuxwochen2013-mozilla/cc-by-sa-80x15.png new file mode 100644 index 0000000..c67509f Binary files /dev/null and b/linuxwochen2013-mozilla/cc-by-sa-80x15.png differ diff --git a/linuxwochen2013-mozilla/index.html b/linuxwochen2013-mozilla/index.html new file mode 100755 index 0000000..8de9e65 --- /dev/null +++ b/linuxwochen2013-mozilla/index.html @@ -0,0 +1,93 @@ + + + + + + Mozilla - Das Web ist die Plattform + + + + + + + + + + +
+

Inhalt

+

Mozilla - Das Web ist die Plattform

+ +
+

Folgende Folien sind in dieser Präsentation enthalten:

+
+
    +
+
+ +
+

Mozilla - Das Web ist die Plattform

+

Aktuelle Entwicklungen im Mozilla-Projekt

+ +
+Robert Kaiser, +"KaiRo" <kairo@kairo.at> +
Mozilla-Stabilitäts-Manager +
+ +
+

Folien: + http://slides.kairo.at/linuxwochen2013-mozilla/

+
+
    +
  • Erstellt für einen + Vortrag + auf den Linuxwochen 2013 in Wien.
    • +
  • Geschrieben in HTML 5 mit CSS 3 und JavaScript.
    • +
  • Navigation mit Links auf allen Folien, mit Accesskeys + (e.g. "n"/Alt+Shift+N für "next"/weiter) oder vor/zurück-Pfeilasten
    • +
  • Inhalt
    • +
  • Lizenziert unter CC-BY-SA, 04/2013 Robert Kaiser
    • +
+
+
+
+ +
+

15 Jahre Mozilla-Geschichte

+ +
+
    +
  • Freigabe des Netscape-Quellcodes am 31. März 1998
    • +
  • Unter dem langjährigen Netscape-Codenamen "Mozilla"
    • +
  • Firefox 1.0 im November 2004
    • +
+
+
+ + + + + diff --git a/linuxwochen2013-mozilla/slides.css b/linuxwochen2013-mozilla/slides.css new file mode 100644 index 0000000..7316fce --- /dev/null +++ b/linuxwochen2013-mozilla/slides.css @@ -0,0 +1,292 @@ +/************************** + * styles for talk slides * + * by Robert Kaiser * + * * + * (for FOSDEM 2013) * + **************************/ + + +/***** base style *****/ + +@font-face { + font-family: 'Open Sans'; + src: url('template/OpenSans-Regular-webfont.woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('template/OpenSans-Semibold-webfont.woff'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: url('template/OpenSans-Italic-webfont.woff'); + font-weight: normal; + font-style: italic; +} + +html { + overflow: hidden; /* to make translations not paint scrollbars */ + background: #f5f1e8 url("template/page-background.png") top left repeat; + height: 100%; +} + +body { + margin: 0px; + padding: 0px; + border: 0px; + font-family: "Open Sans", sans-serif; + font-size: 2em; + color: #333333; + background: url("template/page-background-top.png") top left repeat-x; + height: 100%; +} + +ul { + padding-left: 1.2em; + margin-bottom: 0.5em; +} + +ul:first-child, +ul:last-child { + margin-top: 0; +} + +#header { + height: 40px; + position: relative; + border-top: 1px solid white; +} + +#headerlogo { + position: absolute; + display: block; + right: 20px; + top: 0; + text-indent: -2000px; + font-size: 1px; + overflow: hidden; + height: 41px; + width: 148px; + background: url("template/mozilla-tab.png") no-repeat; +} + +#header-text { + position: relative; + top: 5px; + left: 25px; + font-size: 20px; + font-weight: bold; + color: #808080; +} + +#header-text.neartime { + color: #80AACC; +} + +#header-text.ontime { + color: #80CC80; +} + +#header-text.overtime { + color: #FF8080; +} + +#subheader-text { + color: #808080; + position: relative; + top: 3px; + left: 25px; + font-size: 10px; +} + +#slidenav { + position: absolute; + right: 200px; + top: 15px; + font-size: 10px; +} + +#slidenav a:link, +#slidenav a:visited { + color: #484848; +} + +#slidenav a:hover, +#slidenav a:active { + color: #0073aa; +} + +#slidenav .nolink { + color: #A0A0A0; +} + +article { + position: absolute; + width: 100%; + /* header is 40px, 7px to have a bit of distance, + * 3px height-reducing on the bottom for safety */ + top: 47px; + height: calc(100% - 50px); + overflow: auto; + + transition-property: transform, opacity; + transition-duration: 3s; + transition-timing-function: ease; + transform-origin: center 5em; + + opacity: 0; +/* + transform: translate(-100%, 0); +*/ +/* + transform: scale(0.1) rotate(360deg); +*/ + transform: scale(0.1) rotate(360deg) translate(-200%, 0); +} + +article[aria-selected="true"] { + opacity: 1; + transform: scale(1) rotate(0deg) translate(0, 0); +} + +article[aria-selected="true"] ~ article { + opacity: 0; +/* + transform: translate(100%, 0); +*/ +/* + transform: scale(0.1) rotate(-360deg); +*/ + transform: scale(0.1) rotate(-360deg) translate(200%, 0); +} + +/***** headers *****/ + +h1, h2, h3, h4 { + margin: 0.5em 0; + font-weight: bold; + color: #484848; + text-align: center; +} + +h1 { + margin-top: 0; + font-size: 1.7em; + text-shadow: #AAAA80 3px 3px 5px; +} + +h2 { + font-size: 1.3em; + text-shadow: #AAAA80 2px 2px 3px; +} + +h3 { + font-size: 1.1em; +} + +h4 { + font-size: 1em; + text-align: left; +} + +/***** boxes *****/ + +.simplebox { + padding: 0.5em; +} + +.captionedbox { + padding: 0px; +} + +.simplebox, +.captionedbox { + margin: 1em; + box-shadow: 0 0 0 1px #fff inset; + background: #fff; + background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%); + border-bottom: 1px solid #ddd; +} + +.captionedbox-content { + margin: 0; + padding: 0.5em; + border: 0px; + border-top: 1px solid #d6d6d6; +} + +.captionedbox-caption { + margin: 0; + padding: 0.5em; + font-weight: bold; + text-shadow: #AAAA80 1px 1px 2px; +} + +/***** misc formatting *****/ + +mark { + font-weight: bold; + color: #FF6600; + background-color: transparent; + text-shadow: #AAAA80 2px 2px 3px; +} + +.border { + border: 1px solid #6d7581; + padding: 0.5em; +} + +.sshot { + box-shadow: #6d7581 1px 1px 3px 2px; +} + +ul > li { + margin: 0.5em 0; +} + +.cent { + text-align: center; +} + +.topmargin { + margin-top: 0.5em; +} + +.akey { + text-decoration: underline; +} + +a:link, a:visited { color: #0096dd; text-decoration: none; } +a:hover, a:active { color: #FF6600; text-decoration: underline; } + +mark a:link, mark a:visited { color: #FF6600; } +mark a:hover, mark a:active { color: #FF6600; } + +/***** small stuff *****/ + +.small, +.small { + font-size: 0.75em; +} + +ul.small, +.small ul { + padding: 0px; + border: 0px; + margin: 0px 0px 0px 1em; +} + +ul.small > li +.small ul > li { + margin: 0px; + padding: 0px; + border: 0px; +} + +/***** specific slides *****/ + diff --git a/linuxwochen2013-mozilla/slides.js b/linuxwochen2013-mozilla/slides.js new file mode 100644 index 0000000..306a95c --- /dev/null +++ b/linuxwochen2013-mozilla/slides.js @@ -0,0 +1,200 @@ +/****************************** + * JavaScript for talk slides * + * by Robert Kaiser * + * * + * (for FOSDEM 2011) * + ******************************/ + +var slides = {}; +var articleNodes; +var currentSlide; +var currentIdx; +var defaultIdx = 1; // set to slide index to show by default +var firstIdx = 2; // set no value if to use first available +var lastIdx; // set no value if to use first available + +var pageTitle, headerText, subHeaderText; +var navPrev, navNext, navPrevNolink, navNextNolink; + +// Slide timer - color variation of headerText +var slideSeconds = 3 * 60; + +// Called when the document has been loaded. +function docLoaded() { + pageTitle = document.getElementsByTagName("title")[0]; + headerText = document.getElementById("header-text"); + subHeaderText = document.getElementById("subheader-text"); + navPrev = document.getElementById("nav-prev"); + navNext = document.getElementById("nav-next"); + navPrevNolink = document.getElementById("nav-prev-nolink"); + navNextNolink = document.getElementById("nav-next-nolink"); + articleNodes = document.getElementsByTagName("article"); + + if (!firstIdx) + firstIdx = 0; + if (!lastIdx) + lastIdx = articleNodes.length - 1; + + // Get a list of all slides (articles). + subHeaderText.textContent = articleNodes.length + " slides..."; + for (var i = 0; i < articleNodes.length; ++i) { + subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length; + if (!articleNodes[i].id) + articleNodes[i].id = "slide_" + i; + + slides[articleNodes[i].id] = + {"idx": i, + "name": articleNodes[i].id, + "title": articleNodes[i].title ? articleNodes[i].title : articleNodes[i].id, + "obj": articleNodes[i]}; + + if (location.hash.length && + (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) { + articleNodes[i].setAttribute("aria-selected", "true"); + currentSlide = slides[articleNodes[i].id]; + currentIdx = i; + } + } + + if (!currentSlide) { + currentIdx = defaultIdx; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + location.hash = "#" + currentSlide.name; + } + updateDisplay(); +} + +// Called when the hash part of the location changes. +function locationHashChanged() { + if (location.hash.length > 1) { + var hashtag = location.hash.substring(1); + // If not a number, treat as ID + if (isNaN(hashtag) && slides[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentSlide = slides[hashtag]; + currentIdx = currentSlide.idx; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + else if (articleNodes[hashtag]) { + currentSlide.obj.removeAttribute("aria-selected"); + currentIdx = hashtag; + currentSlide = slides[articleNodes[currentIdx].id]; + currentSlide.obj.setAttribute("aria-selected", "true"); + updateDisplay(); + } + } +} +window.onhashchange = locationHashChanged; + +// Update the display after we updated what slide is shown. +function updateDisplay() { + if (currentIdx >= firstIdx && currentIdx <= lastIdx && + currentSlide.name != "toc") + subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" + + (lastIdx - firstIdx + 1) + " - " + + currentSlide.title; + else + subHeaderText.textContent = currentSlide.title; + pageTitle.textContent = headerText.textContent + ": " + currentSlide.title; + if (currentIdx > firstIdx && currentSlide.name != "toc") { + navPrev.hidden = false; + navPrev.href = "#" + articleNodes[currentIdx - 1].id; + navPrevNolink.hidden = true; + } + else { + navPrev.hidden = true; + navPrevNolink.hidden = false; + } + if (currentIdx < lastIdx && currentSlide.name != "toc") { + navNext.hidden = false; + navNext.href = "#" + articleNodes[currentIdx + 1].id; + navNextNolink.hidden = true; + } + else { + navNext.hidden = true; + navNextNolink.hidden = false; + } + headerText.className = ""; + slideStart = new Date(); + if (currentSlide.name == "toc") + createTOC(); + else + setTimeout("timerFired()", timerMSec); +} + +// Create TOC list. +function createTOC() { + var list = document.getElementById("toc-list"); + if (!list.getElementsByTagName("li").length) { + for (var slide in slides) { + if (slide != "toc") { + var item = document.createElement("li"); + var link = document.createElement("a"); + var slideHeaders = slides[slide].obj.getElementsByTagName("h1"); + if (slideHeaders.length) + link.textContent = slideHeaders[0].textContent; + else + link.textContent = slides[slide].title; + link.href = "#" + slides[slide].name; + item.appendChild(link); + list.appendChild(item); + } + } + } +} + +// Do timed color variation on slides. +function timerFired() { + var slideCurrent = new Date(); + var secondsDiff = Math.round((slideCurrent.getTime() - slideStart.getTime()) / 1000); + if (secondsDiff >= slideSeconds) { + headerText.className = "overtime"; + } + else if (secondsDiff >= Math.round(2 * slideSeconds / 3)) { + headerText.className = "ontime"; + setTimeout("timerFired()", timerMSec); + } + else if (secondsDiff >= Math.round(slideSeconds / 3)) { + headerText.className = "neartime"; + setTimeout("timerFired()", timerMSec); + } + else { + // We should never come here, but if we do, go into a 100ms loop until we get over the upcoming step. + setTimeout("timerFired()", 100); + } +} +var slideStart = new Date(); +var timerMSec = 1000 * (slideSeconds / 3); +setTimeout("timerFired()", timerMSec); + +// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007. +(function() { + function go(where) { + where = where || "next"; + var navElem = document.getElementById("nav-" + where); + if (!navElem.hidden) + window.location.href = navElem.href; + } + + function handleClick(e) { + e = e || event; + var target = (window.event) ? e.srcElement : e.target; + if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO") + go("next"); + } + + function handleKeyPress(e) { + e = e || event; + switch (e.keyCode) { + case e.DOM_VK_LEFT: + go("prev"); break; + case e.DOM_VK_RIGHT: + go("next"); break; + } + } + + window.onclick = handleClick; + window.onkeypress = handleKeyPress; +})(); diff --git a/linuxwochen2013-mozilla/template/OpenSans-Italic-webfont.woff b/linuxwochen2013-mozilla/template/OpenSans-Italic-webfont.woff new file mode 100644 index 0000000..1ed8ab9 Binary files /dev/null and b/linuxwochen2013-mozilla/template/OpenSans-Italic-webfont.woff differ diff --git a/linuxwochen2013-mozilla/template/OpenSans-Regular-webfont.woff b/linuxwochen2013-mozilla/template/OpenSans-Regular-webfont.woff new file mode 100644 index 0000000..bd0f824 Binary files /dev/null and b/linuxwochen2013-mozilla/template/OpenSans-Regular-webfont.woff differ diff --git a/linuxwochen2013-mozilla/template/OpenSans-Semibold-webfont.woff b/linuxwochen2013-mozilla/template/OpenSans-Semibold-webfont.woff new file mode 100644 index 0000000..3a78f75 Binary files /dev/null and b/linuxwochen2013-mozilla/template/OpenSans-Semibold-webfont.woff differ diff --git a/linuxwochen2013-mozilla/template/mozilla-tab.png b/linuxwochen2013-mozilla/template/mozilla-tab.png new file mode 100644 index 0000000..87f8ef9 Binary files /dev/null and b/linuxwochen2013-mozilla/template/mozilla-tab.png differ diff --git a/linuxwochen2013-mozilla/template/page-background-top.png b/linuxwochen2013-mozilla/template/page-background-top.png new file mode 100644 index 0000000..ae82378 Binary files /dev/null and b/linuxwochen2013-mozilla/template/page-background-top.png differ diff --git a/linuxwochen2013-mozilla/template/page-background.png b/linuxwochen2013-mozilla/template/page-background.png new file mode 100644 index 0000000..6b2d79d Binary files /dev/null and b/linuxwochen2013-mozilla/template/page-background.png differ