diff options
| -rw-r--r-- | public/global.css | 4 | ||||
| -rw-r--r-- | public/nav.css | 6 | ||||
| -rw-r--r-- | public/navbar.php | 8 | ||||
| -rw-r--r-- | public/products.css | 10 | ||||
| -rw-r--r-- | public/products.php | 8 |
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> |