Some fixes (#167)

* Restore broken theming (syntax highlight, live demo styling, etc.) after separating the base theme from the partials

* Fix typo

* [media] Adopt the new API for positions: Rename `inside` → `in`

Fix the annotated video.

* [live-demo] Adopt the new API for positions: Rename `inside` → `in`

Fix the toolbar buttons.

index.html

@@ -64,7 +64,7 @@ <h1>Keyboard Navigation</h1>
 			<li>Home to go to the first slide, End to go to the last</li>
 			<li><kbd>Ctrl</kbd><kbd>G</kbd> to jump to an arbitrary slide (by slide number or identifier)</li>
 			<li class="delayed">
-				Note that if a slide contains an <code>&lt;iframe</code>, when the content in the iframe is focused, Inspire.js shortcuts will not work.
+				Note that if a slide contains an <code>&lt;iframe&gt;</code>, when the content in the iframe is focused, Inspire.js shortcuts will not work.
 				There is no way around that, you need to click on something from the actual slide to get focus out of the iframe before you use any Inspire.js keyboard shortcuts.
 				Some plugins (e.g. live demo) add on-screen "Next" buttons for this reason.
 			</li>

plugins/live-demo/live-demo.js

@@ -127,7 +127,7 @@ export default class LiveDemo {
 
 			// Open in new Tab button
 			let a = create({
-				inside: this.controls,
+				in: this.controls,
 				html: `<a class="button new-tab" target="_blank" href="">↗️ New Tab</a>`,
 				events: {
 					"click mouseenter": evt => {
@@ -138,7 +138,7 @@ export default class LiveDemo {
 
 			// Open in codepen button
 			create({
-				inside: this.controls,
+				in: this.controls,
 				html: `
 					<form action="https://codepen.io/pen/define" method="POST" target="_blank">
 						<input type="hidden" name="data">
@@ -229,7 +229,7 @@ export default class LiveDemo {
 
 			let playButton = create({
 				html: `<button class="replay">${PLAY_LABEL}</button>`,
-				inside: this.controls,
+				in: this.controls,
 				onclick: async evt => {
 					let isPlay = playButton.textContent === PLAY_LABEL;
 					playButton.textContent = isPlay? PAUSE_LABEL : PLAY_LABEL;
@@ -287,7 +287,7 @@ export default class LiveDemo {
 
 			let skipButton = create({
 				html: `<button class="skip">⏭️</button>`,
-				inside: this.controls,
+				in: this.controls,
 				onclick: async evt => {
 					if (this.replayer) {
 						if (this.replayer.paused) {
@@ -310,7 +310,7 @@ export default class LiveDemo {
 
 				let label = create({
 					html: `<label for="${editor.textarea.id}" tabindex="0">${editor.lang}</label>`,
-					inside: editor.wrapper,
+					in: editor.wrapper,
 					onclick: evt => this.openEditor(id),
 				});
 
@@ -487,7 +487,7 @@ export default class LiveDemo {
 		var lang = o.lang || label;
 		let textarea = create({
 			html: `<textarea id="${container.id}-${label}-editor" class="language-${lang} editor" data-lang="${lang}">${o.fromSource()}</textarea>`,
-			inside: o.container || container,
+			in: o.container || container,
 			value: o.fromSource(),
 			events: {
 				input: o.toSource

plugins/media/plugin.js

@@ -23,7 +23,7 @@ document.addEventListener("slidechange", evt => {
 			let timedAnnotations = new Map();
 
 			let video = create({
-				inside: container,
+				in: container,
 				html: `<video src="${ slide.getAttribute("data-video") }"></video>`,
 				loop: slide.classList.contains("looping"),
 				events: {

theme.css

@@ -1,4 +1,4 @@
-@import url("style/base.css");
+@import url("style/theme.css");
 @import url("style/components/index.css");
 
 :root {