From d0e3e5a4d212208ad8f30e8a2cdc599ee5996076 Mon Sep 17 00:00:00 2001
From: Scott Vandehey <fake-scott@spaceninja.com>
Date: Thu, 17 Aug 2023 12:13:50 -0700
Subject: [PATCH] better CSS formatting and comments

---
 .stylelintrc.js                  |   5 +
 src/_includes/contents-item.njk  |   4 +-
 src/_includes/contents.njk       |   2 +-
 src/_includes/frontispiece.njk   |   2 +-
 src/_includes/layouts/screen.njk |  13 +-
 src/_includes/title-page.njk     |   6 +-
 src/_scss/_figures.scss          |  51 ++++++++
 src/_scss/_footnotes.scss        |  41 +++++++
 src/_scss/_layout.scss           |  46 ++++++++
 src/_scss/_print-layout.scss     |  79 ++++++++-----
 src/_scss/_print.scss            | 152 ------------------------
 src/_scss/_theme.scss            | 197 -------------------------------
 src/_scss/_titles.scss           |  41 +++++++
 src/_scss/_toc.scss              |  68 +++++++++++
 src/_scss/_typography.scss       |  74 ++++++++++++
 src/a-study-in-scarlet.njk       |   2 +-
 src/part-1/index.njk             |  34 +++---
 src/part-2/index.njk             |  34 +++---
 src/style.scss                   |   7 +-
 19 files changed, 424 insertions(+), 434 deletions(-)
 create mode 100644 src/_scss/_figures.scss
 create mode 100644 src/_scss/_footnotes.scss
 create mode 100644 src/_scss/_layout.scss
 delete mode 100644 src/_scss/_print.scss
 create mode 100644 src/_scss/_titles.scss
 create mode 100644 src/_scss/_toc.scss
 create mode 100644 src/_scss/_typography.scss

diff --git a/.stylelintrc.js b/.stylelintrc.js
index 8c33072..1eba52e 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,3 +1,8 @@
 module.exports = {
   extends: ['stylelint-config-spaceninja', 'stylelint-config-prettier'],
+  // 1. This rule doesn't understand some print styles.
+  rules: {
+    'scss/at-rule-no-unknown': null, // 1
+    'selector-pseudo-element-no-unknown': null, // 1
+  },
 };
diff --git a/src/_includes/contents-item.njk b/src/_includes/contents-item.njk
index ebacf66..d2cdc4f 100644
--- a/src/_includes/contents-item.njk
+++ b/src/_includes/contents-item.njk
@@ -1,6 +1,6 @@
 <li>
   <span class="toc-item">
-    <span class="toc-title">
+    <span class="toc-item__title">
       <a href="
         {%- if useJumpLinks -%}
           #ch-{{ chapter.data.chapter }}-{{ chapter.data.title | slugify }}
@@ -10,7 +10,7 @@
         {{- chapter.data.title -}}
       </a>
     </span>
-    <span class="toc-page print-only">
+    <span class="toc-item__page print-only">
       <a href="
         {%- if useJumpLinks -%}
           #ch-{{ chapter.data.chapter }}-{{ chapter.data.title | slugify }}
diff --git a/src/_includes/contents.njk b/src/_includes/contents.njk
index 021b917..7203555 100644
--- a/src/_includes/contents.njk
+++ b/src/_includes/contents.njk
@@ -1,4 +1,4 @@
-<article class="print-page page-toc">
+<article class="new-page page-toc">
   <h2 id="contents">Contents.</h2>
 
   <section>
diff --git a/src/_includes/frontispiece.njk b/src/_includes/frontispiece.njk
index 776fa68..c696313 100644
--- a/src/_includes/frontispiece.njk
+++ b/src/_includes/frontispiece.njk
@@ -1,4 +1,4 @@
-<article class="print-page page-frontispiece">
+<article class="new-page page-frontispiece">
   <figure class="full-page-image">
     <img
       src="/images/frontispiece.png"
diff --git a/src/_includes/layouts/screen.njk b/src/_includes/layouts/screen.njk
index 0b676a8..0dec2b8 100644
--- a/src/_includes/layouts/screen.njk
+++ b/src/_includes/layouts/screen.njk
@@ -3,16 +3,14 @@ layout: layouts/base.njk
 ---
 
 {% if showHeader %}
-<header class="header" id="top">
-  <div class="header-content">
-    <em><a href="/">{{ book.title }}</a></em>
-  </div>
+<header class="app-header" id="top">
+  <p><em><a href="/">{{ book.title }}</a></em></p>
 </header>
 {% endif %}
-<main class="primary-content {{ main_class }}">
+<main class="app-main {{ main_class }}">
   {{ content | safe }}
 </main>
-<footer class="footer">
+<footer class="app-footer">
   {% if showNav %}
   <nav class="chapter-nav">
     <div class="chapter-nav__item chapter-nav__prev{% if not prev %} is-disabled{% endif %}">
@@ -33,9 +31,6 @@ layout: layouts/base.njk
       {% endif %}
     </div>
   </nav>
-  <div class="nav-back-to-top">
-    <a class="nav-back-to-top__link" href="#top"><span class="sr-only">Back to Top</span></a>
-  </div>
   {% endif %}
   <div class="footer-content">
     <div class="footer-copyright">
diff --git a/src/_includes/title-page.njk b/src/_includes/title-page.njk
index af9b438..f60945d 100644
--- a/src/_includes/title-page.njk
+++ b/src/_includes/title-page.njk
@@ -1,5 +1,5 @@
-<article class="print-page title-page">
+<article class="new-page title-page">
   <h1 id="a-study-in-scarlet">{{ book.title }}</h1>
-  <p class="credits">By {{ book.author }}</p>
-  <p class="credits">With numerous original engravings by D.H. Friston.</p>
+  <p class="p-initial is-centered">By {{ book.author }}</p>
+  <p class="p-initial is-centered">With numerous original engravings by D.H. Friston.</p>
 </article>
