Skip to content

Commit

Permalink
Merge branch 'hello-social' into staging
Browse files Browse the repository at this point in the history
  • Loading branch information
xxiicode committed Feb 10, 2024
2 parents fe7b5d9 + b076c90 commit d160541
Show file tree
Hide file tree
Showing 27 changed files with 662 additions and 136 deletions.
16 changes: 12 additions & 4 deletions app/current-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,24 @@ document.addEventListener("DOMContentLoaded", function () {
// hello-nav position when scrolling down
document.addEventListener('DOMContentLoaded', function () {
let nav = document.querySelector("#navbar");
let navHamb = document.querySelector('.nav-hamburger');
let navcloser = document.querySelector('.nav-close');
let navLinks = document.querySelector('.nav-links');

window.addEventListener('scroll', function () {
let scroll = window.scrollY;
if (window.innerWidth >= 768) {

if (scroll >= 60) {
nav.style.top = '-50px';
nav.style.top = '-45px';
navHamb.style.top = '15px';
navcloser.style.top = '15px';
navLinks.style.paddingTop = '90px';
} else {
nav.style.top = '0px';
nav.style.top = '12px';
navHamb.style.top = '60px';
navcloser.style.top = '60px';
navLinks.style.paddingTop = '135px';
}
}
});
});

Expand Down
76 changes: 76 additions & 0 deletions app/docs-nav-v3.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
console.log("Soy el docs-nav-v3.js");

/* Mobile nav */

const navOpener = document.querySelector('.nav-hamburger')
const navCloser = document.querySelector('.nav-close')
const navLinks = document.querySelector('.nav-links')
/* let navItems = navbar.querySelectorAll("li"); */


navOpener.addEventListener('click', () => {
navLinks.classList.add('open-nav')
navCloser.classList.add('open-nav')
navOpener.classList.add('close-nav')
})
navCloser.addEventListener('click', () => {
navLinks.classList.remove('open-nav')
navCloser.classList.remove('open-nav')
navOpener.classList.remove('close-nav')
})

/* if (window.innerWidth <= 768) {
navItems.forEach(item => {
item.addEventListener('click', () => {
nav.classList.remove('open-nav');
closer.classList.remove('open-nav');
opener.classList.remove('close-nav');
});
});
} */

/* hamburger menu scroll obdserver */
/* document.addEventListener("DOMContentLoaded", function() {
let navHamburger = document.querySelector(".nav-hamburger");
let close = document.querySelector(".nav-close");
window.addEventListener("scroll", function() {
let scroll = window.scrollY || document.documentElement.scrollTop;
if (window.innerWidth < 426) {
if (scroll >= 40) {
console.log("scroll");
hamburger.style.top = "12px";
close.style.top = "12px";
} else {
hamburger.style.top = "47px";
close.style.top = "47px";
}
}
});
});
*/


/* /* /* Mobile nav Scroll observer for nav-title active */
/* const menuItems = document.querySelectorAll('#navbar ul li a');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
const targetId = entry.target.getAttribute('id');
if (entry.isIntersecting) {
menuItems.forEach((menuItem) => {
menuItem.classList.remove('active');
if (menuItem.getAttribute('href') === `#${targetId}`) {
menuItem.classList.add('active');
}
});
}
});
}, {
threshold: 0.3
}); */

/* const sections = document.querySelectorAll('section');
sections.forEach((section) => {
observer.observe(section);
}); */
137 changes: 79 additions & 58 deletions brand/app/docs-styles.css → app/docs-styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -52,23 +52,19 @@ li strong {
}

a {
color: #1f8df0;
color: #4f4f58;
position: relative;
width: max-content;
}

nav#navbar > ul > li:first-child a {
text-transform: uppercase !important;
}

a::before {
content: '';
position: absolute;
width: 100%;
height: 2px;
border-radius: 2px;
background-color: #1f8df0;
bottom: 0px;
background-color: #7537f8;
bottom: -2px;
left: 0;
transform-origin: right;
transform: scaleX(0);
Expand All @@ -82,40 +78,66 @@ a:hover::before {

body nav {
position: fixed;
display: flex;
/* display: flex; */
display: none;
flex-direction: column;
gap: 20px;
padding: 20px;
background-color: white;
width: 240px;
height: 100vh;
border-top: 12px solid #7637f9;
top: 0;
right: -280px;
top: 12px;
right: 0px;
transition: right .3s ease-in-out;
z-index: 10;
z-index: 350;
overflow-y: auto;
}

body nav button#opener {
.hamburger {
z-index: 400;
position: fixed;
padding: 0;
right: 12px;
top: 32px;
background-color: #ffffff;
border-color: transparent;
border-radius: 116px;
position: absolute;
right: 250px;
top: 18px;
width: 73px;
height: 43px;
border-radius: 18px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}

.close {
z-index: 380;
position: fixed;
padding: 0;
right: 12px;
top: 32px;
background-color: #ffffff;
border-color: transparent;
border-radius: 18px;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
display: none;
}

.open-nav {
display: flex;
}

.close-nav {
display: none;
}

nav h2 {
z-index: 11;
}

button#opener img {
position: absolute;
top: 5px;
right: 34px;
}


body main {
padding-top: 20px;
Expand Down Expand Up @@ -164,6 +186,7 @@ main section.cover {
display: flex;
flex-direction: column;
gap: 40px;
align-items: flex-start;
}

/* main div#cover div#cover-image {
Expand All @@ -177,21 +200,40 @@ nav ul li a {
letter-spacing: 0.2px !important;
}

/* active navbar item */
#navbar a.active {
color: black;
border-bottom: 2px solid #7537f8;
}


/* media queries */

@media (max-width: 426px) {
.plfn-logo, .main-logo {
align-self: flex-start;
width: 77%;
}
.hamburger, .nav-close {
top: 47px;
}
}
@media (max-widh: 768px){
body nav {
padding-bottom: 100vh;
}
}
@media (min-width: 768px) {
body nav {
position: fixed;
display: flex;
flex-direction: column;
gap: 20px;
gap: 0;
padding: 20px;
background-color: white;
width: 300px;
height: 100vh;
border-top: 12px solid #7637f9;
top: 0;
top: 12px;
right: unset;
}

Expand All @@ -204,19 +246,19 @@ nav ul li a {

}

body nav button#opener {
body > button.hamburger,body > button.close {
display: none;
}

main section.cover {
display: grid;
align-items: center;
align-items: end;
grid-template-columns: auto 220px;
grid-template-rows: auto auto auto;
grid-template-rows: auto;
gap: 0px;
}
section.cover img:first-of-type {
grid-column: 1 / 2;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
section.cover img+img {
Expand All @@ -226,41 +268,20 @@ nav ul li a {
}
section.cover h1 {
grid-column: 1 / 2;
grid-row: 2 / 3;
grid-row: 1 / 2;
}
section.cover h2{
grid-column: 1 / 2;
grid-row: 3 / 4;
grid-row: 2 / 3;
line-height: 30px;
margin-top: 20px;
}
}

div.color-swatch {
height: 160px;
width: 160px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
img.plfn-logo {
left: 20px;
}

div.color-swatch-content {
display: grid;
grid-template-columns: 160px 1fr;
grid-template-rows: 1fr;
}

div.color-details ul {
list-style: none;
}

figure {
background: white;
padding: 32px;
border-radius: 4px;
text-align: center;
nav h2 {
margin-top: 19px;
}
Loading

0 comments on commit d160541

Please sign in to comment.