bindery.html

---
---

<!--
  Paragraph styles working from here:
  https://alwaysreadthemanual.com/read/issues/5/eric-meyer/article.html

Convert all a href's to footnotes at end of chapter?
Combine all footnotes to end of doc? Hmm.

-->

<script src="//code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<style>

html{
  font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

.posttitle{
  font-weight:400;
  padding-top:4em;
}

.postsubtitle{
  font-weight:100;
  font-style:italic;
  padding-bottom:4em;
}

.chapternumber{
  position:absolute;
  top:0px;
  text-transform:uppercase;
  color:#00991F;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:bold;
}

.bookgreen{
  color:#00991F !important
}

.post-content h2{
  padding-top:1em;
}

.post-content p, .post-content blockquote, .post-content ul, .post-content ol, .post-content li, .post-content table{
font-size:12px;
line-height:15px;
text-align:justify;
margin-top:5px;
}

.post-content h2, .post-content h3, .post-content h4{
  font-weight:400;
  font-style:italic;
}

img{max-width:100%}

/*.post-content>p+p {
    text-indent: 1.5em;
}*/


.post-content code{
  background-color:#e8fdf5;
  border:1px solid #009688;
  font-family:palatino;
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}

.post-content blockquote{
  margin:0px;
  margin-left:40px;
  font-style:italic;
  font-family:Arial, Helvetica, sans-serif;
}

.📖-footer:not(:empty){
 padding-top:5px;
  border-top:1px solid #00991F;
  font-size:10px;
}

#intro{
  width:100%;
  height:100%;
  background-color:#f3f3f3;
  z-index:10;
}

#imprint{
  text-align:center;
}

#imprint img{
  display:block;
  width:100px;
  margin:auto;
  margin-top:calc(50vh - 50px);
}

.sectiontitle{
  font-size:45px;
}

.tocsubtitle{
  font-size:0.8em;
  
}

.toc-row{
  padding-bottom:20px;
}

</style>


<div id="content">

<div id="intro">#s</div>

<div id="imprint"><img src="https://i.imgur.com/QP7DiY7.png"/><br>Yes! And... press</div>

<div id="toc">
  <h3>Table of Contents</h3>
  <div class="toc">
      {% for section in site.data.chapters %}
      <a href="#section{{forloop.index}}">{{section.title}}</a>
      
      {% assign chapterindex = forloop.index %}

      {% for chapter in section.chapters %}
        {% if chapter.url%}
        <span><a href="#section{{chapterindex}}chapter{{forloop.index}}">{{chapter.title}}</a></span>
        <span class="tocsubtitle"><em>{{chapter.subtitle}}</em></span>
        {% endif %}
      {% endfor %}


      {% endfor %}
  </div>
</div>

<h1>The Strategic Independent</h1>

<p>Intro text goes here...</p>
<p>What if there was a margin note that went something<span data-title="Margin waffles here" class="marginnote"></span> like this</p>

{% for section in site.data.chapters %}

<section>

    <h2 class="sectiontitle bookgreen" id="section{{forloop.index}}">{{section.title}}</h2>
    <p class="sectiondescription"><em>{{section.blurb}}</em></p>
        
        {% assign chapterindex = forloop.index %}

        {% for chapter in section.chapters %}
        {% if chapter.url%}
        
        <h1 class="posttitle" id="section{{chapterindex}}chapter{{forloop.index}}">{{chapter.title}}</h1>
        <h2 class="postsubtitle">{{chapter.subtitle}}</h2>  

        {% assign tempurl = chapter.url | remove:"https://tomcritchlow.com" %}

        {% assign post = site.posts | where:"url", tempurl  | first %}
        <div class="post-content">
        {{post.content}}
        </div>
        {% else %}

        {% endif %}

        {% endfor %} 
        
  </section>

{% endfor %}



  </div>
  <script src="https://unpkg.com/bindery@2.3.1/dist/bindery.min.js"></script>
  <script>

//NBED TODO: remove twitter JS, instagram JS, quotebacks JS

var footnotes = $(".footnotes p");
$("sup").each(function(index){
  var fn = footnotes[index].removeChild(footnotes[index].lastChild);
  $(this).replaceWith("<span class='marginnote' data-title='"+footnotes[index].innerHTML+"'></span>");  
});   
$(".footnotes").hide()
    
    

$( document ).ready(function() {

    let linksAsFootnotes = Bindery.Footnote({
      selector: 'p > a',
      render: (element, number) => `${number}: Link to ${element.href}`
    });

    let marginFootnotes = Bindery.Footnote({
      selector: '.marginnote',
      render: (element, number) => `${number}: ${element.getAttribute("data-title")}`
    });

    let breakRule = Bindery.PageBreak({
      selector: 'h1',
      position: 'before',
    });

    let breakHeaders = Bindery.PageBreak({
      selector: "h1, h2, h3, h4, h5, h6, li, tr",
      position: "avoid"
    });

    let headerRule = Bindery.RunningHeader({
      render: (pageInfo) => pageInfo.isLeft
        ? `${pageInfo.number} · ${pageInfo.heading.h1}`
        : `Tom Critchlow · ${pageInfo.number}`
    });

    let firstPage = Bindery.FullBleedPage({
      selector: '#intro',
      continue: 'same'
    });

    let imprintPage = Bindery.FullBleedPage({
      selector: '#imprint',
      continue: 'same'
    });    

  let tableContents = Bindery.PageReference({
    selector: '#toc a',
    replace: (element, number) => {
      let row = document.createElement('div');
      row.classList.add('toc-row');
      row.innerHTML = element.textContent;
      row.innerHTML += `<span style='float: right;'>${number}</span>`;
      return row;
    }
    });

  let beforesectionbreak = Bindery.PageBreak({
  selector: '.sectiontitle',
  position: 'before',
  continue: 'left'
  })
  
  let aftersectionbreak = Bindery.PageBreak({
  selector: '.sectiondescription',
  position: 'after',
  continue: 'left'
  })  


    Bindery.makeBook({
      content: '#content',
      rules: [tableContents, beforesectionbreak, aftersectionbreak, firstPage, imprintPage, linksAsFootnotes,breakRule,headerRule, breakHeaders, marginFootnotes],
      pageSetup: {
        size: { width: '6in', height: '9in' },
        margin: { top: '1in', inner: '1in', outer: '0.8in', bottom: '1in' },
      },
    });

});    
  </script>