diff --git a/src/_scss/_figures.scss b/src/_scss/_figures.scss
new file mode 100644
index 0000000..66f9f65
--- /dev/null
+++ b/src/_scss/_figures.scss
@@ -0,0 +1,51 @@
+/**
+ * Figures
+ */
+figure {
+  margin: 1em 0;
+
+  ol {
+    margin-top: 0;
+  }
+
+  @media print {
+    page-break-inside: avoid;
+  }
+}
+
+figcaption {
+  font-style: italic;
+  text-align: center;
+  text-wrap: balance;
+}
+
+img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+/**
+ * Modifier for figures containing full-page images
+ *
+ * 1. 75% of page height
+ */
+.full-page-image {
+  figcaption {
+    font-size: smaller;
+    margin-top: 1em;
+  }
+
+  @media print {
+    page-break-after: always;
+    page-break-before: always;
+    page-break-inside: avoid;
+
+    img {
+      margin: 0 auto;
+      max-height: 8.333in; // 1
+      page-break-inside: avoid;
+      width: auto;
+    }
+  }
+}
diff --git a/src/_scss/_footnotes.scss b/src/_scss/_footnotes.scss
new file mode 100644
index 0000000..378348e
--- /dev/null
+++ b/src/_scss/_footnotes.scss
@@ -0,0 +1,41 @@
+/**
+ * Footnotes
+ *
+ * 1. For print, we need the footnote to appear inline with the text, so it
+ *    can be positioned at the bottom of the current page. For screen, we
+ *    want to treat footnotes as endnotes, appearing at the end of the chapter.
+ * 2. Position the footnote at the bottom of the page it appears on.
+ * 3. Docraptor tries to automatically add the footnote numbers, but we
+ *    also need the numbers for web display, so we're adding them manually,
+ *    and disabling the automatic ones.
+ *
+ * @see https://docraptor.com/documentation/article/1067570-adding-footnotes
+ */
+main {
+  @media screen {
+    display: flex; // 1
+    flex-direction: column; // 1
+  }
+}
+
+.footnote {
+  font-size: smaller;
+  font-style: italic;
+
+  @media screen {
+    margin-top: 2em;
+    order: 1; // 1
+  }
+
+  @media print {
+    float: footnote; // 2
+
+    &::footnote-call {
+      content: none; // 3
+    }
+
+    &::footnote-marker {
+      content: none; // 3
+    }
+  }
+}
diff --git a/src/_scss/_layout.scss b/src/_scss/_layout.scss
new file mode 100644
index 0000000..7afdc4e
--- /dev/null
+++ b/src/_scss/_layout.scss
@@ -0,0 +1,46 @@
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+body {
+  margin: 1em;
+}
+
+main {
+  margin: 0 auto;
+  margin-bottom: 2em;
+  max-width: 60ch;
+}
+
+.app-header {
+  text-align: center;
+}
+
+.app-footer {
+  border-top: 1px solid currentcolor;
+  padding-top: 1em;
+}
+
+/**
+ * Chapter Navigation
+ */
+.chapter-nav {
+  display: flex;
+  gap: 1em;
+  justify-content: space-between;
+  margin-bottom: 1em;
+}
+
+.chapter-nav__toc {
+  text-align: center;
+}
+
+.chapter-nav__next {
+  text-align: right;
+}
diff --git a/src/_scss/_print-layout.scss b/src/_scss/_print-layout.scss
index ba89457..20c580e 100644
--- a/src/_scss/_print-layout.scss
+++ b/src/_scss/_print-layout.scss
@@ -1,25 +1,22 @@
-/* this rule doesn't understand some print styles */
-/* stylelint-disable scss/at-rule-no-unknown */
-/* stylelint-disable selector-pseudo-element-no-unknown */
-
 @media print {
-  /*
-		This is to ensure that each "page" in the CMS breaks to a new page in
-		the PDF. What markup element it targets may need to change and it may
-		belong in the pattern library.
-	*/
-  .print-page {
+  // Utility class to force a page break
+  .new-page {
     page-break-before: always;
   }
 
-  /* reduce default margins to more closely match source pdf */
+  /**
+   * Standard Page Layout
+   *
+   * 1. We're using some special DocRaptor CSS to inject page numbers
+   *
+   * @see https://docraptor.com/documentation/article/1067094-headers-footers-for-pdfs
+   * @see https://docraptor.com/documentation/article/1082618-page-numbers
+   */
   @page {
     margin: 0.75in;
     padding: 0;
-  }
 
-  /* add page numbers to footer, aligned to match source pdf */
-  @page {
+    // Add book title to page header
     @top {
       content: 'A Study in Scarlet';
       font-family: Merriweather, serif;
@@ -27,15 +24,26 @@
       font-style: italic;
       margin-top: 1em;
     }
+
+    // Add page numbers to page footer
     @bottom {
-      content: counter(page);
+      content: counter(page); // 1
       font-family: Merriweather, serif;
       font-size: smaller;
       margin-bottom: 1em;
     }
   }
 
-  /* named pages */
+  /**
+   * Named Pages with Modified Layouts
+   *
+   * 1. Set table of contents to page 0, so successive page numbers are correct
+   * 2. Remove page header and footer
+   */
+  .page-toc {
+    page: toc;
+  }
+
   .title-page {
     page: title_page;
   }
@@ -44,37 +52,50 @@
     page: frontispiece;
   }
 
-  .page-toc {
-    page: toc;
-  }
-
-  /* set TOC to page 0, so successive page numbers are correct */
   @page toc {
-    counter-reset: page -1;
+    counter-reset: page -1; // 1
     @top {
-      content: none;
+      content: none; // 2
     }
     @bottom {
-      content: none;
+      content: none; // 2
     }
   }
 
-  /* remove page numbers */
   @page title_page {
     @top {
-      content: none;
+      content: none; // 2
     }
     @bottom {
-      content: none;
+      content: none; // 2
     }
   }
 
   @page frontispiece {
     @top {
-      content: none;
+      content: none; // 2
     }
     @bottom {
-      content: none;
+      content: none; // 2
     }
   }
 }
