From b24c07705a9c72f535fead0dea09082bf3bd46c3 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Wed, 1 Jan 2025 15:38:16 -0700
Subject: [PATCH] RC-55 | Grit Skills | Setup

---
 Apps/HeroSkillsCardV1/content.hbs | 13 ++++++++++++-
 Apps/HeroSkillsCardV1/style.css   | 25 +++++++++++++++++++++++--
 Apps/common.css                   |  5 ++++-
 Apps/elements/lists.css           | 12 ++++++++++++
 Apps/elements/span.css            |  5 +++++
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 Apps/elements/lists.css
 create mode 100644 Apps/elements/span.css

diff --git a/Apps/HeroSkillsCardV1/content.hbs b/Apps/HeroSkillsCardV1/content.hbs
index 0d9fc80..c8ff726 100644
--- a/Apps/HeroSkillsCardV1/content.hbs
+++ b/Apps/HeroSkillsCardV1/content.hbs
@@ -1 +1,12 @@
-<div class="HeroSkillsCardV1"></div>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/Apps/HeroSkillsCardV1/style.css b/Apps/HeroSkillsCardV1/style.css
index 47e7d2f..0f7200f 100644
--- a/Apps/HeroSkillsCardV1/style.css
+++ b/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;
+	}
 }
diff --git a/Apps/common.css b/Apps/common.css
index dcd2621..175d7a9 100644
--- a/Apps/common.css
+++ b/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;
diff --git a/Apps/elements/lists.css b/Apps/elements/lists.css
new file mode 100644
index 0000000..e2fdc88
--- /dev/null
+++ b/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;
+		}
+	}
+}
diff --git a/Apps/elements/span.css b/Apps/elements/span.css
new file mode 100644
index 0000000..ac5b330
--- /dev/null
+++ b/Apps/elements/span.css
@@ -0,0 +1,5 @@
+.ripcrypt > .window-content span {
+	&.small {
+		font-size: var(--font-size-10)
+	}
+}