Merge pull request #259 from Alik532UA/alik/ui-improvements

galulex · web-flow · commit 044c59aaf978 · 2025-10-21T00:12:10.000+03:00
feat: UI/UX Improvements and Optimizations
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -3,6 +3,7 @@
   <head>
     {% gtm head %}
     <meta charset="utf-8">
+    <meta name="color-scheme" content="dark">
 
     {% if page.json-ld %}
       {% for item in site.data.seo[page.json-ld] %}
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -202,7 +202,7 @@ ul, ol { margin-left: 0; }
       top: 0;
       height: 100%;
       width: 70vw;
-      padding: 5vw 0 0 10vw;
+      padding: 5vw 5vw 0 5vw;
       scroll-snap-align: start;
       scroll-snap-stop: always;
       z-index: 3;
diff --git a/assets/js/carousel.js b/assets/js/carousel.js
@@ -87,9 +87,15 @@ const setCarousel = (scroller) => {
     const offsetWidth = target.offsetWidth;
 
     const checkPos = () => {
-      [...target.children].map(e => {
-        const toCenter = Math.abs(window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2);
-        const toCenter2 = window.outerWidth / 2 - e.getBoundingClientRect().left - e.getBoundingClientRect().width / 2;
+      [...target.children].forEach(e => {
+        const childRect = e.getBoundingClientRect();
+        // Optimization: Only process elements currently visible on screen.
+        if (childRect.right < 0 || childRect.left > window.innerWidth) {
+          return; // Skip heavy calculations for off-screen elements
+        }
+
+        const toCenter = Math.abs(window.innerWidth / 2 - childRect.left - childRect.width / 2);
+        const toCenter2 = window.innerWidth / 2 - childRect.left - childRect.width / 2;
         const viewport = toCenter / offsetWidth * 100;
         const viewport2 = toCenter2 / offsetWidth * 100;
         e.style.setProperty('--viewport', viewport);
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
@@ -6,6 +6,13 @@ function innitMobileNavbar() {
   const navButton = document.querySelector('.menu-icon');
   const closeMobileNavButton = document.querySelector('.menu-close-ico')
   const scroller = document.querySelector('.body-content')
+  const mainContent = document.querySelector('.body-content__main-section');
+
+  mainContent.addEventListener('click', () => {
+    if (scroller.scrollLeft > 0) {
+      scroller.scroll({ left: 0, behavior: "smooth" });
+    }
+  });
 
   closeMobileNavButton.addEventListener('click', () => {
     scroller.scroll({ left: 0, behavior: "smooth", });
