minor style tweaks

src/Parser.js

@@ -40,7 +40,7 @@ const injectTitle = (deck, meta) => {
 			tokens : [
 				{
 					type : "text",
-					text : `–  ${meta.author}`
+					text : `–  ${meta.author} –`
 				},
 			]
 		});

src/ui/src/assets/css/_slide.scss

@@ -8,9 +8,15 @@
 	padding: 8vw;
 	text-align: center;
 	aspect-ratio: 1.333;
+	overflow: hidden;
 	background: color(background);
 	color: color(foreground);
 
+	h1, h2, h3, h4, h5 {
+		margin: 0;
+		padding: 0;
+	}
+
 	ul, ol, pre {
 		text-align: left;
 	}
@@ -53,7 +59,7 @@
 
 		img {
 			max-width: 95%;
-			height: auto;
+			max-height: 80vh;
 		}
 
 		.figcaption {
@@ -77,6 +83,10 @@
 		}
 	}
 
+	p {
+		margin-top: 0;
+	}
+
 	code:not([class*=language-]) {
 		font-weight: normal;
 		font-size: 0.9em;

src/ui/src/assets/css/_tips.scss

@@ -17,11 +17,10 @@
 		box-shadow: 0 0 2rem rgba(0,0,0,0.6);
 		text-transform: uppercase;
 		width: 80%;
-		height: 70%;
 		max-width: 800px;
 		max-height: 600px;
 		border-radius: 1rem;
-		padding: 0 4rem;
+		padding: 4rem;
 		text-align: center;
 		opacity: 0.9;
 
@@ -29,10 +28,13 @@
 			font-family: "Iosevka", sans-serif;
 			font-weight: normal;
 			font-size: 2rem;
+			padding: 0;
+			margin: 0 0 2rem 0;
 		}
 
 		article {
 			display: grid;
+			opacity: 0.6;
 			grid-template-columns: 3fr 1fr;
 			text-align: left;
 			line-height: 2rem;

src/ui/src/components/KeyboardControl.js

@@ -24,6 +24,9 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips}) => {
 						return;
 					openFile();
 					break;
+				case "Escape":
+					setShowTips(false);
+					break;
 				default:
 					break;
 			}

src/ui/src/components/SlideItem.js

@@ -18,7 +18,19 @@ const SlideItem = ({item}) => {
 		console.log("ITEM",item);
 		switch (item.type) {
 			case "heading":
-				return <h1><Children items={item.tokens} /></h1>
+				switch(item.level) {
+					case 1:
+						return <h1><Children items={item.tokens} /></h1>
+					case 2:
+						return <h2><Children items={item.tokens} /></h2>
+					case 3:
+						return <h3><Children items={item.tokens} /></h3>
+					case 4:
+						return <h4><Children items={item.tokens} /></h4>
+					case 5:
+					default:
+						return <h5><Children items={item.tokens} /></h5>
+				}
 			case "list":
 				if (item.ordered)
 					return <ol><Children items={item.items} /></ol>