From bd3481c2ccaef9a66be322f4d13902c86ad795e4 Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Thu, 18 Jan 2024 19:40:02 +0000
Subject: [PATCH] Made each product a link to its own product page

---
 static/css/products.css | 23 +++++++++++++++++++++++
 templates/content.html  |  4 ++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/static/css/products.css b/static/css/products.css
index 4aeb158..b15b85f 100644
--- a/static/css/products.css
+++ b/static/css/products.css
@@ -1,5 +1,28 @@
 /* Product Information*/
 
+.product-link:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 15%;
+    width: 0%;
+    border-bottom: 2px solid var(--fg);
+    transition: 0.4s;
+}
+
+.product-link:hover:after {
+    width: 70%;
+    color: var(--hover);
+}
+
+.product-link:hover {
+    color: var(--hover);
+}
+
+.product-link:active {
+    color: var(--header);
+}
+
 .product-container {
     width: 95%;
     background-color: var(--bg-grad-3);
diff --git a/templates/content.html b/templates/content.html
index 7032fe8..1b98811 100644
--- a/templates/content.html
+++ b/templates/content.html
@@ -3,7 +3,7 @@
 <div class="product-container">
     {% if products != None %}
         {% for product in products %}
-            <div class="product">
+            <a href="/products/{{product.id}}" class="product product-link">
                 <div class="product-title">{{product.name}}</div>
                     <div class="product-information">
                         <div class="product-image">
@@ -15,7 +15,7 @@
                         </div>
                     </div>
                 <div class="product-add-to-cart"></div>
-            </div>
+            </a>
         {% endfor %}    
     {% endif %}
 </div>