diff --git a/app/docs-nav-v3.js b/app/docs-nav-v3.js
index 5fb322a..c998f40 100644
--- a/app/docs-nav-v3.js
+++ b/app/docs-nav-v3.js
@@ -1,6 +1,6 @@
console.log("Soy el docs-nav-v3.js");
-/* mobil nav */
+/* eventListener para el hello-nav para manejar el display con clases */
const navOpener = document.querySelector('.nav-hamburger')
const navCloser = document.querySelector('.nav-close')
@@ -8,25 +8,25 @@ const navLinks = document.querySelector('.nav-links')
navOpener.addEventListener('click', () => {
navLinks.classList.add('open-nav')
- navCloser.classList.add('open-nav')
- navOpener.classList.add('close-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')
+/* navCloser.classList.remove('open-nav')
+ navOpener.classList.remove('close-nav') */
})
-/* position fixed on nav */
+/* Agrega el .position-fixed al nav */
document.addEventListener("DOMContentLoaded", function () {
let nav = document.querySelector(".nav-links");
- let hamburger = document.querySelector(".nav-hamburger");
+ let buttons = document.querySelector(".nav-buttons");
window.addEventListener("scroll", function () {
let scroll = window.scrollY;
- if (window.innerWidth > 768) { // Verifica el ancho de la ventana
+ if (window.innerWidth > 768) {
if (scroll >= 60) {
nav.classList.add("position-fixed");
} else {
@@ -35,9 +35,9 @@ document.addEventListener("DOMContentLoaded", function () {
}
if (scroll >= 60) {
- hamburger.style.top = '18px';
+ buttons.style.top = '18px';
} else {
- hamburger.style.top = '168px';
+ buttons.style.top = '55px';
}
});
});
diff --git a/app/docs-styles.css b/app/docs-styles.css
index 0bf1cc2..998a463 100644
--- a/app/docs-styles.css
+++ b/app/docs-styles.css
@@ -141,9 +141,7 @@ nav ul li a {
right: unset;
}
- button.hamburger, button.close {
- display: none;
- }
+
main section.cover {
display: grid;
diff --git a/app/styles.css b/app/styles.css
index e4b9110..6d9f979 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -16,15 +16,6 @@ img#tpg-wordmark {
position: absolute;
}
-main {
- grid-column: 1/2;
- grid-row: 2/3;
- position: block;
- /* position: absolute;
- left: 280px;
- */
-}
-
section.sub-brands-container {
max-width: 800px;
}
@@ -123,7 +114,7 @@ img.web-icon {
@media (min-width: 768px) {
.home-container {
justify-items: unset;
- grid-template-columns: 280px 1fr;
+ grid-template-columns: minmax(190px, 280px) 1fr;
grid-template-rows: auto;
grid-template-areas:
'header main'
@@ -181,7 +172,7 @@ header.home {
}
main.home {
- padding-left: 1px;
+ padding-inline: 15px;
}
main.sub-sitio {
@@ -190,19 +181,19 @@ main.sub-sitio {
}
-section#home-cover {
+#home-cover {
max-width: 990px;
- padding-top: 1.6rem;
+ padding-top: 2.5rem;
padding-bottom: 4rem;
border-bottom: 2px solid #0709240d;
- padding-top: 40px;
}
-section#home-cover p {
+
+#home-cover p {
max-width: 490px;
}
-section.sub-brand {
+.sub-brand {
margin-bottom: 2rem;
}
@@ -342,8 +333,143 @@ a:hover img.web-icon {
/* end h1 with images -seo- ///////////////////////*/
+/* The navigation bar ------------------ */
+
+/*reset agregado para buttons*/
+
+.hello-nav button {
+ border: none;
+ /* Elimina el borde por defecto */
+ background: none;
+ /* Elimina el fondo por defecto */
+ padding: 0;
+ /* Elimina el espacio interno por defecto */
+ font: inherit;
+ /* Utiliza la fuente del elemento contenedor */
+ cursor: pointer;
+ /* Muestra el cursor como puntero */
+ outline: none;
+ /* Elimina el contorno por defecto al enfocar */
+}
+
+/* END reset agregado para buttons*/
+
+
+.hello-nav div {
+ text-align: right;
+}
+
+.nav-links.position-fixed,
+.nav-buttons {
+ position: fixed;
+ background: #070924a8;
+ backdrop-filter: blur(20px);
+ z-index: 90;
+}
+
+.position-fixed a {
+ color: white;
+}
+
+.nav-links.position-fixed:hover {
+ border-color: rgba(255, 255, 255, 0.35);
+}
+
+.nav-links a {
+ text-decoration: none;
+}
+
+/* desktop */
+@media (min-width: 768px) {
+ .nav-buttons {
+ display: none;
+ }
+
+ .nav-links {
+ position: absolute;
+ right: 15px;
+ top: 55px;
+ padding-block: 10px;
+ display: flex;
+ gap: 15px;
+ padding: 15px 18px;
+ border-radius: 200px;
+ }
+ .nav-links.position-fixed {
+ top: 20px;
+ }
+}
+
+/* mobile */
+@media (max-width: 768px) {
+ #home-cover {
+ padding-top: unset;
-/* grid for sub-brands */
+ }
+ .nav-links {
+ display: none;
+ position: fixed;
+ background-color: rgba(0, 0, 0, 0.723);
+ backdrop-filter: blur(7px);
+ top: 0;
+ right: 0px;
+ padding-top: 100px;
+ padding-bottom: 100vh;
+ width: 100%;
+ z-index: 80;
+ display: none;
+ text-align: left;
+ font-family: 'BiotifBold', helvetica, arial, sans-serif;
+ font-weight: 700;
+ }
+ .nav-buttons {
+ padding: 7px 8px;
+ border-radius: 18px;
+ right: 15px;
+ top: 55px;
+ }
+
+ .hamburger svg {
+ fill: white;
+ }
+
+ .nav-hamburger {
+ display: flex;
+ }
+
+ .nav-links a {
+ padding-left: 20px;
+ font-size: 8vw;
+ color: #FFFFFF88;
+ padding: 14px 16px;
+ }
+
+ .nav-close {
+ z-index: 89;
+ display: none;
+ }
+
+ .nav-links.open-nav {
+ display: grid !important;
+ }
+
+ body:has(.nav-links.open-nav) {
+ overflow: hidden;
+ }
+ .nav-links.open-nav + .nav-buttons :is(.nav-hamburger) {
+ display: none;
+ }
+ .nav-links.open-nav + .nav-buttons :is(.nav-close) {
+ display: block;
+ }
+ .nav-links.open-nav + .nav-buttons {
+ background: none;
+ }
+}
+
+/* END of navigation bar ----------------- */
+
+/* family-of-brands */
.sub-brand {
display: grid;
grid-template-areas:
@@ -402,17 +528,18 @@ a.screen {
}
/* hide sub-brands from home page*/
-main #polyforum,
-main #polypress {
+main :is(#polyforum, #polypress) {
display: none;
}
-main .sub-brands-container hr:nth-last-child(-n+3) {
+.sub-brands-container hr:nth-last-of-type(-n+2) {
display: none;
}
/*end hide sub-brands*/
-/* end grid for sub-brands */
+
+
+/* end family-of-brands */
/* hello social media */
.hello-social {
@@ -449,113 +576,10 @@ main .sub-brands-container hr:nth-last-child(-n+3) {
/* end hello social media */
-/* start hello nav */
-
-/* .hello-nav {
- position: absolute;
- top: 55px;
- right: 15px;
- padding-block: 1rem;
- background-color: #1d272c;
- border-radius: 10px;
- z-index: 100;
- padding: 10px;
-}
-
-.hello-nav a {
- color: #ffffffc8;
-}
-
-.hello-nav a:hover {
- color: #ffffff;
-}
-
-.hello-nav a.current-page:hover {
- color: #ffffffc8;
-}
-
-.nav-links {
- position: fixed;
- display: flex;
- flex-direction: column;
- justify-content:flex-start;
- height: fit-content;
- 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;
-}
-
-@media screen and (min-width: 700px) {
- .nav-buttons {
- display: none;
- }
- .nav-close {
- display: none;
- }
- .nav-links {
- display: flex;
- }
- .nav-links {
- height: fit-content;
- padding-top: unset;
- display: flex;
- flex-direction: row;
- justify-content:flex-start;
- gap: 1rem;
- background-color: #1d272c;;
- }
-} */
-
-/* end old hello-nav */
-
/*************************** sub-styles *************************************/
.sub-sites-container {
display: grid;
+ grid-template-columns: 1fr;
align-items: start;
justify-items: center;
grid-template-areas:
@@ -563,15 +587,6 @@ main .sub-brands-container hr:nth-last-child(-n+3) {
'main';
}
-@media (min-width: 768px) {
- .sub-sites-container {
- justify-items: unset;
- grid-template-columns: 400px 1fr;
- grid-template-rows: auto;
- grid-template-areas:
- 'header main'
- }
-}
nav.sub-sites {
grid-area: header;
@@ -579,13 +594,11 @@ nav.sub-sites {
main.sub-sites {
grid-area: main;
- width: 760px;
padding-top: 60px;
margin-inline: unset;
+ padding-right: 10px;
}
-
-
#navbar li {
line-height: 1;
}
@@ -597,8 +610,30 @@ ul.toc {
}
/*///////////Media queries///////////*/
+/* mobile */
+@media (max-width: 768px) {
+ main.sub-sites {
+ padding-inline: 15px;
+ }
+}
+
+/* desktop */
+@media (min-width: 768px) {
+ .sub-sites-container {
+ justify-items: unset;
+ grid-template-columns: minmax(290px,400px) 1fr;
+ grid-template-rows: auto;
+ grid-template-areas:
+ 'header main'
+ }
+
+ main.sub-sites {
+ width: clamp(350px, 760px, 61vw);
+ }
+}
-/* table x */
+
+/* table */
th,
td,
th p,
@@ -631,7 +666,7 @@ table.buyer-persona tr:hover td p {
color: black;
}
-/* end table x */
+/* end table */
div.preview {
@@ -734,7 +769,6 @@ li[data-icon="1password"] {
/*************************** end sub-styles *************************************/
-/* issue to talk, this is not mobile first polykit*/
section#cover {
padding-top: 1.6rem;
}
@@ -751,10 +785,7 @@ section.sub-brands-container hr {
}
img.window-frame {
- min-width: calc(100% + 2px);
- margin-bottom: -2px;
- margin-left: -1px;
- margin-right: -1px;
+ min-width: calc(100%);
}
.sub-brands-container h2.heading-1 {
@@ -781,136 +812,4 @@ a.screen figure:hover {
}
-/* traido de polyfen */
-/* The navigation bar ------------------ */
-
-/*agregado*/
-
-.hello-nav button {
- border: none;
- /* Elimina el borde por defecto */
- background: none;
- /* Elimina el fondo por defecto */
- padding: 0;
- /* Elimina el espacio interno por defecto */
- font: inherit;
- /* Utiliza la fuente del elemento contenedor */
- cursor: pointer;
- /* Muestra el cursor como puntero */
- outline: none;
- /* Elimina el contorno por defecto al enfocar */
-}
-
-/* end agregado */
-
-
-.hello-nav div {
- text-align: right;
-}
-
-.position-fixed a {
- color: white;
-}
-
-.nav-links.position-fixed,
-.nav-buttons {
- position: fixed;
- right: 25px;
- top: 20px;
- background: #070924a8;
- padding: 7px 8px 2px;
- border-radius: 18px;
- backdrop-filter: blur(20px);
- z-index: 90;
-}
-
-.nav-links.position-fixed:hover {
- border-color: rgba(255, 255, 255, 0.35);
-}
-
-.nav-links a {
- padding: 14px 16px;
- text-decoration: none;
-}
-
-
-
-
-/* desktop */
-@media (min-width: 768px) {
- .nav-buttons {
- display: none;
- }
-
- .nav-links {
- position: absolute;
- right: 30px;
- top: 60px;
- padding-block: 10px;
- }
-
- .nav-close {
- display: none;
- }
-
- .nav-links.position-fixed,
- .nav-buttons {
- padding: 15px 8px 10px;
- border-radius: 200px;
- }
-}
-
-/* mobile */
-@media (max-width: 768px) {
- .nav-links {
- display: none;
- position: fixed;
- background-color: rgba(0, 0, 0, 0.723);
- backdrop-filter: blur(7px);
- top: 0;
- right: 0px;
- padding-top: 100px;
- padding-bottom: 100vh;
- width: 100%;
- z-index: 80;
- display: none;
- text-align: left;
- font-family: 'BiotifBold', helvetica, arial, sans-serif;
- font-weight: 700;
- }
-
- .hamburger svg {
- fill: white;
- }
-
- .nav-hamburger {
- display: flex;
- }
-
- .nav-links a {
- padding-left: 20px;
- font-size: 45px;
- }
-
- .nav-close {
- z-index: 667;
- position: fixed;
- right: 10px;
- top: 20px;
- display: none;
- }
-
- .nav-links.open-nav {
- display: grid !important;
- }
-
- .nav-close.open-nav {
- display: block !important;
- }
-
- .nav-links.open-nav+nav.hamburger {
- display: none;
- }
-}
-/* END of navigation bar ----------------- */
\ No newline at end of file
diff --git a/brand/content/visual-identity.php b/brand/content/visual-identity.php
index 4905d61..a06395a 100644
--- a/brand/content/visual-identity.php
+++ b/brand/content/visual-identity.php
@@ -4,14 +4,14 @@
Symbol
-
The Symbol expresses Polyfen's brand in its most essential, visual form. It represents the coming together of the (A) logical and (B) creative.
Logotype
-
The Logotype is made up of two parts: (1) the Symbol and (2) the Brand Name.
@@ -19,7 +19,7 @@
Family
-
4.2. Color scheme
@@ -80,19 +80,19 @@
4.3. Visual Language
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
-
Our Brand's illustrations uses the Retro Dudes set by Vectorly Space
.
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/business/index.php b/business/index.php
index 4110b37..a9c9dfd 100644
--- a/business/index.php
+++ b/business/index.php
@@ -61,15 +61,7 @@
+
\ No newline at end of file
diff --git a/imgs/window-frame-tide.svg b/imgs/window-frame-tide.svg
new file mode 100644
index 0000000..a373339
--- /dev/null
+++ b/imgs/window-frame-tide.svg
@@ -0,0 +1,11 @@
+
+
+
+
+
diff --git a/includes/family-of-brands.php b/includes/family-of-brands.php
index 2079343..d30b635 100644
--- a/includes/family-of-brands.php
+++ b/includes/family-of-brands.php
@@ -1,7 +1,7 @@
-
@@ -19,7 +19,7 @@ class="web-icon" alt="">polyfen.com
-
@@ -35,7 +35,7 @@ class="web-icon" alt="">polyfen.com
-
@@ -51,7 +51,7 @@ class="web-icon" alt="">polyfen.com
-
@@ -67,7 +67,7 @@ class="web-icon" alt="">polyfen.com
-
@@ -86,7 +86,7 @@ class="web-icon" alt="">polykit.xyz
-
@@ -102,7 +102,7 @@ class="web-icon" alt="">polykit.xyz
-
diff --git a/includes/hello-nav.php b/includes/hello-nav.php
index 3083305..cf92086 100644
--- a/includes/hello-nav.php
+++ b/includes/hello-nav.php
@@ -7,13 +7,10 @@
\ No newline at end of file
diff --git a/wiki/content/google-drive.php b/wiki/content/google-drive.php
index cf13768..f127814 100644
--- a/wiki/content/google-drive.php
+++ b/wiki/content/google-drive.php
@@ -1,5 +1,5 @@
\ No newline at end of file
diff --git a/wiki/content/sprints.php b/wiki/content/sprints.php
index 8e3a05a..4e5a230 100644
--- a/wiki/content/sprints.php
+++ b/wiki/content/sprints.php
@@ -1,6 +1,6 @@
2. Sprints
-We organize our tasks in time cycles of 1 week called a “Sprint”.
+We organize our tasks in time cycles of 1 week called a “Sprint”.
We schedule a call every Tuesday with the following agenda structure:
diff --git a/wiki/index.php b/wiki/index.php
index e728de1..647cb8a 100644
--- a/wiki/index.php
+++ b/wiki/index.php
@@ -50,16 +50,6 @@
13. Accounting workflow
+ 
+ 
+ 
+
+
+
diff --git a/imgs/icons/close_icon.svg b/imgs/icons/close_icon.svg
new file mode 100644
index 0000000..01de8da
--- /dev/null
+++ b/imgs/icons/close_icon.svg
@@ -0,0 +1,12 @@
+
+
+
+
\ No newline at end of file
diff --git a/imgs/window-frame-tide.svg b/imgs/window-frame-tide.svg
new file mode 100644
index 0000000..a373339
--- /dev/null
+++ b/imgs/window-frame-tide.svg
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/includes/family-of-brands.php b/includes/family-of-brands.php
index 2079343..d30b635 100644
--- a/includes/family-of-brands.php
+++ b/includes/family-of-brands.php
@@ -1,7 +1,7 @@
+ 
