Gear list styling

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;
+}

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"
             }
         ]
     }

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));
 }

gear/index.html

@@ -12,6 +12,12 @@
       rel="stylesheet"
     />
     <link href="/global/global.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="/gear/gear.css"
+      type="text/css"
+      media="screen"
+    />
 
     <script type="module" src="/global/loadin.mjs"></script>
     <script type="module" src="/gear/page.mjs"></script>