move CSS resetting to a separate file

4 files changed, 94 insertions, 195 deletions

diff --git a/data/styles/_colors.scss b/data/styles/_colors.scss
index 7cacf5e..3264a28 100644
--- a/data/styles/_colors.scss
+++ b/data/styles/_colors.scss
@@ -22,11 +22,6 @@ $medium-green: #468C54;
 // === assign the colors ===
 // =========================
 
-$body-text: $off-black;
-
-// white bg disables night mode in Aldiko, hoo-ha!
-$body-background: $white;
-
 $header-text: $off-black;
 $h4-header-text: $deep-gray;
 $h5-header-text: $dark-gray;
diff --git a/data/styles/_reset.scss b/data/styles/_reset.scss
new file mode 100644
index 0000000..9d3b098
--- /dev/null
+++ b/data/styles/_reset.scss
@@ -0,0 +1,54 @@
+/* educate older readers about tags introduced in HTML5 */
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
+  display: block;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+@page {
+  margin: 0;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+body {
+  line-height: 1;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/data/styles/epub3-css3-only.scss b/data/styles/epub3-css3-only.scss
index ab636b9..6fdfbd5 100644
--- a/data/styles/epub3-css3-only.scss
+++ b/data/styles/epub3-css3-only.scss
@@ -1,45 +1,15 @@
-/* @page is for EPUB2 only */
-@page {
-  margin: 0;
-}
-
-body.calibre-desktop {
-  padding: 20pt 0 !important;
-}
-
-body.calibre-desktop > section {
-  margin: 0 25pt;
-}
-
 /* Gitden & Namo default to 16px font-size; bump it to 19px (118.75%) */
 body.gitden-reader,
 body.namo-epub-library {
   font-size: 118.75%;
 }
 
-/* Gitden doesn't give us much margin, so let's roughly match Aldiko and Kindle (narrow setting) */
-body.gitden-reader {
-  margin: 0 5pt !important;
-}
-
-/* Namo has the same margin problem, except setting side margins doesn't work */
-/*body.namo-epub-library > section.chapter {
-  margin: 0 5pt;
-}*/
-
 /* Use tighter margins and smaller font (18px) on phones (Nexus 4 and smaller) */
 @media only screen and (max-device-width: 768px) and (max-device-height: 1280px), only screen and (max-device-width: 1280px) and (max-device-height: 768px) {
   body.gitden-reader,
   body.namo-epub-library {
     font-size: 112.5%;
   }
-
-  /*body.gitden-reader {
-    margin: 0 5pt !important;
-  }*/
-  /*body.namo-epub-library > section.chapter {
-    margin: 0 5pt;
-  }*/
 }
 
 body.gitden-reader pre {
diff --git a/data/styles/epub3.scss b/data/styles/epub3.scss
index 1937f42..9a67b49 100644
--- a/data/styles/epub3.scss
+++ b/data/styles/epub3.scss
@@ -1,43 +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: $body-background;
-}
-
 /* @page only applies to EPUB2 readers; not supported by EPUB3 readers such as Kindle and Gitden */
 @page {
   /* sets minimum margin permitted */
@@ -45,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;
 }
@@ -75,10 +17,6 @@ address {
   white-space: pre-line;
 }
 
-b, strong {
-  font-weight: bold;
-}
-
 b.button {
   font-weight: normal;
   text-shadow: 1px 0 0 $button-shadow;
@@ -136,11 +74,6 @@ kbd {
   padding-right: 0.15em;
 }
 
-img {
-  border: 0;
-  max-width: 100%;
-}
-
 mark {
   background-color: $mark-background;
   color: $mark-text;
@@ -189,15 +122,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
@@ -324,19 +248,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;
@@ -439,68 +350,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: $list-lvl1;
-}
-
-ul ul > li::before {
-  content: "\25E6"; /* small white circle */
-  color: $list-lvl2;
-}
-
-ul ul ul > li::before {
-  content: "\2022"; /* small black circle */
-  color: $list-lvl3;
-}
+  > 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 ul ul ul > li::before {
-  content: "\25AB"; /* small white square */
-  color: $list-lvl4;
+  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: decimal;
-}
+  ol {
+    list-style-type: lower-alpha;
 
-ol ol {
-  list-style-type: lower-alpha;
-}
-
-ol ol ol {
-  list-style-type: lower-roman;
+    ol {
+      list-style-type: lower-roman;
+    }
+  }
 }
 
 /* REVIEW */
@@ -789,10 +685,6 @@ aside.sidebar {
   */
 }
 
-body:first-of-type aside.sidebar {
-  background-color: rgba(0, 0, 0, 0.05); /* 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;
@@ -818,12 +710,6 @@ aside.sidebar > h2 {
   */
 }
 
-/* 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 */
@@ -914,12 +800,6 @@ pre {
   border-right: 1px solid $pre-border;
 }
 
-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 */
-}
-
 /* TODO what we really want is for pre w/o caption to be unbreakable */
 pre.screen {
   /*