adding font files from lullabot.com

.eleventy.js

@@ -40,6 +40,7 @@ module.exports = function (eleventyConfig) {
   });
 
   eleventyConfig.addPassthroughCopy("img");
+  eleventyConfig.addPassthroughCopy("fonts");
   eleventyConfig.addPassthroughCopy("src/ebooks/**/*.png");
   eleventyConfig.addPassthroughCopy("src/ebooks/**/*.jpg");
   eleventyConfig.addPassthroughCopy("src/ebooks/**/*.jpeg");

fonts/fonts.css

@@ -0,0 +1,86 @@
+@font-face {
+  font-family: 'Circular';
+  src: url('Circular/Circular-Bold.woff2') format('woff2'),
+    url('Circular/Circular-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Circular';
+  src: url('Circular/Circular-BoldItalic.woff2') format('woff2'),
+    url('Circular/Circular-BoldItalic.woff') format('woff');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Circular';
+  src: url('Circular/Circular-Medium.woff2') format('woff2'),
+    url('Circular/Circular-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Circular';
+  src: url('Circular/Circular-MediumItalic.woff2') format('woff2'),
+    url('Circular/Circular-MediumItalic.woff') format('woff');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Circular';
+  src: url('Circular/Circular-Book.woff2') format('woff2'),
+    url('Circular/Circular-Book.woff') format('woff');
+  font-weight: 450;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Circular';
+  src: url('Circular/Circular-BookItalic.woff2') format('woff2'),
+    url('Circular/Circular-BookItalic.woff') format('woff');
+  font-weight: 450;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBMPlexMono';
+  src: url('IBMPlexMono/IBMPlexMono-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBMPlexMono';
+  src: url('IBMPlexMono/IBMPlexMono-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBMPlexMono';
+  src: url('IBMPlexMono/IBMPlexMono-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'IBMPlexMono';
+  src: url('IBMPlexMono/IBMPlexMono-BoldItalic.ttf')
+    format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}

src/_includes/chapter.liquid

@@ -2,10 +2,25 @@
 layout: layout
 ---
 
+
+{% assign currentBookSlug = page.filePathStem | split: "/" | slice: 2, 1 | join: "" %}
+{% assign bookWithChapters = collections.booksWithChapters | where: "book.slug", currentBookSlug | first %}
+{% assign chapter = bookWithChapters.chapters | where: "url", page.url | first %}
+{% assign previousChapter = chapter.previous %}
+{% assign nextChapter = chapter.next %}
+{% assign isFirstChapter = chapter.index == 0 %}
+{% assign isLastChapter = chapter.index == bookWithChapters.chapters.size | minus: 1 %}
+
+{% assign chapterIndex = chapter.index | plus: 1 %}
+{% if chapterIndex < 10 %}
+  {% assign chapterIndex = "0" | append: chapterIndex %}
+{% endif %}
+
+
 <div class="ebook-page-container">
   <div class="ebook-heading-container">
     <div class="ebook-chapter-heading">
-      <p class="ebook-chapter-number">Chapter {{ page.fileSlug | replace: 'chapter-', '' }}</p>
+      <p class="ebook-chapter-number">Chapter {{ chapterIndex }}</p>
       <p class="ebook-chapter-title">{{ title }} </p>
     </div>
     <div class="ebook-copy">
@@ -20,14 +35,6 @@ layout: layout
   </div>
 </div>
 
-{% assign currentBookSlug = page.filePathStem | split: "/" | slice: 2, 1 | join: "" %}
-{% assign bookWithChapters = collections.booksWithChapters | where: "book.slug", currentBookSlug | first %}
-{% assign chapter = bookWithChapters.chapters | where: "url", page.url | first %}
-{% assign previousChapter = chapter.previous %}
-{% assign nextChapter = chapter.next %}
-{% assign isFirstChapter = chapter.index == 0 %}
-{% assign isLastChapter = chapter.index == bookWithChapters.chapters.size | minus: 1 %}
-
 <div class="nav-container">
   {% if isFirstChapter %}
     <a href="../../table-of-contents/">

src/_includes/layout.liquid

@@ -21,22 +21,33 @@
         <div>{{ chapter.data.title }}</div>
       </div>
 
-    {% assign currentBookSlug = page.filePathStem | split: "/" | slice: 2, 1 | join: "" %}  
-    {% for bookWithChapters in collections.booksWithChapters %}
-      {% if bookWithChapters.book.slug == currentBookSlug %}
-        <div class="page-number">
-          <div>
-            {% if page.fileSlug == 'cover' %}
-              <!-- Empty for cover page -->
-            {% elsif page.fileSlug == 'table-of-contents' %}
-              TOC
-            {% else %}
-              {{ page.fileSlug | replace: 'chapter-', '' }}
-            {% endif %}
+      {% assign currentBookSlug = page.filePathStem | split: "/" | slice: 2, 1 | join: "" %}  
+      {% for bookWithChapters in collections.booksWithChapters %}
+        {% if bookWithChapters.book.slug == currentBookSlug %}
+          {% assign chapter = bookWithChapters.chapters | where: "url", page.url | first %}
+          <div class="page-number">
+            <div>
+              {% if page.fileSlug == 'cover' %}
+                <!-- Empty for cover page -->
+              {% elsif page.fileSlug == 'table-of-contents' %}
+                TOC
+              {% else %}
+                {% assign chapterNumber = page.fileSlug | remove: 'chapter-' %}
+                {% assign numericChapterNumber = chapterNumber | plus: 0 %}
+                {% if numericChapterNumber == 0 or numericChapterNumber > 0 %}
+                  {% if numericChapterNumber < 10 %}
+                    0{{ numericChapterNumber }}
+                  {% else %}
+                    {{ numericChapterNumber }}
+                  {% endif %}
+                {% else %}
+                  {{ chapterNumber }}
+                {% endif %}
+              {% endif %}
+            </div>
           </div>
-        </div>
-      {% endif %}
-    {% endfor %}
+        {% endif %}
+      {% endfor %}
 
     </div>
     <main>

src/sass/styles.scss

@@ -3,13 +3,16 @@ $lb-red: #f81e00;
 $lb-gray: #e0e6eb;
 $lb-white: #fff;
 
+@import "/fonts/fonts.css";
+
 body {
   margin: 0;
   display: flex;
 }
 
 main {
-  font-family: verdana, sans-serif;
+  font-family: 'Circular', verdana, sans-serif;
+  font-size: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -60,7 +63,7 @@ main {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: verdana, sans-serif;
+  font-family: 'IBMPlexMono';
   border-top: 1px solid $lb-gray;
   font-size: 14px;
   font-weight: 400;
@@ -174,6 +177,22 @@ main {
   }
 }
 
+p {
+  .chapter {
+    font-size: 1.25em;
+    font-weight: 700;
+    margin-bottom: 2em; 
+    color: $lb-red;
+  }
+
+  .title {
+    font-size: 2em;
+    font-weight: 700;
+    margin-bottom: 2em; 
+    color: $lb-black;
+  }
+}
+
 .ebook-page-container {
   display: flex;
   height: 100%;