From 5786bc076a2cc283d6d5eb4b57553b35c34645a3 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Wed, 1 Jan 2025 15:50:13 -0700
Subject: [PATCH] RC-58 | Grip Skills | Setup

---
 Apps/HeroSkillsCardV1/content.hbs | 15 +++++++++++++--
 Apps/HeroSkillsCardV1/style.css   | 15 ++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/Apps/HeroSkillsCardV1/content.hbs b/Apps/HeroSkillsCardV1/content.hbs
index 4cc8d28..9270eeb 100644
--- a/Apps/HeroSkillsCardV1/content.hbs
+++ b/Apps/HeroSkillsCardV1/content.hbs
@@ -3,7 +3,7 @@
 		<span>Grit Skills</span>
 		<span class="small">Rank</span>
 	</div>
-	<ol class="skill-list grit-skills">
+	<ol class="skill-list even grit-skills">
 		<li></li>
 		<li></li>
 		<li></li>
@@ -14,7 +14,18 @@
 		<span>Gait Skills</span>
 		<span class="small">Rank</span>
 	</div>
-	<ol class="skill-list gait-skills">
+	<ol class="skill-list even gait-skills">
+		<li></li>
+		<li></li>
+		<li></li>
+		<li></li>
+	</ol>
+
+	<div class="label col-header skill-list-header grip-skills-header">
+		<span>Grip Skills</span>
+		<span class="small">Rank</span>
+	</div>
+	<ol class="skill-list odd grip-skills">
 		<li></li>
 		<li></li>
 		<li></li>
diff --git a/Apps/HeroSkillsCardV1/style.css b/Apps/HeroSkillsCardV1/style.css
index 259d5b1..4c12e5c 100644
--- a/Apps/HeroSkillsCardV1/style.css
+++ b/Apps/HeroSkillsCardV1/style.css
@@ -37,11 +37,15 @@
 		align-items: center;
 	}
 	.skill-list {
+		display: grid;
+		grid-template-rows: subgrid;
+
 		& > li {
 			padding-left: 4px;
 		}
 
-		& > :nth-child(even) {
+		&.even > :nth-child(even),
+		&.odd > :nth-child(odd) {
 			background: var(--alt-row-background);
 			color: var(--alt-row-text);
 		}
@@ -55,4 +59,13 @@
 		grid-column: 2 / span 1;
 		grid-row: 2 / span 4;
 	}
+
+	.grip-skills-header {
+		grid-column: 1 / span 1;
+		grid-row: 6 / span 1;
+	}
+	.grip-skills {
+		grid-column: 1 / span 1;
+		grid-row: 7 / span 4;
+	}
 }