Merge branch 'main' into staging

app/docs-mobile-nav-v2-local.js

@@ -0,0 +1,76 @@
+console.log("Soy el docs-mobile-nav-v2-local.js");
+
+/* Mobile nav */
+
+const opener = document.querySelector('.hamburger')
+const closer = document.querySelector('.close')
+const nav = document.getElementById('navbar')
+let navItems = navbar.querySelectorAll("li");
+
+
+opener.addEventListener('click', () => {
+	nav.classList.add('open-nav')
+	closer.classList.add('open-nav')
+	opener.classList.add('close-nav')
+})
+closer.addEventListener('click', () => {
+	nav.classList.remove('open-nav')
+	closer.classList.remove('open-nav')
+	opener.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');
+        });
+    });
+}
+
+/* hamburge menu scroll obdserver */
+document.addEventListener("DOMContentLoaded", function() {
+    let hamburger = document.querySelector(".hamburger");
+    let close = document.querySelector(".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.1
+});
+
+const sections = document.querySelectorAll('section:not(:first-of-type)');
+sections.forEach((section) => {
+	observer.observe(section);
+});

app/styles.css

@@ -37,9 +37,8 @@ main {
     left: 280px;
  */
 }
-
-main section.sub-brands-container {
-    max-width: 600px;
+section.sub-brands-container {
+    max-width: 800px;
 }
 
 header img {
@@ -62,6 +61,8 @@ header nav a.external-url {
     flex-direction: row;
 }
 
+header
+
 header img.external-url-icon {
     height: 16px;
     margin-right: 6px;
@@ -129,22 +130,27 @@ img.web-icon {
     margin-top: -2px;
 }
 
-a {
+/* a {
     color: #1f8df0;
     letter-spacing: -0, 1px;
-}
+} */
 
 a {
     position: relative;
     width: max-content;
 }
 
-a::before {
+a img {
+    display: inherit;
+}
+
+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;
@@ -213,7 +219,7 @@ section#cover p {
     'screens'
     'texts'
     'links';
-    gap: 1rem;
+    gap: 2rem 3rem;
 }
 
 .sub-brand p {
@@ -226,22 +232,36 @@ section#cover p {
     }
     .sub-brand {
         grid-template-areas:
-        'logos logos'
+        'screens logos'
         'screens texts'
         'screens links';
+        justify-content: start;
     }
     .sub-brand .screen {
         margin-top: unset;
         aspect-ratio: 4/3;
         width: 100%;
-        max-width: 210px;
+        width: 299px;
     }
 }
 
 .--sub-brand { grid-area: logos;}
-.sub-brand p { grid-area: texts;}
+.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 {
+    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*/
@@ -252,12 +272,27 @@ h2.title-2 {
     margin-top: 0;
     padding-top: 0;
 }
+
+.heading-4 {
+    font-size: 25.5px;
+    line-height: 34px;
+    padding-bottom: 10px;
+}
+
+ a {
+    color: #4f4f58;
+}
+ a:not(.current-page):hover {
+    color: #000000;
+}
+
 .current-page {
     opacity: 0.4;
 }
-.current-page:hover {
-    opacity: 0.4;
-    color:#ffffffc8;
+
+/* espacio al final de las tablas de contenido */
+ul.toc {
+    padding-bottom: 80px;
 }
 
 /*///////////Media queries///////////*/
@@ -398,4 +433,38 @@ h2.title-2 {
 
 .close-nav {
     display: none;
-}
+}
+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;
+}