Add mods section

themes/red/layouts/_default/ffxiv.html

@@ -3,6 +3,9 @@
 
     <hr>
 
+    <div class="tabs-container">
+        <input type="radio" id="tab-1" name="my-tabs" checked>
+        <label for="tab-1" class="tab-label">Warrior of Light</label>
         <div class="container">
             <div class="box" style="width: 50%">
                 <h2>Character</h2>
@@ -53,10 +56,28 @@
             </div>
         </div>
 
+        <input type="radio" id="tab-2" name="my-tabs">
+        <label for="tab-2" class="tab-label">Mods</label>
+        <div class="container">
+            <div class="box">
+                <h2>My Mods</h2>
+
+                <p>I have created a few mods to enhance the game:</p>
+
+                <ul>
+                    <li><a href="https://xiv.zone/mods/rebound">Rebound</a>: Somehow even after the big graphical update, Square Enix hasn't fixed the bug where certain character physics (like the Viera ear wiggle) breaks under high framerates.</li>
+                    <li><a href="https://xiv.zone/mods/refitter">Refitter</a>: I didn't like how some armor fit on my WoL, so I fixed it myself.</li>
+                    <li><a href="https://xiv.zone/mods/hooky">Hooky</a>: I don't use this too much yet, but I really liked making it!</li>
+                </ul>
+        </div>
+    </div>
+
     <style>
         .container {
             display: flex;
             column-gap: 15px;
+            width: 100%;
+            order: 99;
         }
 
         .box {
@@ -65,5 +86,13 @@
             border: 1px solid gray;
             padding: 5px;
         }
+
+        .tabs-container {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .tabs-container > input[type="radio"]:not(:checked)+.tab-label+.container {
+            display: none;
+        }
     </style>
 {{ end }}