he4et/xecut-site
1
0
Fork 0
mirror of https://github.com/He4eT/xecut-site.git synced 2026-05-05 01:47:25 +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 { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border-bottom: calc(0.5 * var(--step)) solid; border-block-end: calc(0.5 * var(--step)) solid;
} }
/* Typography */ /* Typography */

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

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