Formatted all existing printed character sheet fields nicely

rpg-docs/client/views/character/printedCharacterSheet/printedCharacterSheet.css

@@ -10,9 +10,10 @@
 
 .printed > .page {
 	width: 100%;
-	padding: 1cm;
+	padding: 6mm;
 	page-break-inside: avoid;
 	page-break-after: always;
+	font-size: 3mm;
 }
 
 .printed .shrink-to-fit {
@@ -20,37 +21,87 @@
     overflow: hidden;
 }
 
-.double-border {
-	position: relative;
-	margin: 16px;
+.printed p {
+	margin-bottom: 1mm;
 }
 
-.double-border::after {
+.printed .double-border {
+	position: relative;
+	padding: 11px 10px;
+}
+
+.printed .double-border:before {
 	content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    border: 28px solid transparent;
-    border-image-source: url(/png/doubleLineImageBorder110x126.png);
+    border: 16px solid transparent;
+    border-image-source: url(/png/doubleLineImageBorder.png);
     border-image-slice: 110 126;
     border-image-repeat: stretch;
-    border-image-outset: 11px 10px;
     box-sizing: content-box;
+	z-index: -1;
+}
+
+.printed .double-border.printedAbility {
+	padding: 11px 6px 0;
+	margin-bottom: 3mm;
+}
+
+.printed .double-border.printedAbility:last-of-type {
+	margin-bottom: 0;
+}
+
+.printed .printedAbility .modifier {
+	position: relative;
+	top: 4px;
+	z-index: 1;
+	padding: 2px 32px;
+	background-image: url(/png/upwardPointingBorder.png);
+	background-position: center;
+	background-size: contain;
+	background-repeat: no-repeat;
+	-webkit-print-color-adjust: exact;
+}
+
+.printed .octogon-border {
+	position: relative;
+	padding: 0 20px;
+}
+
+.printed .octogon-border:before {
+	content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+	border: 22px solid transparent;
+	border-image: url(/png/octogonBorder.png) 124 118 fill;
+	z-index: -1;
+}
+
+.printed iron-icon {
+	width: 16px;
+	height: 16px;
 }
 
 .shield-background {
 	background: url(/png/shieldBorder.png);
-	background-size: contain;
+	background-size: cover;
 	background-repeat: no-repeat;
-	width: 102px;
-    height: 118px;
 	-webkit-print-color-adjust: exact;
+	padding: 4px 8px 8px;
+	width: 80px;
+	height: 91px;
+	position: relative;
+	top: -6px;
 }
 
 .shield-background .paper-font-subhead {
-	width: 80px;
+	width: 64px;
     text-align: center;
 	line-height: 1.1;
 }
@@ -68,5 +119,18 @@
 	app-drawer {
 		display: none;
 	}
-
+	.paper-font-subhead {
+		font-size: 3mm !important;
+		line-height: 3.5mm !important;
+		font-weight: bold !important;
+		text-transform: uppercase !important;
+	}
+	.paper-font-subhead.modifier {
+		font-size: 4mm !important;
+		line-height: 6mm !important;
+	}
+	.paper-font-display1 {
+		font-size: 8mm !important;
+		line-height: 12mm !important;
+	}
 }

rpg-docs/client/views/character/printedCharacterSheet/printedCharacterSheet.html

@@ -2,8 +2,8 @@
 	<div class="printed">
 		<div class="page">
 			<div class="layout vertical">
-				<div class="layout horizontal">
-					<div class="characterName paper-font-title">
+				<div class="layout horizontal" style="margin-bottom: 6mm">
+					<div class="characterName paper-font-title" style="margin-right: 4mm">
 						{{name}}
 					</div>
 					<div>
@@ -20,9 +20,15 @@
 					</div>
 				</div>
 				<div class="layout horizontal">
-					<div class="col1 padded flex layout vertical">
+					<div class="col1 flex layout vertical">
+						<div class="initiative" style="margin-bottom: 2mm;">
+							{{> printedLongStat stat="" name="Inspiration" prefix=""}}
+						</div>
+						<div class="proficiencyBonus" style="margin-bottom: 4mm;">
+							{{> printedLongStat stat="proficiencyBonus" name="Proficiency Bonus" prefix="+"}}
+						</div>
 						<div class="layout horizontal">
-							<div class="abilities padded layout vertical justified">
+							<div class="abilities layout vertical justified" style="margin-right: 4mm;">
 								{{> printedAbility ability="strength"     title="Strength"}}
 								{{> printedAbility ability="dexterity"    title="Dexterity"}}
 								{{> printedAbility ability="constitution" title="Constitution"}}
@@ -30,14 +36,8 @@
 								{{> printedAbility ability="wisdom"       title="Wisdom"}}
 								{{> printedAbility ability="charisma"     title="Charisma"}}
 							</div>
-							<div class="padded flex layout vertical">
-								<div class="proficiencyBonus">
-									{{> printedLongStat stat="proficiencyBonus" name="Proficiency Bonus" prefix="+"}}
-								</div>
-								<div class="saves">
-									<div class="paper-font-subhead">
-										Saving Throws
-									</div>
+							<div class="flex layout vertical">
+								<div class="saves double-border" style="margin-bottom: 2mm">
 									<div>
 										{{> printedSkillRow name="Strength"     skill="strengthSave"}}
 										{{> printedSkillRow name="Dexterity"    skill="dexteritySave"}}
@@ -46,11 +46,11 @@
 										{{> printedSkillRow name="Wisdom"       skill="wisdomSave"}}
 										{{> printedSkillRow name="Charisma"     skill="charismaSave"}}
 									</div>
-								</div>
-								<div class="skills">
-									<div class="paper-font-subhead">
-										Skills
+									<div class="paper-font-subhead layout vertical center">
+										Saving Throws
 									</div>
+								</div>
+								<div class="skills double-border">
 									<div>
 										{{> printedSkillRow name="Acrobatics"      skill="acrobatics"}}
 										{{> printedSkillRow name="Animal Handling" skill="animalHandling"}}
@@ -71,11 +71,14 @@
 										{{> printedSkillRow name="Stealth"         skill="stealth"}}
 										{{> printedSkillRow name="Survival"        skill="survival"}}
 									</div>
+									<div class="paper-font-subhead layout vertical center">
+										Skills
+									</div>
 								</div>
 							</div>
 						</div>
-						<div class="proficiencies">
-							<div class="paper-font-subhead">
+						<div class="proficiencies double-border" style="margin-top: 4mm">
+							<div class="paper-font-subhead layout vertical center">
 								Proficiencies
 							</div>
 							<div>
@@ -100,58 +103,107 @@
 							</div>
 						</div>
 					</div>
-					<div class="col2 padded flex">
+					<div class="col2 flex" style="margin-left: 4mm; margin-right: 4mm;">
 						<div class="layout vertical">
-							<div class="layout horizontal justified">
+							<div class="layout horizontal justified" style="margin-bottom: 2mm">
 								<div class="armor">
 									{{> printedSquareStat stat="armor" name="Armor Class" class="shield-background"}}
 								</div>
 								<div class="inititive">
-									{{> printedSquareStat stat="initiative" name="Initiative" isSkill="true"}}
+									{{> printedSquareStat stat="initiative" name="Initiative" isSkill="true" class="double-border"}}
 								</div>
 								<div class="speed">
-									{{> printedSquareStat stat="speed" name="Speed"}}
+									{{> printedSquareStat stat="speed" name="Speed" class="double-border"}}
 								</div>
 							</div>
-							<div class="hitpoints padded layout vertical">
-								<div>Hit Points</div>
+							<div class="hitpoints layout vertical double-border" style="margin-bottom: 2mm;">
+								<div>
+									Hit point maximum:
+									<span class="paper-font-subhead">
+										{{characterCalculate "attributeBase" _id "hitPoints"}}
+									</span>
+								</div>
+								<div class="flex" style="width: 3cm; height: 2cm;">
+									<!-- Space for writing -->
+								</div>
+								<div class="layout vertical center paper-font-subhead">
+									Hit Points
+								</div>
+							</div>
+							<div class="tempHitpoints layout vertical  double-border" style="margin-bottom: 2mm;">
 								<div style="width: 3cm; height: 2cm;">
-									<!-- Space for writing-->
+									<!-- Space for writing -->
 								</div>
-								<div class="layout horizontal end-justified">
-									/{{characterCalculate "attributeBase" _id "hitPoints"}}
+								<div  class="layout vertical center paper-font-subhead">
+									Temporary Hit Points
 								</div>
 							</div>
-							<div class="tempHitpoints padded layout vertical">
-								<div>Temporary Hit Points</div>
-								<div style="width: 3cm; height: 2cm;">
-									<!-- Space for writing-->
-								</div>
-							</div>
-							<div class="hitDice">
-								Hit Dice
-							</div>
-							<div class="deathSaves layout vertical">
-								<div class="layout horizontal center">
-									<div class="flex">
-										Successes
+							<div class="layout horizontal">
+								<div class="hitDice double-border layout vertical" style="margin-right: 2mm;">
+									<div>
+										Total:
+										<span class="paper-font-subhead">
+											Total goes here
+										</span>
 									</div>
-									<iron-icon icon="radio-button-unchecked"></iron-icon>
-									<iron-icon icon="radio-button-unchecked"></iron-icon>
-									<iron-icon icon="radio-button-unchecked"></iron-icon>
-								</div>
-								<div class="layout horizontal center">
 									<div class="flex">
-										Failures
+										<!-- Space for writing -->
+									</div>
+									<div class="paper-font-subhead layout vertical center">
+										Hit Dice
+									</div>
+								</div>
+								<div class="deathSaves layout vertical  double-border">
+									<div class="layout horizontal center">
+										<div class="flex layout vertical end" style="margin-right: 1mm;">
+											Successes
+										</div>
+										<iron-icon icon="radio-button-unchecked"></iron-icon>
+										<iron-icon icon="radio-button-unchecked"></iron-icon>
+										<iron-icon icon="radio-button-unchecked"></iron-icon>
+									</div>
+									<div class="layout horizontal center">
+										<div class="flex layout vertical end" style="margin-right: 1mm;">
+											Failures
+										</div>
+										<iron-icon icon="radio-button-unchecked"></iron-icon>
+										<iron-icon icon="radio-button-unchecked"></iron-icon>
+										<iron-icon icon="radio-button-unchecked"></iron-icon>
+									</div>
+									<div class="paper-font-subhead layout vertical center" style="margin-top: 4mm;">
+										Death Saves
 									</div>
-									<iron-icon icon="radio-button-unchecked"></iron-icon>
-									<iron-icon icon="radio-button-unchecked"></iron-icon>
-									<iron-icon icon="radio-button-unchecked"></iron-icon>
 								</div>
 							</div>
 						</div>
 						<div class="attacks"></div>
-						<div class="persona"></div>
+
+					</div>
+					<div class="col3 flex">
+						<div class="traits double-border">
+							{{#markdown}}{{evaluateShortString character._id character.personality}}{{/markdown}}
+							<div class="paper-font-subhead layout vertical center">
+								Personality traits
+							</div>
+						</div>
+						<div class="ideals double-border" style="margin-top: 2mm">
+							{{#markdown}}{{evaluateShortString character._id character.ideals}}{{/markdown}}
+							<div class="paper-font-subhead layout vertical center">
+								Ideals
+							</div>
+						</div>
+						<div class="bonds double-border" style="margin-top: 2mm">
+							{{#markdown}}{{evaluateShortString character._id character.bonds}}{{/markdown}}
+							<div class="paper-font-subhead layout vertical center">
+								Bonds
+							</div>
+						</div>
+						<div class="flaws double-border" style="margin-top: 2mm">
+							{{#markdown}}{{evaluateShortString character._id character.flaws}}{{/markdown}}
+							<div class="paper-font-subhead layout vertical center">
+								Flaws
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>

rpg-docs/client/views/character/printedCharacterSheet/printedLongStat/printedLongStat.css

@@ -0,0 +1,20 @@
+.printedLongStat .title {
+	white-space: nowrap;
+	margin-left: 2mm;
+}
+
+.printedLongStat .numbers {
+	z-index: 1;
+	min-width: 74px;
+	min-height: 45px;
+}
+
+.printed .printedLongStat.double-border{
+	padding: 0;
+}
+
+.printed .printedLongStat.double-border:before {
+    top: 4px;
+    bottom: 4px;
+    left: 33px;
+}

rpg-docs/client/views/character/printedCharacterSheet/printedLongStat/printedLongStat.html

@@ -1,10 +1,12 @@
 <template name="printedLongStat">
-	<div class="printedLongStat layout horizontal">
-		<div class="numbers paper-font-display1">
-				{{#if isSkill}}
-					{{prefix}}{{skillMod}}
-				{{else}}
-					{{prefix}}{{characterCalculate "attributeValue" ../_id stat}}
+	<div class="printedLongStat layout horizontal double-border">
+		<div class="numbers paper-font-display1 octogon-border">
+				{{#if stat}}
+					{{#if isSkill}}
+						{{prefix}}{{skillMod}}
+					{{else}}
+						{{prefix}}{{characterCalculate "attributeValue" ../_id stat}}
+					{{/if}}
 				{{/if}}
 		</div>
 		<div class="paper-font-subhead title flex layout horizontal center">

rpg-docs/client/views/character/printedCharacterSheet/printedSkillRow/printedSkillRow.css

@@ -0,0 +1,10 @@
+.printedSkillRow {
+	height: 24px;
+	min-width: 140px;
+}
+
+.printedSkillRow .skill-mod {
+	width: 36px;
+    text-align: center;
+	font-size: 3.5mm;
+}

rpg-docs/client/views/character/printedCharacterSheet/printedSquareStat/printedSquareStat.css

@@ -0,0 +1,4 @@
+.printedSquareStat {
+	min-width: 75px;
+	min-height: 75px;
+}

rpg-docs/client/views/character/printedCharacterSheet/printedSquareStat/printedSquareStat.html

@@ -1,5 +1,5 @@
 <template name="printedSquareStat">
-	<div class="printedSquareStat padded layout vertical center center-justified {{class}}">
+	<div class="printedSquareStat layout vertical center {{class}}">
 		<div class="numbers paper-font-display1">
 			{{#if isSkill}}
 				{{prefix}}{{skillMod}}