he4et/xecut-site
1
0
Fork 0
mirror of https://github.com/He4eT/xecut-site.git synced 2026-05-04 17:37:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

menu: hovered links

Browse source
This commit is contained in:
He4eT 2025-02-24 18:16:07 +01:00
commit 9b407a5059
2 changed files with 26 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_assets/css/base.css
View file

@ -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 */

49
src/_assets/css/menu.css
View file

@ -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;
}