+
+/**
+ * Utility classes to hide elements from the screen, but show them when printed
+ */
+.print-only {
+  display: none;
+
+  @media print {
+    display: block;
+  }
+}
+
+.print-only-inline {
+  display: none;
+
+  @media print {
+    display: inline;
+  }
+}
diff --git a/src/_scss/_print.scss b/src/_scss/_print.scss
deleted file mode 100644
index 639bbe7..0000000
--- a/src/_scss/_print.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-/* this rule doesn't understand some print styles */
-/* stylelint-disable scss/at-rule-no-unknown */
-/* stylelint-disable selector-pseudo-element-no-unknown */
-
-.print-only {
-  display: none;
-
-  @media print {
-    display: block;
-  }
-}
-
-.print-only-inline {
-  display: none;
-
-  @media print {
-    display: inline;
-  }
-}
-
-@media print {
-  body {
-    font-size: 16px;
-  }
-
-  figure {
-    page-break-inside: avoid;
-  }
-
-  .full-page-image {
-    page-break-after: always;
-    page-break-before: always;
-    page-break-inside: avoid;
-
-    figcaption {
-      font-size: smaller;
-      margin-top: 1em;
-    }
-
-    img {
-      margin: 0 auto;
-      max-height: 800px;
-      page-break-inside: avoid;
-      width: auto;
-    }
-  }
-
-  p {
-    orphans: 2;
-    widows: 2;
-  }
-
-  .title-page {
-    margin-top: 3.5in;
-  }
-
-  .part-title {
-    margin: 3.5in auto 0;
-    page-break-after: always;
-  }
-
-  .chapter-title {
-    margin-top: 2in;
-  }
-
-  /*
-    Footnotes
-    1. Position the footnote at the bottom of the page it appears on.
-    2. Docraptor tries to automatically add the footnote numbers, but we
-       also need the numbers for web display, so we're adding them manually,
-       and disabling the automatic ones.
-
-    @see https://docraptor.com/documentation/article/1067570-adding-footnotes
-  */
-  .footnote {
-    float: footnote; // 1
-
-    &::footnote-call {
-      content: none; // 2
-    }
-
-    &::footnote-marker {
-      content: none; // 2
-    }
-  }
-
-  .toc-item {
-    align-items: flex-end;
-    display: flex;
-  }
-
-  .toc-title {
-    flex: 1;
-  }
-
-  .toc-page {
-    padding-left: 0.5em;
-    text-align: right;
-  }
-
-  /*
-		Fix Dot Leaders
-		Our dot leader pattern is broken in the generated PDF.
-		It's unclear why, since DocRaptor uses Prince, and Prince supports
-		the Flexbox fallback, but it also turns out Prince supports the
-		proposed `leader()` syntax to do the same thing, so we can just
-		swap our approach here.
-
-		@see https://www.princexml.com/doc/gen-content/
-		@see https://www.w3.org/Style/Examples/007/leaders.en.html
-	*/
-  @supports (content: leader(dotted)) {
-    .toc-item {
-      break-inside: avoid;
-    }
-
-    .toc-title::after {
-      content: leader(dotted);
-    }
-  }
-
-  /**
-   * Default back to the text color when printed
-   */
-
-  .u-print-linkUrls :link,
-  .u-print-linkUrls :visited {
-    color: currentcolor;
-  }
-
-  /**
-   * Link URLs should be visible when printed
-   */
-
-  /* stylelint-disable-next-line plugin/selector-bem-pattern */
-  .u-print-linkUrls a:not([href^='tel:'])::after {
-    content: ' (' attr(href) ') ';
-  }
-
-  /*
-		Page Numbers
-		We're using some special DocRaptor CSS to inject page numbers to
-		the table of contents and the page footer:
-		@see https://docraptor.com/documentation/article/1067094-headers-footers-for-pdfs
-		@see https://docraptor.com/documentation/article/1082618-page-numbers
-		@see https://docraptor.com/documentation/tutorial/table-of-contents
-	*/
-  /* stylelint-disable-next-line no-descending-specificity */
-  .toc-page a::after {
-    content: target-counter(attr(href), page);
-  }
-}
diff --git a/src/_scss/_theme.scss b/src/_scss/_theme.scss
index a785b31..0523592 100644
--- a/src/_scss/_theme.scss
+++ b/src/_scss/_theme.scss
@@ -1,5 +1,3 @@
-@import 'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap';
-
 :root {
   --color-bg: #fff;
   --color-fg: #333;
@@ -15,213 +13,18 @@
 }
 
 html {
-  box-sizing: border-box;
   color-scheme: light dark;
-  font-size: 18px;
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: inherit;
 }
 
 body {
   background: var(--color-bg);
   color: var(--color-fg);
-  font-family: Merriweather, serif;
-  line-height: 1.75;
-  margin: 1em;
 }
 
 a {
   color: var(--color-link);
 }
 
