From fbd72a9be92b0b50a637c91a941ad9325439181f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 15:31:35 +0100
Subject: [PATCH 1/9] prevent markup output when regular/featured faq is empty

---
 controller/classes/Subtemplate.php | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/controller/classes/Subtemplate.php b/controller/classes/Subtemplate.php
index 2f927f3..2ee0cf7 100644
--- a/controller/classes/Subtemplate.php
+++ b/controller/classes/Subtemplate.php
@@ -647,9 +647,17 @@ class Subtemplate {
 
         return $result;
     }
+
+
+    //
+    // Subtemplate: FAQs
+    //
     public function faq($subtemplateTitle) {
-        $featuredFAQ = '<dl class="featured-faqs">';
+
         if (have_rows('featured_faqs')) {
+
+            $featuredFAQ = '<dl class="featured-faqs">';
+
             while (have_rows('featured_faqs')) {
                 the_row();
 
@@ -659,11 +667,14 @@ class Subtemplate {
                 $featuredFAQ .= "<dt>{$question}</dt>
                                 <dd>{$answer}</dd>";
             }
-        }
-        $featuredFAQ .= "</dl>";
 
-        $regularFAQ = '<dl class="regular-faqs">';
+            $featuredFAQ .= "</dl>";
+        }
+
         if (have_rows('regular_faqs')) {
+
+            $regularFAQ = '<dl class="regular-faqs">';
+
             while (have_rows('regular_faqs')) {
                 the_row();
 
@@ -673,8 +684,9 @@ class Subtemplate {
                 $regularFAQ .= "<dt>Q: {$question}</dt>
                                 <dd>A: {$answer}</dd>";
             }
+
+            $regularFAQ .= "</dl>";
         }
-        $regularFAQ .= "</dl>";
 
         $result = "<section class='subtemplate row row--content content faq'>
                         <h1>{$subtemplateTitle}</h1>
@@ -684,6 +696,8 @@ class Subtemplate {
 
         return $result;
     }
+
+
     public function values($subtemplateTitle) {
         $values = '';
         if (have_rows('ascribe_values')) {
@@ -707,6 +721,8 @@ class Subtemplate {
 
         return $result;
     }
+
+
     public function careers($subtemplateTitle) {
         $args           = array(
             'post_type' => 'career',
@@ -735,6 +751,8 @@ class Subtemplate {
 
         return $result;
     }
+
+
     public function mediaDetail($subtemplateTitle) {
         $image = get_sub_field('image')['url'];
 

From f5f61168fa5b7cc982242d1a1fc84ff7b67cd157 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 16:12:07 +0100
Subject: [PATCH 2/9] refactor FAQ styles & markup

---
 assets/_src/js/ascribe.js          |  7 ++-
 assets/_src/less/ascribe.less      | 40 +----------------
 assets/_src/less/ascribe/_faq.less | 69 ++++++++++++++++++++++++++++++
 controller/classes/Subtemplate.php | 27 ++++++------
 4 files changed, 90 insertions(+), 53 deletions(-)
 create mode 100644 assets/_src/less/ascribe/_faq.less

diff --git a/assets/_src/js/ascribe.js b/assets/_src/js/ascribe.js
index 0d2ca34..a41d1e7 100644
--- a/assets/_src/js/ascribe.js
+++ b/assets/_src/js/ascribe.js
@@ -39,11 +39,14 @@ $(document).ready(function(){
 
         });
     }
+
     function featuredFAQ() {
-        $('.featured-faqs dt').click(function() {
-            $(this).next('dd').toggleClass('open');
+        $('.faq--featured .faq__question').click(function() {
+            $(this).toggleClass('open');
+            $(this).next('.faq__answer').toggleClass('open');
         });
     }
+
     function marketplaces() {
         $('.top-tab').click(function(){
             $('.top-tab').removeClass('active');
diff --git a/assets/_src/less/ascribe.less b/assets/_src/less/ascribe.less
index 8fff20c..1dc9095 100644
--- a/assets/_src/less/ascribe.less
+++ b/assets/_src/less/ascribe.less
@@ -31,6 +31,7 @@
 @import 'ascribe/_team.less';
 @import 'ascribe/_blog.less';
 @import 'ascribe/_testimonials.less';
+@import 'ascribe/_faq.less';
 
 @import '_page-api.less';
 
@@ -372,45 +373,6 @@
     }
 }
 
-.faq {
-
-    > h1 { margin-top: 0; }
-
-    dl,dt,dd {
-        margin: 0;
-        padding: 0;
-    }
-
-    dd:not(:last-child) {
-        margin-bottom: @spacer;
-    }
-
-    dt {
-        &:extend(.bold);
-    }
-
-    .featured-faqs {
-
-        dt {
-            color: @pink;
-            cursor: pointer;
-        }
-        dd {
-            max-height:0;
-            overflow-y:hidden;
-            transition: .2s ease-out;
-            margin-bottom: @spacer;
-
-            &.open {
-                max-height: 800px;
-            }
-        }
-    }
-    .regular-faqs {
-
-    }
-}
-
 
 .values {
     padding-bottom: @spacer;
diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less
new file mode 100644
index 0000000..838fba2
--- /dev/null
+++ b/assets/_src/less/ascribe/_faq.less
@@ -0,0 +1,69 @@
+
+.subtemplate--faq {
+
+}
+
+.faq {
+    // reset default dl,dt,dd styles
+    &,
+    .faq__answer {
+        margin: 0;
+        padding: 0;
+    }
+
+}
+
+.faq__title { margin-top: 0; }
+
+.faq__question {
+    &:extend(.h4);
+    display: block;
+    margin-bottom: (@spacer / 2);
+}
+
+.faq__answer {
+    &:not(:last-child) {
+        margin-bottom: @spacer;
+    }
+}
+
+.faq--featured {
+    margin-left: 20px;
+
+    .faq__question {
+        color: @pink;
+        cursor: pointer;
+
+        .caret {
+            margin-left: -20px;
+            margin-right: 10px;
+        }
+
+        &.open .caret {
+            transform: rotate(90deg);
+        }
+    }
+
+    .faq__answer {
+        transition: .2s ease-out;
+        height: 0;
+        opacity: 0;
+        margin-bottom: @spacer;
+
+        &.open {
+            height: 100%;
+            opacity: 1;
+            max-height: 800px;
+        }
+    }
+}
+
+.caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 5px 0 5px 6px;
+    border-color: transparent transparent transparent @greySocial;
+    transition: .2s ease-out;
+}
diff --git a/controller/classes/Subtemplate.php b/controller/classes/Subtemplate.php
index 2ee0cf7..20f94eb 100644
--- a/controller/classes/Subtemplate.php
+++ b/controller/classes/Subtemplate.php
@@ -654,18 +654,21 @@ class Subtemplate {
     //
     public function faq($subtemplateTitle) {
 
+        $featuredFAQ = '';
+        $regularFAQ  = '';
+
         if (have_rows('featured_faqs')) {
 
-            $featuredFAQ = '<dl class="featured-faqs">';
+            $featuredFAQ = '<dl class="faq faq--featured">';
 
             while (have_rows('featured_faqs')) {
                 the_row();
 
-                $question          = get_sub_field('question');
-                $answer          = get_sub_field('answer');
+                $question     = get_sub_field('question');
+                $answer       = get_sub_field('answer');
 
-                $featuredFAQ .= "<dt>{$question}</dt>
-                                <dd>{$answer}</dd>";
+                $featuredFAQ .= "<dt class='faq__question'><i class='caret'></i>{$question}</dt>
+                                <dd class='faq__answer'>{$answer}</dd>";
             }
 
             $featuredFAQ .= "</dl>";
@@ -673,23 +676,23 @@ class Subtemplate {
 
         if (have_rows('regular_faqs')) {
 
-            $regularFAQ = '<dl class="regular-faqs">';
+            $regularFAQ = '<dl class="faq faq--regular">';
 
             while (have_rows('regular_faqs')) {
                 the_row();
 
-                $question          = get_sub_field('question');
-                $answer          = get_sub_field('answer');
+                $question    = get_sub_field('question');
+                $answer      = get_sub_field('answer');
 
-                $regularFAQ .= "<dt>Q: {$question}</dt>
-                                <dd>A: {$answer}</dd>";
+                $regularFAQ .= "<dt class='faq__question'>{$question}</dt>
+                                <dd class='faq__answer'>{$answer}</dd>";
             }
 
             $regularFAQ .= "</dl>";
         }
 
-        $result = "<section class='subtemplate row row--content content faq'>
-                        <h1>{$subtemplateTitle}</h1>
+        $result = "<section class='subtemplate row row--content content subtemplate--faq'>
+                        <h1 class='faq__title'>{$subtemplateTitle}</h1>
                         {$featuredFAQ}
                         {$regularFAQ}
                     </section>";

From b6cb4ecb5dffdc9b9eca6fd22c9601ae0280bbbe Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 16:42:07 +0100
Subject: [PATCH 3/9] accordion-style FAQ page

---
 assets/_src/js/ascribe.js          |  6 +--
 assets/_src/less/ascribe/_faq.less | 59 ++++++++++++------------------
 controller/classes/Subtemplate.php |  4 +-
 3 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/assets/_src/js/ascribe.js b/assets/_src/js/ascribe.js
index a41d1e7..dcb32a6 100644
--- a/assets/_src/js/ascribe.js
+++ b/assets/_src/js/ascribe.js
@@ -2,7 +2,7 @@
 $(document).ready(function(){
 
     slider();
-    featuredFAQ();
+    faqToggle();
     marketplaces();
     tourNav();
     mobileNav();
@@ -40,8 +40,8 @@ $(document).ready(function(){
         });
     }
 
-    function featuredFAQ() {
-        $('.faq--featured .faq__question').click(function() {
+    function faqToggle() {
+        $('.faq__question').click(function() {
             $(this).toggleClass('open');
             $(this).next('.faq__answer').toggleClass('open');
         });
diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less
index 838fba2..4e19975 100644
--- a/assets/_src/less/ascribe/_faq.less
+++ b/assets/_src/less/ascribe/_faq.less
@@ -1,60 +1,47 @@
 
 .subtemplate--faq {
-
+    padding-top: @spacer;
+    padding-bottom: @spacer;
 }
 
 .faq {
-    // reset default dl,dt,dd styles
-    &,
-    .faq__answer {
-        margin: 0;
-        padding: 0;
-    }
-
+    margin-left: 20px;
 }
 
 .faq__title { margin-top: 0; }
 
 .faq__question {
-    &:extend(.h4);
+    &:extend(.bold);
     display: block;
+    margin-top: 0;
     margin-bottom: (@spacer / 2);
+    cursor: pointer;
+
+    .caret {
+        margin-left: -20px;
+        margin-right: 10px;
+    }
+
+    &.open .caret {
+        transform: rotate(90deg);
+    }
 }
 
 .faq__answer {
-    &:not(:last-child) {
-        margin-bottom: @spacer;
+    display: none;
+    margin-bottom: @spacer;
+    margin-left: 0;
+
+    &.open {
+        display: block;
+        max-height: 800px;
     }
 }
 
-.faq--featured {
-    margin-left: 20px;
 
+.faq--featured {
     .faq__question {
         color: @pink;
-        cursor: pointer;
-
-        .caret {
-            margin-left: -20px;
-            margin-right: 10px;
-        }
-
-        &.open .caret {
-            transform: rotate(90deg);
-        }
-    }
-
-    .faq__answer {
-        transition: .2s ease-out;
-        height: 0;
-        opacity: 0;
-        margin-bottom: @spacer;
-
-        &.open {
-            height: 100%;
-            opacity: 1;
-            max-height: 800px;
-        }
     }
 }
 
diff --git a/controller/classes/Subtemplate.php b/controller/classes/Subtemplate.php
index 20f94eb..9fc5318 100644
--- a/controller/classes/Subtemplate.php
+++ b/controller/classes/Subtemplate.php
@@ -667,7 +667,7 @@ class Subtemplate {
                 $question     = get_sub_field('question');
                 $answer       = get_sub_field('answer');
 
-                $featuredFAQ .= "<dt class='faq__question'><i class='caret'></i>{$question}</dt>
+                $featuredFAQ .= "<dt class='faq__question'><i class='caret'></i> {$question}</dt>
                                 <dd class='faq__answer'>{$answer}</dd>";
             }
 
@@ -684,7 +684,7 @@ class Subtemplate {
                 $question    = get_sub_field('question');
                 $answer      = get_sub_field('answer');
 
-                $regularFAQ .= "<dt class='faq__question'>{$question}</dt>
+                $regularFAQ .= "<dt class='faq__question'><i class='caret'></i> {$question}</dt>
                                 <dd class='faq__answer'>{$answer}</dd>";
             }
 

From ed1c8ef7ed5ce9ec9d76233a103c21dd9ba2935f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 18:53:03 +0100
Subject: [PATCH 4/9] prototype all the thing: FAQ layout, auto TOC, scroll
 anchors

---
 assets/_src/js/_faq.js                    | 66 +++++++++++++++++++++++
 assets/_src/js/ascribe.js                 | 12 ++---
 assets/_src/less/ascribe/_faq.less        | 61 ++++++++++++++++++++-
 assets/_src/less/ascribe/_typography.less |  5 ++
 content-main.php                          | 24 ++++++++-
 controller/classes/Subtemplate.php        |  7 ++-
 package.json                              |  3 +-
 7 files changed, 163 insertions(+), 15 deletions(-)
 create mode 100644 assets/_src/js/_faq.js

diff --git a/assets/_src/js/_faq.js b/assets/_src/js/_faq.js
new file mode 100644
index 0000000..9719c68
--- /dev/null
+++ b/assets/_src/js/_faq.js
@@ -0,0 +1,66 @@
+
+//=include ../../../node_modules/toc/dist/toc.js
+
+var Faq = (function(w, d, $) {
+
+    'use strict'
+
+    var app, _private, _config
+
+    _config = {
+        faqQuestion:  $('.faq__question'),
+        faqAnswer:    $('.faq__answer'),
+        faqTitle:     $('.faq__title'),
+        faqTocColumn: $('.grid__col--toc'),
+        faqToc:       $('#toc'),
+        minWidth:     768 // $screen-sm
+    }
+
+    _private = {
+        faqToggle: function() {
+            _config.faqQuestion.click(function() {
+                $(this).toggleClass('open');
+                $(this).next(_config.faqAnswer).toggleClass('open');
+            });
+        },
+        faqTocInit: function() {
+            _config.faqToc.toc({
+                'selectors': _config.faqTitle, // elements to use as headings
+                'container': 'body', // element to find all selectors in
+                'smoothScrolling': true, // enable or disable smooth scrolling on click
+                'highlightOffset': 200, // offset to trigger the next headline
+            });
+        },
+        faqTocSticky: function() {
+            var win = $(window);
+
+            win.on('load resize scroll',function(e) {
+                if (_private.isWide()) {
+                    if ( win.scrollTop() > _config.faqTocColumn.offset().top) {
+                        _config.faqToc.addClass('sticky');
+                    } else {
+                        _config.faqToc.removeClass('sticky');
+                    }
+
+                    // TODO: remove sticky when bottom of content has been reached
+                }
+            });
+        },
+        isWide: function() {
+            return $(window).width() >= _config.minWidth;
+        }
+
+        // TODO: actually make section jumps work
+    }
+
+    app = {
+        init: function() {
+            _private.faqToggle();
+            _private.faqTocInit();
+            _private.faqTocSticky();
+        }
+    }
+
+    return app
+
+})(window, document, jQuery)
diff --git a/assets/_src/js/ascribe.js b/assets/_src/js/ascribe.js
index dcb32a6..66ff5b2 100644
--- a/assets/_src/js/ascribe.js
+++ b/assets/_src/js/ascribe.js
@@ -1,8 +1,11 @@
 
+//=include _faq.js
+
 $(document).ready(function(){
 
+    Faq.init();
+
     slider();
-    faqToggle();
     marketplaces();
     tourNav();
     mobileNav();
@@ -40,13 +43,6 @@ $(document).ready(function(){
         });
     }
 
-    function faqToggle() {
-        $('.faq__question').click(function() {
-            $(this).toggleClass('open');
-            $(this).next('.faq__answer').toggleClass('open');
-        });
-    }
-
     function marketplaces() {
         $('.top-tab').click(function(){
             $('.top-tab').removeClass('active');
diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less
index 4e19975..e131236 100644
--- a/assets/_src/less/ascribe/_faq.less
+++ b/assets/_src/less/ascribe/_faq.less
@@ -1,5 +1,5 @@
 
-.subtemplate--faq {
+.section-faq {
     padding-top: @spacer;
     padding-bottom: @spacer;
 }
@@ -8,7 +8,10 @@
     margin-left: 20px;
 }
 
-.faq__title { margin-top: 0; }
+.faq__title {
+    &:extend(.h2);
+    margin-top: 0;
+}
 
 .faq__question {
     &:extend(.bold);
@@ -54,3 +57,57 @@
     border-color: transparent transparent transparent @greySocial;
     transition: .2s ease-out;
 }
+
+.grid__col--toc {
+    @media (@screen-sm) {
+        flex: 0 0 33% !important;
+    }
+}
+
+.grid__col--toc {
+    position: relative;
+}
+
+#toc {
+    margin-top: @spacer;
+
+    &.sticky {
+        position: fixed;
+        top: 0;
+        padding-top: @spacer;
+    }
+
+    ul {
+        &:extend(.list-unstyled all);
+
+        li,
+        a {
+            line-height: @line-height-base;
+        }
+
+        li {
+            display: inline-block;
+
+            @media (@screen-sm) {
+                display: block;
+            }
+        }
+
+        a {
+            &:extend(.h4);
+            color: @link-color;
+            display: block;
+            margin: 0;
+            padding: 8px 12px;
+
+            @media (@screen-sm) {
+                padding: 6px 0;
+            }
+        }
+
+        a:hover,
+        .toc-active a {
+            color: @link-hover-color;
+        }
+    }
+}
diff --git a/assets/_src/less/ascribe/_typography.less b/assets/_src/less/ascribe/_typography.less
index 7c138cc..f52a52a 100644
--- a/assets/_src/less/ascribe/_typography.less
+++ b/assets/_src/less/ascribe/_typography.less
@@ -105,6 +105,11 @@ h1, h2, h3, h4, h5, h6,
     color: @black;
 }
 
+.page-title {
+    margin-top: 0;
+    text-align: center;
+}
+
 
 
 // Reset fonts for relevant elements
diff --git a/content-main.php b/content-main.php
index b52fb41..c08d6da 100644
--- a/content-main.php
+++ b/content-main.php
@@ -1,4 +1,24 @@
 <?php $controller = new Controller(); ?>
-<main class="above-chevron">
-    <?php echo $controller->loopSubtemplates(); ?>
+
+<main class="main above-chevron">
+
+    <?php if ( is_page('faq') ) { ?>
+        <div class="subtemplate row subtemplate--faq">
+
+            <h1 class="page-title"><?php the_title(); ?></h1>
+
+            <div class="grid grid--gutters grid--full grid-small--fit">
+                <div class="grid__col grid__col--toc">
+                    <div id="toc"></div>
+                </div>
+
+                <div class="grid__col">
+                    <?php echo $controller->loopSubtemplates(); ?>
+                </div>
+
+        </div>
+    <?php } else {
+        echo $controller->loopSubtemplates();
+    } ?>
+
 </main>
diff --git a/controller/classes/Subtemplate.php b/controller/classes/Subtemplate.php
index 9fc5318..34635c8 100644
--- a/controller/classes/Subtemplate.php
+++ b/controller/classes/Subtemplate.php
@@ -691,8 +691,11 @@ class Subtemplate {
             $regularFAQ .= "</dl>";
         }
 
-        $result = "<section class='subtemplate row row--content content subtemplate--faq'>
-                        <h1 class='faq__title'>{$subtemplateTitle}</h1>
+        // create ID for section jumps from lowercased & sanitized title
+        $subtemplateTitleID = strtolower(sanitize_html_class($subtemplateTitle));
+
+        $result = "<section class='section-faq'>
+                        <h1 class='faq__title' id='{$subtemplateTitleID}'>{$subtemplateTitle}</h1>
                         {$featuredFAQ}
                         {$regularFAQ}
                     </section>";
diff --git a/package.json b/package.json
index 31e84e0..899bc1b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "normalize-css": ">=2.3.1",
-    "normalize-opentype.css": ">=0.2.4"
+    "normalize-opentype.css": ">=0.2.4",
+    "toc": "jgallen23/toc"
   },
   "devDependencies": {
     "browser-sync": "^2.10.0",

From 67fd915c24b61feaac4ac51b2512527e7bf4e0c1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 19:20:00 +0100
Subject: [PATCH 5/9] switch to local copy of toc.js

---
 assets/_src/js/_faq.js             |   3 +-
 assets/_src/js/vendor/toc.js       | 193 +++++++++++++++++++++++++++++
 assets/_src/less/ascribe/_faq.less |   6 +
 3 files changed, 200 insertions(+), 2 deletions(-)
 create mode 100644 assets/_src/js/vendor/toc.js

diff --git a/assets/_src/js/_faq.js b/assets/_src/js/_faq.js
index 9719c68..8438faf 100644
--- a/assets/_src/js/_faq.js
+++ b/assets/_src/js/_faq.js
@@ -1,5 +1,5 @@
 
-//=include ../../../node_modules/toc/dist/toc.js
+//=include vendor/toc.js
 
 var Faq = (function(w, d, $) {
 
@@ -27,7 +27,6 @@ var Faq = (function(w, d, $) {
             _config.faqToc.toc({
                 'selectors': _config.faqTitle, // elements to use as headings
                 'container': 'body', // element to find all selectors in
-                'smoothScrolling': true, // enable or disable smooth scrolling on click
                 'highlightOffset': 200, // offset to trigger the next headline
             });
         },
diff --git a/assets/_src/js/vendor/toc.js b/assets/_src/js/vendor/toc.js
new file mode 100644
index 0000000..2961171
--- /dev/null
+++ b/assets/_src/js/vendor/toc.js
@@ -0,0 +1,193 @@
+/*!
+ * toc - jQuery Table of Contents Plugin
+ * v0.3.2
+ * http://projects.jga.me/toc/
+ * copyright Greg Allen 2014
+ * MIT License
+ */
+/*!
+ * smooth-scroller - Javascript lib to handle smooth scrolling
+ * v0.1.2
+ * https://github.com/firstandthird/smooth-scroller
+ * copyright First+Third 2014
+ * MIT License
+ */
+//smooth-scroller.js
+
+(function($) {
+    $.fn.smoothScroller = function(options) {
+        options = $.extend({}, $.fn.smoothScroller.defaults, options);
+        var el = $(this);
+
+        $(options.scrollEl).animate({
+            scrollTop: el.offset().top - $(options.scrollEl).offset().top - options.offset
+        }, options.speed, options.ease, function() {
+            var hash = el.attr('id');
+
+            if (hash.length) {
+                if (history.pushState) {
+                    history.pushState(null, null, '#' + hash);
+                } else {
+                    document.location.hash = hash;
+                }
+            }
+
+            el.trigger('smoothScrollerComplete');
+        });
+
+        return this;
+    };
+
+    $.fn.smoothScroller.defaults = {
+        speed: 400,
+        ease: 'swing',
+        scrollEl: 'body,html',
+        offset: 0
+    };
+
+    $('body').on('click', '[data-smoothscroller]', function(e) {
+        e.preventDefault();
+        var href = $(this).attr('href');
+
+        if (href.indexOf('#') === 0) {
+            $(href).smoothScroller();
+        }
+    });
+}(jQuery));
+
+(function($) {
+    var verboseIdCache = {};
+    $.fn.toc = function(options) {
+        var self = this;
+        var opts = $.extend({}, jQuery.fn.toc.defaults, options);
+
+        var container = $(opts.container);
+        var headings = $(opts.selectors, container);
+        var headingOffsets = [];
+        var activeClassName = opts.activeClass;
+
+        var scrollTo = function(e, callback) {
+            if (opts.smoothScrolling && typeof opts.smoothScrolling === 'function') {
+                e.preventDefault();
+                var elScrollTo = $(e.target).attr('href');
+
+                opts.smoothScrolling(elScrollTo, opts, callback);
+            }
+            $('li', self).removeClass(activeClassName);
+            $(e.target).parent().addClass(activeClassName);
+        };
+
+        //highlight on scroll
+        var timeout;
+        var highlightOnScroll = function(e) {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            timeout = setTimeout(function() {
+                var top = $(window).scrollTop(),
+                    highlighted, closest = Number.MAX_VALUE,
+                    index = 0;
+
+                for (var i = 0, c = headingOffsets.length; i < c; i++) {
+                    var currentClosest = Math.abs(headingOffsets[i] - top);
+                    if (currentClosest < closest) {
+                        index = i;
+                        closest = currentClosest;
+                    }
+                }
+
+                $('li', self).removeClass(activeClassName);
+                highlighted = $('li:eq(' + index + ')', self).addClass(activeClassName);
+                opts.onHighlight(highlighted);
+            }, 50);
+        };
+        if (opts.highlightOnScroll) {
+            $(window).bind('scroll', highlightOnScroll);
+            highlightOnScroll();
+        }
+
+        return this.each(function() {
+            //build TOC
+            var el = $(this);
+            var ul = $(opts.listType);
+
+            headings.each(function(i, heading) {
+                var $h = $(heading);
+                headingOffsets.push($h.offset().top - opts.highlightOffset);
+
+                var anchorName = opts.anchorName(i, heading, opts.prefix);
+
+                //add anchor
+                if (heading.id !== anchorName) {
+                    var anchor = $('<span/>').attr('id', anchorName).insertBefore($h);
+                }
+
+                //build TOC item
+                var a = $('<a/>')
+                    .text(opts.headerText(i, heading, $h))
+                    .attr('href', '#' + anchorName)
+                    .bind('click', function(e) {
+                        $(window).unbind('scroll', highlightOnScroll);
+                        scrollTo(e, function() {
+                            $(window).bind('scroll', highlightOnScroll);
+                        });
+                        el.trigger('selected', $(this).attr('href'));
+                    });
+
+                var li = $('<li/>')
+                    .addClass(opts.itemClass(i, heading, $h, opts.prefix))
+                    .append(a);
+
+                ul.append(li);
+            });
+            el.html(ul);
+        });
+    };
+
+
+    jQuery.fn.toc.defaults = {
+        container: 'body',
+        listType: '<ul/>',
+        selectors: 'h1,h2,h3',
+        smoothScrolling: function(target, options, callback) {
+            $(target).smoothScroller({
+                offset: options.scrollToOffset
+            }).on('smoothScrollerComplete', function() {
+                callback();
+            });
+        },
+        scrollToOffset: 0,
+        prefix: 'toc',
+        activeClass: 'toc-active',
+        onHighlight: function() {},
+        highlightOnScroll: true,
+        highlightOffset: 100,
+        anchorName: function(i, heading, prefix) {
+            if (heading.id.length) {
+                return heading.id;
+            }
+
+            var candidateId = $(heading).text().replace(/[^a-z0-9]/ig, ' ').replace(/\s+/g, '-').toLowerCase();
+            if (verboseIdCache[candidateId]) {
+                var j = 2;
+
+                while (verboseIdCache[candidateId + j]) {
+                    j++;
+                }
+                candidateId = candidateId + '-' + j;
+
+            }
+            verboseIdCache[candidateId] = true;
+
+            return prefix + '-' + candidateId;
+        },
+        headerText: function(i, heading, $heading) {
+            return $heading.text();
+        },
+        itemClass: function(i, heading, $heading, prefix) {
+            return prefix + '-' + $heading[0].tagName.toLowerCase();
+        }
+
+    };
+
+})(jQuery);
diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less
index e131236..805442c 100644
--- a/assets/_src/less/ascribe/_faq.less
+++ b/assets/_src/less/ascribe/_faq.less
@@ -103,9 +103,15 @@
             @media (@screen-sm) {
                 padding: 6px 0;
             }
+
+            &:active,
+            &:focus {
+                outline: 0;
+            }
         }
 
         a:hover,
+        a:focus,
         .toc-active a {
             color: @link-hover-color;
         }

From 5580ae658d146a5110e680b5a95ac03d8b1004c9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 19:21:23 +0100
Subject: [PATCH 6/9] toc.js: fix wrong urls

---
 assets/_src/js/vendor/toc.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/assets/_src/js/vendor/toc.js b/assets/_src/js/vendor/toc.js
index 2961171..1beb853 100644
--- a/assets/_src/js/vendor/toc.js
+++ b/assets/_src/js/vendor/toc.js
@@ -25,11 +25,7 @@
             var hash = el.attr('id');
 
             if (hash.length) {
-                if (history.pushState) {
-                    history.pushState(null, null, '#' + hash);
-                } else {
-                    document.location.hash = hash;
-                }
+                document.location.hash = hash;
             }
 
             el.trigger('smoothScrollerComplete');

From 866e504a82150432ffcb8e2bfb255943fec556f5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 19:25:24 +0100
Subject: [PATCH 7/9] toc.js: fix wrong link being highlighted when page length
 changes dynamically

- from https://github.com/jgallen23/toc/pull/48
---
 assets/_src/js/vendor/toc.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/assets/_src/js/vendor/toc.js b/assets/_src/js/vendor/toc.js
index 1beb853..cef6942 100644
--- a/assets/_src/js/vendor/toc.js
+++ b/assets/_src/js/vendor/toc.js
@@ -59,9 +59,17 @@
 
         var container = $(opts.container);
         var headings = $(opts.selectors, container);
-        var headingOffsets = [];
         var activeClassName = opts.activeClass;
 
+        var headingOffsets = function() {
+            var offsets = [];
+            headings.each(function(i, heading) {
+                var $h = $(heading);
+                offsets.push($h.offset().top - opts.highlightOffset);
+            });
+            return offsets;
+        };
+
         var scrollTo = function(e, callback) {
             if (opts.smoothScrolling && typeof opts.smoothScrolling === 'function') {
                 e.preventDefault();
@@ -82,10 +90,11 @@
             timeout = setTimeout(function() {
                 var top = $(window).scrollTop(),
                     highlighted, closest = Number.MAX_VALUE,
-                    index = 0;
+                    index = 0
+                    offsets = headingOffsets();
 
-                for (var i = 0, c = headingOffsets.length; i < c; i++) {
-                    var currentClosest = Math.abs(headingOffsets[i] - top);
+                for (var i = 0, c = offsets.length; i < c; i++) {
+                    var currentClosest = Math.abs(offsets[i] - top);
                     if (currentClosest < closest) {
                         index = i;
                         closest = currentClosest;
@@ -109,7 +118,6 @@
 
             headings.each(function(i, heading) {
                 var $h = $(heading);
-                headingOffsets.push($h.offset().top - opts.highlightOffset);
 
                 var anchorName = opts.anchorName(i, heading, opts.prefix);
 

From 9910758fe482188d435fa8c10ce61a84139badd9 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 20:21:47 +0100
Subject: [PATCH 8/9] use affix plugin for reliable sticky detection

---
 assets/_src/js/_faq.js             |  20 ++--
 assets/_src/js/vendor/affix.js     | 162 +++++++++++++++++++++++++++++
 assets/_src/less/ascribe/_faq.less |  13 ++-
 content-main.php                   |   2 +
 4 files changed, 183 insertions(+), 14 deletions(-)
 create mode 100644 assets/_src/js/vendor/affix.js

diff --git a/assets/_src/js/_faq.js b/assets/_src/js/_faq.js
index 8438faf..7d93797 100644
--- a/assets/_src/js/_faq.js
+++ b/assets/_src/js/_faq.js
@@ -1,5 +1,6 @@
 
 //=include vendor/toc.js
+//=include vendor/affix.js
 
 var Faq = (function(w, d, $) {
 
@@ -27,29 +28,26 @@ var Faq = (function(w, d, $) {
             _config.faqToc.toc({
                 'selectors': _config.faqTitle, // elements to use as headings
                 'container': 'body', // element to find all selectors in
-                'highlightOffset': 200, // offset to trigger the next headline
+                'highlightOffset': 100, // offset to trigger the next headline
             });
         },
         faqTocSticky: function() {
             var win = $(window);
 
-            win.on('load resize scroll',function(e) {
+            win.on('load resize',function(e) {
                 if (_private.isWide()) {
-                    if ( win.scrollTop() > _config.faqTocColumn.offset().top) {
-                        _config.faqToc.addClass('sticky');
-                    } else {
-                        _config.faqToc.removeClass('sticky');
-                    }
-
-                    // TODO: remove sticky when bottom of content has been reached
+                    _config.faqToc.affix({
+                        offset: {
+                            top: ( _config.faqTocColumn.offset().top + 20 ),
+                            bottom: ( $('.section-faq:last-child').outerHeight(true) + 40 )
+                        }
+                    });
                 }
             });
         },
         isWide: function() {
             return $(window).width() >= _config.minWidth;
         }
-
-        // TODO: actually make section jumps work
     }
 
     app = {
diff --git a/assets/_src/js/vendor/affix.js b/assets/_src/js/vendor/affix.js
new file mode 100644
index 0000000..b1d8d2c
--- /dev/null
+++ b/assets/_src/js/vendor/affix.js
@@ -0,0 +1,162 @@
+/* ========================================================================
+ * Bootstrap: affix.js v3.3.6
+ * http://getbootstrap.com/javascript/#affix
+ * ========================================================================
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+  'use strict';
+
+  // AFFIX CLASS DEFINITION
+  // ======================
+
+  var Affix = function (element, options) {
+    this.options = $.extend({}, Affix.DEFAULTS, options)
+
+    this.$target = $(this.options.target)
+      .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
+      .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
+
+    this.$element     = $(element)
+    this.affixed      = null
+    this.unpin        = null
+    this.pinnedOffset = null
+
+    this.checkPosition()
+  }
+
+  Affix.VERSION  = '3.3.6'
+
+  Affix.RESET    = 'affix affix-top affix-bottom'
+
+  Affix.DEFAULTS = {
+    offset: 0,
+    target: window
+  }
+
+  Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) {
+    var scrollTop    = this.$target.scrollTop()
+    var position     = this.$element.offset()
+    var targetHeight = this.$target.height()
+
+    if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false
+
+    if (this.affixed == 'bottom') {
+      if (offsetTop != null) return (scrollTop + this.unpin <= position.top) ? false : 'bottom'
+      return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom'
+    }
+
+    var initializing   = this.affixed == null
+    var colliderTop    = initializing ? scrollTop : position.top
+    var colliderHeight = initializing ? targetHeight : height
+
+    if (offsetTop != null && scrollTop <= offsetTop) return 'top'
+    if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'
+
+    return false
+  }
+
+  Affix.prototype.getPinnedOffset = function () {
+    if (this.pinnedOffset) return this.pinnedOffset
+    this.$element.removeClass(Affix.RESET).addClass('affix')
+    var scrollTop = this.$target.scrollTop()
+    var position  = this.$element.offset()
+    return (this.pinnedOffset = position.top - scrollTop)
+  }
+
+  Affix.prototype.checkPositionWithEventLoop = function () {
+    setTimeout($.proxy(this.checkPosition, this), 1)
+  }
+
+  Affix.prototype.checkPosition = function () {
+    if (!this.$element.is(':visible')) return
+
+    var height       = this.$element.height()
+    var offset       = this.options.offset
+    var offsetTop    = offset.top
+    var offsetBottom = offset.bottom
+    var scrollHeight = Math.max($(document).height(), $(document.body).height())
+
+    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
+    if (typeof offsetTop == 'function')    offsetTop    = offset.top(this.$element)
+    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.$element)
+
+    var affix = this.getState(scrollHeight, height, offsetTop, offsetBottom)
+
+    if (this.affixed != affix) {
+      if (this.unpin != null) this.$element.css('top', '')
+
+      var affixType = 'affix' + (affix ? '-' + affix : '')
+      var e         = $.Event(affixType + '.bs.affix')
+
+      this.$element.trigger(e)
+
+      if (e.isDefaultPrevented()) return
+
+      this.affixed = affix
+      this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
+
+      this.$element
+        .removeClass(Affix.RESET)
+        .addClass(affixType)
+        .trigger(affixType.replace('affix', 'affixed') + '.bs.affix')
+    }
+
+    if (affix == 'bottom') {
+      this.$element.offset({
+        top: scrollHeight - height - offsetBottom
+      })
+    }
+  }
+
+
+  // AFFIX PLUGIN DEFINITION
+  // =======================
+
+  function Plugin(option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.affix')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  var old = $.fn.affix
+
+  $.fn.affix             = Plugin
+  $.fn.affix.Constructor = Affix
+
+
+  // AFFIX NO CONFLICT
+  // =================
+
+  $.fn.affix.noConflict = function () {
+    $.fn.affix = old
+    return this
+  }
+
+
+  // AFFIX DATA-API
+  // ==============
+
+  $(window).on('load', function () {
+    $('[data-spy="affix"]').each(function () {
+      var $spy = $(this)
+      var data = $spy.data()
+
+      data.offset = data.offset || {}
+
+      if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom
+      if (data.offsetTop    != null) data.offset.top    = data.offsetTop
+
+      Plugin.call($spy, data)
+    })
+  })
+
+}(jQuery);
diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less
index 805442c..e88826a 100644
--- a/assets/_src/less/ascribe/_faq.less
+++ b/assets/_src/less/ascribe/_faq.less
@@ -70,9 +70,8 @@
 
 #toc {
     margin-top: @spacer;
-
-    &.sticky {
-        position: fixed;
+    
+    &.affix {
         top: 0;
         padding-top: @spacer;
     }
@@ -117,3 +116,11 @@
         }
     }
 }
+
+
+//
+// Affix.js helpers
+//
+.affix {
+    position: fixed !important;
+}
diff --git a/content-main.php b/content-main.php
index c08d6da..3a8bbbc 100644
--- a/content-main.php
+++ b/content-main.php
@@ -18,7 +18,9 @@
 
         </div>
     <?php } else {
+
         echo $controller->loopSubtemplates();
+
     } ?>
 
 </main>

From b04f89eba2199163aab97405a6967aa924ab525d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 12 Mar 2016 20:44:20 +0100
Subject: [PATCH 9/9] nicer answer opening

---
 assets/_src/less/ascribe/_faq.less | 48 ++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less
index e88826a..d953aaa 100644
--- a/assets/_src/less/ascribe/_faq.less
+++ b/assets/_src/less/ascribe/_faq.less
@@ -8,11 +8,19 @@
     margin-left: 20px;
 }
 
+
+//
+// FAQ Section Title
+//
 .faq__title {
     &:extend(.h2);
     margin-top: 0;
 }
 
+
+//
+// FAQ Question
+//
 .faq__question {
     &:extend(.bold);
     display: block;
@@ -30,18 +38,38 @@
     }
 }
 
+
+//
+// FAQ Answer
+//
 .faq__answer {
-    display: none;
-    margin-bottom: @spacer;
+    transition: .2s ease-out;
+    transform-origin: top;
+    height: 0;
+    overflow: hidden;
     margin-left: 0;
 
     &.open {
-        display: block;
-        max-height: 800px;
+        animation: openQuestion .15s ease-out forwards;
+    }
+}
+
+@keyframes openQuestion {
+    0% {
+        transform: scaleY(0);
+        opacity: 0;
+    }
+    100% {
+        transform: scaleY(1);
+        opacity: 1;
+        height: 100%;
     }
 }
 
 
+//
+// Featured FAQ modifier
+//
 .faq--featured {
     .faq__question {
         color: @pink;
@@ -55,22 +83,24 @@
     border-style: solid;
     border-width: 5px 0 5px 6px;
     border-color: transparent transparent transparent @greySocial;
-    transition: .2s ease-out;
+    transition: .15s ease-out;
 }
 
 .grid__col--toc {
+    position: relative;
+
     @media (@screen-sm) {
         flex: 0 0 33% !important;
     }
 }
 
-.grid__col--toc {
-    position: relative;
-}
 
+//
+// Table of Contents
+//
 #toc {
     margin-top: @spacer;
-    
+
     &.affix {
         top: 0;
         padding-top: @spacer;