diff --git a/app/current-page.js b/app/current-page.js
index 47c1a8d..66c54e0 100644
--- a/app/current-page.js
+++ b/app/current-page.js
@@ -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';
}
- }
});
});
diff --git a/app/docs-nav-v3.js b/app/docs-nav-v3.js
new file mode 100644
index 0000000..cec4d6e
--- /dev/null
+++ b/app/docs-nav-v3.js
@@ -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);
+}); */
\ No newline at end of file
diff --git a/brand/app/docs-styles.css b/app/docs-styles.css
similarity index 69%
rename from brand/app/docs-styles.css
rename to app/docs-styles.css
index 1508f07..245cebc 100644
--- a/brand/app/docs-styles.css
+++ b/app/docs-styles.css
@@ -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);
@@ -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;
@@ -164,6 +186,7 @@ main section.cover {
display: flex;
flex-direction: column;
gap: 40px;
+ align-items: flex-start;
}
/* main div#cover div#cover-image {
@@ -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;
}
@@ -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 {
@@ -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;
}
\ No newline at end of file
diff --git a/app/styles.css b/app/styles.css
index c801df8..f4345c4 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -4,12 +4,13 @@ body {
}
body {
- border-top: 12px solid #7637f9;
+ border-top: 8px solid #7637f9;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto;
justify-items: center;
padding-inline: 25px;
+ margin-top: 34px;
}
header {
@@ -25,6 +26,9 @@ img#tpg-wordmark {
position: absolute;
}
+iframe {
+ width: auto;
+}
main {
grid-column: 1/2;
grid-row: 2/3;
@@ -141,7 +145,6 @@ a::before {
width: 100%;
height: 2px;
border-radius: 2px;
- background-color: #1f8df0;
bottom: 0px;
left: 0;
transform-origin: right;
@@ -191,6 +194,7 @@ section#cover p {
width:100%;
height:100%;
z-index:9;
+ background-size: contain !important;
}
.polyfen a span { background:#ecf0f3 url(../imgs/sub-brands/polyfen-logo.svg) no-repeat left top;}
@@ -251,27 +255,34 @@ h2.title-2 {
.current-page {
opacity: 0.4;
}
+.current-page:hover {
+ opacity: 0.4;
+ color:#ffffffc8;
+}
/*///////////Media queries///////////*/
@media (min-width: 768px) {
body {
- border-top: 12px solid #7637f9;
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto;
justify-items: start;
padding-inline: unset;
}
-
+ .hello-social {
+ grid-column: 1/3;
+ grid-row: 1/2;
+ margin: 0 auto;
+ }
main {
grid-column: 2/3;
- grid-row: auto;
+ grid-row: 2/3;
}
header {
grid-column: 1/2;
- grid-row: auto;
+ grid-row: 2/3;
position: fixed;
}
@@ -293,4 +304,98 @@ h2.title-2 {
}
+}
+
+/* hello social media */
+.hello-social {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ display: flex;
+ justify-content:center;
+ gap: 1rem;
+ padding-inline: 0;
+ padding-block: 7px;
+ background-color: #1d272c;;
+}
+
+.hello-social a::before {
+ content: none;
+}
+
+.icon-social svg, .icon-social {
+ width: 20px;
+ height: 20px;
+ fill: #1f8df0;
+ display: block;
+}
+
+.icon-social svg:hover {
+ fill: #ffffff;
+}
+/* end hello social media */
+
+/* hello nav */
+.hello-nav {
+ z-index: 100;
+}
+.nav-links {
+ position: fixed;
+ height: 100vh;
+ padding-inline: 44px;
+ padding-top: 135px;
+ top: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content:flex-start;
+ gap: 1rem;
+ background-color: #1d272c;;
+}
+
+.nav-hamburger {
+ z-index: 400;
+ position: fixed;
+ padding: 0;
+ right: 12px;
+ top: 60px;
+ background-color: #ffffff;
+ border-color: transparent;
+ border-radius: 18px;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.nav-close {
+ z-index: 380;
+ position: fixed;
+ padding: 0;
+ right: 12px;
+ top: 60px;
+ background-color: #ffffff;
+ border-color: transparent;
+ border-radius: 18px;
+ width: 50px;
+ height: 50px;
+ align-items: center;
+ justify-content: center;
+ display: none;
+}
+.nav-links {
+ display: none;
+}
+.nav-buttons {
+ display: flex;
+}
+
+.open-nav {
+ display: flex;
+}
+
+.close-nav {
+ display: none;
}
\ No newline at end of file
diff --git a/app/sub-styles.css b/app/sub-styles.css
index 57f430e..1b59fe9 100644
--- a/app/sub-styles.css
+++ b/app/sub-styles.css
@@ -1,47 +1,30 @@
-.hello-nav {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- display: flex;
- justify-content:center;
- gap: 1rem;
- padding: 1rem;
- background-color: #1d272c;;
- }
+.hello-nav a {
+ color: #ffffffc8;
+}
- .hello-nav a {
- color: #ffffffc8;
- }
+.hello-nav a:hover {
+ color: #ffffff;
+}
+.hello-nav a.current-page:hover {
+ color: #ffffffc8;
+}
- .hello-nav a:hover {
- color: #ffffff;
- }
-
- body {
- margin-top: 50px;
- }
-
- body nav {
- margin-top: 0px;
- }
- @media (min-width: 768px) {
- body nav {
- margin-top: 50px;
- }
- }
+body nav {
+ margin-top: 39px;
+}
-
- .current-page {
- opacity: 0.4;
- }
+.current-page {
+ opacity: 0.4;
+}
- a.current-page:hover::before {
- content: none;
- }
+a.current-page:hover::before {
+ content: none;
+}
-body nav {
- background: none;
+@media (min-width: 768px) {
+ body nav {
+ background: none;
+ }
}
th, td, th p, td p {
@@ -99,4 +82,17 @@ div.swatch-container {
flex-direction: row;
gap: 24px;
flex-wrap: wrap;
+}
+
+a.link-logo:hover::before {
+ content: none;
+}
+
+/* Quitando el nav en mobile */
+
+@media (max-width: 768px) {
+ body > nav, body > .hamburger, body > .close {
+ display: none;
+ }
+
}
\ No newline at end of file
diff --git a/brand/content/visual-identity.php b/brand/content/visual-identity.php
index cbde66b..5f81b4a 100644
--- a/brand/content/visual-identity.php
+++ b/brand/content/visual-identity.php
@@ -78,13 +78,13 @@
4.3. Visual Language
-Icons
+Icons
All icons in Polyfen's touchpoints & communications should correspond to the Iconography set we've selected for our Brand, Phospor .
Phospor's line-icons are meant only for use at large sizes accross Polyfen's Brand, while for smaller sizes the fill-icons are preferred to ensure accessible legibility.
-Illustrations
+Illustrations
@@ -93,5 +93,9 @@
-Pearls
+Pearls
+
+
+ The Pearls are part of our visual dictoniary which we use to give plain backgrounds a bit more depth.
\ No newline at end of file
diff --git a/brand/imgs/pearls.png b/brand/imgs/pearls.png
new file mode 100644
index 0000000..2db994a
Binary files /dev/null and b/brand/imgs/pearls.png differ
diff --git a/brand/includes/head.php b/brand/includes/head.php
index 8b34b51..705b7ad 100644
--- a/brand/includes/head.php
+++ b/brand/includes/head.php
@@ -6,10 +6,13 @@
Brand Guidelines
diff --git a/business/imgs/the-polyfen-group-logo.svg b/business/imgs/the-polyfen-group-logo.svg
new file mode 100644
index 0000000..0f36041
--- /dev/null
+++ b/business/imgs/the-polyfen-group-logo.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/business/includes/head.php b/business/includes/head.php
index 3816971..a6c7ccd 100644
--- a/business/includes/head.php
+++ b/business/includes/head.php
@@ -6,11 +6,13 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/privacy/includes/head.php b/privacy/includes/head.php
index 2690626..e41fcde 100644
--- a/privacy/includes/head.php
+++ b/privacy/includes/head.php
@@ -10,6 +10,7 @@
+
- Table of Contents
+
+
+ Team Wiki
Privacy Policy 1. Definitions & Key Terms
-
- Privacy Policy
The Polyfen Group LLC
diff --git a/wiki/imgs/the-polyfen-group-logo.svg b/wiki/imgs/the-polyfen-group-logo.svg
new file mode 100644
index 0000000..0f36041
--- /dev/null
+++ b/wiki/imgs/the-polyfen-group-logo.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wiki/includes/head.php b/wiki/includes/head.php
index ce398bd..16ba54d 100644
--- a/wiki/includes/head.php
+++ b/wiki/includes/head.php
@@ -6,10 +6,13 @@
diff --git a/wiki/the-polyfen-group-logo.svg b/wiki/the-polyfen-group-logo.svg
new file mode 100644
index 0000000..0f36041
--- /dev/null
+++ b/wiki/the-polyfen-group-logo.svg
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/imgs/icons/github.svg b/imgs/icons/github.svg
new file mode 100644
index 0000000..dcc8fd8
--- /dev/null
+++ b/imgs/icons/github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/imgs/icons/instagram.svg b/imgs/icons/instagram.svg
new file mode 100644
index 0000000..ecce950
--- /dev/null
+++ b/imgs/icons/instagram.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/imgs/icons/linkedin-in.svg b/imgs/icons/linkedin-in.svg
new file mode 100644
index 0000000..7c7ec6d
--- /dev/null
+++ b/imgs/icons/linkedin-in.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/imgs/icons/x-twitter.svg b/imgs/icons/x-twitter.svg
new file mode 100644
index 0000000..f05aca9
--- /dev/null
+++ b/imgs/icons/x-twitter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/includes/hello-nav.php b/includes/hello-nav.php
index e317ad2..f74d627 100644
--- a/includes/hello-nav.php
+++ b/includes/hello-nav.php
@@ -1,6 +1,19 @@
\ No newline at end of file
diff --git a/includes/hello-social.php b/includes/hello-social.php
new file mode 100644
index 0000000..077171c
--- /dev/null
+++ b/includes/hello-social.php
@@ -0,0 +1,26 @@
+
\ No newline at end of file
diff --git a/index.php b/index.php
index a2be929..4392a33 100644
--- a/index.php
+++ b/index.php
@@ -53,6 +53,10 @@
+
+
+
+
diff --git a/privacy/app/privacy-scroll.js b/privacy/app/privacy-scroll.js
new file mode 100644
index 0000000..9c0c29f
--- /dev/null
+++ b/privacy/app/privacy-scroll.js
@@ -0,0 +1,17 @@
+// hello-nav position when scrolling down
+document.addEventListener('DOMContentLoaded', function () {
+ let nav = document.querySelector("#navbar");
+
+ window.addEventListener('scroll', function () {
+ let scroll = window.scrollY;
+ if (window.innerWidth >= 768) {
+ if (scroll >= 60) {
+ nav.style.top = '0px';
+ } else {
+ nav.style.top = '12px';
+ }
+ }
+ });
+});
+
+console.log('privacy-scroll.js loaded')
\ No newline at end of file
diff --git a/privacy/imgs/the-polyfen-group-logo.svg b/privacy/imgs/the-polyfen-group-logo.svg
new file mode 100644
index 0000000..0f36041
--- /dev/null
+++ b/privacy/imgs/the-polyfen-group-logo.svg
@@ -0,0 +1,58 @@
+
+
+
diff --git a/privacy/includes/head.php b/privacy/includes/head.php
index 2690626..e41fcde 100644
--- a/privacy/includes/head.php
+++ b/privacy/includes/head.php
@@ -10,6 +10,7 @@
+
-
-
+
diff --git a/privacy/index.php b/privacy/index.php
index 6d89cbb..4f6e264 100644
--- a/privacy/index.php
+++ b/privacy/index.php
@@ -12,7 +12,10 @@