fix template

story/libs/header-attrs-2.26/header-attrs.js

@@ -0,0 +1,12 @@
+// Pandoc 2.9 adds attributes on both header and div. We remove the former (to
+// be compatible with the behavior of Pandoc < 2.8).
+document.addEventListener('DOMContentLoaded', function(e) {
+  var hs = document.querySelectorAll("div.section[class*='level'] > :first-child");
+  var i, h, a;
+  for (i = 0; i < hs.length; i++) {
+    h = hs[i];
+    if (!/^h[1-6]$/i.test(h.tagName)) continue;  // it should be a header h1-h6
+    a = h.attributes;
+    while (a.length > 0) h.removeAttribute(a[0].name);
+  }
+});

story/template_story.html

@@ -573,70 +573,60 @@ <h1>Going further</h1>
             <img class="mylogoheader"
             src=https://github.com/holtzy/data_to_viz/raw/master/img/section/$myimage10$></a
           >
-          $endif$
+        </div>
 
-          <section
-            id="form"
+        $endif$
+      </div>
+    </div>
+    <section
+      id="form"
+      style="
+        margin-top: 70px;
+        padding-bottom: 70px;
+        padding-top: 70px;
+        background-color: #f8f9fa;
+      "
+    >
+      <div class="container">
+        <div style="display: flex; flex-direction: column; align-items: center">
+          <h2 style="font-size: 44px" class="text-center">
+            Dataviz decision tree
+          </h2>
+          <p class="text-center" style="max-width: 600px; font-size: 18px">
+            <a href="https://www.data-to-viz.com">Data To Viz</a> is a
+            comprehensive <b>classification of chart types</b> organized by data
+            input format. Get a high-resolution version of our decision tree
+            delivered to your inbox now!
+          </p>
+          <div
             style="
-              margin-top: 70px;
-              padding-bottom: 70px;
-              padding-top: 70px;
-              background-color: #f8f9fa;
+              margin-top: -50px;
+              width: 100%;
+              display: flex;
+              justify-content: center;
             "
           >
-            <div class="container">
-              <div
-                style="
-                  display: flex;
-                  flex-direction: column;
-                  align-items: center;
-                "
-              >
-                <h2 style="font-size: 44px" class="text-center">
-                  Dataviz decision tree
-                </h2>
-                <p
-                  class="text-center"
-                  style="max-width: 600px; font-size: 18px"
-                >
-                  <a href="https://www.data-to-viz.com">Data To Viz</a> is a
-                  comprehensive <b>classification of chart types</b> organized
-                  by data input format. Get a high-resolution version of our
-                  decision tree delivered to your inbox now!
-                </p>
-                <div
-                  style="
-                    margin-top: -50px;
-                    width: 100%;
-                    display: flex;
-                    justify-content: center;
-                  "
-                >
-                  <script
-                    async
-                    data-uid="8010f15fd2"
-                    src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"
-                  ></script>
-                </div>
-                <br />
-                <div class="text-center">
-                  <img
-                    class="img-fluid"
-                    src="../img/poster/poster_small.png"
-                    alt="High Resolution Poster"
-                    style="max-width: 400px"
-                  />
-                </div>
-              </div>
-            </div>
-          </section>
-
-          $for(include-after)$ $include-after$ $endfor$ $if(theme)$
-          $if(toc_float)$
+            <script
+              async
+              data-uid="8010f15fd2"
+              src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"
+            ></script>
+          </div>
+          <br />
+          <div class="text-center">
+            <img
+              class="img-fluid"
+              src="../img/poster/poster_small.png"
+              alt="High Resolution Poster"
+              style="max-width: 400px"
+            />
+          </div>
         </div>
       </div>
-      $endif$
-    </div>
+    </section>
+
+    $for(include-after)$ $include-after$ $endfor$ $if(theme)$ $if(toc_float)$
+    $endif$
 
     <script>