added checkbox to not print certain cards

src/App.jsx

@@ -93,7 +93,9 @@ function App() {
 	return (
 		<div className="App">
 			<div className="header print-display-none">
+				<a href="/" style={{ color: "#fff", fontWeight: 800 }}>
 					FancyScribe
+				</a>
 				<div className="subheader">
 					A fancy way to view your Warhammer 40k BattleScribe rosters
 				</div>
@@ -139,7 +141,7 @@ function App() {
 							type="checkbox"
 							onChange={(e) => setOnePerPage(e.target.checked)}
 						/>
-						One Datacard per Page when printing
+						One Datacard per Page when Printing
 					</label>
 				</div>
 				<div className="print-display-none" style={{ color: "red" }}>

src/Roster.jsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import factionBackground from "./assets/factionBackground.png";
 import adeptusAstartesIcon from "./assets/adeptusAstartesIcon.png";
 import rangedIcon from "./assets/rangedIcon.png";
@@ -109,6 +110,7 @@ const Force = ({ force, onePerPage }) => {
 };
 
 const Unit = ({ unit, index, catalog, onePerPage }) => {
+	const [hide, setHide] = useState(false);
 	let {
 		name,
 		weapons,
@@ -160,7 +162,9 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
 	return (
 		<div
 			className={
-				"avoid-page-break " + (onePerPage && index !== 0 ? "page-break" : "")
+				"avoid-page-break" +
+				(onePerPage ? " page-break" : "") +
+				(hide ? " print-display-none" : "")
 			}
 			style={{
 				fontWeight: 500,
@@ -169,6 +173,10 @@ const Unit = ({ unit, index, catalog, onePerPage }) => {
 				marginBottom: 32,
 			}}
 		>
+			<label className="print-display-none">
+				<input type="checkbox" onChange={() => setHide(!hide)} />
+				Don't print this card.
+			</label>
 			<div
 				style={{
 					padding: "24px 0",

src/index.css

@@ -159,9 +159,9 @@ button:focus-visible {
 	break-inside: avoid;
 }
 
-.page-break {
+.page-break:not(.print-display-none) {
-	page-break-before: page;
+	page-break-after: page;
-	break-before: page;
+	break-after: page;
 }
 
 @media print {