slideshow-service 0.2.0 → 0.3.0

data/lib/slideshow/service/public/slideshow-csss/plugins/css-snippets.js

@@ -0,0 +1,89 @@
+/**
+ * Script to add prefixes to standard CSS3 in textareas or style attributes
+ * Requires css-edit.js
+ * @author Lea Verou
+ * MIT License
+ */
+
+(function(head) {
+
+var self = window.CSSSnippet = function(element) {
+	var me = this;
+	
+	this.raw = element.hasAttribute('data-raw');
+	
+	if(this.raw) {
+		this.style = document.createElement('style');
+		
+		if(window.SlideShow) {
+			this.slide = SlideShow.getSlide(element);
+			
+			if(location.hash == '#' + me.slide.id) {
+				this.style = head.appendChild(this.style);
+			}
+			
+			// Remove it after we're done with it, to save on resources
+			addEventListener('hashchange', function() {
+				var appended = !!me.style.parentNode;
+				
+				if(location.hash == '#' + me.slide.id != appended) {
+					me.style = head[(appended? 'remove' : 'append') + 'Child'](me.style);
+				}
+			}, false);
+		}
+	}
+	else {
+		
+		// this holds the elements the CSS is gonna be applied to
+		this.subjects = CSSEdit.getSubjects(element);
+		
+		CSSEdit.setupSubjects(this.subjects);
+	}
+
+	// Test if its text field first
+	if(/^(input|textarea)$/i.test(element.nodeName)) {
+		this.textField = element;
+		
+		// Turn spellchecking off
+		this.textField.spellcheck = false;
+		
+		CSSEdit.elastic(this.textField);
+		
+		this.textField.addEventListener('input', function() {
+			me.update();
+		}, false);
+		
+		this.textField.addEventListener('keyup', function() {
+			me.update();
+		}, false);
+		
+		this.update();
+	}
+	else {
+		// Update style, only once
+		this.update();
+	}
+}
+
+self.prototype = {
+	update: function() {
+		var supportedStyle = PrefixFree.prefixCSS(this.getCSS(), this.raw);
+		
+		if(this.raw) {
+			this.style.innerHTML = supportedStyle;
+		}
+		else {
+			var valid = CSSEdit.updateStyle(this.subjects, this.getCSS(), 'data-originalstyle');
+			
+			if(this.textField && this.textField.classList) {
+				this.textField.classList[valid? 'remove' : 'add']('error');
+			}
+		}
+	},
+	
+	getCSS: function() {
+		return this.textField ? this.textField.value : this.subjects[0].getAttribute('style');
+	}
+};
+
+})(document.head);

data/lib/slideshow/service/public/slideshow-csss/plugins/incrementable.js

