Merge pull request #21 from CrawKatt/animation-hover

Animación a la barra de navegación

diff --git a/.gitignore b/.gitignore
index 7bfaec85857cd069f5cc69afd92da32d43808c3c..be51322d526e3191e51a644102c0156a758c0034 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,8 @@
 \#*#
 public_html/
 .hugo_build.lock
+<<<<<<< HEAD
+.idea/
+=======
+.idea/
+>>>>>>> c7947e0 (borrando articulo descartado)

diff --git a/themes/droda/assets/css/main.css b/themes/droda/assets/css/main.css
index b72fdf5f2509626d388ae99fbb6b80addde5a614..2bdc9c7741848d7445958030415da99314162fd9 100644 (file)
--- a/themes/droda/assets/css/main.css
+++ b/themes/droda/assets/css/main.css
@@ -22,7 +22,6 @@
    --bgColorMidDark: #353b43;
    --bgColorLightDark: #4f5864;
    --bgColorLight: #D2D2D2;
-   --navbarHoverColor: #111;
    --globalScale: 1;
    
 }
@@ -119,6 +118,22 @@ nav ul {
    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;
@@ -132,10 +147,6 @@ nav a {
    padding: 1rem 1.5rem;
    text-decoration: none;
  }
- 
-nav li:hover {
-   background-color: var(--navbarHoverColor);
-}
 
 main {
    grid-area: main;

diff --git a/themes/droda/layouts/partials/navbar.html b/themes/droda/layouts/partials/navbar.html
index c59a444d4ada02c8fd1bd178afb11acd2fafd2fb..3d6dc41bb86e8ce8af8dafa007fc2ea204ae4f1e 100644 (file)
--- a/themes/droda/layouts/partials/navbar.html
+++ b/themes/droda/layouts/partials/navbar.html
@@ -2,10 +2,10 @@
 <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>