Highlight the header link to the "current" page

searchmarkers · May 14, 2024 · 628abc7 · 628abc7
1 parent 8d696b4
commit 628abc7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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);
 }