-main {
-  margin: 0 auto;
-  margin-bottom: 2em;
-  max-width: 60ch;
-
-  // text-align: justify;
-}
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-  text-align: center;
-}
-
-h3 {
-  font-size: 1.3em;
-}
-
-h1,
-h2,
-h3 {
-  text-wrap: balance;
-}
-
-p {
-  margin: 0 0 0.25em;
-  text-indent: 2em;
-
-  &:first-of-type {
-    text-indent: 0;
-  }
-}
-
-/**
- * Footnotes
- * 1. For print, we need the footnote to appear inline with the text, so it
- *    can be positioned at the bottom of the current page. For screen, we
- *    want to treat footnotes as endnotes, appearing at the end of the chapter.
- */
-@media screen {
-  main {
-    display: flex; // 1
-    flex-direction: column; // 1
-  }
-
-  .footnote {
-    margin-top: 2em;
-    order: 1; // 1
-  }
-}
-
-.footnote {
-  font-size: smaller;
-  font-style: italic;
-}
-
-sup {
-  bottom: 0.5em;
-  position: relative;
-  vertical-align: baseline;
-}
-
-.credits {
-  margin: 1em 0;
-  text-align: center;
-  text-indent: 0;
-}
-
-.part-title {
-  text-align: center;
-
-  strong {
-    display: block;
-  }
-
-  span {
-    display: block;
-    font-size: 20px;
-    font-style: italic;
-    font-weight: normal;
-    text-wrap: balance;
-  }
-}
-
-.toc-header {
-  text-align: left;
-
-  h3 {
-    margin-bottom: 0;
-  }
-
-  p {
-    text-wrap: balance;
-  }
-}
-
-em,
-i {
-  em,
-  i {
-    font-style: normal;
-  }
-}
-
-img {
-  display: block;
-  height: auto;
-  max-width: 100%;
-}
-
-figcaption {
-  font-style: italic;
-  text-align: center;
-  text-wrap: balance;
-}
-
-figure {
-  margin: 1em 0;
-
-  ol {
-    margin-top: 0;
-  }
-}
-
-.is-centered {
-  text-align: center;
-}
-
-.sr-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.header {
-  text-align: center;
-}
-
-.chapter-title {
-  text-align: center;
-
-  strong {
-    display: block;
-  }
-
-  span {
-    display: block;
-    font-size: 20px;
-    font-style: italic;
-    font-weight: normal;
-    text-wrap: balance;
-  }
-}
-
-.footer {
-  border-top: 1px solid currentcolor;
-  padding-top: 1em;
-}
-
-.chapter-nav {
-  display: flex;
-  gap: 1em;
-  justify-content: space-between;
-  margin: 0 0 1em;
-}
-
-.chapter-nav__toc {
-  text-align: center;
-}
-
-.chapter-nav__next {
-  text-align: right;
-}
-
 .is-disabled {
   opacity: 0.5;
 }
