Begin work on the Hero Craft card itself

templates/Apps/HeroCraftCardV1/content.hbs

@@ -0,0 +1,26 @@
+<div class="HeroCraftCardV1">
+	<div data-aspect="focus" class="col-header aspect-header">
+		<span class="name">Focus</span>
+		<span class="small">Details</span>
+	</div>
+	<ol data-aspect="focus" class="num-before craft-list">
+		{{#each craft.focus as | craft |}}
+			{{#if craft}}
+				<li data-item-id="{{craft.uuid}}" data-ctx-menu="craft">
+					<span class="name">{{ craft.name }}</span>
+					{{#if craft.use}}
+						<rc-icon
+							name="icons/info-circle"
+							var:size="16px"
+							var:fill="currentColor"
+							data-tooltip="{{ craft.use }}"
+							data-tooltip-direction="UP"
+						></rc-icon>
+					{{/if}}
+				</li>
+			{{else}}
+				<li></li>
+			{{/if}}
+		{{/each}}
+	</ol>
+</div>

templates/Apps/HeroCraftCardV1/style.css

@@ -0,0 +1,58 @@
+.ripcrypt .HeroCraftCardV1 {
+	--col-gap: 8px;
+
+	display: grid;
+	column-gap: var(--col-gap);
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	grid-template-rows: repeat(15, minmax(0, 1fr));
+
+	background: var(--base-background);
+	color: var(--base-text);
+
+	.col-header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		background: var(--section-header-background);
+		color: var(--section-header-text);
+		padding: 2px 4px;
+		border-radius: 999px;
+	}
+
+	label, .label {
+		box-sizing: border-box;
+		padding: 2px 4px;
+		text-transform: uppercase;
+		font-size: var(--font-size-14);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-weight: bold;
+	}
+
+	.craft-list {
+		display: grid;
+		grid-template-rows: subgrid;
+
+		> :nth-child(even) {
+			background: var(--alt-row-background);
+			color: var(--alt-row-text);
+		}
+	}
+
+	span.name {
+		flex-grow: 1;
+	}
+
+	[data-aspect="focus"] { --row: 6; --col: 1; }
+
+	[data-aspect] {
+		&.aspect-header {
+			grid-row: var(--row);
+			grid-column: var(--col);
+		}
+		&.craft-list {
+			grid-row: calc(var(--row) + 1) / span 4;
+			grid-column: var(--col);
+		}
+	}
+}

templates/Apps/apps.css

@@ -3,6 +3,7 @@
 @import url("./CryptApp/style.css");
 @import url("./DelveDiceHUD/style.css");
 @import url("./DicePool/style.css");
+@import url("./HeroCraftCardV1/style.css");
 @import url("./HeroSummaryCardV1/style.css");
 @import url("./HeroSkillsCardV1/style.css");
 @import url("./RichEditor/style.css");

templates/css/common.css

@@ -21,7 +21,9 @@
 	}
 
 	.HeroSummaryCardV1,
-	.HeroSkillsCardV1 {
+	.HeroSkillsCardV1,
+	.HeroCraftCardV1 {
+		padding: 8px;
 		/* height: 270px; */
 		width: 680px;
 		--col-gap: 2px;

templates/css/elements/lists.css

@@ -15,6 +15,7 @@
 			counter-increment: list-index 1;
 			position: relative;
 			padding: 0 4px;
+			border-radius: 999px;
 		}
 
 		&.num-before > li::before,