Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add: bem methodology in header component #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add: bem methodology in header component #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 11 additions & 17 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,17 @@
<link rel="stylesheet" type="text/css" href="./styles/footer.css">
</head>
<body>
<header>
<div class="logo_name">
<img src="https://bnz07pap001files.storage.live.com/y4m73aavuLav67rXpfv5YQV9XVWcFEIayYNdu7nBoVoBNov_Yv3Aa1d3MirZB7kaAKTU1oTNjxeh4IKd7Yt4WHuVuSm8wVZB2dxH2G5GK0ZBSeuV7MyRVKnIAwDyVn0d2lYHVfMLzLQ-1g4DQCoTNSF3nBqodDS4PHNyhUcRi61jjEntPRb5ZjwPdinvQSDz8Do?width=100&height=100&cropmode=none" alt="ralerv logo" class="ralerv-logo">
</div>
<p class="name">Ralerv</p>
<nav class="nav-header">
<span class="menu-icon--span img">
<img src="https://bnz07pap001files.storage.live.com/y4m_F8vTUDm7X4htzGd6YqLgKAxArwu-MVG32SmlkOfL8qH7Sdy5qQWEQ7MVebPt61mnS7FNzg1o8Cnes2fqIkbVpORY008xwmO16-2CEVvUvdRybpYiCfgs7vKItBp3c-aCQeGCMYeelcppqQsQdeqX1unY0keRtyOvBFdLiegGrWVgUUAD5FAzQBhmamzE8Dg?width=100&height=100&cropmode=none" alt="menu icon" id="menu-icon" class="menu-icon-img">
</span>
<ul class="nav-list" id="nav-list">
<li><a class="nav-link" href="#about">Acerca de mí</a></li>
<li><a class="nav-link" href="#projects">Proyectos</a></li>
<li><a class="nav-link" href="#social-tree">Encuentrame</a></li>
<li><a class="nav-link" href="#extras">Extras</a></li>
</ul>
</nav>
</header>
<nav class="navbar">
<img class="navbar__logo" src="https://bnz07pap001files.storage.live.com/y4m73aavuLav67rXpfv5YQV9XVWcFEIayYNdu7nBoVoBNov_Yv3Aa1d3MirZB7kaAKTU1oTNjxeh4IKd7Yt4WHuVuSm8wVZB2dxH2G5GK0ZBSeuV7MyRVKnIAwDyVn0d2lYHVfMLzLQ-1g4DQCoTNSF3nBqodDS4PHNyhUcRi61jjEntPRb5ZjwPdinvQSDz8Do?width=100&height=100&cropmode=none" alt="ralerv logo"">
<p class="navbar__name">Ralerv</p>
<img id="menu-icon" class="navbar__menu-icon" src="https://bnz07pap001files.storage.live.com/y4m_F8vTUDm7X4htzGd6YqLgKAxArwu-MVG32SmlkOfL8qH7Sdy5qQWEQ7MVebPt61mnS7FNzg1o8Cnes2fqIkbVpORY008xwmO16-2CEVvUvdRybpYiCfgs7vKItBp3c-aCQeGCMYeelcppqQsQdeqX1unY0keRtyOvBFdLiegGrWVgUUAD5FAzQBhmamzE8Dg?width=100&height=100&cropmode=none" alt="menu icon">
<ul id="nav-list" class="navbar__list">
<li class="navbar__link"><a href="#about">Acerca de mí</a></li>
<li class="navbar__link"><a href="#projects">Proyectos</a></li>
<li class="navbar__link"><a href="#social-tree">Encuentrame</a></li>
<li class="navbar__link navbar__link--extras"><a href="#extras">Extras</a></li>
</ul>
</nav>

<div class="nav-body-hider" id="nav-body-hider"></div>

Expand Down
10 changes: 5 additions & 5 deletions js/menu-icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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")
}

Expand Down
90 changes: 30 additions & 60 deletions styles/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down