diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index e91200e..9c179ec 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -64,6 +64,7 @@ header { list-style: none; a, span { + position: relative; display: flex; flex-direction: row; align-items: center; @@ -72,7 +73,15 @@ header { .feather { --icon-size: 24px; - margin-right: 10px; + } + + &:hover { + .tip { + visibility: visible; + opacity: 1; + transition: opacity ease-out 100ms; + transition-delay: 150ms; + } } } @@ -129,6 +138,45 @@ header { &.open { transform: translateX(0%); } + + li a { + .tip { + display: block; + margin-left: 8px; + } + } + } + } + } + + @media (min-width: $menuLayoutSwitchTreshold) { + nav ul li { + a .tip { + visibility: hidden; + position: absolute; + display: block; + width: max-content; + height: 30px; + padding: 4px 8px; + line-height: 22px; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + + text-align: center; + font-size: 18px; + color: $defaultTextColor; + opacity: 0; + transition: opacity ease-out 100ms, visibility step-end 150ms; + transition-delay: 0ms; + background-color: #000; + border-radius: 5px; + } + + &:last-child a .tip { + left: unset; + right: 4px; + transform: none; } } }