diff --git a/gear/gear.css b/gear/gear.css
index 260730d..9281b75 100644
--- a/gear/gear.css
+++ b/gear/gear.css
@@ -1 +1,35 @@
/* Gear-page specific CSS */
+
+.gl-item {
+ list-style-type: none;
+ list-style-position: unset;
+
+ margin: 0.25rem;
+ padding: 0.25rem;
+ border: solid 2px #7dc4e4;
+}
+
+.gl-item-list {
+ padding: 0rem;
+}
+
+.gl-item-name {
+ padding: 0.25rem;
+ margin: 0;
+ font-size: 18pt;
+ font-style: bold;
+}
+
+.gl-item-desc {
+ padding: 0.25rem;
+ margin: 0;
+ font-size: 16pt;
+ font-style: normal;
+}
+
+.gl-divider {
+ color: #c6a0f6;
+ width: calc(100% - 0.5rem);
+ size: 2px;
+ margin: 0.25rem;
+}
diff --git a/gear/gear.json b/gear/gear.json
index 4e36d13..84f0756 100644
--- a/gear/gear.json
+++ b/gear/gear.json
@@ -7,6 +7,11 @@
"name": "Rope",
"id": "rope",
"desc": "10m pink, black, or purple"
+ },
+ {
+ "name": "Collars",
+ "id": "collars",
+ "desc": "Lots of 'em"
}
]
}
diff --git a/gear/gear.mjs b/gear/gear.mjs
index ef6abb3..9469d71 100644
--- a/gear/gear.mjs
+++ b/gear/gear.mjs
@@ -32,12 +32,14 @@ async function getGearList() {
function gearToElement(gear, group) {
let li = document.createElement("li");
li.setAttribute("id", `gl-${group}-${gear.id}`);
+ li.setAttribute("class", "gl-item");
let heading = document.createElement("h3");
heading.setAttribute("class", "gl-item-name");
heading.textContent = gear.name;
li.appendChild(heading);
let description = document.createElement("p");
description.setAttribute("class", "gl-item-desc");
+ description.textContent = gear.desc;
li.appendChild(description);
return li;
}
@@ -61,6 +63,7 @@ function gearListToList(gear) {
function bondageItemsToUl(items) {
let ul = document.createElement("ul");
ul.setAttribute("id", `gl-${items.id}-list`);
+ ul.setAttribute("class", "gl-item-list");
for (const i of gearListToList(items)) {
ul.appendChild(i);
}
@@ -80,9 +83,17 @@ async function generateGearListArticle(position) {
heading.textContent = "Gear List";
bondageItems.appendChild(heading);
+ let divider = document.createElement("hr");
+ divider.setAttribute("class", "gl-divider");
+ bondageItems.appendChild(divider);
+
for (const section of Object.values(list)) {
let listSection = buildSection(section);
bondageItems.appendChild(listSection);
+
+ let divider = document.createElement("hr");
+ divider.setAttribute("class", "gl-divider");
+ bondageItems.appendChild(divider);
}
return bondageItems;
@@ -112,5 +123,5 @@ function buildSection(items) {
export async function attachGearList(position) {
document
.getElementById(position)
- .replaceWith(await generateGearListArticle(position));
+ ?.replaceWith(await generateGearListArticle(position));
}
diff --git a/gear/index.html b/gear/index.html
index c2466d3..ec35b53 100644
--- a/gear/index.html
+++ b/gear/index.html
@@ -12,6 +12,12 @@
rel="stylesheet"
/>
+