From fb8b5408537152f3b91677be69406b1ce2759ba8 Mon Sep 17 00:00:00 2001 From: teffcode Date: Fri, 14 Apr 2023 16:38:40 -0500 Subject: [PATCH] add: bem methodology in header component --- index.html | 28 ++++++--------- js/menu-icon.js | 10 +++--- styles/header.css | 90 ++++++++++++++++------------------------------- 3 files changed, 46 insertions(+), 82 deletions(-) diff --git a/index.html b/index.html index 00214d1..4d21c8d 100644 --- a/index.html +++ b/index.html @@ -19,23 +19,17 @@ -
-
- -
-

Ralerv

- -
+
diff --git a/js/menu-icon.js b/js/menu-icon.js index 8341e05..20958e1 100644 --- a/js/menu-icon.js +++ b/js/menu-icon.js @@ -1,6 +1,6 @@ let menuIcon = document.getElementById("menu-icon") let menuList = document.getElementById("nav-list") -let menuLink = document.getElementsByClassName("nav-link") +let menuLink = document.getElementsByClassName("navbar__link") let divHider = document.getElementById("nav-body-hider") function crearListeners( ){ //Crear listeners para los elementos a escuchar @@ -11,14 +11,14 @@ function crearListeners( ){ //Crear listeners para los elementos } function showmenu() { //Pone clases en CSS que muestran el menu - menuList.classList.toggle("nav-list--show") - menuIcon.classList.toggle("menu-icon-img--show") + menuList.classList.toggle("navbar__list--show") + menuIcon.classList.toggle("navbar__menu-icon--show") divHider.classList.toggle("nav-body-hider--show") } function hidemenu() { //QUITA clases en CSS que muestran el menu - menuList.classList.toggle("nav-list--show") - menuIcon.classList.toggle("menu-icon-img--show") + menuList.classList.toggle("navbar__list--show") + menuIcon.classList.toggle("navbar__menu-icon--show") divHider.classList.toggle("nav-body-hider--show") } diff --git a/styles/header.css b/styles/header.css index 0356e70..0c9ca5a 100644 --- a/styles/header.css +++ b/styles/header.css @@ -1,8 +1,4 @@ -#nav-list li:last-child { /* QUITAR CUANDO AGREGAMOS EXTRAS */ - display: none; -} - -header { /* general distribution */ +.navbar { display: grid; grid-template-columns: 1fr 1fr 1fr; background-color: var(--dark-jungle-green); @@ -16,45 +12,34 @@ header { /* general distribution */ z-index: 1; } -.logo_name { /* Logo size */ - height: 100%; +.navbar__logo { + height: 50%; max-width: 30rem; display: flex; justify-content: center; align-items: center; } -.logo_name img, .menu-icon--span img { /* general imgs size */ - height: 50%; - object-fit: cover; -} - -#menu-icon { /* menu cursor efect */ - cursor: pointer; -} - -.name { /* size of name on header */ +.navbar__name { font-size: var(--xlg); + justify-self: start; } -.nav-header { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.nav-header span { /* img container styles */ - height: 92%; +.navbar__menu-icon { + height: 50%; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 2; + right: 30px; +} + +.navbar__menu-icon--show { + filter: invert(75%) sepia(47%) saturate(2805%) hue-rotate(168deg) brightness(87%) contrast(102%); } -.nav-list { /* option list styles */ +.navbar__list { height: 75vh; width: 100vw; position: absolute; @@ -64,76 +49,61 @@ header { /* general distribution */ list-style: none; display: flex; flex-direction: column; - justify-content: center; + justify-content: space-around; align-items: center; - transform: translateY(-100%); /* hide list */ + transform: translateY(-100%); transition: transform var(--normal-transition-time); } -.nav-list--show { /* show list */ - transform: translateY(0%); - box-shadow: 0px 15px 10px -15px rgb(0, 0, 0); -} - -.menu-icon-img--show { /* change img colors when nav list is show up */ - filter: invert(75%) sepia(47%) saturate(2805%) hue-rotate(168deg) brightness(87%) contrast(102%); -} - -.nav-header ul li a { /* a base styles */ +.navbar__link a { + transition: var(--short-transition-time); text-decoration: none; color: white; } -.nav-header ul li -,.nav-header ul li a { - height: 100%; - width: 100%; - display: flex; - justify-content: center; - align-items: center; +.navbar__link--extras { + display: none; } -.nav-header ul li{ - transition: var(--short-transition-time); - /* border-bottom: 0.4rem solid var(--blue-sapphire); */ +.navbar__list--show { + transform: translateY(0%); + box-shadow: 0px 15px 10px -15px rgb(0, 0, 0); } @media (any-hover: hover) { - .nav-header ul li:hover { /* hover for list options */ + .navbar__link:hover { background-color: var(--blue-sapphire); } } - + @media only screen and (min-width: 768px) { - header { /* general distribution */ + .navbar { display: grid; grid-template-columns: 1fr 1fr 3fr; - justify-items: unset; - top: 0; box-shadow: 0px 10px 12px 0px var(--dark-jungle-green-transparency); } - .nav-header span { /* img container styles */ + .navbar__menu-icon { display: none; } - .nav-list { /* option list styles */ + .navbar__list { position: static; height: 100%; width: 100%; list-style: none; display: flex; flex-direction: row; - justify-content: center; + justify-content: space-around; align-items: center; transform: translateY(0%); } - .nav-header ul li a { /* a base styles */ + .navbar__link { font-weight: lighter; } - .nav-list--show { /* show list */ + .navbar__list--show { transform: translateY(0%); box-shadow: none; }