From 69d873cf15a9c5ce0aa6adae63819c926221e42e Mon Sep 17 00:00:00 2001
From: JesusValera <jesus1902@outlook.com>
Date: Sat, 6 Dec 2025 17:03:38 +0100
Subject: [PATCH] Hide toolbar on mobile resolution

---
 css/base.css              |  6 ++++++
 css/components/header.css |  4 ++++
 css/components/layout.css |  6 ++++++
 css/components/search.css | 16 +++++++++-------
 static/back_to_top.js     | 19 +++++++++++++++++--
 5 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/css/base.css b/css/base.css
index fa211d2..540ec5d 100644
--- a/css/base.css
+++ b/css/base.css
@@ -42,6 +42,12 @@ body {
               color var(--duration-normal) var(--ease-out);
 }
 
+@media (max-width: 767px) {
+  body {
+    padding-top: 0;
+  }
+}
+
 /* Reset spacing */
 * + * {
   margin-top: 1.5em;
diff --git a/css/components/header.css b/css/components/header.css
index cdb9abf..282331b 100644
--- a/css/components/header.css
+++ b/css/components/header.css
@@ -35,6 +35,10 @@
 }
 
 @media (max-width: 767px) {
+  .site-header {
+    position: relative;
+  }
+
   .site-header__container {
     padding: 0 var(--space-md);
     gap: var(--space-sm);
diff --git a/css/components/layout.css b/css/components/layout.css
index 3caf421..890fed6 100644
--- a/css/components/layout.css
+++ b/css/components/layout.css
@@ -7,6 +7,12 @@
   transition: background-color var(--duration-normal) var(--ease-out);
 }
 
+@media (max-width: 767px) {
+  .layout-container {
+    margin-top: var(--header-height);
+  }
+}
+
 /* One Column Layout - Modern Content */
 .one-column-layout {
   margin: 0 auto;
diff --git a/css/components/search.css b/css/components/search.css
index 741abf7..bc46c79 100644
--- a/css/components/search.css
+++ b/css/components/search.css
@@ -36,6 +36,7 @@
   height: 16px;
   color: var(--color-light-link);
   flex-shrink: 0;
+  pointer-events: none;
 }
 
 .site-header__search-trigger .search-trigger-text {
@@ -45,6 +46,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 400;
+  pointer-events: none;
 }
 
 .site-header__search-trigger .search-shortcut {
@@ -383,7 +385,7 @@
 
 @media (max-width: 768px) {
   .search-modal {
-    padding: 16px;
+    padding: 8px;
     align-items: flex-start;
   }
 
@@ -391,21 +393,21 @@
     max-width: 100%;
     width: 100%;
     height: auto;
-    max-height: calc(100dvh - 32px);
-    max-height: calc(var(--vh, 1vh) * 100 - 32px); /* Fallback for browsers without dvh support */
+    max-height: calc(100dvh - 12px);
+    max-height: calc(var(--vh, 1vh) * 100 - 12px); /* Fallback for browsers without dvh support */
   }
 
   .search-modal__content {
     border-radius: var(--radius-lg);
     height: auto;
-    max-height: calc(100dvh - 32px);
-    max-height: calc(var(--vh, 1vh) * 100 - 32px);
+    max-height: calc(100dvh - 12px);
+    max-height: calc(var(--vh, 1vh) * 100 - 12px);
   }
   
   /* When results are visible, expand to full height */
   .search-modal__content:has(.search-modal__results[style*="display: block"]) {
-    height: calc(100dvh - 32px);
-    height: calc(var(--vh, 1vh) * 100 - 32px);
+    height: calc(100dvh - 12px);
+    height: calc(var(--vh, 1vh) * 100 - 12px);
   }
 
   .search-modal__input-wrapper {
diff --git a/static/back_to_top.js b/static/back_to_top.js
index 3ec3dac..daeff2a 100644
--- a/static/back_to_top.js
+++ b/static/back_to_top.js
@@ -1,11 +1,26 @@
 // Get the button:
 let mybutton = document.getElementById("back-to-top-button");
 
-// When the user scrolls down 300px from the top of the document, show the button
+// Track last scroll position for detecting scroll direction
+let lastScrollTop = 0;
+let isScrollingUp = false;
+
+// When the user scrolls, check position and direction
 window.onscroll = function() {scrollFunction()};
 
 function scrollFunction() {
-  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
+  const currentScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+  
+  // Determine scroll direction
+  if (currentScrollTop < lastScrollTop) {
+    isScrollingUp = true;
+  } else {
+    isScrollingUp = false;
+  }
+  lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
+  
+  // Show button only when scrolling up AND past 300px (all resolutions)
+  if (currentScrollTop > 300 && isScrollingUp) {
     mybutton.classList.add("visible");
   } else {
     mybutton.classList.remove("visible");