Merge pull request #180 from phel-lang/minor-fixes

Hide toolbar on mobile resolution

Author: JesusValeraDev

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;

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);

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;

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,29 +385,29 @@
 
 @media (max-width: 768px) {
   .search-modal {
-    padding: 16px;
+    padding: 8px;
     align-items: flex-start;
   }
 
   .search-modal__container {
     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 {

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");