fix products style

5 files changed, 23 insertions, 13 deletions

diff --git a/public/global.css b/public/global.css
index 9120a5f..82dc446 100644
--- a/public/global.css
+++ b/public/global.css
@@ -16,3 +16,7 @@ body, html {
 	padding: 0 12px;
 }
 
+.nolinkstyle {
+	text-decoration: none !important;
+	color: currentColor;
+}
diff --git a/public/nav.css b/public/nav.css
index f5f540c..b1f5666 100644
--- a/public/nav.css
+++ b/public/nav.css
@@ -4,11 +4,7 @@ nav {
 }
 
 nav span { vertical-align: middle; }
-nav a {
-	text-decoration: none;
-	color: currentColor;
-	margin-right: 16px;
-}
+nav a { margin-right: 16px; }
 
 nav .site-icon {
 	height: 48px;
diff --git a/public/navbar.php b/public/navbar.php
index 34d88bb..f22a040 100644
--- a/public/navbar.php
+++ b/public/navbar.php
@@ -1,11 +1,11 @@
 <nav>
 	<div class="limwidth">
-		<a href="/" class="site-icon">
+		<a href="/" class="site-icon nolinkstyle">
 			<span class="icon mdi cart-outline"></span>
 			<span class="label">winkel</span>
 		</a>
-		<a href="/products.php"><span>producten</span></a>
-		<a href="/login.php"><span>login</span></a>
-		<a href="/cart.php"><span>mand (</span><span id="cartn">0</span><span>)</span></a>
+		<a href="/products.php" class="nolinkstyle"><span>producten</span></a>
+		<a href="/login.php" class="nolinkstyle"><span>login</span></a>
+		<a href="/cart.php" class="nolinkstyle"><span>mand (</span><span id="cartn">0</span><span>)</span></a>
 	</div>
 </nav>
diff --git a/public/products.css b/public/products.css
index a698a15..dae3805 100644
--- a/public/products.css
+++ b/public/products.css
@@ -3,6 +3,7 @@
 	display: grid;
 	grid-template-columns: repeat(var(--grid-columns), 1fr);
 	gap: 8px;
+	align-items: start;
 }
 @media (max-width: 600px) { .products { --grid-columns: 2; } }
 @media (max-width: 400px) { .products { --grid-columns: 1; } }
@@ -18,3 +19,12 @@
 	height: 100%;
 	object-fit: cover;
 }
+
+.product span {
+	display: block;
+	color: CanvasText;
+	text-decoration: none;
+}
+
+.product .price::before { content: "\20ac "; }
+.product .price { font-size: 1.5rem; }
diff --git a/public/products.php b/public/products.php
index b42e4db..077702a 100644
--- a/public/products.php
+++ b/public/products.php
@@ -10,22 +10,22 @@
 	<div class="main limwidth">
 		<h2>lijst met producten:</h2>
 		<div class="products">
-			<a href="/product.php?id=123" class="product">
+			<a href="/product.php?id=123" class="product nolinkstyle">
 				<img src="img/placeholder.png" alt="">
 				<span class="price">3,45</span>
 				<span class="name">courgette</span>
 			</a>
-			<a href="/product.php?id=123" class="product">
+			<a href="/product.php?id=123" class="product nolinkstyle">
 				<img src="img/placeholder.png" alt="">
 				<span class="price">3,45</span>
 				<span class="name">courgette</span>
 			</a>
-			<a href="/product.php?id=123" class="product">
+			<a href="/product.php?id=123" class="product nolinkstyle">
 				<img src="img/placeholder.png" alt="">
 				<span class="price">3,45</span>
 				<span class="name">courgette</span>
 			</a>
-			<a href="/product.php?id=123" class="product">
+			<a href="/product.php?id=123" class="product nolinkstyle">
 				<img src="img/placeholder.png" alt="">
 				<span class="price">3,45</span>
 				<span class="name">courgette</span>