Modal

static/bookmodal.js

@@ -0,0 +1,24 @@
+(function() {
+  if (document.cookie.indexOf('bookSeen=true') > -1) {
+    return;
+  }
+  document.cookie = `bookSeen=true; ${document.cookie}; path=/; max-age=${60*60*24*7}`;
+  document.addEventListener('keydown', (e) => {
+    if (e.keyCode === 27) {
+      document.querySelector('.modal').remove()
+    }
+  });
+
+  const el = document.createElement('div');
+  el.classList.add('modal');
+  el.innerHTML = `<div class="ad">
+    <div class="close"><a class="noborder" href="javascript:document.querySelector('.modal').remove()">🗙</a></div>
+    <h2>The <em>ally</em> book</h2>
+    <p>That's right, for better or for worse, <em class="ally-font">ally</em> is coming out in book form! It's up for pre-order, in both paperback and PDF digital editions.</p>
+    <a href="/book" target="_blank" class="noborder"><img src="/book/cover-front.png" /></a>
+    <p><em class="ally-font">ally</em> is an ergodic, arborescent, semiautobiographical work about identity, mental health, spirituality, and the mutability of the past. A lot of the information contained within is real, some of it isn’t. Each page is structured as a conversation between myself and my ally, a mirror reflection of myself.</p>
+    <p>Learn more about it <a class="pulse" href="/book" target="_blank">here</a>.</p>
+    <p><small><a href="javascript:document.querySelector('.modal').remove()">Dismiss</a></small></p>
+  </div>`;
+  document.body.appendChild(el);
+})();

themes/ally/layouts/partials/footer.html

@@ -7,6 +7,7 @@
         <!-- &emsp;&bull;&emsp; <a href="/chronology">Chronology</a></p> -->
 </footer>
 
+<script src="/bookmodal.js" type="text/javascript"></script>
 <!-- Matomo -->
 <script type="text/javascript">
   var _paq = window._paq || [];

themes/ally/static/css/main.css

@@ -180,8 +180,45 @@ audio {
 .ally-font {
     font-family: 'Merriweather Sans', sans-serif;
     font-style: italic;
+    font-size: 13pt;
 }
 
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+.ad {
+    max-width: 600px;
+    background-color: #fff;
+    margin: 2rem auto;
+    padding: 0.5rem;
+    max-height: 90vh;
+    overflow: scroll;
+}
+.ad .close {
+    position: fixed;
+    width: 100%;
+    background-color: transparent;
+    text-align: right;
+    padding: 0px 0.5rem;
+}
+.ad a.noborder {
+    border: none;
+}
+.ad h2 {
+    font-family: 'Merriweather Sans', sans-serif;
+    text-align: center;
+    margin-top: -1rem;
+}
+.ad img {
+    max-width: 75%;
+    margin: 0 auto;
+    border: 2px solid #888;
+    display: block;
+}
 
 @keyframes flash {
     from {