move to top banner

layouts/_default/baseof.html

@@ -5,18 +5,20 @@
 </head>
 <body id="top">
   <a class="skip" href="#content">Skip to content</a>
-  <div class="page">
-    {{ partial "header.html" . }}
-    <main class="col" id="content" tabindex="-1">
-      {{ block "main" . }}{{ end }}
-      {{ partial "footer.html" . }}
-    </main>
-  </div>
+  {{ partial "header.html" . }}
+  <main id="content" tabindex="-1">
+    {{ block "main" . }}{{ end }}
+  </main>
+  {{ partial "footer.html" . }}
   <script>
-    /* Progressive only: fade sections in as they scroll into view, and mark
-       the rail's "On this page" link for the section being read. */
+    /* Progressive only: fade sections in as they scroll into view, and
+       darken the top bar once the page has scrolled. */
     (function () {
       var root = document.documentElement;
+      var head = document.querySelector('.site-head');
+      function onScroll() { if (head) head.classList.toggle('is-scrolled', scrollY > 8); }
+      addEventListener('scroll', onScroll, { passive: true });
+      onScroll();
       if (!('IntersectionObserver' in window)) return;
       root.classList.add('js');
 
@@ -26,21 +28,6 @@
         });
       }, { rootMargin: '0px 0px -8% 0px' });
       document.querySelectorAll('[data-reveal]').forEach(function (el) { io.observe(el); });
-
-      var links = [].slice.call(document.querySelectorAll('.nav-here a'));
-      if (!links.length) return;
-      var targets = links.map(function (a) { return document.getElementById(decodeURIComponent(a.hash.slice(1))); });
-      var ticking = false;
-      function update() {
-        ticking = false;
-        var current = -1;
-        targets.forEach(function (t, i) { if (t && t.getBoundingClientRect().top < innerHeight * 0.3) current = i; });
-        links.forEach(function (a, i) {
-          if (i === current) a.setAttribute('aria-current', 'location'); else a.removeAttribute('aria-current');
-        });
-      }
-      addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(update); } }, { passive: true });
-      update();
     })();
 
     /* Pricing: a link to a plan panel's id (e.g. /pricing/#hosted) selects its tab. */