Add book modal

docs/_includes/book-banner.html

@@ -7,7 +7,7 @@
           {% include book-cover.html %}
         </div>
         <div class="bd-book-column bd-is-content">
-          {% include book-content.html %}
+          {% include book-content.html show_cover=false %}
         </div>
       </div>
     </div>

docs/_includes/book-content.html

@@ -4,6 +4,13 @@
     <h3 class="title">The official Bulma book! 😲</h3>
     <p class="subtitle is-6 has-text-grey">by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,<br>Mikko Lauhakari, Aslam Shah and David Berning</p>
   </header>
+
+  {% if include.show_cover %}
+    <div class="bd-book-inline-cover">
+      {% include book-cover.html %}
+    </div>
+  {% endif %}
+
   <div class="block bd-book-description is-size-5">
     <p>A <strong>step-by-step guide</strong> that teaches you how to build a <strong>web interface from scratch</strong> using Bulma.</p>
   </div>

docs/_includes/book-modal.html

@@ -0,0 +1,14 @@
+<div id="bookModal" class="bd-book-modal modal">
+  <div class="bd-book-modal-background"></div>
+  <div class="modal-content">
+    <div class="bd-book-modal-columns">
+      <div class="bd-book-modal-column bd-is-cover">
+        {% include book-cover.html %}
+      </div>
+      <div class="bd-book-modal-column bd-is-content">
+        {% include book-content.html show_cover=true %}
+      </div>
+    </div>
+  </div>
+  <button  class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
+</div>

docs/_includes/footer.html

@@ -81,4 +81,6 @@
   </div>
 </footer>
 
+{% include book-modal.html %}
+
 {% include scripts.html %}

docs/_includes/scripts.html

@@ -1,4 +1,5 @@
 <script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
+<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
 <script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
 
 {% if page.route == 'index' %}

docs/_includes/variables.html

@@ -9,29 +9,17 @@
   {% assign table_class = include.table_class | default: 'is-bordered' %}
 
   {% if include.custom_message %}
-
     {{ include.custom_message }}
-
   {% else %}
-
     {% assign variables_link_text = "these variables" %}
-
     {% capture variables_link %}
-
       {% if data.file_url %}
-
         <a href="{{ data.file_url }}" target="_blank">{{ variables_link_text }}</a>
-
       {% else %}
-
         {{ variables_link_text }}
-
       {% endif %}
-
     {% endcapture %}
-
     You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-
   {% endif %}
 
 {% endcapture %}
@@ -42,30 +30,32 @@
   <p>{{ content | strip }}</p>
 </div>
 
-<table class="table {{ table_class }}">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tfoot>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </tfoot>
-  <tbody>
-    {% for variable_hash in variables %}
-      {% assign variable = variable_hash[1] %}
+<div class="table-container">
+  <table class="table {{ table_class }}">
+    <thead>
       <tr>
-        <td >
-          <code style="white-space: nowrap;">{{ variable.name }}</code>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
+        <th>Name</th>
+        <th>Default value</th>
       </tr>
-    {% endfor %}
-  </tbody>
-</table>
+    </thead>
+    <tfoot>
+      <tr>
+        <th>Name</th>
+        <th>Default value</th>
+      </tr>
+    </tfoot>
+    <tbody>
+      {% for variable_hash in variables %}
+        {% assign variable = variable_hash[1] %}
+        <tr>
+          <td >
+            <code style="white-space: nowrap;">{{ variable.name }}</code>
+          </td>
+          <td>
+            <code>{{ variable.value }}</code>
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>