move fast and break things (I'm publishing without rigorous testing)

output/index.html

@@ -32,9 +32,16 @@
     </div>
     <div class="flex-col">
         <h2>Merchandise</h2>
-        <p>
+        <div class="product-grid">
-            <i>Coming soon... we'll be selling hats and t-shirts prolly</i>
+            
-        </p>
+
+            
+                                    <a class="product" href="https://shop.printyourcause.com/campaigns/the-panican-party-store/products/port-authority-adjustable-mesh-back-cap">
+                        <img src="http://localhost:8080/res/panican-hat-one.jpg" /><br>
+                        <b>Make America Panic Again Black Hat</b><br>
+                        <span>$30</span>
+                    </a>
+                                    </div>
     </div>
     <div class="flex-col">
         <h2>FAQ</h2>
@@ -80,6 +87,13 @@
             </div>
         </div>
     </div>
+    <div id="foot">
+        <div>
+            <span>The Panican Party is satire and is not a real political organization.</span><br>
+            <a href="https://discord.gg/ZwcU9xHaD5">Discord</a><br>
+            <a href="https://www.instagram.com/thepanicanparty?igsh=eHhpdHl5dWk1d2Rp">Instagram</a>
+        </div>
+    </div>
 
         <script src="http://localhost:8080/scrolly.js"></script>
     </body>

output/main.css

@@ -49,14 +49,11 @@ h3, b {
     font-family: "URW Gothic Bold";
 }
 
-body > div {
-    min-height: 100vh;
-}
-
 .flex-col, .flex-row {
     display: flex;
     align-items: center;
     justify-content: center;
+    min-height: 100vh;
 }
 
 .flex-col {
@@ -71,7 +68,7 @@ body > div {
     position: absolute;
     bottom: 50px;
     left: 50vw;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, 0%);
     margin: 0px;
 }
 
@@ -120,6 +117,35 @@ i {
     font-family: "URW Gothic Oblique";
 }
 
+.product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 300px);
+    max-width: 1200px;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.product > img {
+    max-width: 100%;
+}
+
+.product {
+    margin: 50px;
+    background-color: white;
+    box-shadow: 0px 0px 30px 30px rgb(61, 61, 61);
+    text-decoration: none;
+    transition: box-shadow 0.5s;
+}
+
+.product > * {
+    color: black;
+}
+
+.product:hover {
+    box-shadow: 0px 0px 0px 0px rgb(61, 61, 61);
+}
+
 @media (max-width: 1000px) {
     h1 {
         font-size: 3em;
@@ -136,4 +162,19 @@ i {
     .four-grid {
         grid-template-columns: 1fr;
     }
+
+    .four-grid > * {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    ul {
+        font-size: 1.5em;
+    }    
+}
+
+#foot {
+    height: max-content !important;
+    padding: 50px !important;
+    box-shadow: 0px 0px 0px 0px rgb(61, 61, 61);
 }

output/store.stx

@@ -0,0 +1 @@
+

site/index.html

@@ -19,9 +19,18 @@
     </div>
     <div class="flex-col">
         <h2>Merchandise</h2>
-        <p>
+        <div class="product-grid">
-            <i>Coming soon... we'll be selling hats and t-shirts prolly</i>
+            [#store.stx]
-        </p>
+            [f store product]
+                [i product.frontpage]
+                    <a class="product" href="[^product.link]">
+                        <img src="[^baseurl]/res/[^product.img]" /><br>
+                        <b>[^product.name]</b><br>
+                        <span>$[^product.price]</span>
+                    </a>
+                [/]
+            [/]
+        </div>
     </div>
     <div class="flex-col">
         <h2>FAQ</h2>
@@ -67,5 +76,12 @@
             </div>
         </div>
     </div>
+    <div id="foot">
+        <div>
+            <span>The Panican Party is satire and is not a real political organization.</span><br>
+            <a href="https://discord.gg/ZwcU9xHaD5">Discord</a><br>
+            <a href="https://www.instagram.com/thepanicanparty?igsh=eHhpdHl5dWk1d2Rp">Instagram</a>
+        </div>
+    </div>
 [/]
 [#default.html]

site/main.css

@@ -47,14 +47,11 @@ h3, b {
     font-family: "URW Gothic Bold";
 }
 
-body > div {
-    min-height: 100vh;
-}
-
 .flex-col, .flex-row {
     display: flex;
     align-items: center;
     justify-content: center;
+    min-height: 100vh;
 }
 
 .flex-col {
@@ -69,7 +66,7 @@ body > div {
     position: absolute;
     bottom: 50px;
     left: 50vw;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, 0%);
     margin: 0px;
 }
 
@@ -118,6 +115,35 @@ i {
     font-family: "URW Gothic Oblique";
 }
 
+.product-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 300px);
+    max-width: 1200px;
+    width: max-content;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.product > img {
+    max-width: 100%;
+}
+
+.product {
+    margin: 50px;
+    background-color: white;
+    box-shadow: 0px 0px 30px 30px rgb(61, 61, 61);
+    text-decoration: none;
+    transition: box-shadow 0.5s;
+}
+
+.product > * {
+    color: black;
+}
+
+.product:hover {
+    box-shadow: 0px 0px 0px 0px rgb(61, 61, 61);
+}
+
 @media (max-width: 1000px) {
     h1 {
         font-size: 3em;
@@ -134,4 +160,19 @@ i {
     .four-grid {
         grid-template-columns: 1fr;
     }
+
+    .four-grid > * {
+        margin-left: 20px;
+        margin-right: 20px;
+    }
+
+    ul {
+        font-size: 1.5em;
+    }    
+}
+
+#foot {
+    height: max-content !important;
+    padding: 50px !important;
+    box-shadow: 0px 0px 0px 0px rgb(61, 61, 61);
 }

site/store.stx

@@ -0,0 +1,10 @@
+[!]
+[=store-]
+    [=+-]
+        [=name "Make America Panic Again Black Hat"]
+        [=price "30"]
+        [=link "https://shop.printyourcause.com/campaigns/the-panican-party-store/products/port-authority-adjustable-mesh-back-cap"]
+        [=img "panican-hat-one.jpg"]
+        [=frontpage]
+    [/]
+[/]