-
-.footer-copyright {
-  font-size: 0.8em;
-  text-align: center;
-}
diff --git a/src/_scss/_titles.scss b/src/_scss/_titles.scss
new file mode 100644
index 0000000..b6d2a5f
--- /dev/null
+++ b/src/_scss/_titles.scss
@@ -0,0 +1,41 @@
+/**
+ * Title Page
+ */
+.title-page {
+  @media print {
+    margin-top: 3.5in;
+  }
+}
+
+/**
+ * Part & Chapter Titles
+ */
+.part-title,
+.chapter-title {
+  text-align: center;
+
+  strong {
+    display: block;
+  }
+
+  span {
+    display: block;
+    font-size: 20px;
+    font-style: italic;
+    font-weight: normal;
+    text-wrap: balance;
+  }
+}
+
+.part-title {
+  @media print {
+    margin-top: 3.5in;
+    page-break-after: always;
+  }
+}
+
+.chapter-title {
+  @media print {
+    margin-top: 2in;
+  }
+}
diff --git a/src/_scss/_toc.scss b/src/_scss/_toc.scss
new file mode 100644
index 0000000..d3cc906
--- /dev/null
+++ b/src/_scss/_toc.scss
@@ -0,0 +1,68 @@
+/**
+ * Table of Contents
+ */
+.toc-header {
+  text-align: left;
+
+  h3 {
+    margin-bottom: 0;
+  }
+
+  p {
+    text-wrap: balance;
+  }
+}
+
+/**
+ * Table of Contents Items
+ *
+ * 1. For print only, we use flexbox to control the layout between the chapter
+ *    title and page number.
+ * 2. If one of the chapter titles needs to wrap, ensure they stay aligned with
+ *    the page number and dot leader.
+ */
+.toc-item {
+  @media print {
+    align-items: flex-end; // 2
+    display: flex; // 1
+    page-break-inside: avoid;
+  }
+}
+
+/**
+ * Chapter Titles
+ *
+ * 1. DocRaptor supports the proposed `leader()` syntax to add dot leaders
+ *    between the chapter title and page number.
+ *
+ * @see https://www.princexml.com/doc/gen-content/
+ * @see https://www.w3.org/Style/Examples/007/leaders.en.html
+ */
+.toc-item__title {
+  @media print {
+    flex: 1;
+
+    &::after {
+      content: leader(dotted); // 1
+    }
+  }
+}
+
+/**
+ * Page Numbers
+ *
+ * 1. We're using some special DocRaptor CSS to inject page numbers
+ *
+ * @see https://docraptor.com/documentation/article/1082618-page-numbers
+ * @see https://docraptor.com/documentation/tutorial/table-of-contents
+ */
+.toc-item__page {
+  @media print {
+    padding-left: 0.5em;
+    text-align: right;
+
+    a::after {
+      content: target-counter(attr(href), page); // 1
+    }
+  }
+}
diff --git a/src/_scss/_typography.scss b/src/_scss/_typography.scss
new file mode 100644
index 0000000..4b43bbb
--- /dev/null
+++ b/src/_scss/_typography.scss
@@ -0,0 +1,74 @@
+@import 'https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+
+html {
+  font-size: 18px;
+
+  @media print {
+    font-size: 16px;
+  }
+}
+
+body {
+  font-family: Merriweather, serif;
+  line-height: 1.75;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+  text-align: center;
+}
+
+h3 {
+  font-size: 1.3em;
+}
+
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+
+p {
+  margin: 0 0 0.25em;
+  text-indent: 2em;
+
+  &:first-of-type {
+    text-indent: 0;
+  }
+
+  @media print {
+    orphans: 2;
+    widows: 2;
+  }
+}
+
+// Utility class to reset a paragraph to default styles
+.p-initial {
+  margin: 1em 0;
+  text-indent: 0;
+}
+
+em,
+i {
+  em,
+  i {
+    font-style: normal;
+  }
+}
+
+// Keep superscripts from leaving a gap in the text
+sup {
+  bottom: 0.5em;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.is-centered {
+  text-align: center;
+}
+
+.footer-copyright {
+  font-size: smaller;
+  text-align: center;
+}
diff --git a/src/a-study-in-scarlet.njk b/src/a-study-in-scarlet.njk
index 9893ef8..2d22d0f 100644
--- a/src/a-study-in-scarlet.njk
+++ b/src/a-study-in-scarlet.njk
@@ -14,7 +14,7 @@ eleventyComputed:
 {% include 'contents.njk' %}
 
 {% for chapterObject in collections.chapters %}
-  <article class="print-page">
+  <article class="new-page">
     {% include 'chapter-header.njk' %}
     {{ chapterObject.content | safe }}
   </article>
diff --git a/src/part-1/index.njk b/src/part-1/index.njk
index 593c447..f76e70f 100644
--- a/src/part-1/index.njk
+++ b/src/part-1/index.njk
@@ -1,25 +1,21 @@
 ---
 layout: layouts/screen.njk
+showHeader: true
 eleventyComputed:
   title: 'Part {{ currentPart }}'
 ---
 
-<h2>Contents</h2>
-
-<section>
-  <header class="toc-header">
-    <h3>Part {{ currentPart }}.</h3>
-    <p>
-      <i>{{ parts[currentPart].title }}</i>
-    </p>
-  </header>
-  <ol type="I">
-    {% for chapter in collections.partOne %}
-      <li>
-        <a href="{{ chapter.page.url }}">
-          {{ chapter.data.title }}
-        </a>
-      </li>
-    {% endfor %}
-  </ol>
-</section>
+<article>
+  <h2>Contents</h2>
+  <section>
+    <header class="toc-header">
+      <h3>Part I.</h3>
+      <p><em>{{ parts['I'].title | safe }}</em></p>
+    </header>
+    <ol type="I">
+      {% for chapter in collections.partOne %}
+        {% include 'contents-item.njk' %}
+      {% endfor %}
+    </ol>
+  </section>
+</article>
diff --git a/src/part-2/index.njk b/src/part-2/index.njk
index edcbfc6..009bf50 100644
--- a/src/part-2/index.njk
+++ b/src/part-2/index.njk
@@ -1,25 +1,21 @@
 ---
 layout: layouts/screen.njk
+showHeader: true
 eleventyComputed:
   title: 'Part {{ currentPart }}'
 ---
 
-<h2>Contents</h2>
-
-<section>
-  <header class="toc-header">
-    <h3>Part {{ currentPart }}.</h3>
-    <p>
-      <i>{{ parts[currentPart].title }}</i>
-    </p>
-  </header>
-  <ol type="I">
-    {% for chapter in collections.partTwo %}
-      <li>
-        <a href="{{ chapter.page.url }}">
-          {{ chapter.data.title }}
-        </a>
-      </li>
-    {% endfor %}
-  </ol>
-</section>
+<article>
+  <h2>Contents</h2>
+  <section>
+    <header class="toc-header">
+      <h3>Part II.</h3>
+      <p><em>{{ parts['II'].title | safe }}</em></p>
+    </header>
+    <ol type="I">
+      {% for chapter in collections.partTwo %}
+        {% include 'contents-item.njk' %}
+      {% endfor %}
+    </ol>
+  </section>
+</article>
diff --git a/src/style.scss b/src/style.scss
index 80af841..f15859f 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,3 +1,8 @@
 @use '_scss/theme';
-@use '_scss/print';
+@use '_scss/layout';
+@use '_scss/typography';
+@use '_scss/titles';
+@use '_scss/toc';
+@use '_scss/figures';
+@use '_scss/footnotes';
 @use '_scss/print-layout';