From 628abc7ad1751ce724c19973e2bf78851710c68f Mon Sep 17 00:00:00 2001
From: ator-dev <dominic.codedeveloper@gmail.com>
Date: Tue, 14 May 2024 21:11:22 +0100
Subject: [PATCH] Highlight the header link to the "current" page

---
 files/projects/index.html |  2 +-
 files/stores/index.html   |  2 +-
 main.css                  | 22 +++++++++++++++++++---
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/files/projects/index.html b/files/projects/index.html
index afba024..be5e407 100644
--- a/files/projects/index.html
+++ b/files/projects/index.html
@@ -20,7 +20,7 @@
 		<header id="header">
 			<div class="brand">
 				<img class="logo-icon" src="/icons/mms.svg">
-				<h1 class="logo-title"><a href="/">Mark My Search</a></h1>
+				<h1 class="logo-title"><a href="/" class="current">Mark My Search</a></h1>
 			</div>
 			<div class="controls">
 				<nav>
diff --git a/files/stores/index.html b/files/stores/index.html
index 796c865..5267f0c 100644
--- a/files/stores/index.html
+++ b/files/stores/index.html
@@ -20,7 +20,7 @@
 		<header id="header">
 			<div class="brand">
 				<img class="logo-icon" src="/icons/mms.svg">
-				<h1 class="logo-title"><a href="/">Mark My Search</a></h1>
+				<h1 class="logo-title"><a href="/" class="current">Mark My Search</a></h1>
 			</div>
 			<div class="controls">
 				<nav>
diff --git a/main.css b/main.css
index 0883f21..84ac427 100644
--- a/main.css
+++ b/main.css
@@ -25,8 +25,8 @@
 	--bg-header-D: hsl(300, 30%, 23%);
 	--border-header-L: hsl(300 100% 88%);
 	--border-header-D: hsl(300 40% 40%);
-	--bg-nav-button-L: hsl(0 0% 100%);
-	--bg-nav-button-D: hsl(0 0% 15%);
+	--bg-nav-button-L: var(--bg-L);
+	--bg-nav-button-D: var(--bg-D);
 	--bg-nav-button-hover-L: var(--bg-header-L);
 	--bg-nav-button-hover-D: var(--bg-header-D);
 	--border-nav-button-L: var(--border-header-L);
@@ -189,11 +189,27 @@ article > .full-width {
 	border-radius: 0;
 }
 
+#header nav a.current::after {
+	content: "";
+	position: absolute;
+	top: calc(100% - 12px);
+	left: -2px;
+	height: 23px;
+	width: 100%;
+	border-left: 2px solid var(--border-nav-button);
+	border-right: 2px solid var(--border-nav-button);
+	background: var(--bg-nav-button);
+}
+
 #header nav a:hover {
 	background: var(--border-nav-button);
 }
 
-#header nav a:active {
+#header nav a:hover, #header nav a:hover::after {
+	background: var(--border-nav-button);
+}
+
+#header nav a:active, #header nav a:active::after {
 	background: var(--bg-header);
 	border-color: var(--bg-header);
 }