From c165166298bc843bd0f8408c5042126060fd99ba Mon Sep 17 00:00:00 2001
From: Michael Ochmann <michael.ochmann@propeller.de>
Date: Sat, 1 Oct 2022 16:40:53 +0200
Subject: [PATCH] minor style tweaks

---
 src/Parser.js                            |  2 +-
 src/ui/src/assets/css/_slide.scss        | 12 +++++++++++-
 src/ui/src/assets/css/_tips.scss         |  6 ++++--
 src/ui/src/components/KeyboardControl.js |  3 +++
 src/ui/src/components/SlideItem.js       | 14 +++++++++++++-
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/Parser.js b/src/Parser.js
index 0e28076..feebcc3 100644
--- a/src/Parser.js
+++ b/src/Parser.js
@@ -40,7 +40,7 @@ const injectTitle = (deck, meta) => {
 			tokens : [
 				{
 					type : "text",
-					text : `–  ${meta.author}`
+					text : `–  ${meta.author} –`
 				},
 			]
 		});
diff --git a/src/ui/src/assets/css/_slide.scss b/src/ui/src/assets/css/_slide.scss
index 41719bc..58fdacd 100644
--- a/src/ui/src/assets/css/_slide.scss
+++ b/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;
diff --git a/src/ui/src/assets/css/_tips.scss b/src/ui/src/assets/css/_tips.scss
index ad4f01b..11c8ccb 100644
--- a/src/ui/src/assets/css/_tips.scss
+++ b/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;
diff --git a/src/ui/src/components/KeyboardControl.js b/src/ui/src/components/KeyboardControl.js
index d878cdf..4f1212f 100644
--- a/src/ui/src/components/KeyboardControl.js
+++ b/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;
 			}
diff --git a/src/ui/src/components/SlideItem.js b/src/ui/src/components/SlideItem.js
index b7c663a..0ba27de 100644
--- a/src/ui/src/components/SlideItem.js
+++ b/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>