@@ -0,0 +1,94 @@
+/**
+ * Script for making multiple numbers in a textfield incrementable/decrementable (like Firebug's CSS values)
+ * @author Lea Verou
+ * @version 1.0
+ */
+
+/**
+ * Constructor
+ * @param textField {HTMLElement} An input or textarea element
+ * @param modifiers {Object} An object with params ctrlKey, altKey and/or shiftKey. The key combination must have a sum of >= 3.
+ * 							For example, {altKey: 1, ctrlKey: 3, shiftKey: 2} means that either Ctrl has to be pressed with the arrows, or alt+shift, or alt+ctrl, or all three.
+ *							The default is 0, which means no modifiers needed.
+ */
+function Incrementable(textField, modifiers, units) {
+	var me = this;
+
+	this.textField = textField;
+	
+	this.step = +textField.getAttribute('step') || 
+				+textField.getAttribute('data-step') || 1;
+
+	modifiers = modifiers || {};
+	this.modifiers = {
+		ctrlKey: modifiers.ctrlKey || 0,
+		altKey: modifiers.altKey || 0,
+		shiftKey: modifiers.shiftKey || 0
+	};
+
+	if(units) {
+		this.units = units;
+	}
+	
+	this.changed = false;
+
+	this.textField.addEventListener('keydown', function(evt) {
+		if(me.checkModifiers(evt) && (evt.keyCode == 38 || evt.keyCode == 40)) {
+			me.changed = false;
+			
+			// Up or down arrow pressed, check if there's something
+			// increment/decrement-able where the caret is
+			var caret = this.selectionStart, text = this.value,
+				regex = new RegExp('^([\\s\\S]{0,' + caret + '}[^-0-9\\.])(-?[0-9]*(?:\\.?[0-9]+)(?:' + me.units + '))\\b', 'i');
+
+			this.value = this.value.replace(regex, function($0, $1, $2) {
+				if($1.length <= caret && $1.length + $2.length >= caret) {
+					me.changed = true;
+					return $1 + me.stepValue($2, evt.keyCode == 40, evt.shiftKey);
+				}
+				else {
+					return $1 + $2;
+				}
+			});
+
+			if(me.changed) {
+				this.selectionEnd = this.selectionStart = caret;
+				evt.preventDefault();
+				evt.stopPropagation();
+			}
+		}
+	}, false);
+
+	this.textField.addEventListener('keypress', function(evt) {
+		if(me.changed && me.checkModifiers(evt) 
+			&& (evt.keyCode == 38 || evt.keyCode == 40))
+			evt.preventDefault();
+			evt.stopPropagation();
+			me.changed = false;
+	}, false);
+}
+
+Incrementable.prototype = {
+	checkModifiers: function(evt) {
+		var m = this.modifiers;
+
+		return m.ctrlKey * evt.ctrlKey + m.altKey * evt.altKey + m.shiftKey * evt.shiftKey >= 3
+				|| (m.ctrlKey + m.altKey + m.shiftKey == 0);
+	},
+	
+	/**
+	 * Gets a <length> and increments or decrements it
+	 */
+	stepValue: function(length, decrement, byChunk) {
+		var val = parseFloat(length) + (decrement? -1 : 1) * (byChunk? 10 : 1) * this.step;
+		
+		// Prevent rounding errors
+		if(this.step % 1) {
+			val = (parseFloat(val.toPrecision(12)));
+		}
+		
+		return val + length.replace(/^-|[0-9]+|\./g, '');
+	},
+
+	units: '|%|deg|px|r?em|ex|ch|in|cm|mm|pt|pc|vm|vw|vh|gd|m?s'
+};

data/lib/slideshow/service/public/slideshow-csss/prefixfree.min.js

