Make enter on 'Click here to print' work. Style tab outline better.

Issue #10

passmate.css

@@ -75,6 +75,7 @@ overview,product {
 
 	a {
 		margin-bottom: 1em;
+		padding: 0.2em;
 		max-width: 40em;
 		text-decoration: none;
 		color: black;
@@ -86,8 +87,10 @@ overview,product {
 		border: 0;
 		border-bottom: black 1px dotted;
 
-		margin-top: 0;
-		margin-bottom: 1em;
+		margin-top: 0.2em;
+		margin-bottom: 0.2em;
+
+		padding: 0.2em;
 	}
 
 	input:focus {
@@ -112,6 +115,20 @@ overview,product {
 		text-align: center;
 	}
 
+	button {
+		/* ugly hack to give the focus box breathing room without moving the text */
+		position: relative;
+		left: -0.2em;
+		padding: 0.2em;
+
+		border: none;
+		background: none;
+
+		font-family: inherit;
+		font-size: inherit;
+		font-weight: bold;
+	}
+
 	ol {
 		box-sizing: border-box;
 		max-width: 40em;
@@ -121,11 +138,17 @@ overview,product {
 
 	ol > li {
 		margin-bottom: 1em;
+		padding: 0.1em;
 	}
 
 	.selected {
 		font-weight: 600;
 	}
+
+	*:focus {
+		outline: none;
+		box-shadow: 0 0 2pt 1pt maroon;
+	}
 }
 
 @media print {

passmate.js

@@ -65,9 +65,8 @@ class PassMate {
 		this.addElement('li', printreqs, 'Layout/Orientation: Landscape');
 		this.addElement('li', printreqs, 'Two-sided: Long edge (or just enabled)');
 
-		let printStep = this.addElement('li', instr, 'Click here to print the book!');
-		printStep.style.fontWeight = 'bold';
-		printStep.style.cursor = 'pointer';
+		let printStep = this.addElement('li', instr);
+		let print = this.addElement('button', printStep, 'Click here to print the book!');
 		printStep.addEventListener('click', () => {
 			window.print();
 		});