asciidoctor-epub3 1.5.1 → 2.0.0

data/data/styles/{epub3.css → epub3.scss}

@@ -1,42 +1,7 @@
+@import "reset";
+@import "colors";
 @import url("epub3-fonts.css");
 
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-
-/* educate older readers about tags introduced in HTML5 */
-article, aside, details, figcaption, figure,
-footer, header, nav, section, summary {
-  display: block;
-}
-
-/* html and body declarations must be separate entries for some readers */
-html {
-  margin: 0 !important;
-  padding: 0 !important;
-  /* set the em base (and relative em anchor) by setting the font-size on html */
-  /* TODO set font-size > 100% except for Kindle */
-  font-size: 100%;
-}
-
-/* don't set margin on body as that's how many readers frame reading area */
-/* can't set the font-family on body in Kindle */
-body {
-  padding: 0 !important;
-  /* add margin to ~ match Kindle's narrow setting */
-  /* don't use !important on margin as it interferes with reader overrides (Calibre and Kindle) */
-  margin: 0;
-  font-size: 100%;
-  /* NOTE putting optimizeLegibility on the body slows down rendering considerably */
-  text-rendering: optimizeSpeed;
-  /* -webkit-font-smoothing has no noticable effect and is controversial, so leaving it off */
-}
-
-/* disables night mode in Aldiko, hoo-ha! */
-html body {
-  background-color: #FFFFFF;
-}
-
 /* @page only applies to EPUB2 readers; not supported by EPUB3 readers such as Kindle and Gitden */
 @page {
   /* sets minimum margin permitted */
@@ -44,28 +9,6 @@ html body {
   margin: 1cm;
 }
 
-div, p, blockquote, pre, figure, figcaption,
-h1, h2, h3, h4, h5, h6,
-dl, dt, dd, ol, ul, li,
-table, caption, thead, tfoot, tbody, tr, th, td {
-  margin: 0;
-  padding: 0;
-  font-size: 100%;
-  vertical-align: baseline;
-}
-
-a, abbr, address, cite, code, em, kbd, span, strong {
-  font-size: 100%;
-}
-
-a {
-  background: transparent;
-}
-
-a:active, a:hover {
-  outline: 0;
-}
-
 abbr[title] {
   border-bottom: 1px dotted;
 }
@@ -74,27 +17,36 @@ address {
   white-space: pre-line;
 }
 
-b, strong {
-  font-weight: bold;
-}
-
 b.button {
   font-weight: normal;
-  text-shadow: 1px 0 0 #333332;
-  color: #101010;
+  text-shadow: 1px 0 0 $button-shadow;
+  color: $button-text;
   white-space: nowrap;
 }
 
-b.button .label {
-  padding: 0 0.25em;
+b.button::before,
+b.button::after {
+  position: relative;
+  top: -1px;
+  font-weight: 400;
+}
+
+b.button::before {
+  content: "[";
+  padding: 0 3px 0 2px;
+}
+
+b.button::after {
+  content: "]";
+  padding: 0 2px 0 3px;
 }
 
 kbd {
   display: inline-block;
   font-size: 0.8em;
   line-height: 1;
-  background-color: #F7F7F7; /* #FAFAFA */
-  border: 1px solid #BEBEBC;
+  background-color: $kbd-background;
+  border: 1px solid $kbd-border;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: 1px 1px 0 rgba(102, 102, 101, 0.25), 0 0 0 1px white inset;
@@ -135,14 +87,9 @@ kbd {
   padding-right: 0.15em;
 }
 
-img {
-  border: 0;
-  max-width: 100%;
-}
-
 mark {
-  background-color: #FFC14F;
-  color: #101010;
+  background-color: $mark-background;
+  color: $mark-text;
 }
 
 small {
@@ -188,15 +135,6 @@ sub {
   vertical-align: text-bottom;
 }
 
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td, th {
-  padding: 0;
-}
-
 /* 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
@@ -226,22 +164,13 @@ 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 */
   text-decoration: none !important;
-  border-bottom: 1px dashed #333332;
+  border-bottom: 1px dashed $link-border;
   /* allow URLs to break anywhere if they don't fit on a line; but how do we know it's a URL? */
   /*
   word-break: break-all;
   */
 }
 
-body:first-of-type a:link {
-  border-bottom: none;
-  background-repeat: no-repeat;
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #666665 5%, #666665 95%, rgba(255, 255, 255, 0) 100%);
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #666665 5%, #666665 95%, rgba(255, 255, 255, 0) 100%);
-  background-size: 100% 1px;
-  background-position: 0 1.2em;
-}
-
 code.literal {
   /* don't let it affect line spacing */
   /* disable since M+ 1mn won't interrupt line height */
@@ -295,7 +224,7 @@ body p, li, dt, dd, footer {
 }
 
 code, kbd, pre {
-  color: #101010;
+  color: $pre-text;
   font-family: "M+ 1mn", monospace;
   -webkit-hyphens: none; /* disable hyphenation where supported (e.g., iBooks) */
 }
@@ -313,7 +242,7 @@ th, td, figcaption, caption {
 }
 
 p.last::after {
-  color: #57AD68;
+  color: $last-mark-text;
   display: inline-block;
   font-family: "FontAwesome";
   font-size: 1em;
@@ -332,19 +261,6 @@ ul li, ol li {
   margin-top: 1em;
 }
 
-/* squeeze content in complex lists */
-/*
-li > figure,
-li > p {
-  margin-top: 0.4em;
-}
-*/
-
-dl {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 dt {
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
@@ -391,9 +307,10 @@ div.callout-list ol li {
 }
 
 i.conum {
-  color: #468C54;
+  color: $i-conum-text;
   font-family: "M+ 1mn", monospace;
   font-style: normal;
+  user-select: none;
 }
 
 /* don't let conum affect line spacing; REVIEW may not need this! */
@@ -446,68 +363,53 @@ div.stack-subject li strong.subject {
 ul {
   /* QUESTION do we need important here? */
   margin-left: 1em !important;
-  list-style-type: square;
-}
-
-ul ul {
-  list-style-type: circle;
-}
-
-ul ul ul {
-  list-style-type: disc;
-}
-
-/* disable list style type for CSS3-enabled clients */
-body:first-of-type ul,
-body:first-of-type ul ul,
-body:first-of-type ul ul ul {
-  list-style-type: none;
-}
-
-ul > 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;
-}
-
-ul > li::before {
-  content: "\25AA"; /* small black square */
-  color: #333332;
-}
-
-ul ul > li::before {
-  content: "\25E6"; /* small white circle */
-  color: #57AD68;
-}
-
-ul ul ul > li::before {
-  content: "\2022"; /* small black circle */
-  color: #333332;
-}
 
-ul ul ul ul > li::before {
-  content: "\25AB"; /* small white square */
-  color: #57AD68;
-}
+  > 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;
+  }
 
-ol {
-  margin-left: 1.75em !important;
+  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 ol {
-  list-style-type: lower-alpha;
-}
+  ol {
+    list-style-type: lower-alpha;
 
-ol ol ol {
-  list-style-type: lower-roman;
+    ol {
+      list-style-type: lower-roman;
+    }
+  }
 }
 
 /* REVIEW */
@@ -561,7 +463,7 @@ h3 {
 }
 
 h4 {
-  color: #202020;
+  color: $h4-header-text;
   font-weight: 200;
 
   font-size: 1.1em;
@@ -571,12 +473,13 @@ h4 {
   font-size: 1.2em;
   margin-top: .917em; /* 1.1rem */
   margin-top: 0.875em; /* 1.05rem */
-  /*margin-bottom: -0.75em;*/ /* -0.9rem, 0.1rem to content */
+  /*margin-bottom: -0.75em;*/
+  /* -0.9rem, 0.1rem to content */
   margin-bottom: -0.625em; /* -0.75rem, 0.25rem to content */
 }
 
 h5 {
-  color: #333332;
+  color: $h5-header-text;
   /*
   font-size: 1em;
   text-transform: uppercase;
@@ -606,7 +509,7 @@ h5 code {
   /*padding: 0.75em 1.5em 0.25em 1.5em;*/
   padding: 0.25em 0;
   margin-bottom: 2.5em;
-  border-bottom: 1px solid #333332;
+  border-bottom: 1px solid $chapter-header-title-border;
   /* TODO maybe what we need to get articles to start in left column
   -webkit-column-break-before: left;
   page-break-before: left;
@@ -619,7 +522,7 @@ h1.chapter-title {
   margin-top: 3.5em; /* 4.2rem - would like to use 9vh */
   margin-bottom: 0;
   padding-bottom: 0.8333em; /* 1.2rem */
-  color: #333332;
+  color: $chapter-header-title-text;
   text-transform: uppercase; /* not supported in Adobe Digital Editions */
   word-spacing: -0.075em;
   letter-spacing: -0.01em;
@@ -634,7 +537,7 @@ h1.chapter-title .subtitle {
 }
 
 h1.chapter-title em {
-  color: #57AD68;
+  color: $chapter-header-em;
   font-style: normal;
 }
 
@@ -673,7 +576,7 @@ div.abstract {
 }
 
 div.abstract > p {
-  color: #333332;
+  color: $abstract-text;
   font-size: 1.05em; /* or 1.1em? */
   line-height: 1.75;
 }
@@ -752,7 +655,7 @@ figcaption,
 caption {
   font-size: 0.9em;
   font-style: italic;
-  color: #333332;
+  color: $caption-text;
   letter-spacing: -0.01em;
   line-height: 1.4;
   text-align: left;
@@ -784,10 +687,10 @@ figure.listing > figcaption + pre {
 }
 
 aside.sidebar {
-  border: 1px solid #C8C8C8;
+  border: 1px solid $aside-border;
   padding: 0 1.5em;
   font-size: 0.9em;
-  background-color: #E0E0E0;
+  background-color: $aside-background;
   text-align: right; /* aligns heading to right */
   /*
   -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.15);
@@ -795,11 +698,6 @@ aside.sidebar {
   */
 }
 
-body:first-of-type aside.sidebar {
-  background-color: rgba(0, 0, 0, 0.05); /* using transparency is night-mode friendly */
-  /*background-color: rgba(51, 51, 50, 0.06);*/ /* using transparency is night-mode friendly */
-}
-
 /* a bit of a cheat; could use aside.sidebar[title] instead, but not on Aldiko */
 aside.sidebar.titled {
   margin-top: 2em;
@@ -815,22 +713,16 @@ aside.sidebar > h2 {
   letter-spacing: 0;
   display: inline-block;
   white-space: nowrap; /* for some reason it's wrapping prematurely */
-  border: 1px solid #C8C8C8;
+  border: 1px solid $aside-border;
   padding: 1.5em .75em .5em .75em;
   margin: -1em 0.5em -0.25em 0.5em;
-  background-color: #FFFFFF;
+  background-color: $body-background;
   /*
   -webkit-box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
   box-shadow: 0px 1px 1px rgba(102, 102, 101, 0.1);
   */
 }
 
-/* doesn't work
-body:first-of-type aside.sidebar > h2 {
-  background-color: rgba(255, 255, 255, 1);
-}
-*/
-
 aside.sidebar > div.content {
   margin-bottom: 1em;
   text-align: justify; /* restore text alignment in content */
@@ -852,7 +744,7 @@ div[class~="blockquote"] {
 }
 
 blockquote > p {
-  color: #101010;
+  color: $blockquote-text;
   font-style: italic;
 
   /*
@@ -869,13 +761,14 @@ blockquote > p {
 
 blockquote > p:first-of-type::before {
   display: inline-block;
-  color: #333332;
+  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 */
+  /*content: "\f10e";*/
+  /* quote-right from Entypo */
   /*
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -902,26 +795,22 @@ blockquote footer {
 blockquote footer .context {
   font-size: 0.9em;
   letter-spacing: -0.05em;
-  color: #333332;
+  color: $footer-context;
 }
 
 pre {
   text-align: left; /* fix for Namo */
   margin-top: 1em; /* 0.85rem */
-  /*margin-top: 1.176em;*/ /* 1rem */
+  /*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: #E0E0E0;
-  padding: 0.6em 0.9em; /* 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 #C8C8C8;
-  border-right: 1px solid #C8C8C8;
-}
-
-body:first-of-type pre {
-  background-color: rgba(0, 0, 0, 0.05); /* using transparency is night-mode friendly */
-  /*background-color: rgba(51, 51, 50, 0.06);*/ /* using transparency is night-mode friendly */
+  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 */
@@ -946,6 +835,7 @@ div.verse {
 
 /* TODO we may want to reenable hyphens here, but not for kf8 */
 div.verse > pre {
+  font-family: "M+ 1p", sans-serif;
   background-color: transparent;
   border: none;
   font-size: 1.2em;
@@ -974,28 +864,28 @@ aside[class~="admonition"] {
 }
 
 aside.note {
-  border-left-color: #FFC14F;
-  background-color: #FFF0D4; /* 25% opacity of border */
+  border-left-color: $note-border;
+  background-color: $note-background; /* 25% opacity of border */
 }
 
 aside.tip {
-  border-left-color: #40403E;
-  background-color: #D0D0CF; /* 25% opacity of border */
+  border-left-color: $tip-border;
+  background-color: $tip-background; /* 25% opacity of border */
 }
 
 aside.caution {
-  border-left-color: #7F7F7D;
-  background-color: #DFDFDF; /* 25% opacity of border */
+  border-left-color: $caution-border;
+  background-color: $caution-background; /* 25% opacity of border */
 }
 
 aside.warning {
-  border-left-color: #C83737;
-  background-color: #F1CECE; /* 25% opacity of border */
+  border-left-color: $warning-border;
+  background-color: $warning-background; /* 25% opacity of border */
 }
 
 aside.important {
-  border-left-color: #F2642A;
-  background-color: #FCD9CA; /* 25% opacity of border */
+  border-left-color: $important-border;
+  background-color: $important-background; /* 25% opacity of border */
 }
 
 aside.admonition::before {
@@ -1029,52 +919,52 @@ aside[class~="admonition"] > div[class~="content"] {
 
 aside.note::before {
   content: "\f303"; /* fa-pencil-alt */
-  color: #FFC14F;
+  color: $note-border;
 }
 
 aside[class~="note"] > div[class~="content"] {
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255, 255, 255, 0) 57.5%);
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #FFC14F 45%, #FFC14F 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $note-border 45%, $note-border 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $note-border 45%, $note-border 55%, rgba(255, 255, 255, 0) 57.5%);
 }
 
 aside.tip::before {
   content: "\f0eb"; /* fa-lightbulb */
-  color: #40403E;
+  color: $tip-border;
 }
 
 aside[class~="tip"] > div[class~="content"] {
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #40403E 45%, #40403E 55%, rgba(255, 255, 255, 0) 57.5%);
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #40403E 45%, #40403E 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $tip-border 45%, $tip-border 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $tip-border 45%, $tip-border 55%, rgba(255, 255, 255, 0) 57.5%);
 }
 
 aside.caution::before {
   content: "\f0c2"; /* fa-cloud */
-  color: #7F7F7D;
+  color: $caution-border;
 }
 
 aside[class~="caution"] > div[class~="content"] {
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255, 255, 255, 0) 57.5%);
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #7F7F7D 45%, #7F7F7D 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $caution-border 45%, $caution-border 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $caution-border 45%, $caution-border 55%, rgba(255, 255, 255, 0) 57.5%);
 }
 
 aside.warning::before {
   content: "\f0e7"; /* fa-bolt */
-  color: #C83737;
+  color: $warning-border;
 }
 
 aside[class~="warning"] > div[class~="content"] {
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #C83737 45%, #C83737 55%, rgba(255, 255, 255, 0) 57.5%);
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #C83737 45%, #C83737 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $warning-border 45%, $warning-border 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $warning-border 45%, $warning-border 55%, rgba(255, 255, 255, 0) 57.5%);
 }
 
 aside.important::before {
   content: "\f12a"; /* fa-exclamation */
-  color: #F2642A;
+  color: $important-border;
 }
 
 aside[class~="important"] > div[class~="content"] {
-  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, #F2642A 45%, #F2642A 55%, rgba(255, 255, 255, 0) 57.5%);
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, #F2642A 45%, #F2642A 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 42.5%, $important-border 45%, $important-border 55%, rgba(255, 255, 255, 0) 57.5%);
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 42.5%, $important-border 45%, $important-border 55%, rgba(255, 255, 255, 0) 57.5%);
 }
 
 aside.admonition > h2 {
@@ -1118,7 +1008,7 @@ table.table th {
 }
 
 table.table thead th {
-  border-bottom: 1px solid #707070;
+  border-bottom: 1px solid $table-border;
 }
 
 table.table td > p,
@@ -1135,26 +1025,26 @@ table.table div.embed > * + * {
 table.table-framed-all {
   border-width: 1px;
   border-style: solid;
-  border-color: #707070;
+  border-color: $table-border;
 }
 
 table.table-framed-topbot {
   border-width: 1px 0;
   border-style: solid;
-  border-color: #707070;
+  border-color: $table-border;
 }
 
 table.table-framed-sides {
   border-width: 0 1px;
   border-style: solid;
-  border-color: #707070;
+  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: #707070;
+  border-color: $table-border;
 }
 
 table.table-grid-all thead tr > *:last-child {
@@ -1170,14 +1060,14 @@ table.table-grid-rows tbody th,
 table.table-grid-rows tbody td {
   border-width: 1px 0 0 0;
   border-style: solid;
-  border-color: #707070;
+  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: #707070;
+  border-color: $table-border;
 }
 
 table.table-grid-cols thead th:last-child {
@@ -1188,6 +1078,12 @@ 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;
@@ -1203,12 +1099,12 @@ hr.pagebreak + * {
 #_about_the_author {
   -webkit-column-break-before: always;
   page-break-before: always;
-  border-bottom: 1px solid #B3B3B3;
+  border-bottom: 1px solid $about-author-border;
 }
 
 img.headshot {
   float: left;
-  border: 1px solid #707070;
+  border: 1px solid $headshot-border;
   padding: 1px;
   margin: 0.35em 1em 0.15em 0;
   height: 5em !important;
@@ -1270,3 +1166,11 @@ nav[hidden~="hidden"] {
     font-family: monospace;
   }
 }
+
+.left {
+  float: left !important;
+}
+
+.right {
+  float: right !important;
+}