Navbar

Haz pequeños cambios desde Dev Tools 😃

Hola chicas y chicos les quiero mostrar como uno puede guardar los cambios desde dev tools, esto es muy practico pero es recomendable solo hacer en los elementos que tenemos problemas, lo ideal es siempre trabajar desde nuestro entorno.
.

• Estando en el navegador irán a devtools y allí se posicionaran en source.

• Luego van a darle click a la opcion que esta abajo que dice “Add folder to workspace” o añadir carpeta a tu espacio de trabajo y seguido se posicionan en la carpeta que están trabajando y le dan seleccionar carpeta.

• Finalmente saldra un aviso en la parte superior de la pantalla donde lo único que deben hacer es dar click en “Allow”

.
Les deberá salir algo como esto. 😮

¡Y eso es todo! 😃 Ahora pueden realizar cambios que se reflejaran en tiempo real con su entorno de desarrollo.

NavBar

Les dejo mi resultado:

• Para resolver el problema de la posición final de la animación del Logo le agregue 30px de padding-top, quedando:

.navbar__content {
	    ....
	    padding: 30px 0 0 80px;
	    .....
}

Me gusto mucho esta clase, sin duda la aplicación del display grid con flexbox es una combinación muy buena.
Les dejo el código de esta clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/5-navbar

Aporte:
Para utilizar el shorthand de la propiedades de animación (animation), existe un estándar que determina el orden en que ponemos las propiedades dentro del valor de animation, el cual es:

animation:  [ <'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||<'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'> ] 

Un ejemplo seria:

animation: test 2s ease-in 0.2s infinity alternate forwards;

Si no te sigue tomando las FONTS, aca te dejo el link:

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;100;300&display=swap');

A mi no me lo tomaba, lo modifique y con este me tomo

Recuerden

• linear: sin variaciones de velocidad.
• ease: lento al principio, rápido en el medio y no tan rápido al final. (parecido a ease-in-out)
• ease-in: lento al principio, rápido al final.
• ease-out: rápido al principio, lento al final.
• ease-in-out: lento al principio, rápido en el medio y de nuevo lento al final

Literalmente una chimba esto de Sass (La animación sigue igual).

.navbar {
  grid-area: nav;

  div {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 30px 0 0 60px;
    animation: 2s navTo 0.1s ease-in-out;
    img {
      width: 50px;
    }

    ul {
      display: flex;
      justify-content: space-evenly;
      list-style: none;
      padding: 0;
      width: 450px;
      a {
        color: $color-secundary;
        text-decoration: none;
        font-weight: 700;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

El texto no lo toma, ya que la profesora tomó letras Italic.
Hay que tomarlas sin el Italic para no tener ese problema de que no ponga el tipo de letra.
Este seria el link
@import url(‘https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap’);

 
intente hacerlo antes de ver la clases pero no pude T^T.
 
Mi idea era hacer el contendor del header relative y su contenedor hijo Absolute para poder controlar la posición con top en la animacion.
Pero eso me hizo desacomodar todo por completo me pelee un rato con las posiciones, en fin me rendi y decidí ver la implementación de la profe… en fin aprendí que lo mas obvio puede ser la solución XD
 
el código esta en mi github por si alguien quiere darle una checada

ya esta habilitada la funcion de agregar el ampersan “&” en css entonces tambien lo puedes hacer asi

.navbar__content {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0 0 80px;

    & img {
        width: 50px;
    }
}

Yo me anime hacerlo un poco diferente: lo que hice fue que el nav iniciara con un transform: translateY(-100px); y la animación simplemente se encargaba de ```
@keyframes navbar {
100% {
transform: translateY(0);
}
}

Cada elemento debe ir dentro de su bloque

.navbar {
    background-color: pink;
    grid-area: nav;
}

.navbar .navbar__content {
    display: flex;
    align-items: center;
    width: 100%;
    padding-left: 80px;
    animation: navbar 2s 0.5s ease-in-out;
}

@keyframes navbar {
    0% {
        transform: translateY(-200px);
    }
    100% {
        transform: translateY(0);
    }
}

.navbar .navbar__content img {
    width: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar .navbar__content ul {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    padding: 0;
    width: 450px;
}

.navbar .navbar__content ul li a {
    text-decoration: none;
    color: var(--secundary-color);
    font-weight: 400;
}