asciidoctor-epub3 2.1.3 → 2.2.0

data/data/styles/epub3.scss

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 @import "reset";
 @import "colors";
 @import url("epub3-fonts.css");
@@ -70,7 +72,7 @@ kbd {
 
 .menuseq .caret {
   /*
-  font-family: "FontAwesome";
+  font-family: "Font Awesome 6 Free Solid", monospace;
   font-size: 0.7em;
   line-height: 1;
   font-weight: bold;
@@ -85,7 +87,7 @@ kbd {
 }
 
 .menuseq .caret::before {
-  font-family: "FontAwesome";
+  font-family: "Font Awesome 6 Free Solid", monospace;
   content: "\f054";
   font-size: 0.6em;
   vertical-align: 0.15em;
@@ -119,7 +121,7 @@ sup {
   /*
   display: inline-block;
   vertical-align: text-top;
-  padding-top: .25em;
+  padding-top: 0.25em;
   */
   /* alternate approach #2 */
   line-height: 1;
@@ -136,38 +138,13 @@ sub {
   /*
   display: inline-block;
   vertical-align: text-bottom;
-  padding-bottom: .5em;
+  padding-bottom: 0.5em;
   */
   /* alternate approach #2 */
   line-height: 1;
   vertical-align: text-bottom;
 }
 
-/* We need to apply text-align to <p> too in order to override global text-align:justify */
-th.halign-left, td.halign-left, th.halign-left > p, td.halign-left > p {
-  text-align: left
-}
-
-th.halign-right, td.halign-right, th.halign-right > p, td.halign-right > p {
-  text-align: right
-}
-
-th.halign-center, td.halign-center, th.halign-center > p, td.halign-center > p {
-  text-align: center
-}
-
-th.valign-top, td.valign-top, th.valign-top > p, td.valign-top > p {
-  vertical-align: top
-}
-
-th.valign-bottom, td.valign-bottom, th.valign-bottom > p, td.valign-bottom > p {
-  vertical-align: bottom
-}
-
-th.valign-middle, td.valign-middle, th.valign-middle > p, td.valign-middle > p {
-  vertical-align: middle
-}
-
 body a:link {
   /* Kindle requires the !important on text-decoration */
   /* In night mode, the only indicator of a link is the underline, so we need it or a background image */
@@ -218,6 +195,15 @@ body p {
   orphans: 2;
 }
 
+th, td {
+  /* forward-compatible CSS to enable kerning (if we want ligatures, add "liga" and "dlig") */
+  /* WebKits that don't recognize these properties don't kern well, hence why we don't simply enable kerning via text-rendering */
+  -webkit-font-feature-settings: "kern";
+  font-feature-settings: "kern";
+  font-kerning: normal;
+  /* NOTE see Kindle hack in epub3-css3-only.css for additional kerning settings (disabled) */
+}
+
 body p,
 ul, ol, li, dl, dt, dd, footer,
 div.verse .attribution, table.table th, table.table td,
@@ -240,7 +226,7 @@ code, kbd, pre {
 /* QUESTION should we kern preformatted text blocks? */
 h1, h2, h3, h4, h5, h6,
 body p, li, dd, blockquote > footer,
-th, td, figcaption, caption {
+figcaption, caption {
   /* forward-compatible CSS to enable kerning (if we want ligatures, add "liga" and "dlig") */
   /* WebKits that don't recognize these properties don't kern well, hence why we don't simply enable kerning via text-rendering */
   -webkit-font-feature-settings: "kern";
@@ -252,7 +238,7 @@ th, td, figcaption, caption {
 p.last::after {
   color: $last-mark-text;
   display: inline-block;
-  font-family: "FontAwesome";
+  font-family: "Font Awesome 6 Free Solid", monospace;
   font-size: 1em;
   content: "\f121"; /* i.e., </> */
   margin-left: 0.25em;
@@ -263,6 +249,58 @@ ul li, ol li {
   margin-top: 0.4em;
 }
 
+ul {
+  /* QUESTION do we need important here? */
+  margin-left: 1em !important;
+
+  > li::before {
+    float: left;
+    margin-left: -1em;
+    margin-top: -0.05em;
+    padding-left: 0.25em;
+    /* guarantee it's out of the flow */
+    width: 0;
+    display: block;
+
+    content: "▪";
+    color: $list-lvl1;
+  }
+
+  ul {
+    > li::before {
+      content: "◦";
+      color: $list-lvl2;
+    }
+
+    ul {
+      > li::before {
+        content: "•";
+        color: $list-lvl3;
+      }
+
+      ul {
+        > li::before {
+          content: "▫";
+          color: $list-lvl4;
+        }
+      }
+    }
+  }
+}
+
+ol {
+  list-style-type: decimal;
+  margin-left: 1.75em !important;
+
+  ol {
+    list-style-type: lower-alpha;
+
+    ol {
+      list-style-type: lower-roman;
+    }
+  }
+}
+
 /* use paragraph-size gaps between list items */
 .complex > ul > li,
 .complex > ol > li {
@@ -274,10 +312,11 @@ dt {
   page-break-inside: avoid;
   -webkit-column-break-after: avoid;
   page-break-after: avoid;
+  margin-top: 0.75em; /* balances 0.25em to term */
 }
 
 dt > span.term {
-  font-style: italic;
+  font-weight: bold;
 }
 
 /*
@@ -286,15 +325,6 @@ dt > span.term > code.literal {
 }
 */
 
-dt {
-  margin-top: 0.75em; /* balances 0.25em to term */
-}
-
-dl dd {
-  /* minimum margin in case there is no paragraph content */
-  margin-top: 0.25em;
-}
-
 td.hdlist1 {
   font-weight: bold;
   padding-right: 0.625em;
@@ -353,7 +383,7 @@ div.description-list div.ordered-list,
 div.description-list div.description-list {
 }*/
 
-h3.list-heading {
+div.list-heading {
   font-size: 1em;
   font-family: "Noto Serif", serif;
   font-weight: bold;
@@ -368,63 +398,16 @@ div.stack-subject li strong.subject {
   display: block;
 }
 
-ul {
-  /* QUESTION do we need important here? */
-  margin-left: 1em !important;
-
-  > li::before {
-    float: left;
-    margin-left: -1em;
-    margin-top: -0.05em;
-    padding-left: 0.25em;
-    /* guarantee it's out of the flow */
-    width: 0;
-    display: block;
-
-    content: "▪";
-    color: $list-lvl1;
-  }
-
-  ul {
-    > li::before {
-      content: "◦";
-      color: $list-lvl2;
-    }
-
-    ul {
-      > li::before {
-        content: "•";
-        color: $list-lvl3;
-      }
-
-      ul {
-        > li::before {
-          content: "▫";
-          color: $list-lvl4;
-        }
-      }
-    }
-  }
-}
-
-ol {
-  list-style-type: decimal;
-  margin-left: 1.75em !important;
-
-  ol {
-    list-style-type: lower-alpha;
-
-    ol {
-      list-style-type: lower-roman;
-    }
-  }
-}
-
 /* REVIEW */
 dd {
   margin-left: 1.5rem !important;
 }
 
+dl dd {
+  /* minimum margin in case there is no paragraph content */
+  margin-top: 0.25em;
+}
+
 /* Kindle does not justify list-item element, must wrap in nested block element */
 li > span.principal, dd > span.principal {
   display: block;
@@ -456,6 +439,16 @@ ul.references > li > span.principal {
   text-align: left;
 }
 
+figure.image {
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+}
+
+figure.image img {
+  display: block;
+  margin: 0 auto;
+}
+
 /* sized based on the major third modular scale (4:5, 16px, 24px) */
 h1, h2 {
   font-size: 1.5em;
@@ -474,12 +467,13 @@ h4 {
   color: $h4-header-text;
   font-weight: 200;
 
-  font-size: 1.1em;
-  margin-top: 1em; /* 1.1rem */
-  margin-bottom: -0.818em; /* -0.9rem, 0.1rem to content */
+  /* Removed due to multiple definitions, assuming only the last one will be considered by interpreters */
+  /* font-size: 1.1em; */
+  /* margin-top: 1em; */ /* 1.1rem */
+  /* margin-bottom: -0.818em; */ /* -0.9rem, 0.1rem to content */
 
   font-size: 1.2em;
-  margin-top: .917em; /* 1.1rem */
+  margin-top: 0.917em; /* 1.1rem */
   margin-top: 0.875em; /* 1.05rem */
   /*margin-bottom: -0.75em;*/
   /* -0.9rem, 0.1rem to content */
@@ -579,6 +573,101 @@ h1.chapter-title b {
   width: 2em !important;
 }
 
+div.blockquote {
+  padding: 0 1em;
+  margin: 1.25em auto;
+}
+
+/* display: table causes quotes to be repeated in Aldiko, so we hide this part */
+div[class~="blockquote"] {
+  display: table;
+}
+
+blockquote > p {
+  color: $blockquote-text;
+  font-style: italic;
+
+  /*
+  font-size: 1.2em;
+  word-spacing: 0.1em;
+  */
+
+  font-size: 1.15em;
+  word-spacing: 0.1em;
+
+  margin-top: 0;
+  line-height: 1.75;
+}
+
+blockquote > p:first-of-type::before {
+  display: inline-block;
+  color: $para-first-text;
+  text-shadow: 0 1px 2px rgba(102, 102, 101, 0.3);
+
+  /* using serif quote from entypo */
+  font-family: "FontIcons", monospace;
+
+  /*content: "\f10e";*/
+  /* quote-right from Entypo */
+  /*
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+  padding-left: 0.3em;
+  padding-right: 0.2em;
+  */
+
+  content: "\f10d"; /* quote-left, a flipped version of the quote-right from Entypo */
+  padding-right: 0.5em;
+  font-size: 1.5em;
+  line-height: 1.3;
+  margin-top: -0.5em;
+  vertical-align: text-bottom;
+}
+
+blockquote footer {
+  font-size: 0.9em;
+  font-style: italic;
+
+  margin-top: 0.5rem;
+  text-align: right;
+}
+
+blockquote footer .context {
+  font-size: 0.9em;
+  letter-spacing: -0.05em;
+  color: $footer-context;
+}
+
+pre {
+  text-align: left; /* fix for Namo */
+  margin-top: 1em; /* 0.85rem */
+  /*margin-top: 1.176em;*/
+  /* 1rem */
+  white-space: pre-wrap;
+  overflow-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
+  font-size: 0.85em;
+  line-height: 1.4; /* matches what Kindle uses and can't go less */
+  background-color: $pre-background;
+  padding: 8px 12px; /* this is supposed to be '0.5rem 0.75rem' but Sony Readers crash when see that (at least, PRS-350, PRS-505, PRS-T1) */
+  border-top: 1px solid $pre-border;
+  border-right: 1px solid $pre-border;
+}
+
+/* TODO what we really want is for pre w/o caption to be unbreakable */
+pre.screen {
+  /*
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  */
+  orphans: 3;
+  widows: 3; /* widows doesn't seem to work here */
+}
+
+pre.source {
+  orphans: 3;
+  widows: 3; /* widows doesn't seem to work here */
+}
+
 div.abstract {
   margin: 5% 1.5em 2.5em 1.5em;
 }
@@ -630,29 +719,63 @@ p.signature {
   font-size: 0.9em;
 }
 
-figure,
-aside.sidebar {
-  margin-top: 1em;
-}
-
-/*
-aside.sidebar {
-  -webkit-column-break-inside: avoid;
-  page-break-inside: avoid;
-  float: left;
-  margin-bottom: 1em;
+/* We need to apply text-align to <p> too in order to override global text-align:justify */
+th.halign-left, td.halign-left, th.halign-left > p, td.halign-left > p {
+  text-align: left;
 }
-*/
 
-figure.image {
+th.halign-right, td.halign-right, th.halign-right > p, td.halign-right > p {
+  text-align: right;
+}
+
+th.halign-center, td.halign-center, th.halign-center > p, td.halign-center > p {
+  text-align: center;
+}
+
+th.valign-top, td.valign-top, th.valign-top > p, td.valign-top > p {
+  vertical-align: top;
+}
+
+th.valign-bottom, td.valign-bottom, th.valign-bottom > p, td.valign-bottom > p {
+  vertical-align: bottom;
+}
+
+th.valign-middle, td.valign-middle, th.valign-middle > p, td.valign-middle > p {
+  vertical-align: middle;
+}
+
+div.verse {
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
 }
 
-figure.image img {
+/* TODO we may want to reenable hyphens here */
+div.verse > pre {
+  font-family: "M+ 1p", sans-serif;
+  background-color: transparent;
+  border: none;
+  font-size: 1.2em;
+  text-align: center;
+}
+
+div.verse .attribution {
   display: block;
-  margin: 0 auto;
+  margin-top: 1.4em;
+}
+
+figure,
+aside.sidebar {
+  margin-top: 1em;
+}
+
+/*
+aside.sidebar {
+  -webkit-column-break-inside: avoid;
+  page-break-inside: avoid;
+  float: left;
+  margin-bottom: 1em;
 }
+*/
 
 figure.coalesce {
   -webkit-column-break-inside: avoid;
@@ -678,6 +801,7 @@ figure.image figcaption {
   margin-top: 0.2em;
   -webkit-column-break-after: auto;
   page-break-after: auto;
+  text-align: center;
 }
 
 p + figure.listing,
@@ -722,7 +846,7 @@ aside.sidebar > h2 {
   display: inline-block;
   white-space: nowrap; /* for some reason it's wrapping prematurely */
   border: 1px solid $aside-border;
-  padding: 1.5em .75em .5em .75em;
+  padding: 1.5em 0.75em 0.5em 0.75em;
   margin: -1em 0.5em -0.25em 0.5em;
   background-color: $body-background;
   /*
@@ -741,120 +865,6 @@ aside.sidebar > div.content > div.itemized-list > ul {
   margin-left: 0.5em !important;
 }
 
-div.blockquote {
-  padding: 0 1em;
-  margin: 1.25em auto;
-}
-
-/* display: table causes quotes to be repeated in Aldiko, so we hide this part */
-div[class~="blockquote"] {
-  display: table;
-}
-
-blockquote > p {
-  color: $blockquote-text;
-  font-style: italic;
-
-  /*
-  font-size: 1.2em;
-  word-spacing: 0.1em;
-  */
-
-  font-size: 1.15em;
-  word-spacing: 0.1em;
-
-  margin-top: 0;
-  line-height: 1.75;
-}
-
-blockquote > p:first-of-type::before {
-  display: inline-block;
-  color: $para-first-text;
-  text-shadow: 0 1px 2px rgba(102, 102, 101, 0.3);
-
-  /* using serif quote from entypo */
-  font-family: "FontIcons";
-
-  /*content: "\f10e";*/
-  /* quote-right from Entypo */
-  /*
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-  padding-left: .3em;
-  padding-right: .2em;
-  */
-
-  content: "\f10d"; /* quote-left, a flipped version of the quote-right from Entypo */
-  padding-right: .5em;
-  font-size: 1.5em;
-  line-height: 1.3;
-  margin-top: -0.5em;
-  vertical-align: text-bottom;
-}
-
-blockquote footer {
-  font-size: 0.9em;
-  font-style: italic;
-
-  margin-top: 0.5rem;
-  text-align: right;
-}
-
-blockquote footer .context {
-  font-size: 0.9em;
-  letter-spacing: -0.05em;
-  color: $footer-context;
-}
-
-pre {
-  text-align: left; /* fix for Namo */
-  margin-top: 1em; /* 0.85rem */
-  /*margin-top: 1.176em;*/
-  /* 1rem */
-  white-space: pre-wrap;
-  overflow-wrap: break-word; /* break in middle of long word if no other break opportunities are available */
-  font-size: 0.85em;
-  line-height: 1.4; /* matches what Kindle uses and can't go less */
-  background-color: $pre-background;
-  padding: 8px 12px; /* this is supposed to be '0.5rem 0.75rem' but Sony Readers crash when see that (at least, PRS-350, PRS-505, PRS-T1) */
-  border-top: 1px solid $pre-border;
-  border-right: 1px solid $pre-border;
-}
-
-/* TODO what we really want is for pre w/o caption to be unbreakable */
-pre.screen {
-  /*
-  -webkit-column-break-inside: avoid;
-  page-break-inside: avoid;
-  */
-  orphans: 3;
-  widows: 3; /* widows doesn't seem to work here */
-}
-
-pre.source {
-  orphans: 3;
-  widows: 3; /* widows doesn't seem to work here */
-}
-
-div.verse {
-  -webkit-column-break-inside: avoid;
-  page-break-inside: avoid;
-}
-
-/* TODO we may want to reenable hyphens here */
-div.verse > pre {
-  font-family: "M+ 1p", sans-serif;
-  background-color: transparent;
-  border: none;
-  font-size: 1.2em;
-  text-align: center;
-}
-
-div.verse .attribution {
-  display: block;
-  margin-top: 1.4em;
-}
-
 aside.admonition {
   margin-top: 1em;
   padding: 1em;
@@ -898,7 +908,7 @@ aside.important {
 
 aside.admonition::before {
   display: block;
-  font-family: "FontAwesome";
+  font-family: "Font Awesome 6 Free Solid", monospace;
   font-size: 2em;
   line-height: 1;
   width: 1em;
@@ -989,6 +999,27 @@ aside[class~="admonition"] > h2 {
   margin-bottom: 0;
 }
 
+div.footnotes {
+  margin-top: 1em;
+}
+
+div.footnotes p {
+  font-size: 0.8rem;
+  margin-top: 0.4rem;
+}
+
+div.footnotes sup.noteref {
+  font-weight: bold;
+  font-size: 0.9em;
+}
+
+/*div.footnotes sup.noteref a {*/
+sup.noteref a {
+  /* Kindle wants to underline these links */
+  text-decoration: none !important;
+  background-image: none;
+}
+
 div.table {
   margin-top: 1em;
 }
@@ -1015,6 +1046,38 @@ table.table th {
   font-weight: bold;
 }
 
+table.table-grid-all th,
+table.table-grid-all td {
+  border-width: 1px 1px 1px 1px;
+  border-style: solid;
+  border-color: $table-border;
+}
+
+hr.pagebreak {
+  -webkit-column-break-after: always;
+  page-break-after: always;
+  border: none;
+  margin: 0;
+}
+
+/* REVIEW */
+hr.pagebreak + * {
+  margin-top: 0 !important;
+}
+
+#_about_the_author {
+  -webkit-column-break-before: always;
+  page-break-before: always;
+  border-bottom: 1px solid $about-author-border;
+}
+
+table.table-grid-cols th,
+table.table-grid-cols td {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: $table-border;
+}
+
 table.table thead th {
   border-bottom: 1px solid $table-border;
 }
@@ -1048,22 +1111,6 @@ table.table-framed-sides {
   border-color: $table-border;
 }
 
-table.table-grid-all th,
-table.table-grid-all td {
-  border-width: 1px 1px 1px 1px;
-  border-style: solid;
-  border-color: $table-border;
-}
-
-table.table-grid-all thead tr > *:last-child {
-  border-right-width: 0;
-}
-
-table.table-grid-all tbody tr:last-child > th,
-table.table-grid-all tbody tr:last-child > td {
-  border-bottom-width: 0;
-}
-
 table.table-grid-rows tbody th,
 table.table-grid-rows tbody td {
   border-width: 1px 0 0 0;
@@ -1071,13 +1118,6 @@ table.table-grid-rows tbody td {
   border-color: $table-border;
 }
 
-table.table-grid-cols th,
-table.table-grid-cols td {
-  border-width: 0 1px 0 0;
-  border-style: solid;
-  border-color: $table-border;
-}
-
 table.table-grid-cols thead th:last-child {
   border-right-width: 0;
 }
@@ -1086,28 +1126,19 @@ table.table-grid-cols tbody tr > td:last-child {
   border-right-width: 0;
 }
 
-pre.pygments span.linenos,
-pre.rouge span.linenos {
-  display: inline-block;
-  margin-right: 0.75em;
-}
-
-hr.pagebreak {
-  -webkit-column-break-after: always;
-  page-break-after: always;
-  border: none;
-  margin: 0;
+table.table-grid-all thead tr > *:last-child {
+  border-right-width: 0;
 }
 
-/* REVIEW */
-hr.pagebreak + * {
-  margin-top: 0 !important;
+table.table-grid-all tbody tr:last-child > th,
+table.table-grid-all tbody tr:last-child > td {
+  border-bottom-width: 0;
 }
 
-#_about_the_author {
-  -webkit-column-break-before: always;
-  page-break-before: always;
-  border-bottom: 1px solid $about-author-border;
+pre.pygments span.linenos,
+pre.rouge span.linenos {
+  display: inline-block;
+  margin-right: 0.75em;
 }
 
 img.headshot {
@@ -1125,27 +1156,6 @@ img.headshot {
   page-break-before: always;
 }
 
-div.footnotes {
-  margin-top: 1em;
-}
-
-div.footnotes p {
-  font-size: 0.8rem;
-  margin-top: 0.4rem;
-}
-
-div.footnotes sup.noteref {
-  font-weight: bold;
-  font-size: 0.9em;
-}
-
-/*div.footnotes sup.noteref a {*/
-sup.noteref a {
-  /* Kindle wants to underline these links */
-  text-decoration: none !important;
-  background-image: none;
-}
-
 nav#toc ol {
   list-style-type: none;
 }