diff --git a/app/current-page.js b/app/current-page.js
index 66c54e0..ef76d83 100644
--- a/app/current-page.js
+++ b/app/current-page.js
@@ -10,8 +10,8 @@ document.addEventListener("DOMContentLoaded", function () {
})
});
-
-// hello-nav position when scrolling down
+// planeo remplazar con sticky
+/* // hello-nav position when scrolling down
document.addEventListener('DOMContentLoaded', function () {
let nav = document.querySelector("#navbar");
let navHamb = document.querySelector('.nav-hamburger');
@@ -23,6 +23,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (scroll >= 60) {
nav.style.top = '-45px';
+ nav.style.top = '-30px';
navHamb.style.top = '15px';
navcloser.style.top = '15px';
navLinks.style.paddingTop = '90px';
@@ -35,4 +36,6 @@ document.addEventListener('DOMContentLoaded', function () {
});
});
-console.log('current-page.js loaded!!!')
\ No newline at end of file
+console.log('current-page.js loaded!!!')
+ */
+console.log('current-page.js loaded!!')
diff --git a/app/docs-mobile-nav-v2-local.js b/app/docs-mobile-nav-v2-local.js
index 083b437..8569f30 100644
--- a/app/docs-mobile-nav-v2-local.js
+++ b/app/docs-mobile-nav-v2-local.js
@@ -52,25 +52,3 @@ document.addEventListener("DOMContentLoaded", function() {
-/* 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.1
-});
-
-const sections = document.querySelectorAll('section:not(:first-of-type)');
-sections.forEach((section) => {
- observer.observe(section);
-});
\ No newline at end of file
diff --git a/app/docs-nav-v3.js b/app/docs-nav-v3.js
index cec4d6e..a915511 100644
--- a/app/docs-nav-v3.js
+++ b/app/docs-nav-v3.js
@@ -5,20 +5,78 @@ console.log("Soy el docs-nav-v3.js");
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')
+ 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')
+ navLinks.classList.remove('open-nav')
+ navCloser.classList.remove('open-nav')
+ navOpener.classList.remove('close-nav')
})
+/* position fixed on nav */
+
+document.addEventListener("DOMContentLoaded", function () {
+ let nav = document.querySelector(".nav-links");
+ let hamburger = document.querySelector(".nav-hamburger");
+
+ window.addEventListener("scroll", function () {
+ let scroll = window.scrollY;
+
+ if (window.innerWidth > 768) { // Verifica el ancho de la ventana
+ if (scroll >= 60) {
+ nav.classList.add("position-fixed");
+ } else {
+ nav.classList.remove("position-fixed");
+ }
+ }
+
+ if (scroll >= 60) {
+ hamburger.style.top = '18px';
+ } else {
+ hamburger.style.top = '168px';
+ }
+ });
+});
+
+
+
+
+/* end position fixed on nav */
+
+/* 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.1
+});
+
+const sections = document.querySelectorAll('section:not(:first-of-type)');
+sections.forEach((section) => {
+ observer.observe(section);
+});
+/* END mobile nav scroll observer for nat-title active */
+
+
+
+
+
+
+
/* if (window.innerWidth <= 768) {
navItems.forEach(item => {
item.addEventListener('click', () => {
@@ -73,4 +131,4 @@ const observer = new IntersectionObserver((entries) => {
/* const sections = document.querySelectorAll('section');
sections.forEach((section) => {
observer.observe(section);
-}); */
\ No newline at end of file
+}); */
diff --git a/app/docs-styles.css b/app/docs-styles.css
index 245cebc..2f0db8c 100644
--- a/app/docs-styles.css
+++ b/app/docs-styles.css
@@ -1,62 +1,8 @@
-html,
-body {
- background: #ecf0f3;
-}
-
-body {
- border-top: 12px solid #7637f9;
-}
-
-* {
- font-family: BiotifMedium;
-}
-
-.BiotifMedium {
- font-family: BiotifMedium;
-}
-
-.BiotifBold {
- font-family: BiotifBold;
-}
-
-.BiotifExtraBold {
- font-family: BiotifExtraBold;
-}
-
-* {
- color: #4f4f58;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-strong {
- color: #12123a;
-}
-
-p,
-p a,
-li,
-li a,
-p strong,
-p span,
-li strong {
- font-family: 'freight-text-pro', serif;
-}
-
p strong,
li strong {
font-family: 'FreightTextProSemibold', serif;
}
-a {
- color: #4f4f58;
- position: relative;
- width: max-content;
-}
-
a::before {
content: '';
position: absolute;
@@ -70,60 +16,24 @@ a::before {
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
-
-a:hover::before {
- transform-origin: left;
- transform: scaleX(1);
-}
-
-body nav {
+nav.sub-sites {
position: fixed;
/* display: flex; */
display: none;
flex-direction: column;
gap: 20px;
padding: 20px;
- background-color: white;
width: 240px;
height: 100vh;
top: 12px;
right: 0px;
transition: right .3s ease-in-out;
z-index: 350;
- overflow-y: auto;
}
-.hamburger {
- z-index: 400;
- position: fixed;
- padding: 0;
- right: 12px;
- top: 32px;
- background-color: #ffffff;
- border-color: transparent;
- 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;
@@ -137,13 +47,6 @@ nav h2 {
z-index: 11;
}
-
-
-body main {
- padding-top: 20px;
- margin-inline: 20px;
-}
-
nav ul {
list-style: none;
}
@@ -160,40 +63,12 @@ ul.arrow-bullet {
list-style-image: url(../../imgs/arrow-right.svg);
}
-a.web-url {
- display: flex;
- align-items: center;
- flex-direction: row;
-}
-
-img.web-icon {
- height: 25px;
- margin-right: 8px;
- margin-top: -2px;
-}
-
-a img.external-url-icon,
-a img.web-icon {
- opacity: 0.6;
-}
-
-a:hover img.external-url-icon,
-a:hover img.web-icon {
- opacity: 1;
-}
-
main section.cover {
display: flex;
flex-direction: column;
gap: 40px;
- align-items: flex-start;
}
-/* main div#cover div#cover-image {
- display: flex;
- align-items: center;
-} */
-
nav ul li a {
font-family: BiotifMedium;
text-transform: none !important;
@@ -214,7 +89,7 @@ nav ul li a {
align-self: flex-start;
width: 77%;
}
- .hamburger, .nav-close {
+ .hamburger, .close {
top: 47px;
}
}
@@ -224,29 +99,19 @@ nav ul li a {
}
}
@media (min-width: 768px) {
- body nav {
- position: fixed;
+ nav.sub-sites {
+ position: sticky;
display: flex;
flex-direction: column;
gap: 0;
padding: 20px;
- background-color: white;
- width: 300px;
+ width: 250px;
height: 100vh;
- top: 12px;
+ top: 0px;
right: unset;
}
- body main {
- width: 760px;
- left: 400px;
- position: absolute;
- padding-top: 60px;
- margin-inline:unset;
-
- }
-
- body > button.hamburger,body > button.close {
+ button.hamburger, button.close {
display: none;
}
diff --git a/app/styles.css b/app/styles.css
index 9036e4e..13dde00 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -3,16 +3,6 @@ body {
background: #ecf0f3;
}
-body {
- 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 {
display: flex;
flex-direction: column;
@@ -37,6 +27,7 @@ main {
left: 280px;
*/
}
+
section.sub-brands-container {
max-width: 800px;
}
@@ -61,9 +52,7 @@ header nav a.external-url {
flex-direction: row;
}
-header
-
-header img.external-url-icon {
+header header img.external-url-icon {
height: 16px;
margin-right: 6px;
margin-top: -3px;
@@ -103,19 +92,127 @@ li strong {
font-family: 'freight-text-pro', serif;
}
-section#cover {
+h2.title-2 {
+ margin-top: 0;
+ padding-top: 0;
+}
+
+.heading-4 {
+ font-size: 25.5px;
+ line-height: 34px;
+ padding-bottom: 10px;
+}
+
+img#tpg-wordmark {
+ top: 23px;
+ position: absolute;
+}
+
+img.web-icon {
+ height: 25px;
+ margin-right: 8px;
+ margin-top: -2px;
+}
+
+.home-container {
+ display: grid;
+ align-items: start;
+ justify-items: center;
+ grid-template-areas:
+ 'header'
+ 'main';
+}
+
+@media (min-width: 768px) {
+ .home-container {
+ justify-items: unset;
+ grid-template-columns: 280px 1fr;
+ grid-template-rows: auto;
+ grid-template-areas:
+ 'header main'
+ }
+}
+
+header.home {
+ grid-area: header;
+}
+
+main.home {
+ grid-area: main;
+}
+
+
+
+
+header {
+ display: flex;
+}
+
+header img {
+ width: 150px;
+ height: auto;
+}
+
+header nav {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ margin-top: 30px;
+ margin-bottom: 40px;
+ align-items: center;
+}
+
+iframe {
+ width: auto;
+}
+
+hr {
+ margin: 45px auto;
+}
+
+header.home {
+ position: relative;
+ top: 0;
+ display: flex;
+ padding: 20px;
+}
+
+@media (min-width: 768px) {
+ header.home {
+ position: sticky;
+ }
+}
+
+main.home {
+ padding-left: 1px;
+}
+
+main.sub-sitio {
+ margin-top: 1px;
+ margin-left: 3px;
+
+}
+
+section#home-cover {
max-width: 990px;
padding-top: 1.6rem;
padding-bottom: 4rem;
border-bottom: 2px solid #0709240d;
+ padding-top: 40px;
+}
+
+section#home-cover p {
+ max-width: 490px;
}
section.sub-brand {
margin-bottom: 2rem;
}
-hr {
- margin: 45px auto;
+a {
+ position: relative;
+ width: max-content;
+ color: #4f4f58;
}
a.web-url {
@@ -124,20 +221,8 @@ a.web-url {
flex-direction: row;
}
-img.web-icon {
- height: 25px;
- margin-right: 8px;
- margin-top: -2px;
-}
-
-/* a {
- color: #1f8df0;
- letter-spacing: -0, 1px;
-} */
-
-a {
- position: relative;
- width: max-content;
+a.web-url:before {
+ bottom: -4px;
}
a img {
@@ -158,19 +243,23 @@ a:not(:has(img))::before {
transition: transform .3s ease-in-out;
}
-a.web-url:before {
- bottom: -4px;
-}
-
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}
+.current-page {
+ opacity: 0.4;
+}
+
a.current-page:hover::before {
content: none;
}
+a:not(.current-page):hover {
+ color: #000000;
+}
+
a img.external-url-icon,
a img.web-icon {
opacity: 0.6;
@@ -181,25 +270,48 @@ a:hover img.web-icon {
opacity: 1;
}
-section#cover p {
- max-width: 490px;
+/* h1 with images -seo- ///////////////////////*/
+.polyfen a {
+ width: 153px;
+ height: 50px;
+}
+
+.polyatlas a {
+ width: 175px;
+ height: 50px;
+}
+
+.polycookies a {
+ width: 206px;
+ height: 50px;
+}
+
+.polyforum a {
+ width: 194px;
+ height: 50px;
+}
+
+.polyqwerty a {
+ width: 223px;
+ height: 50px;
+}
+
+.polykit a {
+ width: 207px;
+ height: 50px;
+}
+
+.polypress a {
+ width: 223px;
+ height: 50px;
}
-/* h1 with images ///////////////////////*/
-.--sub-brand a::before { content: none;}
-.polyfen a { width:153px; height:50px;}
-.polyatlas a { width:175px; height:50px;}
-.polycookies a { width:206px; height:50px;}
-.polyforum a { width:194px; height:50px;}
-.polyqwerty a { width:223px; height:50px;}
-.polykit a { width:207px; height:50px;}
-.polypress a { width:223px; height:50px;}
.--sub-brand a span {
- display:block;
- position:absolute;
- width:100%;
- height:100%;
- z-index:9;
+ display: block;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 9;
background-size: contain !important;
}
@@ -226,10 +338,12 @@ section#cover p {
margin-bottom: unset;
padding-top: unset;
}
+
@media (min-width: 768px) {
.sub-brands-container {
padding-inline: 20px;
}
+
.sub-brand {
grid-template-areas:
'screens logos'
@@ -237,6 +351,7 @@ section#cover p {
'screens links';
justify-content: start;
}
+
.sub-brand .screen {
margin-top: unset;
aspect-ratio: 4/3;
@@ -245,49 +360,220 @@ section#cover p {
}
}
-.--sub-brand { grid-area: logos;}
-.sub-brand p { grid-area: texts;color:#4f4f58;}
-.sub-brand .links { grid-area: links;}
-.sub-brand .screen { grid-area: screens;}
+.--sub-brand {
+ grid-area: logos;
+}
+
+.sub-brand p {
+ grid-area: texts;
+ color: #4f4f58;
+}
+
+.sub-brand .links {
+ grid-area: links;
+}
+
+.sub-brand .screen {
+ grid-area: screens;
+}
a.screen {
width: unset;
}
/* hide sub-brands from home page*/
-main #polyforum, main #polypress {
+main #polyforum,
+main #polypress {
display: none;
}
+
main .sub-brands-container hr:nth-last-child(-n+3) {
display: none;
}
+
/*end hide sub-brands*/
/* end grid for sub-brands */
-/* issue to talk, this is not mobile first polykit*/
-section#cover {
- padding-top: 0;
+/* hello social media */
+.hello-social {
+ position: relative;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ padding-inline: 0;
+ padding-block: 7px;
+ background-color: #1d272c;
+ ;
+ border-bottom: 8px solid #7637f9;
+
}
-h2.title-2 {
- margin-top: 0;
- padding-top: 0;
+
+.hello-social a::before,
+.hello-nav a::before {
+ content: none;
}
-.heading-4 {
- font-size: 25.5px;
- line-height: 34px;
- padding-bottom: 10px;
+.icon-social svg,
+.icon-social {
+ width: 20px;
+ height: 20px;
+ fill: #ffffffad;
+ display: block;
}
- a {
- color: #4f4f58;
+.icon-social svg:hover {
+ fill: #ffffff;
}
- a:not(.current-page):hover {
- color: #000000;
+
+/* 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;
}
-.current-page {
- opacity: 0.4;
+.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;
+ align-items: start;
+ justify-items: center;
+ grid-template-areas:
+ 'header'
+ '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;
+}
+
+main.sub-sites {
+ grid-area: main;
+ width: 760px;
+ padding-top: 60px;
+ margin-inline: unset;
+}
+
+
+
+#navbar li {
+ line-height: 1;
+}
+
+/* espacio al final de las tablas de contenido */
+ul.toc {
+ padding-bottom: 80px;
+ overflow-y: auto;
}
/* espacio al final de las tablas de contenido */
@@ -297,45 +583,298 @@ ul.toc {
/*///////////Media queries///////////*/
+/* table x */
+th,
+td,
+th p,
+td p {
+ font-size: 1rem;
+ font-family: Anonymous, monospace;
+}
+
+th {
+ font-weight: 900;
+}
+
+table.buyer-persona th {
+ text-align: left;
+}
+
+table.buyer-persona td,
+table.buyer-persona th {
+ padding: 8px;
+ border-top: 1px solid #1d272c1a;
+}
+
+table.buyer-persona tr:hover {
+ background-color: #1d272c1a;
+}
+
+table.buyer-persona tr:hover td,
+table.buyer-persona tr:hover th,
+table.buyer-persona tr:hover td p {
+ color: black;
+}
+
+/* end table x */
+
+
+div.preview {
+ padding: 24px;
+ background: #1d272c0b;
+ text-align: center;
+}
+
+div.color-swatch {
+ width: 140px;
+ height: 140px;
+ border-radius: 6px;
+ text-transform: uppercase;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+div.color-swatch-wrapper {
+ font-family: Anonymous, monospace;
+ display: flex;
+ flex-direction: row;
+ gap: 12px;
+}
+
+div.swatch-container {
+ display: flex;
+ flex-direction: row;
+ gap: 24px;
+ flex-wrap: wrap;
+}
+
+a.link-logo:hover::before {
+ content: none;
+}
+
+
+/* hashtag for help channel */
+.slack-logo {
+ width: 20px;
+ height: auto;
+ margin-right: 2px;
+}
+
+/* li icons for team-wiki */
+li[data-icon="clockify"] {
+ list-style-image: url(../imgs/icons/bullets/clockify.svg);
+}
+
+li[data-icon="slack"] {
+ list-style-image: url(../imgs/icons/bullets/slack.svg);
+}
+
+li[data-icon="drive"] {
+ list-style-image: url(../imgs/icons/bullets/drive.svg);
+}
+
+li[data-icon="figma"] {
+ list-style-image: url(../imgs/icons/bullets/figma.svg);
+}
+
+li[data-icon="github"] {
+ list-style-image: url(../imgs/icons/bullets/github.svg);
+}
+
+li[data-icon="namecheap"] {
+ list-style-image: url(../imgs/icons/bullets/namecheap.svg);
+}
+
+li[data-icon="freshbooks"] {
+ list-style-image: url(../imgs/icons/bullets/freshbooks.svg);
+}
+
+li[data-icon="asana"] {
+ list-style-image: url(../imgs/icons/bullets/asana.svg);
+}
+
+li[data-icon="wise"] {
+ list-style-image: url(../imgs/icons/bullets/wise.svg);
+}
+
+li[data-icon="1password"] {
+ list-style-image: url(../imgs/icons/bullets/1password.svg);
+}
+
+/* Quitando el nav en mobile */
+
+@media (max-width: 768px) {
+
+ body>nav,
+ body>.hamburger,
+ body>.close {
+ display: unset;
+ }
+
+}
+
+
+/*************************** end sub-styles *************************************/
+
+
+/* issue to talk, this is not mobile first polykit*/
+section#cover {
+ padding-top: 1.6rem;
+}
+
+h2.title-2 {
+ margin-top: 1rem;
+ padding-top: 2rem;
+}
+
+
+section.sub-brands-container hr {
+ margin: 6rem 0;
+ max-width: 100%;
+}
+
+img.window-frame {
+ min-width: calc(100% + 2px);
+ margin-bottom: -2px;
+ margin-left: -1px;
+ margin-right: -1px;
+}
+
+.sub-brands-container h2.heading-1 {
+ margin-top: 6rem !important;
+ margin-bottom: -2rem !important;
+}
+
+img.web-screenshot {
+ border-radius: 0 0 4px 4px;
+}
+
+a.screen figure {
+ border-radius: 6px 6px 4px 4px;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ -webkit-transition: .2s ease-in-out;
+ transition: .2s ease-in-out;
+}
+
+a.screen figure:hover {
+ -webkit-transform: scale(1.025);
+ transform: scale(1.025);
+ box-shadow: 0 2px 6px #0908233b;
+}
+
+
+/* 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) {
- body {
- display: grid;
- grid-template-columns: 280px 1fr;
- grid-template-rows: auto;
- justify-items: start;
- padding-inline: unset;
+ .nav-buttons {
+ display: none;
}
- .hello-social {
- grid-column: 1/3;
- grid-row: 1/2;
- margin: 0 auto;
+
+ .nav-links {
+ position: absolute;
+ right: 30px;
+ top: 60px;
+ padding-block: 10px;
}
- main {
- grid-column: 2/3;
- grid-row: 2/3;
+
+ .nav-close {
+ display: none;
}
- header {
- grid-column: 1/2;
- grid-row: 2/3;
+ .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;
}
- header nav {
- gap: 5px;
- margin-top: 30px;
- margin-bottom: 40px;
- align-items: flex-start;
+ .hamburger svg {
+ fill: white;
}
- /* issue to talk, this is not mobile first polykit*/
- section#cover {
- padding-top: 1.6rem;
+ .nav-hamburger {
+ display: flex;
}
-
- h2.title-2 {
- margin-top: 1rem;
- padding-top: 2rem;
+
+ .nav-links a {
+ padding-left: 20px;
+ font-size: 45px;
}
@@ -468,3 +1007,26 @@ a.screen figure:hover {
transform: scale(1.025);
box-shadow: 0 2px 6px #0908233b;
}
+
+ .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 ----------------- */
diff --git a/app/sub-styles.css b/app/sub-styles.css
deleted file mode 100644
index 892a11c..0000000
--- a/app/sub-styles.css
+++ /dev/null
@@ -1,296 +0,0 @@
-.hello-nav {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- display: flex;
- justify-content:center;
- gap: 1rem;
- padding-block: 1rem;
- background-color: #1d272c;;
-}
-
-.hello-nav a {
- color: #ffffffc8;
-}
-
-.hello-nav a:hover {
- color: #ffffff;
-}
-.hello-nav a.current-page:hover {
- color: #ffffffc8;
-}
-
-body nav {
- margin-top: 39px;
-}
-
-#navbar li {
- line-height: 1;
-}
-
-@media (min-width: 768px) {
- body nav {
- margin-top: 50px;
- }
-}
-
-
-.current-page {
- opacity: 0.4;
-}
-
-a.current-page:hover::before {
- content: none;
-}
-
-@media (min-width: 768px) {
- body nav {
- background: none;
- }
-}
-
-th, td, th p, td p {
- font-size: 1rem;
- font-family: Anonymous, monospace;
-}
-
-th {
- font-weight: 900;
-}
-
-table.buyer-persona th {
- text-align: left;
-}
-
-table.buyer-persona td, table.buyer-persona th {
- padding: 8px;
- border-top: 1px solid #1d272c1a;
-}
-
-table.buyer-persona tr:hover {
- background-color: #1d272c1a;
-}
-
-table.buyer-persona tr:hover td, table.buyer-persona tr:hover th, table.buyer-persona tr:hover td p {
- color: black;
-}
-
-div.preview {
- padding:24px;
- background: #1d272c0b;
- text-align: center;
-}
-
-div.color-swatch {
- width: 140px;
- height: 140px;
- border-radius: 6px;
- text-transform: uppercase;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-div.color-swatch-wrapper {
- font-family: Anonymous, monospace;
- display: flex;
- flex-direction: row;
- gap: 12px;
-}
-
-div.swatch-container {
- display: flex;
- 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;
- }
-
-.slack-logo {
- width: 20px;
- height: auto;
- margin-right: 2px;
-}
-
-/* */
-
-/* li icons for team-wiki */
-li[data-icon="clockify"] {
- list-style-image: url(../imgs/icons/bullets/clockify.svg); }
-
-li[data-icon="slack"] {
- list-style-image: url(../imgs/icons/bullets/slack.svg);
-}
-ul.arrow-bullet li[data-icon="drive"] {
- list-style-image: url(../imgs/icons/bullets/drive.svg);
-}
-ul.arrow-bullet li[data-icon="figma"] {
- list-style-image: url(../imgs/icons/bullets/figma.svg);
-}
-ul.arrow-bullet li[data-icon="github"] {
- list-style-image: url(../imgs/icons/bullets/github.svg);
-}
-ul.arrow-bullet li[data-icon="namecheap"] {
- list-style-image: url(../imgs/icons/bullets/namecheap.svg);
-}
-ul.arrow-bullet li[data-icon="freshbooks"] {
- list-style-image: url(../imgs/icons/bullets/freshbooks.svg);
-}
-ul.arrow-bullet li[data-icon="asana"] {
- list-style-image: url(../imgs/icons/bullets/asana.svg);
-}
-ul.arrow-bullet li[data-icon="wise"] {
- list-style-image: url(../imgs/icons/bullets/wise.svg);
-}
-ul.arrow-bullet li[data-icon="1password"] {
- list-style-image: url(../imgs/icons/bullets/1password.svg);
-}
-
-.heading-4 {
- font-size: 25.5px;
- line-height: 34px;
- padding-bottom: 10px;
-}
-
-
-/* family-of-brands component, temporalmente lo pongo en sub-styles.css, ya esta en styles.css */
-
-a img {
- display: inherit;
-}
-
-/* en styles.css esta llamando dentro de *main section.sub-brands...* */
-section.sub-brands-container {
- max-width: 800px;
-}
-
-section.sub-brand {
- margin-bottom: 2rem;
-}
-
-/* h1 with images ///////////////////////*/
-.--sub-brand a::before { content: none;}
-.polyfen a { width:153px; height:50px;}
-.polyatlas a { width:175px; height:50px;}
-.polycookies a { width:206px; height:50px;}
-.polyforum a { width:194px; height:50px;}
-.polyqwerty a { width:223px; height:50px;}
-.polykit a { width:207px; height:50px;}
-.polypress a { width:223px; height:50px;}
-.--sub-brand a span {
- display:block;
- position:absolute;
- 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;}
-.polyatlas a span { background:#ecf0f3 url(../imgs/sub-brands/poly-atlas-logo.svg) no-repeat left top;}
-.polycookies a span { background:#ecf0f3 url(../imgs/sub-brands/poly-cookies-logo.svg) no-repeat left top;}
-.polyforum a span { background:#ecf0f3 url(../imgs/sub-brands/poly-forum-logo.svg) no-repeat left top;}
-.polyqwerty a span { background:#ecf0f3 url(../imgs/sub-brands/poly-qwerty-logo.svg) no-repeat left top;}
-.polykit a span { background:#ecf0f3 url(../imgs/sub-brands/polykit-logo.svg) no-repeat left top;}
-.polypress a span { background:#ecf0f3 url(../imgs/sub-brands/polypress-logo.svg) no-repeat left top;}
-
-/* grid for sub-brands */
-.sub-brand {
- display: grid;
- grid-template-areas:
- 'logos'
- 'screens'
- 'texts'
- 'links';
- gap: 2rem 3rem;
-}
-
-.sub-brand p {
- margin-bottom: unset;
- padding-top: unset;
-}
-@media (min-width: 768px) {
- .sub-brands-container {
- padding-inline: 20px;
- }
- .sub-brand {
- grid-template-areas:
- 'screens logos'
- 'screens texts'
- 'screens links';
- justify-content: start;
- padding-top: 10px;
- }
- .sub-brand .screen {
- margin-top: unset;
- aspect-ratio: 4/3;
- width: 100%;
- width: 299px;
- }
-}
-
-.--sub-brand { grid-area: logos;}
-.sub-brand p { grid-area: texts;color:#4f4f58;}
-.sub-brand .links { grid-area: links;}
-.sub-brand .screen { grid-area: screens;}
-
-a.screen {
- width: unset;
-}
-
-section.sub-brands-container hr {
- margin: 6rem 0;
- max-width: 100%;
-}
-
-img.window-frame {
- min-width: calc(100% + 2px);
- margin-bottom: -2px;
- margin-left: -1px;
- margin-right: -1px;
-}
-
-.sub-brands-container h2.heading-1 {
- margin-top: 6rem !important;
- margin-bottom: -2rem !important;
-}
-
-img.web-screenshot {
- border-radius: 0 0 4px 4px;
-}
-
-/*extra para los links*/
-a::before {
- content: none;
-}
-a:not(:has(img))::before {
- content: '';
- position: absolute;
- width: 100%;
- height: 2px;
- border-radius: 2px;
- background-color: #7537f8;
- bottom: 0px;
- left: 0;
- transform-origin: right;
- transform: scaleX(0);
- transition: transform .3s ease-in-out;
-}
-/* family-of-brands component */
-
-/* espacio al final de las tablas de contenido */
-ul.toc {
- padding-bottom: 80px;
-}
\ No newline at end of file
diff --git a/brand/includes/head.php b/brand/includes/head.php
index 6202b08..61bbdb1 100644
--- a/brand/includes/head.php
+++ b/brand/includes/head.php
@@ -4,11 +4,8 @@
-
-
-
-
-
+
+
@@ -19,4 +16,3 @@
-
diff --git a/brand/index.php b/brand/index.php
index 5f91749..39b6b93 100644
--- a/brand/index.php
+++ b/brand/index.php
@@ -11,9 +11,12 @@
+
-