From 21c5ddd2c92de0f45c4737084fd77f11f2ac4779 Mon Sep 17 00:00:00 2001
From: sa6anw <joakim@joasve.se>
Date: Fri, 9 May 2025 20:22:40 +0000
Subject: [PATCH] Fix

---
 docs/meshtastic.md | 63 +++++++++++++++++++++++++++++++++++++---------
 1 file changed, 51 insertions(+), 12 deletions(-)

diff --git a/docs/meshtastic.md b/docs/meshtastic.md
index 60ee3e6..3d00186 100644
--- a/docs/meshtastic.md
+++ b/docs/meshtastic.md
@@ -11,32 +11,72 @@ title: Meshtastic
     window.scrollTo({ top: y, behavior: 'smooth' });
   }
 
-  // Göm knappen vid scroll
-  window.addEventListener('scroll', () => {
-    const button = document.getElementById('scrollButton');
-    if (window.scrollY > 10) {
-      button.style.display = 'none';
+window.addEventListener('scroll', () => {
+  const button = document.getElementById('scrollButton');
+  if (window.scrollY > 10) {
+    button.style.opacity = '0';
+    button.style.pointerEvents = 'none';
+  } else {
+    button.style.opacity = '1';
+    button.style.pointerEvents = 'auto';
+  }
+});
+</script>
+
+<script>
+  window.addEventListener("scroll", () => {
+    const content = document.getElementById("main-content");
+    const header = document.querySelector(".md-header");
+    const sidebar = document.querySelector(".md-sidebar");
+
+    const contentY = content.getBoundingClientRect().top;
+    const windowHeight = window.innerHeight;
+
+    // Hur många pixlar innan "main-content" som menyn ska börja synas
+    const fadeStart = windowHeight * 0.2;
+    const fadeEnd = windowHeight * 0.8;
+
+    // Beräkna scrollbaserad opacitet (0 till 1)
+    let opacity = 1 - (contentY - fadeStart) / (fadeEnd - fadeStart);
+    opacity = Math.max(0, Math.min(1, opacity)); // begränsa mellan 0 och 1
+
+    // Tillämpa opacitet
+    //header.style.opacity = opacity;
+    sidebar.style.opacity = opacity;
+
+    // Hantera klickbarhet så man inte klickar på osynlig meny
+    if (opacity < 0.05) {
+    //  header.style.pointerEvents = "none";
+      sidebar.style.pointerEvents = "none";
+    } else {
+    //  header.style.pointerEvents = "auto";
+      sidebar.style.pointerEvents = "auto";
     }
   });
+
+  window.addEventListener("load", () => {
+    // Initiera rätt opacitet direkt vid sidladdning
+    window.dispatchEvent(new Event("scroll"));
+  });
 </script>
 
-
  <video autoplay loop muted playsinline
          style="position: absolute; left: 0;
-                height: 77vh; width: 100%;
+                height: 82vh; width: 100%;
                 object-fit: cover;
                 filter: blur(10px) brightness(0.7);
                 transform: scale(1.2); /* lite zoom för att dölja kanter */
                 z-index: -2;">
-    <source src="../assets/Felix_i_Jannes_mast_2.webm" type="video/webm">
+    <source src="assets/Felix_i_Jannes_mast_2.webm" type="video/webm">
   </video>
 
+
   <video autoplay loop muted playsinline
          style="position: absolute; left: 50%;
                 transform: translate(-50%, -50px);
-                height: 90vh;
+                height: 95vh;
                 object-fit: cover; z-index: -1;">
-    <source src="../assets/Felix_i_Jannes_mast_2.webm" type="video/webm">
+    <source src="assets/Felix_i_Jannes_mast_2.webm" type="video/webm">
     Din webbläsare stödjer inte video.
   </video>
 
@@ -48,9 +88,8 @@ title: Meshtastic
   ↓
 </button>
 
-
 <!-- Mellanrum -->
-<div  style="height: 90vh;"></div>
+<div style="height: 100vh;"></div>
 
 <div id="main-content" class="ascii-wrapper">
 <pre><code><div align="center">