From 9b407a50591d1b08336d558d7232e4423cbe7f08 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Mon, 24 Feb 2025 18:16:07 +0100
Subject: [PATCH] menu: hovered links

---
 src/_assets/css/base.css |  2 +-
 src/_assets/css/menu.css | 49 ++++++++++++++++++++--------------------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/_assets/css/base.css b/src/_assets/css/base.css
index 811346c..f10d0bc 100644
--- a/src/_assets/css/base.css
+++ b/src/_assets/css/base.css
@@ -27,7 +27,7 @@ body {
 a {
   color: inherit;
   text-decoration: none;
-  border-bottom: calc(0.5 * var(--step)) solid;
+  border-block-end: calc(0.5 * var(--step)) solid;
 }
 
 /* Typography */
diff --git a/src/_assets/css/menu.css b/src/_assets/css/menu.css
index de0e008..c517f23 100644
--- a/src/_assets/css/menu.css
+++ b/src/_assets/css/menu.css
@@ -37,21 +37,19 @@ header.menu {
 
 header.menu a {
   color: var(--color-fg);
-  text-decoration: none;
-
-  transition: opacity .2s ease;
-
-  border-bottom: 0;
+  border-block-end: 0;
+  border-color: transparent;
+  transition: border-color 0.3s ease;
 }
 header.menu a:hover {
-  opacity: 0.5;
+  border-block-end: calc(0.8 * var(--step)) solid var(--color-fg);
 }
 
 /* Topbar */
 
-.topbar {}
+header.menu .topbar {}
 @media (max-width: 768px) {
-  .topbar {
+  header.menu .topbar {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -62,13 +60,16 @@ header.menu a:hover {
 
 /* Logo */
 
-.logo a {
+header.menu .logo a {
   /* @see h1 in base.css */
   font-size: calc(9 * var(--step));
   line-height: 1;
 }
+header.menu .logo a:hover {
+  border-block-end: calc(1 * var(--step)) solid var(--color-fg);
+}
 @media (max-width: 768px) {
-  .logo a {
+  header.menu .logo a {
     font-size: calc(5 * var(--step));
     line-height: 1.6;
   }
@@ -76,7 +77,7 @@ header.menu a:hover {
 
 /* Hamburger Menu Button */
 
-.main-menu-button {
+header.menu .main-menu-button {
   display: none;
   background: none;
   border: none;
@@ -90,14 +91,14 @@ header.menu a:hover {
   box-sizing: content-box;
 }
 @media (max-width: 768px) {
-  .main-menu-button {
+  header.menu .main-menu-button {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
 }
 
-.main-menu-button-part {
+header.menu .main-menu-button-part {
   display: block;
 
   height: 20%;
@@ -108,7 +109,7 @@ header.menu a:hover {
 
 /* Menu or Dropdown Menu */
 
-.navbar {
+header.menu .navbar {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -116,29 +117,29 @@ header.menu a:hover {
   font-size: calc(4 * var(--step));
 }
 @media (max-width: 768px) {
-  .navbar {
+  header.menu .navbar {
     display: none;
   }
-  .navbar.active {
+  header.menu .navbar.active {
     display: block;
   }
 }
 
 /* List of Pages */
 
-.nav-links {
+header.menu .nav-links {
   padding: 0;
   margin: calc(8 * var(--step)) 0;
 }
 @media (max-width: 768px) {
-  .nav-links {
+  header.menu .nav-links {
     margin: calc(0 * var(--step)) 0;
     padding: calc(0 * var(--step));
     border-block: calc(0.5 * var(--step)) solid var(--color-fg);
   }
 }
 
-.nav-links li {
+header.menu .nav-links li {
   border-inline-end: calc(1 * var(--step)) solid;
   border-color: var(--color-inactive);
 
@@ -146,13 +147,13 @@ header.menu a:hover {
 
   list-style: none;
 }
-.nav-links li.active {
+header.menu .nav-links li.active {
   border-color: var(--color-fg);
 }
 
 /* Language Switcher */
 
-.nav-langs {
+header.menu .nav-langs {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
@@ -164,14 +165,14 @@ header.menu a:hover {
   text-transform: uppercase;
 }
 
-.nav-langs li {
+header.menu .nav-langs li {
   list-style: none;
 }
 
-.nav-langs .lang-separator {
+header.menu .nav-langs .lang-separator {
   color: var(--color-inactive);
 }
-.nav-langs .lang-separator:first-child {
+header.menu .nav-langs .lang-separator:first-child {
   display: none;
 }