--bgColorMidDark: #353b43;
--bgColorLightDark: #4f5864;
--bgColorLight: #D2D2D2;
- --navbarHoverColor: #111;
--globalScale: 1;
}
overflow: hidden;
}
+.hover {
+ --c:linear-gradient(#1482c8 0 0); /* update the color here */
+
+ padding-bottom: .15em;
+ background: var(--c), var(--c);
+ background-size: .3em .1em;
+ background-position:50% 100%;
+ background-repeat: no-repeat;
+ transition: .3s linear, background-size .3s .2s linear;
+}
+
+.hover:hover {
+ background-size: 50% .1em;
+ background-position: 10% 100%, 90% 100%;
+}
+
nav li {
display: flex;
align-items: center;
padding: 1rem 1.5rem;
text-decoration: none;
}
-
-nav li:hover {
- background-color: var(--navbarHoverColor);
-}
main {
grid-area: main;
<nav>
<ul>
{{ with .Site.GetPage "home" }}
- <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+ <li><a class="hover" href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
{{ range .Site.Sections }}
- <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+ <li><a class="hover" href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</nav>