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. */

layouts/_default/legal.html

@@ -1,10 +1,14 @@
 {{/* Long-form legal text (Privacy Policy, Terms): a plain heading, then the Markdown body. */}}
 {{ define "main" }}
   <header class="hero hero-compact">
-    <h1 class="statement">{{ .Title }}</h1>
-    {{ with .Params.effective }}<p class="dek">Effective date: {{ . }}</p>{{ end }}
+    <div class="wrap">
+      <div class="hero-copy">
+        <h1 class="statement">{{ .Title }}</h1>
+        {{ with .Params.effective }}<p class="dek">Effective date: {{ . }}</p>{{ end }}
+      </div>
+    </div>
   </header>
-  <section class="section">
-    <div class="prose doc">{{ .Content }}</div>
+  <section class="section section-doc">
+    <div class="wrap"><div class="prose doc">{{ .Content }}</div></div>
   </section>
 {{ end }}

layouts/_default/sign-in.html

@@ -1,4 +1,6 @@
 {{ define "main" }}
+<section class="form-band">
+<div class="wrap">
 <div class="form-page" data-reveal>
     <p class="eyebrow">Sign In</p>
     <h1 class="statement">{{ .Params.heading | default "Welcome back" }}</h1>
@@ -16,7 +18,7 @@
         <label><input type="checkbox" name="remember"> Remember me</label>
         <a href="#">Forgot password?</a>
       </div>
-      <button type="submit" class="btn btn-primary"><span class="btn-label">Sign In</span></button>
+      <button type="submit" class="btn btn-primary">Sign In</button>
     </form>
 
     <p class="form-foot">
@@ -28,4 +30,6 @@
       Having trouble signing in? <a href="mailto:{{ .Site.Params.supportEmail }}">Contact Support</a>
     </p>
 </div>
+</div>
+</section>
 {{ end }}