Split screen and print CSS completely, add print parent element.

passmate.css

@@ -31,18 +31,6 @@
 	margin: 0;
 }
 
-@media screen {
-	side {
-		display: none !important;
-	}
-}
-
-@media print {
-	overview {
-		display: none !important;
-	}
-}
-
 html {
 	height: 100%;
 }
@@ -54,66 +42,107 @@ body {
 	height: 100%;
 }
 
-h1 {
+overview,product {
-	font-family: 'copernicus';
+	display: none;
-	font-weight: 600;
-	align-self: center;
 }
 
-h2 {
+@media screen {
-	font-family: 'proxima-nova';
+	overview {
-	font-weight: 600;
-	align-self: center;
-}
-
-/**********
- * Screen
- **********/
-overview {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		margin: 1em;
-}
+	}
 
-overview h2 {
+	h1 {
+		font-family: 'copernicus';
+		font-weight: 600;
+		align-self: center;
+	}
+
+	h2 {
+		font-family: 'proxima-nova';
+		font-weight: 600;
+		align-self: center;
 		margin-top: 1.2em;
-}
+	}
 
-overview blurb {
+	blurb {
+		text-align: justify;
+		margin-bottom: 1em;
 		max-width: 40em;
-}
+	}
+
+	owner {
+		display: block;
+		width: 11em;
+
+		border-bottom: black 1px dotted;
+
+		font-family: 'proxima-nova';
+		font-weight: 600;
+		font-size: 1.5em;
 
-overview owner {
 		text-align: left;
-	margin-top: 0;
+		align-self: center;
-}
 
-overview recovery {
 		margin-top: 0;
 		margin-bottom: 1em;
-	font-size: 1.2em;
+	}
-}
 
-overview ol {
+	recovery {
+		display: block;
+		width: 17em;
+
+		border-bottom: black 1px dotted;
+
+		font-family: 'inconsolata';
+		font-weight: 700;
+		font-size: 1.2em;
+
+		text-align: center;
+		align-self: center;
+
+		margin-top: 0;
+		margin-bottom: 1em;
+	}
+
+	ol {
 		box-sizing: border-box;
 		max-width: 40em;
 		margin: 0;
 		padding-inline-start: 1em;
-}
+	}
 
-overview ol > li {
+	ol > li {
 		margin-bottom: 1em;
-}
+	}
 
-overview .selected {
+	.selected {
 		font-weight: 600;
+	}
 }
 
-/**********
+@media print {
- * Print
+	product {
- **********/
+		display: block;
-side {
+		width: 100%;
+		height: 100%;
+	}
+
+	h1 {
+		font-family: 'copernicus';
+		font-weight: 600;
+		align-self: center;
+	}
+
+	h2 {
+		font-family: 'proxima-nova';
+		font-weight: 600;
+		align-self: center;
+	}
+
+	side {
 		page-break-inside: avoid;
 
 		width: 100%;
@@ -121,13 +150,13 @@ side {
 
 		display: flex;
 		flex-direction: row;
-}
+	}
 
-side:nth-of-type(even) {
+	side:nth-of-type(even) {
 		transform: rotateZ(180deg);
-}
+	}
 
-page {
+	page {
 		flex-basis: 0;
 		flex-grow: 1;
 		flex-shrink: 0;
@@ -137,44 +166,44 @@ page {
 
 		display: flex;
 		flex-direction: column;
-}
+	}
 
-page:first-of-type {
+	page:first-of-type {
 		border-right: 1px black solid;
-}
+	}
 
-pagenum {
+	pagenum {
 		order: 99;
 		flex-grow: 1;
 		display: flex;
 		flex-direction: column;
 		justify-content: flex-end;
-}
+	}
 
-page:first-of-type pagenum {
+	page:first-of-type pagenum {
-}
+	}
 
-page:last-of-type pagenum {
+	page:last-of-type pagenum {
 		align-self: flex-end;
-}
+	}
 
-letter {
+	letter {
 		font-family: 'copernicus';
 		font-weight: 600;
 		font-size: 4em;
 		margin-bottom: 0.2em;
-}
+	}
 
-page:last-of-type letter {
+	page:last-of-type letter {
 		align-self: flex-end;
-}
+	}
 
-blurb {
+	blurb {
 		text-align: justify;
 		margin-bottom: 1em;
-}
+	}
 
-owner {
+	owner {
 		display: block;
 		width: 11em;
 
@@ -189,9 +218,9 @@ owner {
 
 		margin-top: 1em;
 		margin-bottom: 1em;
-}
+	}
 
-recovery {
+	recovery {
 		display: block;
 		width: 17em;
 
@@ -205,9 +234,9 @@ recovery {
 		align-self: center;
 
 		margin-top: 1em;
-}
+	}
 
-passwordBlock {
+	passwordBlock {
 		display: grid;
 		margin-bottom: 1.5em;
 		font-size: 1.4em;
@@ -219,29 +248,30 @@ passwordBlock {
 		grid-template-columns: 5em auto;
 		grid-column-gap: 0.5em;
 		grid-row-gap: 0.2em;
-}
+	}
 
-passwordLabel,websiteLabel,usernameLabel {
+	passwordLabel,websiteLabel,usernameLabel {
 		text-align: right;
-}
+	}
 
-password {
+	password {
 		display: block;
 		font-family: 'inconsolata';
 		font-weight: 700;
 		font-size: 1.1em;
-}
+	}
 
-passwordSymbols {
+	passwordSymbols {
 		color: darkgrey;
 		border: 1px darkgrey dotted;
 		border-radius: 1em;
 		padding: 0.2em;
 		margin: 0.2em;
-}
+	}
 
-website,username {
+	website,username {
 		width: 100%;
 		border-bottom: black 1px dotted;
 		margin-bottom: 0.17em;
+	}
 }

passmate.js

@@ -23,14 +23,7 @@ class PassMate {
 
 		this.addOverview(container);
 
-		this.addPages(container, 26 * 2 + 4);
+		this.addProduct(container);
-		this.addFrontPage(this.pages[1]);
-		this.addInstructions1(this.pages[2]);
-		this.addInstructions2(this.pages[3]);
-		this.addPasswordPages(
-			this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)),
-			this.PAGES_PER_LETTER,
-			this.PASSWORDS_PER_PAGE);
 
 		this.recoveryIn.innerText = this.SAFE_ALPHANUM.charAt(this.VERSION) + this.generateMasterPassword().join('');
 		this.derivePasswords();
@@ -118,6 +111,18 @@ class PassMate {
 		});
 	}
 
+	addProduct(container) {
+		let product = this.addElement('product', container);
+		this.addPages(product, 26 * 2 + 4);
+		this.addFrontPage(this.pages[1]);
+		this.addInstructions1(this.pages[2]);
+		this.addInstructions2(this.pages[3]);
+		this.addPasswordPages(
+			this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)),
+			this.PAGES_PER_LETTER,
+			this.PASSWORDS_PER_PAGE);
+	}
+
 	addPages(container, numPages) {
 		let numSheets = numPages / 4;
 		for (let sheetNum = 0; sheetNum < numSheets; ++sheetNum) {