[live-demo] Headings

LeaVerou · Jan 29, 2020 · 2eae597 · 2eae597
1 parent 38819fc
commit 2eae597
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/plugins/live-demo/plugin.css b/plugins/live-demo/plugin.css
@@ -62,12 +62,36 @@
 	grid-area: controls;
 	display: flex;
 	padding: .3em;
+	font-size: 60%;
+	line-height: 1.5;
+	background: hsla(220,10%,50%,.15);
 }
 
+	.demo-controls h1 {
+		margin: 0;
+		margin-right: .5em;
+		font-size: 150%;
+		line-height: 1;
+		font-weight: bold;
+		letter-spacing: -.02em;
+	}
+
+	.demo-controls h1::before {
+		content: var(--icon, "ℹ️");
+		display: inline-block;
+		vertical-align: .05em;
+		margin-right: .2em;
+		font-size: 70%;
+	}
+
 	.demo-controls form {
 		display: contents;
 	}
 
+	.demo-controls details.notes {
+		font-size: 100%;
+	}
+
 	.demo-controls details.notes > summary,
 	.demo-controls .button,
 	.demo-controls button {
@@ -79,8 +103,6 @@
 		border-radius: .2em;
 		cursor: pointer;
 		font-weight: bold;
-		font-size: 60%;
-		line-height: 1.5;
 	}
 
 	.demo-controls .button:not(:hover):not(:focus),

diff --git a/plugins/live-demo/plugin.js b/plugins/live-demo/plugin.js
@@ -158,7 +158,7 @@ var _ = self.Demo = class Demo {
 				title: "Previous slide",
 				start: this.controls,
 				events: {
-					click: evt => Inspire.previous()
+					click: Inspire.previous
 				}
 			});
 
@@ -167,9 +167,14 @@ var _ = self.Demo = class Demo {
 				textContent: "Next ▸",
 				inside: this.controls,
 				events: {
-					click: evt => Inspire.next()
+					click: Inspire.next
 				}
 			});
+
+			var h1 = $(".slide > h1", this.slide);
+			if (h1) {
+				this.controls.prepend(h1);
+			}
 		}
 		else {
 			this.ready = Promise.resolve();