Adding actual landing page text

Also changing over from a root level object to a root level list for `/gear/gear.json`

gear/gear.json

@@ -1,5 +1,5 @@
-{
+[
-    "bondage": {
+    {
         "name": "Bondage",
         "id": "bondage",
         "values": [
@@ -14,5 +14,31 @@
                 "desc": "Lots of 'em"
             }
         ]
+    },
+    {
+        "name": "Clothes",
+        "id": "clothes",
+        "values": []
+    },
+    {
+        "name": "Gags",
+        "id": "gags",
+        "values": []
+    },
+    {
+        "name": "Sensory Deprevation",
+        "id": "sensory-deprevation",
+        "values": []
+    },
+    {
+        "name": "Food Play",
+        "id": "food-play",
+        "values": [
+            {
+                "name": "Pet Bowl",
+                "id": "pet-bowl",
+                "desc": "A small dog bowl, ideal for kibble or other mostly solid foods"
             }
-}
+        ]
+    }
+]

gear/gear.mjs

@@ -6,7 +6,7 @@
  *
  * @typedef {{name: string, id: string, values: GearListItem[]}} GearListSection
  *
- * @typedef {{bondage: GearListSection}} GearList
+ * @typedef {GearListSection[]} GearList
  */
 
 /**
@@ -87,7 +87,7 @@ async function generateGearListArticle(position) {
     divider.setAttribute("class", "gl-divider");
     bondageItems.appendChild(divider);
 
-    for (const section of Object.values(list)) {
+    for (const section of list) {
         let listSection = buildSection(section);
         bondageItems.appendChild(listSection);
 

global/global.css

@@ -9,7 +9,7 @@ body {
     font-size: 16pt;
     margin: 0;
     min-height: 100svh;
-    height: 100svh;
+    height: fit-content;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -28,3 +28,16 @@ body {
     border-left: solid 2px #c6a0f6;
     border-right: solid 2px #c6a0f6;
 }
+
+a {
+    color: #cad3f5;
+}
+
+code {
+    font-family: "Roboto Mono", monospace;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12pt;
+    background-color: #363a4f;
+}

header/header.css

@@ -6,6 +6,8 @@ header {
     font-style: normal;
     font-size: 14pt;
 
+    background-color: #1e2030;
+
     height: 1.5rem;
     width: calc(100% - 1.5rem);
 

index.html

@@ -27,6 +27,22 @@
       </p>
     <![endif]-->
     <header id="hd-box"></header>
-    <article id="main">Look ma, I'm horny!</article>
+    <article id="main">
+      <p>
+        Welcome to my personal kink and gear list webpage! Keep in mind that any
+        gear listed may or may not be available at any given time (in
+        particular, clothes may be dirty or consumable items like tape or
+        diapers may be out of stock).
+      </p>
+
+      <p>
+        Also, if you would like to use this site temeplate for yourself, please
+        go to
+        <a href="https://git.aprileaton.net/nekoapril.blog/kinklist"
+          >the git repository to fork it</a
+        >, as well as editing the <code>/gear/gear.json</code> and
+        <code>/kinks/kinks.json</code> to reflect your own kink and gear lists.
+      </p>
+    </article>
   </body>
 </html>