@@ -0,0 +1,10 @@
+// PrefixFree 1.0.4 / by Lea Verou / MIT license
+(function(m,j){function l(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.getComputedStyle&&window.addEventListener){var b=window.PrefixFree={prefixCSS:function(a,d){function e(f,d,h,e){var f=b[f],c=e!==j?e:"",n=h!==j?h:"",d=d||c+g+"$1"+n,c=e!==j?e:"\\b",n=h!==j?h:"\\b";f.length&&(f=RegExp(c+"("+f.join("|")+")"+n,"gi"),a=a.replace(f,d))}var g=b.prefix;e("functions",g+"$1(","\\s*\\(");e("keywords",null);e("properties",g+"$1:","\\s*:");if(b.properties.length){var c=RegExp("\\b("+
+b.properties.join("|")+")(?!:)","gi");e("valueProperties",function(a){return a.replace(c,g+"$1")},":(.+?);")}d&&(e("selectors",b.prefixSelector,"\\b",""),e("atrules",null,j,"@"));return a=a.replace(RegExp("-"+g,"g"),"-")},process:{link:function(a){try{if(!/\bstylesheet\b/i.test(a.rel)||!a.sheet.cssRules)return}catch(d){return}var e=a.getAttribute("href")||a.getAttribute("data-href"),g=e.replace(/[^\/]+$/,""),c=a.parentNode,f=new XMLHttpRequest;f.open("GET",e);f.onreadystatechange=function(){if(f.readyState===
+4){var d=f.responseText;if(d&&a.parentNode){var d=b.prefixCSS(d,true),d=d.replace(/url\((?:'|")?(.+?)(?:'|")?\)/gi,function(a,b){return!/^([a-z]{3,10}:|\/)/i.test(b)?'url("'+g+b+'")':a}),e=document.createElement("style");e.textContent=d;e.media=a.media;e.disabled=a.disabled;c.insertBefore(e,a);c.removeChild(a)}}};f.send(null);a.setAttribute("data-inprogress","")},styleElement:function(a){var d=a.disabled;a.textContent=b.prefixCSS(a.textContent,true);a.disabled=d},styleAttribute:function(a){var d=
+a.getAttribute("style"),d=b.prefixCSS(d);a.setAttribute("style",d)}},prefixSelector:function(a){return a.replace(/^:{1,2}/,function(a){return a+b.prefix})},prefixProperty:function(a,d){var e=b.prefix+a;return d?b.camelCase(e):e},camelCase:function(a){return a.replace(/-([a-z])/g,function(a,b){return b.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(a){return"-"+a.toLowerCase()})}};(function(){var a={},d="",e=0,g=[],c=getComputedStyle(document.documentElement,
+null),f=document.createElement("div").style,i=function(c){g.indexOf(c)===-1&&g.push(c);if(c.indexOf("-")>-1){var h=c.split("-");if(c.charAt(0)==="-"){var c=h[1],i=++a[c]||1;a[c]=i;for(e<i&&(d=c,e=i);h.length>3;)h.pop(),i=h.join("-"),b.camelCase(i)in f&&(c=g,c.indexOf(i)===-1&&c.push(i))}}};if(c.length>0)for(var h=0;h<c.length;h++)i(c[h]);else for(var k in c)i(b.deCamelCase(k));b.prefix="-"+d+"-";b.Prefix=b.camelCase(b.prefix);g.sort();b.properties=[];for(h=0;h<g.length;h++){k=g[h];if(k.charAt(0)!==
+"-")break;k.indexOf(b.prefix)===0&&(c=k.slice(b.prefix.length),g.indexOf(c)===-1&&b.properties.push(c))}b.Prefix=="Ms"&&!("transform"in f)&&!("MsTransform"in f)&&"msTransform"in f&&b.properties.push("transform","transform-origin");b.properties.sort()})();(function(){function a(a,b){g[b]="";g[b]=a;return!!g[b]}var d={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"}},e={initial:"color","zoom-in":"cursor",
+"zoom-out":"cursor"};d["repeating-linear-gradient"]=d["repeating-radial-gradient"]=d["radial-gradient"]=d["linear-gradient"];b.functions=[];b.keywords=[];var g=document.createElement("div").style,c;for(c in d){var f=d[c],i=f.property,f=c+"("+f.params+")";!a(f,i)&&a(b.prefix+f,i)&&b.functions.push(c)}for(var h in e)i=e[h],!a(h,i)&&a(b.prefix+h,i)&&b.keywords.push(h)})();(function(){function a(a){g.textContent=a+"{}";return!!g.sheet.cssRules.length}var d={":read-only":null,":read-write":null,":any-link":null,
+"::selection":null},e={keyframes:"name",viewport:null,document:'regexp(".")'};b.selectors=[];b.atrules=[];var g=m.appendChild(document.createElement("style")),c;for(c in d){var f=c+(d[c]?"("+d[c]+")":"");!a(f)&&a(b.prefixSelector(f))&&b.selectors.push(c)}for(var i in e)f=i+" "+(e[i]||""),!a("@"+f)&&a("@"+b.prefix+f)&&b.atrules.push(i);m.removeChild(g)})();b.valueProperties=["transition","transition-property"];l('link[rel~="stylesheet"]').forEach(b.process.link);m.className+=" "+b.prefix;document.addEventListener("DOMContentLoaded",
+function(){l('link[rel~="stylesheet"]:not([data-inprogress])').forEach(b.process.link);l("style").forEach(b.process.styleElement);l("[style]").forEach(b.process.styleAttribute)},false)}})(document.documentElement);

data/lib/slideshow/service/public/slideshow-csss/reusable.css

@@ -0,0 +1,118 @@
+/**
+ * CSS I've found useful for more than one CSSS presentations 
+ * and thought it might be useful for others too
+ * @author Lea Verou
+ */
+ 
+/* Mark slides as incomplete to spot them easier */
+.incomplete.slide::after {
+	content: 'INCOMPLETE';
+	font-weight: bold;
+	position: absolute;
+	top: 40%;
+	left: 30%;
+	padding: .1em .4em 0;
+	border: .1em solid;
+	color: rgba(255, 0, 0, .8);
+	font-size: 140%;
+	border-radius: .2em;
+	transform: rotate(30deg);
+}
+
+/* Ribbon */
+[data-type].slide:not(.hide-ribbon):after {
+	content: attr(data-type);
+	position: fixed;
+	top: 0;
+	right: 0;
+	color: white;
+	font-size: 50%;
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: bold;
+	background: hsl(40,100%,50%);
+	background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
+	line-height: 1.6;
+	min-width: 20em;
+	box-shadow: 0 10px 5px -5px rgba(0,0,0,.3);
+	transform: rotate(45deg) translate(6em, -2em);
+}
+
+/* Full image slides */
+
+@keyframes scroll {
+	from, to { background-position: 0 0; }
+	80%, 95% { background-position: 0 100%; }
+}
+	
+.image.slide {
+	padding: 0;
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-color: black;
+}
+
+/* When you don't want to clip the image at all */
+.partial.image.slide {
+	background-size: contain;
+}
+
+/* An image that scrolls indefinitely */
+.scrolling.image.slide:target {
+	background-position: 0 0;
+	background-repeat: repeat-y;
+	animation: scroll 10s 1s infinite linear forwards;
+}
+
+.bottom-heavy.image.slide {
+	background-position: center bottom;
+}
+
+.top-heavy.image.slide {
+	background-position: center top;
+}
+
+	.image.slide > .caption,
+	.image.slide > h1:only-child {
+		position: absolute;
+		top: 50%;
+		right: 0;
+		left: 0;
+		margin-top: -.6em;
+		padding: .2em 0;
+		text-align: center;
+		font-size: 200%;
+		font-family: inherit;
+		font-weight: inherit;
+		line-height: 1.2;
+		color: white;
+		background: rgba(0,0,0,.4);
+		text-shadow: .03em .03em .05em black;
+		white-space: nowrap;
+	}
+	
+	.top-heavy.image.slide > .caption,
+	.top-heavy.image.slide > h1:only-child {
+		top: auto;
+		bottom: .5in;
+	}
+	
+	.bottom-heavy.image.slide > .caption,
+	.bottom-heavy.image.slide > h1:only-child {
+		position: static;
+		margin: .5in 0 0;
+	}
+	
+		.image.slide > .caption h1 {
+			font: inherit;
+			margin-bottom: 0;
+		}
+		
+		.image.slide > .caption h1 + a {
+			font-size: 30%;
+			display: block;
+			text-shadow: inherit;
+		}
+	
+/* END Full image slides */

data/lib/slideshow/service/public/slideshow-csss/slides.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport"  content="width=device-width, initial-scale=1, maximum-scale=1">
+<meta name="generator" content="{{ headers['generator'] }}">
+<meta name="author"    content="{{ headers['author'] }}">
+
+<title>{{ headers['title'] }}</title>
+
+<!-- Don't alter this, CSSS needs it to work -->
+<link href="slideshow.css" rel="stylesheet">
+
+<!-- Theme-specific styles go here (themes can be reused in multiple talks) -->
+<link href="theme.css" rel="stylesheet">
+
+<!-- Talk-specific styles go here -->
+<!-- GB: changed fixed name (style.css) to variable -->
+<link href="style.css" rel="stylesheet">
+
+</head>
+<!-- GB: todo: add duration header/property -->
+<body data-duration="45">
+
+<header id="intro" class="slide">
+	<h1>{{ headers['title'] }}</h1>
+	<p class="attribution">By {{ headers['author'] }}</p>
+</header>
+
+	<section class="slide" id="navigation">
+		<h2>CSSS Navigation</h2>
+		<p>Only through keyboard for now :(</p>
+		<ul>
+			<li>→ or ↓ to advance to the next slide or incrementally displayed item</li>
+			<li>← or ↑ to go to the previous slide or incrementally displayed item</li>
+			<li>Ctrl* + → or Ctrl* + ↓ to jump to the next slide</li>
+			<li>Ctrl* + ← or Ctrl* + ↑ to jump to the previous slide</li>
+			<li>Home to go to the first slide, End to go to the last</li>
+			<li>Ctrl* + G to jump to an arbitrary slide (by slide number or identifier)</li>
+		</ul>
+		<p>* Ctrl or Shift actually. Only Shift works in Opera.</p>
+	</section>
+
+	<section class="slide">
+		<h2>CSSS Navigation Cont.</h2>
+
+		<p>Thumbnail view</p>
+		<ul>
+		  <li>Press Ctrl+H (or Shift+H if you're in Opera) now.</li>
+		  <li>Press Ctrl+Shift+H to see all slides (warning: can be slow!)</li>
+		</ul>
+
+		<p>Presenter view</p>
+		<ul>
+		  <li>This slide has presenter notes. They are only visible in presenter view (Ctrl+P or Shift+P).</li>
+		</ul>
+		<p class="presenter-notes">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+	</section>
+
+{% for slide in slides %}
+  <section class="slide">
+    {{ slide.content }}
+  </section>
+{% endfor %}
+
+
+<!--
+<footer class="slide">
+	<h2>Thank you!</h2>
+	<p>Closing remarks</p>
+</footer>
+-->
+
+<script src="slideshow.js"></script>
+
+<!-- Make sure the reference to -prefix-free works -->
+<script src="prefixfree.min.js"></script>
+
+<!-- Uncomment the plugins you need
+<script src="plugins/css-edit.js"></script>
+<script src="plugins/css-snippets.js"></script>
+<script src="plugins/css-controls.js"></script>
+-->
+<script>var slideshow = new SlideShow();
+{{ more_content_for_js }}
+</script>
+
+</body>
+</html>

data/lib/slideshow/service/public/slideshow-csss/slideshow.css

@@ -0,0 +1,282 @@
+/**
+	Basic CSS so that the slideshow script functions as a slideshow
+	@author Lea Verou
+	@version 1.0
+ */
+
+/**
+ * "Variables"
+ */
+.slide,
+.delayed,
+.delayed-children > * {
+	transition:1s;
+	transition-property: -webkit-transform, opacity, left, top, right, bottom;
+}
+ 
+/**
+ * Styles
+ */
+ 
+ html, body {
+ 	height: 100%;
+ }
+ 
+ body {
+ 	margin: 0;
+ }
+ 
+ .slide {
+	display: none;
+ 	position:absolute;
+ 	top:0;
+ 	right:0;
+ 	bottom:0;
+ 	left:0;
+ 	z-index:1;
+ 	
+ 	font-size:250%;
+ 	line-height:1.6;
+ }
+ 
+ .slide.previous,
+ .slide:target,
+ .slide.next {
+	display: block;
+	opacity:0;
+	overflow:hidden;
+ }
+ 
+ .slide:target {
+ 	z-index:100;
+ 	opacity:1;
+ 	overflow: visible;
+}
+
+/**
+	Slide numbers
+ */ 
+#indicator {
+  	position: absolute;
+  	top: .05in;
+  	right: .5em;
+  	z-index: 1010;
+  	
+  	font-size: .15in;
+  	color: white;
+  	background: rgba(0,0,0,.25);
+  	font-weight: 900;
+  	text-shadow: .05em .05em .1em black;
+  	text-align: center;
+  	padding: .1em .3em 0;
+  	min-width: 1.6em;
+  	box-sizing: border-box;
+  	border-radius: 999px;
+}
+
+/* If there's nothing selected, show the first */
+.slide:first-child {
+	z-index:2;
+}
+
+/* Delayed items that are shown incrementally after the slide is */
+.delayed,
+.delayed-children > * {
+	opacity: 0;
+}
+
+.delayed.displayed,
+.delayed-children > .displayed {
+	opacity: .3;
+}
+
+.delayed.current,
+.delayed-children > .current,
+.delayed.displayed.non-dismissable,
+.delayed-children > .displayed.non-dismissable {
+	opacity: 1;
+}
+
+/**
+	iframe slides
+ */
+.iframe.slide {
+	padding: 0;
+	text-align: center;
+} 
+
+	.iframe.slide > h1 {
+		position: absolute;
+		bottom: 0; right: 0; left: 0;
+		background: rgba(0,0,0,.5);
+		font-size: 100%;
+	}
+	
+		.iframe.slide > h1 > a {
+			display: inline-block;
+			padding: .2em .5em;
+			
+			color: white;
+			text-align: center;
+			text-decoration: none;
+			text-shadow: .05em .05em .1em black;
+		}
+	
+	.slide > iframe:only-of-type {
+		display: none;
+		position: absolute;
+		border: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+	}
+	
+	.slide:target > iframe:only-of-type {
+		display: block;
+	}
+
+/**
+	Show thumbnails
+ */
+
+.show-thumbnails {
+	overflow-x: hidden;	
+} 
+
+.show-thumbnails .slide,
+.presenter .slide.next {
+	width: 1024px;
+	height: 768px;
+	
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	
+	float: left;
+	overflow: hidden;
+	position: static;
+	opacity: 1;
+	margin:-292px -395px;
+	cursor: pointer;
+	
+	transform: scale(.2, .2);
+	transition:1s transform;
+}
+
+.show-thumbnails.headers-only .slide {
+	display: none;
+}
+
+.show-thumbnails.headers-only header.slide {
+	display: block;
+}
+
+.show-thumbnails .slide .delayed,
+.presenter .slide:target + .slide .delayed {
+	opacity: 1;
+}
+
+.show-thumbnails .slide:hover,
+.show-thumbnails .slide:target,
+.presenter .slide:target + .slide {
+	outline: 20px solid rgba(255, 255, 255, .6);
+	outline-radius:5px;
+	
+	box-shadow: 5px 5px 10px black;
+}
+
+.show-thumbnails .slide:target {
+	outline-color: rgba(255, 255, 255, .3);
+}
+
+.show-thumbnails .slide:target:hover {
+	outline-color: rgba(255, 255, 255, .9);
+}
+
+/* Display titles */
+.show-thumbnails .slide[data-title]:after {
+	content: attr(data-title);
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: .1em 0;
+	background: rgba(0,0,0,.5);
+	color: white;
+	font-size: 250%;
+	text-align: center;
+	text-shadow: .05em .05em .1em black;
+	transform: none;
+}
+
+/* Hide all elements in slide by hitting Ctrl + J or Shift + J */
+.hide-elements .slide:target > * {
+	opacity: 0;
+	transition:.5s;
+}
+
+/* Timer */
+
+#timer {
+	position:absolute;
+	top:0;
+	left:0;
+	z-index:101;
+	width:0%;
+	height:16px;
+	line-height: 16px;
+	padding: 0 5px;
+	background:rgba(0,0,0,.5);
+	overflow: hidden;
+	text-align: right;
+	box-sizing: border-box;
+}
+
+#timer:before {
+	content: 'Progress ';
+	text-transform: uppercase;
+	color: white;
+	font-size: 9px;
+}
+
+#timer.end {
+	width: 100%;
+}
+
+/* Presenter & projector views */
+
+.projector #timer {
+	display: none;
+}
+
+.presenter-notes {
+	display: none;
+	position: fixed;
+	right: 230px;
+	bottom: 0;
+	left: 0;
+	max-height: 6em;
+	overflow: auto;
+	padding: .6em 1em;
+	font-size: 60%;
+	line-height: 1.3;
+	font-weight: normal;
+	resize:vertical;
+	background: rgba(255, 255, 255, .5);
+	color: black;
+	text-shadow: 0 1px white;
+	box-shadow: .1em .1em .3em rgba(0,0,0,.5) inset;
+}
+
+.presenter .slide.next {
+	position: fixed;
+	top: auto;
+	right: 0;
+	bottom: 0;
+	left: auto;
+	z-index: 100;
+}
+
+.presenter .slide:target > .presenter-notes {
+	display: block;
+}