change page indicator behavior a little bit lol

diff --git a/css/styles.css b/css/styles.css
index ddfa99a4ee32fe5a7f0ddea2960e866d0008ecf7..e1a6770d7f36d971c215cc6061d39f2ba944a258 100644 (file)
--- a/css/styles.css
+++ b/css/styles.css
@@ -97,6 +97,10 @@ header {
   background-color: var(--linkbg);
   border-radius: 1.4rem;
 }
+.nav-item.active-page-bg {
+  background-color: var(--linkbg);
+  border-radius: 1.4rem;
+}
 .nav-item:hover .nav-link,
 .nav-item:hover .project-link-name {
   color: var(--linkhover1);
@@ -110,6 +114,9 @@ header {
   line-height: 2rem;
   display: block;
 }
+.nav-link.active-page {
+  color: var(--linkhover1);
+}
 .project-link-info {
   font-size: 1.7rem;
   color: var(--textcolor3);
@@ -411,7 +418,7 @@ textarea {
 /* UNDER CONSTRUCTION */
 .under-construction-ctn {
   position: fixed;
-  height: 4rem;
+  height: fit-content;
   width: 100%;
   font-size: 2rem;
   text-align: center;

diff --git a/js/script.js b/js/script.js
index 20458a98452be97ee83eb7f40b4a71d6b8e99ba7..df8560e6cb54c02c953ad20188f6323fe886b7ee 100644 (file)
--- a/js/script.js
+++ b/js/script.js
@@ -23,6 +23,7 @@ console.log(active_page);
 const nav_links = document.querySelectorAll(".nav-link").forEach(link => {
   if(link.href.includes(active_page)) {
     link.classList.add("active-page");
+    link.closest(".nav-item").classList.add("active-page-bg");
   }
 })