Add buy more buttons (#217)

docs/index.md

@@ -59,10 +59,6 @@ Hexpansions are accessories that plug into the badge's expansion connectors. Alm
       <p>Link: <a href="https://github.com/emfcamp/badge-2024-hardware/tree/main/hexpansion">GitHub</a></p>
     </div>
   </span>
-  <span class="img-container">
-    <img src=" ../../images/hexpansions/tabasco.jpg" loading="lazy" alt="Hot Sauce hexpansion (chipotle flavor)" data-title="Emergency Hot Sauce hexpansion (chipotle flavor) by John Thurmond" data-description="">
-    <span class="label">Emergency Hot Sauce hexpansion (chipotle flavor) by John Thurmond</span>
-  </span>
   <span class="img-container">
     <img src=" ../../images/hexpansions/ducks.jpg" loading="lazy" alt="Tildagon badge with five duck hexpansions and an emergency hot sauce hexpansion" data-title="Duck hexpansion by Tiff" data-description=".custom-desc-ducks">
     <span class="label"><a href="https://www.instagram.com/tiffleek/reel/C7yx5jmNJ9d/">Ducks hexpansion</a> by Tiff</span>
@@ -96,11 +92,24 @@ Hexpansions are accessories that plug into the badge's expansion connectors. Alm
   </span>
   <span class="img-container">
     <img src=" ../../images/hexpansions/protoboard.jpg" loading="lazy" alt="A prototyping hexpansion for the EMF 2024 Tildagon Badge." data-title="Protoboard Hexpansion by Jake Walker" data-description=".custom-desc-protoboard">
-    <span class="label"><a href="https://www.tindie.com/products/jakew/protoboard-hexpansion/">💰 Protoboard Hexpansion</a> by Jake Walker</span>
+    <span class="label"><a href="https://www.tindie.com/products/jakew/protoboard-hexpansion/">Protoboard Hexpansion</a> by Jake Walker</span>
+    <span class="buyme"><a href="https://www.tindie.com/products/jakew/protoboard-hexpansion/"><p>💰 BUY HERE</p></a></span>
     <div class="glightbox-desc custom-desc-protoboard">
-      <p>Link: <a href="https://www.tindie.com/products/jakew/protoboard-hexpansion/">💰 BUY HERE</a></p>
+      <p>Link: <a href="https://www.tindie.com/products/jakew/protoboard-hexpansion/"></a></p>
+    </div>
+  </span>
+  <span class="img-container">
+    <img src=" ../../images/hexpansions/robotmad.jpg" loading="lazy" alt="Hex-Drive plugged into Hex-Dev" data-title="Hex-Drive and Hex-Dev by Team RobotMad" data-description=".custom-desc-robotmad">
+    <span class="label"><a href="https://robotmad.odoo.com/shop">Hex-Drive and Hex-Dev</a> by Team RobotMad</span>
+    <span class="buyme"><a href="https://robotmad.odoo.com/shop"><p>💰 BUY HERE</p></a></span>
+    <div class="glightbox-desc custom-desc-robotmad">
+      <p>Link: <a href="https://robotmad.odoo.com/shop">BUY HERE</a></p>
     </div>
   </span>
+  <span class="img-container collapsible collapsed">
+    <img src=" ../../images/hexpansions/tabasco.jpg" loading="lazy" alt="Hot Sauce hexpansion (chipotle flavor)" data-title="Emergency Hot Sauce hexpansion (chipotle flavor) by John Thurmond" data-description="">
+    <span class="label">Emergency Hot Sauce hexpansion (chipotle flavor) by John Thurmond</span>
+  </span>
   <span class="img-container collapsible collapsed">
     <img src=" ../../images/hexpansions/floppy-disk.jpg" loading="lazy" alt="Floppy disk hexpansion" data-title="Floppy disk 'Flopagon' by Nathan Dumont" data-description=".custom-desc-flopagon">
     <span class="label">Floppy disk <a href="https://github.com/hairymnstr/Flopagon">"Flopagon"</a> by Nathan Dumont</span>
@@ -154,13 +163,6 @@ Hexpansions are accessories that plug into the badge's expansion connectors. Alm
     <img src=" ../../images/hexpansions/breadbeard.jpg" loading="lazy" alt="Breadbeard hexpansion" data-title="Breadbeard Hexpansion by Danny Walker" data-description="">
     <span class="label">Breadbeard Hexpansion by Danny Walker</span>
   </span>
-  <span class="img-container collapsible collapsed">
-    <img src=" ../../images/hexpansions/robotmad.jpg" loading="lazy" alt="Hex-Drive plugged into Hex-Dev" data-title="Hex-Drive and Hex-Dev by Team RobotMad" data-description=".custom-desc-robotmad">
-    <span class="label"><a href="https://robotmad.odoo.com/shop">💰 Hex-Drive and Hex-Dev</a> by Team RobotMad</span>
-    <div class="glightbox-desc custom-desc-robotmad">
-      <p>Link: <a href="[https://www.printables.com/model/883719-emf-tildagon-hexpansion-gridfinity](https://robotmad.odoo.com/shop)">💰 BUY HERE</a></p>
-    </div>
-  </span>
   <span class="img-container collapsible collapsed">
     <img src=" ../../images/hexpansions/robotmad2.jpg" loading="lazy" alt="Many Hex-Drives" data-title="Hex-Drives by Team RobotMad" data-description="">
     <span class="label">Hex-Drives by Team RobotMad</span>

docs/style.css

@@ -59,4 +59,20 @@ div.scroll-container .img-container {
   display: inline-block;
   font-size: 16px;
   width: 100%;
+}
+
+.buyme p {
+  background-color: #528329;
+  margin: 0.5rem auto;
+  width: 100px;
+  height: 1rem;
+  color: white;
+}
+
+.buyme p:hover {
+  background-color: #213018;
+}
+
+#showmore:hover {
+  color: rgba(255,255,255,0.7)
 }