link style

3 files changed, 23 insertions, 2 deletions

diff --git a/__pycache__/main.cpython-314.pyc b/__pycache__/main.cpython-314.pyc
index e6fb69a..afdb4d5 100644
--- a/__pycache__/main.cpython-314.pyc
+++ b/__pycache__/main.cpython-314.pyc
diff --git a/main.py b/main.py
index f9693b5..eb14d6d 100644
--- a/main.py
+++ b/main.py
@@ -82,7 +82,7 @@ def folder(path: str):
     local_path_list = path.split("/")
 
     home_btn = soup.new_tag("a")
-    home_btn["class"] = "breadcrumb-button"
+    home_btn["class"] = "link"
     home_btn["href"] = "/"
     home_btn.string = "🏠 altaf-files"
     soup.select_one("#breadcrumb-container").append(home_btn)
@@ -93,7 +93,7 @@ def folder(path: str):
         soup.select_one("#breadcrumb-container").append(new_sep)
 
         new_btn = soup.new_tag("a")
-        new_btn["class"] = "breadcrumb-button"
+        new_btn["class"] = "link"
         new_btn["href"] = "/" + "/".join(local_path_list[0:i + 1])
         new_btn.string = local_path_list[i]
         soup.select_one("#breadcrumb-container").append(new_btn)
diff --git a/style.css b/style.css
index f809e08..166ac5c 100644
--- a/style.css
+++ b/style.css
@@ -167,6 +167,27 @@ section {
 	color: black;
 }
 
+.link {
+	text-decoration: none;
+	background: linear-gradient(180deg, transparent calc(100% - 2px), black 0);
+	/* thanks MIT very cool */
+	transition: all .2s;
+	color: black;
+	background-color: transparent;
+	z-index: 9999;
+	height: fit-content;
+}
+
+.link:hover {
+	background: linear-gradient(180deg, #00000021 calc(100% - 2px), black 0);
+	color: #000000FA;
+}
+
+.link:focus {
+	color: #00000085;
+	background: linear-gradient(180deg, #00000021 calc(100% - 1px), black 0);
+}
+
 @media only screen and (max-width: 600px) {
 	:root {
 		--sidebar-size: 51px;