RC-55 | Grit Skills | Setup

Apps/HeroSkillsCardV1/content.hbs

@@ -1 +1,12 @@
-<div class="HeroSkillsCardV1"></div>
+<div class="HeroSkillsCardV1">
+	<div class="label col-header skill-list-header">
+		<span>Grit Skills</span>
+		<span class="small">Rank</span>
+	</div>
+	<ol class="skill-list grit-skills">
+		<li></li>
+		<li></li>
+		<li></li>
+		<li></li>
+	</ol>
+</div>

Apps/HeroSkillsCardV1/style.css

@@ -1,10 +1,10 @@
-.ripcrypt .HeroSummaryCardV1 {
+.ripcrypt .HeroSkillsCardV1 {
 
 	/* Foundry Variable Tweaks */
 	--input-height: 1rem;
 
 	display: grid;
-	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 2.5fr);
+	grid-template-columns: repeat(3, minmax(0, 1fr));
 	grid-template-rows: repeat(13, minmax(0, 1fr));
 	column-gap: var(--col-gap);
 
@@ -29,4 +29,25 @@
 		text-overflow: ellipsis;
 		font-weight: bold;
 	}
+
+	.skill-list-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	.skill-list {
+		& > li {
+			padding-left: 4px;
+		}
+
+		& > :nth-child(even) {
+			background: var(--alt-row-background);
+			color: var(--alt-row-text);
+		}
+	}
+
+	.grit-skills {
+		grid-column: 1 / span 1;
+		grid-row: 2 / span 4;
+	}
 }

Apps/common.css

@@ -2,7 +2,9 @@
 
 @import url("./elements/button.css");
 @import url("./elements/input.css");
+@import url("./elements/lists.css");
 @import url("./elements/select.css");
+@import url("./elements/span.css");
 @import url("./elements/table.css");
 
 .ripcrypt {
@@ -11,7 +13,8 @@
 		margin: 0;
 	}
 
-	.HeroSummaryCardV1 {
+	.HeroSummaryCardV1,
+	.HeroSkillsCardV1 {
 		/* height: 270px; */
 		width: 680px;
 		--col-gap: 2px;

Apps/elements/lists.css

@@ -0,0 +1,12 @@
+.ripcrypt > .window-content {
+	ol {
+		list-style-position: inside;
+		margin: 0;
+		padding: 0;
+
+		> li {
+			margin: 0;
+			padding: 0;
+		}
+	}
+}

Apps/elements/span.css

@@ -0,0 +1,5 @@
+.ripcrypt > .window-content span {
+	&.small {
+		font-size: var(--font-size-10)
+	}
+}