push first version of svg open 2010 slides
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1682 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Pavol Rusnak
parent
f37aaf8d39
commit
486b042996
|
|
@ -0,0 +1,296 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--
|
||||||
|
Copyright 2010 Google Inc.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
Original slides: Marcin Wichary (mwichary@google.com)
|
||||||
|
Modifications: Ernest Delgado (ernestd@google.com)
|
||||||
|
Alex Russell (slightlyoff@chromium.org)
|
||||||
|
Brad Neuberg
|
||||||
|
SVG-edit presentation: Pavol Rusnak (stick@gk2.sk)
|
||||||
|
-->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!--[if gte IE 9]>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>SVG-edit, Pavol Rusnák, SVG Open 2010, Paris</title>
|
||||||
|
<link href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono" rel="stylesheet" type="text/css" />
|
||||||
|
<link type="text/css" rel="stylesheet" href="style.css" />
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="presentation">
|
||||||
|
<div id="presentation-counter"></div>
|
||||||
|
<div class="slides">
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section class="middle">
|
||||||
|
<h1 style="font-size: 220%;">SVG-edit</h1>
|
||||||
|
<p><img src="logo.svg" alt="logo" width="30%" height="30%" /></p>
|
||||||
|
<h2>Pavol Rusnák</h2>
|
||||||
|
<h3>SVG Open 2010, Paris</h3>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>SVG-edit is ...</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>a web-based, JavaScript-driven SVG editor that works in any modern browser</li>
|
||||||
|
<li>not a full replacement for Inkscape</li>
|
||||||
|
<li>licensed under open source license (Apache License 2.0)</li>
|
||||||
|
<li>platform for other projects which need to edit SVG documents</li>
|
||||||
|
<li>pushing browsers to find their limits</li>
|
||||||
|
<li>always up-to-date</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>History: version 1.0 (13th Feb 2009)</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>draw path, line, freehand-circle, rectangle</li>
|
||||||
|
<li>clear drawn image</li>
|
||||||
|
<li>delete element</li>
|
||||||
|
<li>save image</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/1.0/editor/svg-editor.html">_</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>History: version 2.0 (3rd June 2009)</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>draw ellipse, square</li>
|
||||||
|
<li>change stroke-dasharray (line style)</li>
|
||||||
|
<li>rearranged whole code to OOP</li>
|
||||||
|
<li>GUI enhancement</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.0/editor/svg-editor.html">_</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>History: version 2.1 (17th June 2009)</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>tooltips added to all UI elements</li>
|
||||||
|
<li>edit of fill opacity, stroke opacity, group opacity</li>
|
||||||
|
<li>selection of elements</li>
|
||||||
|
<li>move/drag of elements</li>
|
||||||
|
<li>save SVG file to separate tab</li>
|
||||||
|
<li>create and edit text elements</li>
|
||||||
|
<li>contextual panel of tools</li>
|
||||||
|
<li>change rect radius, font-family, font-size</li>
|
||||||
|
<li>keystroke handling</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.1/editor/svg-editor.html">_</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>History: version 2.2 (8th July 2009)</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>Multiselect Mode</li>
|
||||||
|
<li>Undo/Redo Actions</li>
|
||||||
|
<li>Resize Elements</li>
|
||||||
|
<li>Contextual tools for rect, circle, ellipse, line, text elements</li>
|
||||||
|
<li>Some updated button images</li>
|
||||||
|
<li>Stretched the UI to fit the browser window</li>
|
||||||
|
<li>Resizing of the SVG canvas</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.2/editor/svg-editor.html">_</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>History: version 2.3 (8th Sept 2009)</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>Align Objects</li>
|
||||||
|
<li>Rotate Objects</li>
|
||||||
|
<li>Clone Objects</li>
|
||||||
|
<li>Select Next/Prev Object</li>
|
||||||
|
<li>Edit SVG Source</li>
|
||||||
|
<li>Gradient picking</li>
|
||||||
|
<li>Polygon Mode (Path Editing, Phase 1)</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.3/editor/svg-editor.html">_</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>History: version 2.4 (11th Jan 2010)</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>Raster Images</li>
|
||||||
|
<li>Select Non-Adjacent Elements</li>
|
||||||
|
<li>Group/Ungroup</li>
|
||||||
|
<li>Zoom</li>
|
||||||
|
<li>Layers</li>
|
||||||
|
<li>Curve Segments in Paths</li>
|
||||||
|
<li>UI Localization</li>
|
||||||
|
<li>Wireframe Mode</li>
|
||||||
|
<li>Change Background</li>
|
||||||
|
<li>Convert Shapes to Path</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html">_</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>History: version 2.5 (15th June 2010)</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>Open Local Files (Fx 3.6+, Chrome 6+ only)</li>
|
||||||
|
<li>Import SVG into Drawing (Fx 3.6+, Chrome 6+ only)</li>
|
||||||
|
<li>Connector lines and Arrows</li>
|
||||||
|
<li>Smoother freehand paths</li>
|
||||||
|
<li>Editing outside the canvas</li>
|
||||||
|
<li>Increased support for SVG elements</li>
|
||||||
|
<li>Add/edit Sub-paths</li>
|
||||||
|
<li>Multiple path segment selection</li>
|
||||||
|
<li>Support for foreign markup (MathML)</li>
|
||||||
|
<li>Radial Gradients</li>
|
||||||
|
<li>Eye-dropper tool</li>
|
||||||
|
<li>Stroke linejoin and linecap</li>
|
||||||
|
<li>Export to PNG</li>
|
||||||
|
</ul>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/branches/2.5/editor/svg-editor.html">_</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Plugin Architecture</h2>
|
||||||
|
</header>
|
||||||
|
<pre>
|
||||||
|
svgEditor.addExtension("Hello World", function() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
svgicons: "extensions/helloworld-icon.xml",
|
||||||
|
buttons: [{...}],
|
||||||
|
mouseDown: function() {
|
||||||
|
...
|
||||||
|
},
|
||||||
|
|
||||||
|
mouseUp: function(opts) {
|
||||||
|
...
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});</pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Features being implemented right now</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>IE9 support</li>
|
||||||
|
<li>Linking off to clipart/image library sites</li>
|
||||||
|
<li>Context menus</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section class="middle">
|
||||||
|
<h2>Demo</h2>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html">stable</a></p>
|
||||||
|
<p><a href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html">trunk</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Projects based on SVG-edit</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li>Firefox add-on</li>
|
||||||
|
<li>Opera widget</li>
|
||||||
|
<li>Google Wave gadget</li>
|
||||||
|
<li>Wiki extensions (Dokuwiki, Instiki, MoinMoin, XWiki)</li>
|
||||||
|
<li><a href="http://www.cloud-canvas.com/cloudcanvas.php">Cloud Canvas</a></li>
|
||||||
|
<li>Eduvid</li>
|
||||||
|
<li>Sesame</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Resources</h2>
|
||||||
|
</header>
|
||||||
|
<ul class="bulleted">
|
||||||
|
<li><a href="http://svg-edit.googlecode.com">http://svg-edit.googlecode.com/</a> (demos, downloads, source, wiki, issue tracker)</li>
|
||||||
|
<li>#svg-edit on irc.freenode.net</li>
|
||||||
|
<li><a href="http://groups.google.com/group/svg-edit">http://groups.google.com/group/svg-edit</a></li>
|
||||||
|
<li><a href="http://en.wikipedia.org/wiki/SVG-edit">http://en.wikipedia.org/wiki/SVG-edit</a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="slide">
|
||||||
|
<section class="middle">
|
||||||
|
<h2>Thank you!</h2>
|
||||||
|
<h3>Questions?</h3>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- slides -->
|
||||||
|
|
||||||
|
</div> <!-- presentation -->
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script
|
||||||
|
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
|
||||||
|
</script>
|
||||||
|
<script>CFInstall.check({ mode: "overlay" });</script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<svg viewBox="0 0 478 472" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="svg_5" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#ffffe0" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#edc39c" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="svg_10" x1="0.57031" y1="0.78125" x2="0.28906" y2="0.41406">
|
||||||
|
<stop offset="0" stop-color="#ff7f00" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#ffff00"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="svg_18" x1="0.37891" y1="0.35938" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#e0e0e0" stop-opacity="1"/>
|
||||||
|
<stop offset="1" stop-color="#666666" stop-opacity="1"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g>
|
||||||
|
<title>Layer 1</title>
|
||||||
|
<path d="m68.82031,270.04688l-22,-33l17,-35l34,2l25,15l7,-35l28,-16l25,12l100,102l21,23l-15,35l-36,9l20,49l-31,24l-49,-17l-1,31l-33,21l-31,-19l-13,-35l-30,21l-30,-9l-5,-35l16,-31l-32,-6l-15,-19l3,-36l47,-18z" id="svg_19" fill="#ffffff"/>
|
||||||
|
<path fill="#1a171a" fill-rule="nonzero" id="path2902" d="m158.96452,155.03685c-25.02071,0 -45.37077,20.35121 -45.37077,45.3775c0,0.72217 0.01794,1.4399 0.0471,2.15645c-0.49339,-0.53604 -0.99355,-1.06085 -1.50603,-1.58452c-8.56077,-8.55519 -19.95982,-13.28413 -32.07432,-13.28413c-12.12122,0 -23.52027,4.72334 -32.08778,13.29646c-17.69347,17.69464 -17.69347,46.4619 0,64.17445c0.51809,0.51697 1.0485,1.0126 1.59015,1.50601c-0.72891,-0.03586 -1.45782,-0.04822 -2.19234,-0.04822c-25.02071,0 -45.37189,20.35117 -45.37189,45.37747c0,25.01398 20.35119,45.36517 45.37189,45.36517c0.72891,0 1.45221,-0.01236 2.1744,-0.04828c-0.5293,0.48221 -1.05412,0.98801 -1.56547,1.49368c-17.70021,17.68906 -17.70021,46.48654 -0.00628,64.18677c8.57872,8.56747 19.96655,13.2785 32.08778,13.2785c12.1145,0 23.5012,-4.71103 32.07433,-13.2785c0.51247,-0.51694 1.01823,-1.04849 1.50603,-1.57895c-0.02915,0.71213 -0.04709,1.44669 -0.04709,2.15759c0,25.01511 20.35007,45.37747 45.37077,45.37747c25.01398,0 45.37079,-20.3624 45.37079,-45.37747c0,-0.7222 -0.01689,-1.44553 -0.05266,-2.18112c0.48105,0.52933 0.97562,1.04849 1.48697,1.56662c8.57982,8.57977 19.97775,13.2908 32.1057,13.2908c12.11003,0 23.51358,-4.71103 32.0687,-13.2785c17.68906,-17.70013 17.68906,-46.48538 0,-64.17441c-0.50577,-0.4946 -1.01141,-1.00034 -1.54306,-1.48248c0.69983,0.03592 1.42316,0.04828 2.16992,0.04828c25.01514,0 45.35284,-20.35123 45.35284,-45.36517c0,-25.02631 -20.33774,-45.37747 -45.35284,-45.37747c-0.74683,0 -1.47009,0.01236 -2.19345,0.04822c0.53152,-0.49341 1.06082,-0.98904 1.59128,-1.50601c8.55521,-8.55521 13.2785,-19.94186 13.2785,-32.07545c0,-12.12793 -4.72336,-23.52028 -13.30319,-32.0934c-8.55515,-8.56076 -19.95866,-13.2841 -32.0687,-13.2841c-12.12122,0 -23.52025,4.72334 -32.08777,13.2841c-0.51137,0.5181 -1.01822,1.04851 -1.5049,1.57895c0.03586,-0.72331 0.05266,-1.43991 0.05266,-2.16881c0,-25.02629 -20.35681,-45.3775 -45.37079,-45.3775m0,20.71901c13.61607,0 24.65851,11.03122 24.65851,24.65849c0,6.62749 -2.651,12.62137 -6.9101,17.04979l0,51.67419l36.53975,-36.53523c0.12001,-6.14418 2.48277,-12.24686 7.18146,-16.94667c4.81305,-4.81305 11.12094,-7.22409 17.44116,-7.22409c6.30228,0 12.61577,2.41104 17.43552,7.22409c9.62166,9.63287 9.62166,25.24948 0,34.87669c-4.69977,4.68634 -10.80803,7.04915 -16.95334,7.18147l-36.5341,36.53305l51.66742,0c4.42841,-4.25351 10.42905,-6.90451 17.08008,-6.90451c13.59137,0 24.62933,11.03799 24.62933,24.66525c0,13.61606 -11.03796,24.66519 -24.62933,24.66519c-6.65106,0 -12.65167,-2.66333 -17.08008,-6.91681l-51.64836,0l36.50273,36.50946c6.16995,0.14465 12.26587,2.50522 16.96568,7.20618c9.6216,9.61487 9.6216,25.23151 0,34.85757c-4.80856,4.81979 -11.13327,7.22974 -17.43556,7.22974c-6.32019,0 -12.63371,-2.40991 -17.44786,-7.22974c-4.68074,-4.68744 -7.04802,-10.79572 -7.17473,-16.94098l-36.53975,-36.53415l0,51.66742c4.25908,4.44635 6.9101,10.43466 6.9101,17.0621c0,13.62729 -11.04243,24.66415 -24.65851,24.66415c-13.62166,0 -24.65848,-11.0369 -24.65848,-24.66415c0,-6.62744 2.64539,-12.61575 6.90335,-17.0621l0,-51.66742l-36.53864,36.54648c-0.12672,6.14413 -2.48838,12.26477 -7.18147,16.94098c-4.81416,4.81873 -11.12206,7.22974 -17.42882,7.22974c-6.31461,0 -12.6225,-2.41101 -17.43555,-7.22974c-9.63284,-9.62833 -9.63284,-25.24277 0,-34.8699c4.68073,-4.67627 10.79012,-7.05026 16.94101,-7.18262l36.533,-36.53302l-51.66632,0c-4.44075,4.25348 -10.42902,6.91681 -17.06211,6.91681c-13.61606,0 -24.65288,-11.04913 -24.65288,-24.66519c0,-13.62726 11.03682,-24.66525 24.65288,-24.66525c6.63309,0 12.62136,2.651 17.06211,6.90451l51.68537,0l-36.55208,-36.54538c-6.14527,-0.12 -12.25354,-2.49403 -16.94775,-7.19377c-9.62611,-9.61493 -9.62611,-25.23715 0,-34.86441c4.81419,-4.81305 11.12769,-7.22406 17.44228,-7.22406c6.30676,0 12.61465,2.41101 17.42883,7.22406c4.69978,4.69307 7.06034,10.80246 7.18144,16.94777l36.5386,36.53299l0,-51.66074c-4.25795,-4.42841 -6.90334,-10.42229 -6.90334,-17.04979c0,-13.62726 11.03682,-24.65848 24.65848,-24.65848"/>
|
||||||
|
<path d="m188.82031,210.04688l16,-47l155,-148l107,100l-158,156.99999l-44,12l-76,-74z" id="svg_6" fill="url(#svg_10)" stroke="#ffffff" stroke-width="0"/>
|
||||||
|
<path d="m335.57031,40.29688c-11.5,39.75 55.5,115.25 109.25,98.75l21,-20.99999l-103,-101l-27.25,23.25z" id="svg_11" fill="url(#svg_18)" stroke="#ffffff" stroke-width="0"/>
|
||||||
|
<rect x="272.80404" y="20.76382" width="42.35197" height="232.66835" id="svg_13" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 293.98, 137.1)" opacity="0.4"/>
|
||||||
|
<rect x="282.80404" y="22.76382" width="14" height="232.66835" fill="#ffffff" stroke="#ffffff" stroke-width="0" transform="rotate(45.9094, 289.805, 139.1)" opacity="0.4" id="svg_14"/>
|
||||||
|
<ellipse cx="415.13312" cy="64.38066" id="svg_12" fill="#ea7598" stroke="#ffffff" stroke-width="0" rx="67.79251" ry="34.82026" transform="rotate(39.4735, 415.133, 64.379)"/>
|
||||||
|
<path d="m212.07031,166.04688c-8.5,47 36.25,103.75 99.25,96.75l-152.5,53.25l53.25,-150z" id="svg_4" fill="url(#svg_5)" stroke="#ffffff" stroke-width="0"/>
|
||||||
|
<path d="m181.32031,242.54688c0.5,20.5 26.75,45 46.75,48.5l-66.25,20l19.5,-68.5z" id="svg_3" fill="#27382f" stroke="#ffffff" stroke-width="0"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<title>Layer 2</title>
|
||||||
|
<path d="m152.82031,317.04688l51,-152l157,-153c40,-12.00001 118,48 105,105l-157,152.99999l-156,47z" id="svg_1" fill="none" stroke="#800000" stroke-width="17"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
|
@ -0,0 +1,390 @@
|
||||||
|
(function() {
|
||||||
|
var doc = document;
|
||||||
|
var disableBuilds = true;
|
||||||
|
|
||||||
|
var ctr = 0;
|
||||||
|
var spaces = /\s+/, a1 = [''];
|
||||||
|
|
||||||
|
var toArray = function(list) {
|
||||||
|
return Array.prototype.slice.call(list || [], 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
var byId = function(id) {
|
||||||
|
if (typeof id == 'string') { return doc.getElementById(id); }
|
||||||
|
return id;
|
||||||
|
};
|
||||||
|
|
||||||
|
var query = function(query, root) {
|
||||||
|
if (!query) { return []; }
|
||||||
|
if (typeof query != 'string') { return toArray(query); }
|
||||||
|
if (typeof root == 'string') {
|
||||||
|
root = byId(root);
|
||||||
|
if(!root){ return []; }
|
||||||
|
}
|
||||||
|
|
||||||
|
root = root || document;
|
||||||
|
var rootIsDoc = (root.nodeType == 9);
|
||||||
|
var doc = rootIsDoc ? root : (root.ownerDocument || document);
|
||||||
|
|
||||||
|
// rewrite the query to be ID rooted
|
||||||
|
if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
|
||||||
|
root.id = root.id || ('qUnique' + (ctr++));
|
||||||
|
query = '#' + root.id + ' ' + query;
|
||||||
|
}
|
||||||
|
// don't choke on something like ".yada.yada >"
|
||||||
|
if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
|
||||||
|
|
||||||
|
return toArray(doc.querySelectorAll(query));
|
||||||
|
};
|
||||||
|
|
||||||
|
var strToArray = function(s) {
|
||||||
|
if (typeof s == 'string' || s instanceof String) {
|
||||||
|
if (s.indexOf(' ') < 0) {
|
||||||
|
a1[0] = s;
|
||||||
|
return a1;
|
||||||
|
} else {
|
||||||
|
return s.split(spaces);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
};
|
||||||
|
|
||||||
|
var addClass = function(node, classStr) {
|
||||||
|
classStr = strToArray(classStr);
|
||||||
|
var cls = ' ' + node.className + ' ';
|
||||||
|
for (var i = 0, len = classStr.length, c; i < len; ++i) {
|
||||||
|
c = classStr[i];
|
||||||
|
if (c && cls.indexOf(' ' + c + ' ') < 0) {
|
||||||
|
cls += c + ' ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
node.className = cls.trim();
|
||||||
|
};
|
||||||
|
|
||||||
|
var removeClass = function(node, classStr) {
|
||||||
|
var cls;
|
||||||
|
if (classStr !== undefined) {
|
||||||
|
classStr = strToArray(classStr);
|
||||||
|
cls = ' ' + node.className + ' ';
|
||||||
|
for (var i = 0, len = classStr.length; i < len; ++i) {
|
||||||
|
cls = cls.replace(' ' + classStr[i] + ' ', ' ');
|
||||||
|
}
|
||||||
|
cls = cls.trim();
|
||||||
|
} else {
|
||||||
|
cls = '';
|
||||||
|
}
|
||||||
|
if (node.className != cls) {
|
||||||
|
node.className = cls;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var toggleClass = function(node, classStr) {
|
||||||
|
var cls = ' ' + node.className + ' ';
|
||||||
|
if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
|
||||||
|
removeClass(node, classStr);
|
||||||
|
} else {
|
||||||
|
addClass(node, classStr);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var ua = navigator.userAgent;
|
||||||
|
var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
|
||||||
|
var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
|
||||||
|
var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
|
||||||
|
|
||||||
|
var canTransition = (function() {
|
||||||
|
var ver = parseFloat(ua.split('Version/')[1]) || undefined;
|
||||||
|
// test to determine if this browser can handle CSS transitions.
|
||||||
|
var cachedCanTransition =
|
||||||
|
(isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
|
||||||
|
return function() { return cachedCanTransition; }
|
||||||
|
})();
|
||||||
|
|
||||||
|
//
|
||||||
|
// Slide class
|
||||||
|
//
|
||||||
|
var Slide = function(node, idx) {
|
||||||
|
this._node = node;
|
||||||
|
if (idx >= 0) {
|
||||||
|
this._count = idx + 1;
|
||||||
|
}
|
||||||
|
if (this._node) {
|
||||||
|
addClass(this._node, 'slide distant-slide');
|
||||||
|
}
|
||||||
|
this._makeCounter();
|
||||||
|
this._makeBuildList();
|
||||||
|
};
|
||||||
|
|
||||||
|
Slide.prototype = {
|
||||||
|
_node: null,
|
||||||
|
_count: 0,
|
||||||
|
_buildList: [],
|
||||||
|
_visited: false,
|
||||||
|
_currentState: '',
|
||||||
|
_states: [ 'distant-slide', 'far-past',
|
||||||
|
'past', 'current', 'future',
|
||||||
|
'far-future', 'distant-slide' ],
|
||||||
|
setState: function(state) {
|
||||||
|
if (typeof state != 'string') {
|
||||||
|
state = this._states[state];
|
||||||
|
}
|
||||||
|
if (state == 'current' && !this._visited) {
|
||||||
|
this._visited = true;
|
||||||
|
this._makeBuildList();
|
||||||
|
}
|
||||||
|
removeClass(this._node, this._states);
|
||||||
|
addClass(this._node, state);
|
||||||
|
this._currentState = state;
|
||||||
|
|
||||||
|
// delay first auto run. Really wish this were in CSS.
|
||||||
|
/*
|
||||||
|
this._runAutos();
|
||||||
|
*/
|
||||||
|
var _t = this;
|
||||||
|
setTimeout(function(){ _t._runAutos(); } , 400);
|
||||||
|
},
|
||||||
|
_makeCounter: function() {
|
||||||
|
if(!this._count || !this._node) { return; }
|
||||||
|
var c = doc.createElement('span');
|
||||||
|
c.innerHTML = this._count;
|
||||||
|
c.className = 'counter';
|
||||||
|
this._node.appendChild(c);
|
||||||
|
},
|
||||||
|
_makeBuildList: function() {
|
||||||
|
this._buildList = [];
|
||||||
|
if (disableBuilds) { return; }
|
||||||
|
if (this._node) {
|
||||||
|
this._buildList = query('[data-build] > *', this._node);
|
||||||
|
}
|
||||||
|
this._buildList.forEach(function(el) {
|
||||||
|
addClass(el, 'to-build');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
_runAutos: function() {
|
||||||
|
if (this._currentState != 'current') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// find the next auto, slice it out of the list, and run it
|
||||||
|
var idx = -1;
|
||||||
|
this._buildList.some(function(n, i) {
|
||||||
|
if (n.hasAttribute('data-auto')) {
|
||||||
|
idx = i;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
if (idx >= 0) {
|
||||||
|
var elem = this._buildList.splice(idx, 1)[0];
|
||||||
|
var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
|
||||||
|
var _t = this;
|
||||||
|
if (canTransition()) {
|
||||||
|
var l = function(evt) {
|
||||||
|
elem.parentNode.removeEventListener(transitionEnd, l, false);
|
||||||
|
_t._runAutos();
|
||||||
|
};
|
||||||
|
elem.parentNode.addEventListener(transitionEnd, l, false);
|
||||||
|
removeClass(elem, 'to-build');
|
||||||
|
} else {
|
||||||
|
setTimeout(function() {
|
||||||
|
removeClass(elem, 'to-build');
|
||||||
|
_t._runAutos();
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
buildNext: function() {
|
||||||
|
if (!this._buildList.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
removeClass(this._buildList.shift(), 'to-build');
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
//
|
||||||
|
// SlideShow class
|
||||||
|
//
|
||||||
|
var SlideShow = function(slides) {
|
||||||
|
this._slides = (slides || []).map(function(el, idx) {
|
||||||
|
return new Slide(el, idx);
|
||||||
|
});
|
||||||
|
|
||||||
|
var h = window.location.hash;
|
||||||
|
try {
|
||||||
|
this.current = parseInt(h.split('#slide')[1], 10);
|
||||||
|
}catch (e) { /* squeltch */ }
|
||||||
|
this.current = isNaN(this.current) ? 1 : this.current;
|
||||||
|
var _t = this;
|
||||||
|
doc.addEventListener('keydown',
|
||||||
|
function(e) { _t.handleKeys(e); }, false);
|
||||||
|
doc.addEventListener('mousewheel',
|
||||||
|
function(e) { _t.handleWheel(e); }, false);
|
||||||
|
doc.addEventListener('DOMMouseScroll',
|
||||||
|
function(e) { _t.handleWheel(e); }, false);
|
||||||
|
doc.addEventListener('touchstart',
|
||||||
|
function(e) { _t.handleTouchStart(e); }, false);
|
||||||
|
doc.addEventListener('touchend',
|
||||||
|
function(e) { _t.handleTouchEnd(e); }, false);
|
||||||
|
window.addEventListener('popstate',
|
||||||
|
function(e) { _t.go(e.state); }, false);
|
||||||
|
this._update();
|
||||||
|
};
|
||||||
|
|
||||||
|
SlideShow.prototype = {
|
||||||
|
_slides: [],
|
||||||
|
_update: function(dontPush) {
|
||||||
|
document.querySelector('#presentation-counter').innerText = this.current;
|
||||||
|
if (history.pushState) {
|
||||||
|
if (!dontPush) {
|
||||||
|
history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
window.location.hash = 'slide' + this.current;
|
||||||
|
}
|
||||||
|
for (var x = this.current-1; x < this.current + 7; x++) {
|
||||||
|
if (this._slides[x-4]) {
|
||||||
|
this._slides[x-4].setState(Math.max(0, x-this.current));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
current: 0,
|
||||||
|
next: function() {
|
||||||
|
if (!this._slides[this.current-1].buildNext()) {
|
||||||
|
this.current = Math.min(this.current + 1, this._slides.length);
|
||||||
|
this._update();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
prev: function() {
|
||||||
|
this.current = Math.max(this.current-1, 1);
|
||||||
|
this._update();
|
||||||
|
},
|
||||||
|
go: function(num) {
|
||||||
|
if (history.pushState && this.current != num) {
|
||||||
|
history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
|
||||||
|
}
|
||||||
|
this.current = num;
|
||||||
|
this._update(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
_notesOn: false,
|
||||||
|
showNotes: function() {
|
||||||
|
var isOn = this._notesOn = !this._notesOn;
|
||||||
|
query('.notes').forEach(function(el) {
|
||||||
|
el.style.display = (notesOn) ? 'block' : 'none';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
switch3D: function() {
|
||||||
|
toggleClass(document.body, 'three-d');
|
||||||
|
},
|
||||||
|
handleWheel: function(e) {
|
||||||
|
var delta = 0;
|
||||||
|
if (e.wheelDelta) {
|
||||||
|
delta = e.wheelDelta/120;
|
||||||
|
if (isOpera) {
|
||||||
|
delta = -delta;
|
||||||
|
}
|
||||||
|
} else if (e.detail) {
|
||||||
|
delta = -e.detail/3;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (delta > 0 ) {
|
||||||
|
this.prev();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (delta < 0 ) {
|
||||||
|
this.next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleKeys: function(e) {
|
||||||
|
|
||||||
|
if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
|
||||||
|
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case 37: // left arrow
|
||||||
|
this.prev(); break;
|
||||||
|
case 39: // right arrow
|
||||||
|
case 32: // space
|
||||||
|
this.next(); break;
|
||||||
|
case 50: // 2
|
||||||
|
this.showNotes(); break;
|
||||||
|
case 51: // 3
|
||||||
|
this.switch3D(); break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_touchStartX: 0,
|
||||||
|
handleTouchStart: function(e) {
|
||||||
|
this._touchStartX = e.touches[0].pageX;
|
||||||
|
},
|
||||||
|
handleTouchEnd: function(e) {
|
||||||
|
var delta = this._touchStartX - e.changedTouches[0].pageX;
|
||||||
|
var SWIPE_SIZE = 150;
|
||||||
|
if (delta > SWIPE_SIZE) {
|
||||||
|
this.next();
|
||||||
|
} else if (delta< -SWIPE_SIZE) {
|
||||||
|
this.prev();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
var slideshow = new SlideShow(query('.slide'));
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false);
|
||||||
|
document.querySelector('#toggle-size').addEventListener('click', toggleSize, false);
|
||||||
|
document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false);
|
||||||
|
document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false);
|
||||||
|
|
||||||
|
|
||||||
|
var counters = document.querySelectorAll('.counter');
|
||||||
|
var slides = document.querySelectorAll('.slide');
|
||||||
|
|
||||||
|
function toggleCounter() {
|
||||||
|
toArray(counters).forEach(function(el) {
|
||||||
|
el.style.display = (el.offsetHeight) ? 'none' : 'block';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSize() {
|
||||||
|
toArray(slides).forEach(function(el) {
|
||||||
|
if (!/reduced/.test(el.className)) {
|
||||||
|
addClass(el, 'reduced');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeClass(el, 'reduced');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleTransitions() {
|
||||||
|
toArray(slides).forEach(function(el) {
|
||||||
|
if (!/no-transitions/.test(el.className)) {
|
||||||
|
addClass(el, 'no-transitions');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeClass(el, 'no-transitions');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleGradients() {
|
||||||
|
toArray(slides).forEach(function(el) {
|
||||||
|
if (!/no-gradients/.test(el.className)) {
|
||||||
|
addClass(el, 'no-gradients');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
removeClass(el, 'no-gradients');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,395 @@
|
||||||
|
body {
|
||||||
|
font: 20px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px; top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.presentation {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #778;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slides {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
-webkit-transition: -webkit-transform 1s ease-in-out;
|
||||||
|
-moz-transition: -moz-transform 1s ease-in-out;
|
||||||
|
-o-transition: -o-transform 1s ease-in-out;
|
||||||
|
transition: transform 1s ease-in-out;
|
||||||
|
|
||||||
|
/* so it's visible in the iframe. */
|
||||||
|
-webkit-transform: scale(0.8);
|
||||||
|
-moz-transform: scale(0.8);
|
||||||
|
-o-transform: scale(0.8);
|
||||||
|
transform: scale(0.8);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 900px;
|
||||||
|
height: 700px;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -350px;
|
||||||
|
background-color: #eee;
|
||||||
|
background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
|
||||||
|
background: -moz-linear-gradient(bottom, #bbd, #fff);
|
||||||
|
background: linear-gradient(bottom, #bbd, #fff);
|
||||||
|
-webkit-transition: all 0.25s ease-in-out;
|
||||||
|
-moz-transition: all 0.25s ease-in-out;
|
||||||
|
-o-transition: all 0.25s ease-in-out;
|
||||||
|
transition: all 0.25s ease-in-out;
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
-moz-transform: scale(1);
|
||||||
|
-o-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide:nth-child(even) {
|
||||||
|
-moz-border-radius: 20px 0;
|
||||||
|
-khtml-border-radius: 20px 0;
|
||||||
|
border-radius: 20px 0; /* includes Opera 10.5+ */
|
||||||
|
-webkit-border-top-left-radius: 20px;
|
||||||
|
-webkit-border-bottom-right-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide:nth-child(odd) {
|
||||||
|
-moz-border-radius: 0 20px;
|
||||||
|
-khtml-border-radius: 0 20px;
|
||||||
|
border-radius: 0 20px;
|
||||||
|
-webkit-border-top-right-radius: 20px;
|
||||||
|
-webkit-border-bottom-left-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide p, .slide textarea {
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide .counter {
|
||||||
|
color: #999999;
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
bottom: 20px;
|
||||||
|
display: block;
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide.title > .counter,
|
||||||
|
.slide.segue > .counter,
|
||||||
|
.slide.mainTitle > .counter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.force-render {
|
||||||
|
display: block;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide.far-past {
|
||||||
|
display: block;
|
||||||
|
margin-left: -2400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide.past {
|
||||||
|
visibility: visible;
|
||||||
|
display: block;
|
||||||
|
margin-left: -1400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide.current {
|
||||||
|
visibility: visible;
|
||||||
|
display: block;
|
||||||
|
margin-left: -450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide.future {
|
||||||
|
visibility: visible;
|
||||||
|
display: block;
|
||||||
|
margin-left: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide.far-future {
|
||||||
|
display: block;
|
||||||
|
margin-left: 1500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.three-d div.slides {
|
||||||
|
-webkit-transform: translateX(50px) scale(0.8) rotateY(10deg);
|
||||||
|
-moz-transform: translateX(50px) scale(0.8) rotateY(10deg);
|
||||||
|
-o-transform: translateX(50px) scale(0.8) rotateY(10deg);
|
||||||
|
transform: translateX(50px) scale(0.8) rotateY(10deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content */
|
||||||
|
|
||||||
|
@font-face { font-family: 'Junction'; src: url(src/Junction02.otf); }
|
||||||
|
@font-face { font-family: 'LeagueGothic'; src: url(src/LeagueGothic.otf); }
|
||||||
|
|
||||||
|
header {
|
||||||
|
font-family: 'Droid Sans';
|
||||||
|
font-weight: normal;
|
||||||
|
letter-spacing: -.05em;
|
||||||
|
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
|
||||||
|
left: 30px;
|
||||||
|
top: 25px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 140%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 140%;
|
||||||
|
display: inline;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: 'Droid Sans';
|
||||||
|
color: black;
|
||||||
|
font-size: 120%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section, footer {
|
||||||
|
font-family: 'Droid Sans';
|
||||||
|
color: #3f3f3f;
|
||||||
|
text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
|
||||||
|
margin: 100px 30px 0;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 100%;
|
||||||
|
margin: 20px 0 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 110%;
|
||||||
|
border-bottom: 2px solid #3f3f3f;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre button {
|
||||||
|
margin: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.left {
|
||||||
|
float: left;
|
||||||
|
width: 390px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.small {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.small ul {
|
||||||
|
margin: 0 0 0 15px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.small li {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.middle {
|
||||||
|
line-height: 2em;
|
||||||
|
text-align: center;
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 700px;
|
||||||
|
width: 900px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
text-align: left;
|
||||||
|
font-family: 'Droid Sans Mono', Courier;
|
||||||
|
font-size: 80%;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: rgba(255, 0, 0, 0.05);
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
-khtml-border-radius: 8px;
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(255, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre select {
|
||||||
|
font-family: Monaco, Courier;
|
||||||
|
border: 1px solid #c61800;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-size: 100%;
|
||||||
|
margin-right: 10px;
|
||||||
|
font-family: Helvetica;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 20px 10px 0 0;
|
||||||
|
font-family: Verdana;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.large {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre b {
|
||||||
|
font-weight: normal;
|
||||||
|
color: #c61800;
|
||||||
|
text-shadow: #c61800 0 0 1px;
|
||||||
|
/*letter-spacing: -1px;*/
|
||||||
|
}
|
||||||
|
pre em {
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
color: #18a600;
|
||||||
|
text-shadow: #18a600 0 0 1px;
|
||||||
|
}
|
||||||
|
pre input[type="range"] {
|
||||||
|
height: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.example {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: black;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
-khtml-border-radius: 8px;
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
video {
|
||||||
|
-moz-border-radius: 8px;
|
||||||
|
-khtml-border-radius: 8px;
|
||||||
|
-webkit-border-radius: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
font-family: 'Droid Sans';
|
||||||
|
color: black;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 10px 3px 10px;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 30px;
|
||||||
|
text-shadow: none;
|
||||||
|
letter-spacing: 0;
|
||||||
|
bottom: 10px;
|
||||||
|
position: relative;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-khtml-border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: white;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
|
||||||
|
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
|
||||||
|
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
|
||||||
|
-o-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key { font-family: Arial; }
|
||||||
|
|
||||||
|
:not(header) > .key {
|
||||||
|
margin: 0 5px;
|
||||||
|
bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.two-column {
|
||||||
|
-webkit-column-count: 2;
|
||||||
|
-moz-column-count: 2;
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stroke {
|
||||||
|
-webkit-text-stroke-color: red;
|
||||||
|
-webkit-text-stroke-width: 1px;
|
||||||
|
} /* currently webkit-only */
|
||||||
|
|
||||||
|
.center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#presentation-counter {
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 70%;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:not(.current).reduced {
|
||||||
|
-webkit-transform: scale(0.8);
|
||||||
|
-moz-transform: scale(0.8);
|
||||||
|
-o-transform: scale(0.8);
|
||||||
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-transitions {
|
||||||
|
-webkit-transition: none;
|
||||||
|
-moz-transition: none;
|
||||||
|
-o-transition: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-gradients {
|
||||||
|
background: none;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.bulleted {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue