From dfd6e9897e31a7d02b1b1672ecb9a4e6f0e2694a Mon Sep 17 00:00:00 2001
From: daniel-j <daniel.j.hede@gmail.com>
Date: Mon, 12 Mar 2018 22:07:11 +0100
Subject: [PATCH] update styles

---
 src/style/icons.styl             |  20 ++
 src/style/navstyle.styl          |  62 ++++++
 src/style/paragraphs-spaced.styl |   1 +
 src/style/reset.styl             |  48 +++++
 src/style/style.styl             | 274 +++++++++++++++----------
 src/style/titlestyle.styl        | 335 +++++++++----------------------
 src/styles.js                    |  14 +-
 7 files changed, 410 insertions(+), 344 deletions(-)
 create mode 100644 src/style/icons.styl
 create mode 100644 src/style/navstyle.styl
 create mode 100644 src/style/reset.styl

diff --git a/src/style/icons.styl b/src/style/icons.styl
new file mode 100644
index 0000000..8163503
--- /dev/null
+++ b/src/style/icons.styl
@@ -0,0 +1,20 @@
+
+// Font Awesome icons!
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../Fonts/fontawesome-webfont-subset.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.fa-fw {
+  width: 1.28571429em;
+  text-align: center;
+}
diff --git a/src/style/navstyle.styl b/src/style/navstyle.styl
new file mode 100644
index 0000000..8265688
--- /dev/null
+++ b/src/style/navstyle.styl
@@ -0,0 +1,62 @@
+
+.invisible {
+  display: none;
+}
+
+
+h3 {
+  font-weight: normal;
+  text-align: center;
+  margin: 0;
+  margin-bottom: 1em;
+}
+
+#toc {
+
+  .item {
+    margin: 0.2em 0;
+    text-indent: -0.5em;
+    margin-left: 0.5em;
+    text-align: left;
+    page-break-inside: avoid;
+    break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+    clear: both;
+    vertical-align: middle;
+
+    // clearfix
+    &:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+    &.double {
+      margin-top: 1em;
+    }
+
+    .date {
+      display: inline;
+      font-size: 0.7em;
+      white-space: nowrap;
+      opacity: 0.6;
+    }
+    .floatbox {
+      display: block;
+      float: right;
+      white-space: nowrap;
+      vertical-align: middle;
+      text-align: right;
+      padding-left: 1em;
+      margin-left: 1em;
+    }
+    .wordcount {
+      font-size: 0.7em;
+      opacity: 0.6;
+    }
+  }
+}
+
+li[hidden] {
+  display: none;
+}
+
diff --git a/src/style/paragraphs-spaced.styl b/src/style/paragraphs-spaced.styl
index 9ba6602..138231d 100644
--- a/src/style/paragraphs-spaced.styl
+++ b/src/style/paragraphs-spaced.styl
@@ -1,6 +1,7 @@
 
 p {
   margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 .chapter-title + p {
diff --git a/src/style/reset.styl b/src/style/reset.styl
new file mode 100644
index 0000000..088d30b
--- /dev/null
+++ b/src/style/reset.styl
@@ -0,0 +1,48 @@
+/* CSS reset with box-sizing fix */
+/*
+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 {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+*/
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/src/style/style.styl b/src/style/style.styl
index 711c091..3ad98e5 100644
--- a/src/style/style.styl
+++ b/src/style/style.styl
@@ -1,10 +1,23 @@
 
 @require 'mixins'
+@require 'reset'
+
+@page {
+  margin-top: 0.3em;
+  margin-bottom: 0.2em;
+}
+
 
 body {
   background-color: white;
   color: black;
   text-align: justify;
+  hyphens: auto;
+  -epub-hyphens: auto;
+}
+
+a, u {
+  text-decoration-skip: ink;
 }
 
 p {
@@ -22,9 +35,6 @@ p {
   &.indented {
     text-indent: 1em;
   }
-  &:first-child {
-    margin-top: 0;
-  }
 }
 div p {
   text-indent: 0;
@@ -32,6 +42,8 @@ div p {
 
 h1, h2, h3, h4, h5, h6 {
   text-align: left;
+  hyphens: none;
+  -epub-hyphens: none;
 }
 
 em {
@@ -42,7 +54,7 @@ em em {
 }
 
 .chapter-title {
-  margin-top: 1.5em;
+  margin-top: 2em;
   margin-bottom: 1.5em;
 
   h1 {
@@ -57,24 +69,19 @@ img {
   width: auto;
   max-width: 100%;
   max-height: 100%;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
 }
 img.emoji {
   height: 1em;
+  vertical-align: top;
+}
+img.emoticon {
+  height: 1.3em;
+  vertical-align: bottom;
 }
 
-hr.old {
-  padding: 0;
-  margin-top: 0.8em;
-  margin-bottom: 0.8em;
-  height: 0;
-  border: none;
-  border-bottom: 1px solid #000;
-  border-color: currentColor;
-  opacity: 0.5;
-  width: 100%;
-}
-
-// Fimfiction's new horizontal ruler:
 hr {
   box-sizing: border-box;
   padding: 0;
@@ -88,90 +95,186 @@ hr {
   border-bottom-style: solid;
   border-color: #999;
   border-color: currentColor;
-  height: 4px;
+
+  height: 0.15em;
+  min-height: 4px;
   background: transparent;
   width: 90%;
   margin: 2em auto;
+
+  clear: both;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
 }
 
 // This looks bad on black background/dark themes
 /*hr:after {
-  color: #333;
   display: inline-block;
   position: relative;
   top: -0.5em;
   font-size: 1.0em;
   padding: 0 0.5em;
   background: white;
-  line-height: 1.0em
+  line-height: 1.0em;
 
+  color: #999;
   color: currentColor;
   content: "\274A   \274A   \274A";
   margin-top: 2px;
 }*/
 
-blockquote {
-  margin: 10px 0px;
-  padding: 20px;
+hr.old {
+  padding: 0;
+  margin-top: 0.5em;
+  margin-bottom: 1em;
+  height: 0;
+  min-height: 0;
   border: none;
-  border-left: 5px solid rgba(0,0,0,0.2);
-  bgcolor(rgba(0,0,0,0.1));
+  border-bottom: 1px solid #999;
+  border-color: currentColor;
+  opacity: 0.5;
+  width: 100%;
+}
+
+blockquote {
+  clear: both;
+  margin: 1em 0;
+  padding: 0.1px 0;
+  padding-left: 4%;
+  border: none;
+  border-left: 0.4rem solid #CCC;
+  border-left: 0.4rem solid rgba(0,0,0,0.2);
+  // bgcolor(#EEE);
+  // bgcolor(rgba(0,0,0,0.075));
+  // clearfix
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
   
   /:root[__ibooks_internal_theme*="Night"] & {
     border-color: rgba(255,255,255,0.2);
-    bgcolor(rgba(255,255,255,0.1));
+    // bgcolor(rgba(255,255,255,0.1));
   }
+}
 
-  &.left_insert, &.right_insert {
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    padding: 15px;
-    background-color: #F7F7F7;
-    border: 1px solid #AAA;
-    width: 50%;
-    box-shadow: 5px 5px 0px #EEE;
-    /:root[__ibooks_internal_theme*="Gray"] & {
-      bgcolor(rgba(0,0,0,0.1));
-      box-shadow: 5px 5px 0px #666;
-    }
-    
-    /:root[__ibooks_internal_theme*="Night"] & {
-      bgcolor(rgba(255,255,255,0.1));
-      box-shadow: none;
-    }
+.bbcode-figure-left {
+  max-width: 40%;
+  float: left;
+  margin: 0;
+  margin-right: 1.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0;
+}
+.bbcode-figure-right {
+  max-width: 40%;
+  float: right;
+  margin: 0;
+  margin-left: 1.5rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0;
+}
+figure img {
+  border-radius: 5px;
+}
+.bbcode-indent {
+  &-1 { margin-left: 1em; }
+  &-2 { margin-left: 2em; }
+  &-3 { margin-left: 3em; }
+  &-4 { margin-left: 4em; }
+}
+.bbcode-pre-line p {
+  text-indent: 0 !important;
+}
+
+sub {
+  font-size: 0.675em;
+  line-height: 1.2;
+  vertical-align: sub;
+  vertical-align: -20%;
+}
+sup {
+  font-size: 0.675em;
+  line-height: 1.2;
+  vertical-align: super;
+  vertical-align: 35%;
+}
+code {
+  font-family: monospace;
+  background-color: #DDD;
+  bgcolor(rgba(200, 200, 200, 0.2));
+  padding: .1875rem;
+  border-radius: .3125rem;
+}
+pre {
+  margin: 1em 0;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.4;
+}
+pre code {
+  padding: 1em;
+  padding: 1rem;
+  display: block;
+  position: relative;
+  ord-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.spoiler {
+  background-color: black;
+  color: transparent;
+  /:root[__ibooks_internal_theme*="Gray"] &, /:root[__ibooks_internal_theme*="Night"] & {
+    background-color: white;
   }
-  &.left_insert {
-    margin-right: 25px;
-    float: left;
-  }
-  &.right_insert {
-    margin-left: 25px;
-    float: right;
+  &:hover {
+    background-color: initial;
+    color: inherit;
+    /:root[__ibooks_internal_theme*="Gray"] &, /:root[__ibooks_internal_theme*="Night"] & {
+      background-color: initial;
+    }
   }
 }
 
 figure.youtube {
-  margin: 1em auto;
-  width: 60%;
-  max-width: 640px;
+  clear: both;
+  margin: 0 auto;
+  padding: 1em 0;
+  width: 70%;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
   
-  border: 1px solid #999;
-  border-radius: 3px;
-  padding: 3px;
+  & > a {
+    display: block;
+    width: 70%;
+    margin: 0 auto;
+  }
   
   img {
     display: block;
     width: 100%;
+    border-radius: 7px;
   }
 
   figcaption {
-    line-height: 1em;
-    text-align: left;
-    padding: 3px;
+    line-height: 1rem;
+    text-align: center;
+    margin-top: .3rem;
 
     a {
       font-style: italic;
-      font-size: 0.75em;
+      font-size: 0.75rem;
     }
   }
 }
@@ -182,12 +285,13 @@ figure.youtube {
 
 #author_notes {
   clear: both;
-  border: 1px solid #ddd;
+
+  border: 1px solid #DDD;
   border-radius: 3px;
   line-height: 1.7em;
-  padding: 16px;
-  margin-top: 1.0em;
-  margin-bottom: 1.0em;
+  padding: 1em;
+  margin-top: 2em;
+  margin-bottom: 2em;
   background-color: #EEE;
   color: #555;
   
@@ -198,6 +302,11 @@ figure.youtube {
 }
 
 a.chaptercomments {
+  clear: both;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+
   text-decoration: none;
   display: inline-block;
   position: relative;
@@ -224,40 +333,3 @@ a.chaptercomments {
   background: linear-gradient(to bottom, #7bb042 0%, #6fa03c 100%);
 }
 
-#toc {
-  h3 {
-    font-weight: normal;
-    text-align: center;
-    margin: 0;
-    margin-bottom: 0.5em;
-  }
-  ol {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      // overflow: auto;
-
-      a, .floatbox {
-        padding: 0.3em;
-        padding-left: 0;
-        padding-right: 0;
-        display: inline-block;
-      }
-      .floatbox {
-        float: right;
-      }
-
-      span.date, span.wordcount {
-        font-size: 0.8em;
-        color: #888;
-        text-align: left;
-      }
-    }
-  }
-
-  [hidden] {
-    display: none;
-  }
-}
diff --git a/src/style/titlestyle.styl b/src/style/titlestyle.styl
index a1c3f0c..185a788 100644
--- a/src/style/titlestyle.styl
+++ b/src/style/titlestyle.styl
@@ -32,27 +32,120 @@
   }
 }
 
+#description p {
+  margin: 1em 0;
+  text-indent: 0;
+}
+
+.content-rating {
+  textcolor(#fff);
+  display: inline-block;
+  padding: 0.3em 0.5em;
+  line-height: 1.0em;
+  border-radius: 4px;
+  font-size: .8125rem;
+  vertical-align: 4px;
+  margin-right: .3125rem;
+
+  &-everyone {
+    bgcolor(#78ac40);
+    border: 1px solid #6c9b3a;
+  }
+  &-teen {
+    bgcolor(#ffb400);
+    border: 1px solid #e6a200;
+  }
+  &-mature {
+    bgcolor(#c03d2f);
+    border: 1px solid #ad372a;
+  }
+}
+
 .readlink {
   text-align: left;
   font-size: 0.9em;
   line-height: 1.1em;
 }
 
-.categories {
+// Tags
+.tags {
+  margin-bottom: 0.6em;
   text-align: left;
-  margin: 0.5em 0;
-  margin-top: 1em;
+  font-size: 0.8em;
+}
+.story-tag {
+  display: inline-block;
+  padding: 0.3em 0.5em;
+  margin-bottom: 0.3em;
+  line-height: 1.0em;
+  bgcolor(#444);
+  textcolor(#fff);
+  text-decoration: none;
+  border-radius: 4px;
+  border: 1px solid #525252;
+  font-family: sans-serif;
+}
+.tag-series {
+  bgcolor(#a151bd);
+  border: 1px solid #8945a1;
+}
+.tag-genre {
+  bgcolor(#4f91d6);
+  border: 1px solid #437bb6;
+}
+.tag-character {
+  bgcolor(#23b974);
+  border: 1px solid #1e9d63;
+}
+.tag-warning {
+  bgcolor(#d6605a);
+  border: 1px solid #b6524d;
 }
 
 .bottom {
   margin-top: 1em;
   text-align: left;
+  page-break-inside: avoid;
+  break-inside: avoid;
+  -webkit-column-break-inside: avoid;
 }
 
-.characters {
-  margin-top: 0.5em;
-  text-align: left;
+// Statuses
+.completed-status {
+  margin-bottom: 0.5em;
+  font-family: sans-serif;
   font-size: .875em;
+  font-weight: normal;
+  padding: 0.3em 0.5em;
+  border: 1px solid rgba(0,0,0,0.15);
+  border-radius: 4px;
+  display: inline-block;
+  text-align: center;
+  textcolor(#fff);
+  vertical-align: middle;
+  i.fa {
+    margin-right: 0.1em;
+  }
+  &-complete {
+    bgcolor(#63bd40);
+    border-color: #59aa3a;
+    // check
+  }
+  &-incomplete {
+    bgcolor(#F7A616);
+    border-color: #de9514;
+    // pencil
+  }
+  &-hiatus {
+    bgcolor(#bd7b40);
+    border-color: #aa6f3a;
+    // pause
+  }
+  &-cancelled {
+    bgcolor(#bc3131);
+    border-color: #a92c2c;
+    // ban
+  }
 }
 
 // Last Modified and First Published
@@ -81,233 +174,3 @@
     color: #444;
   }
 }
-
-// Character icon
-span.character_icon {
-  vertical-align: middle;
-  margin: 0;
-  margin-right: 0.2em;
-  padding: 0.2em;
-  bgcolor(#fff);
-  border-radius: 3px;
-  display: inline-block;
-  vertical-align: middle;
-  border: 1px solid #999;
-  margin-bottom: 6px;
-
-  img.character_icon {
-    border-radius: 0;
-    display: block;
-    height: 2em;
-  }
-}
-
-// Ratings
-.content-rating-everyone, .content-rating-teen, .content-rating-mature {
-  padding: 0.5em;
-  textcolor(#fff);
-  border: 1px solid rgba(0,0,0,0.2);
-  text-shadow: -1px -1px rgba(0,0,0,0.2);
-  border-radius: 4px;
-  margin-bottom: 4px;
-  display: inline-block;
-  line-height: 1.0em;
-  font-family: sans-serif;
-  font-weight: bold;
-}
-.content-rating-everyone {
-  bgcolor(#78ac40);
-  box-shadow: 0px 1px 0px #90ce4d inset;
-}
-.content-rating-teen {
-  bgcolor(#ffb400);
-  box-shadow: 0px 1px 0px #ffd800 inset;
-}
-.content-rating-mature {
-  bgcolor(#c03d2f);
-  box-shadow: 0px 1px 0px #e64938 inset;
-}
-
-// Statuses
-.completed-status-complete, .completed-status-incomplete, .completed-status-hiatus, .completed-status-cancelled {
-  margin-bottom: 0.5em;
-  font-family: sans-serif;
-  font-size: 1em;
-  font-weight: normal;
-  padding: 0.3em 0.6em;
-  text-shadow: -1px -1px rgba(0,0,0,0.2);
-  border: 1px solid rgba(0,0,0,0.15);
-  border-radius: 4px;
-  display: inline-block;
-  text-align: center;
-  textcolor(#fff);
-  vertical-align: middle;
-}
-
-.completed-status-complete {
-  bgcolor(#63bd40);
-}
-
-.completed-status-incomplete {
-  bgcolor(#F7A616);
-}
-
-.completed-status-hiatus {
-  bgcolor(#bd7b40);
-}
-
-.completed-status-cancelled {
-  bgcolor(#bc3131);
-}
-
-// Categories
-.story_category {
-  display: inline-block;
-  padding: 0.5em;
-  line-height: 1.0em;
-  text-decoration: none;
-  bgcolor(#eee);
-  textcolor(#fff);
-  border-radius: 4px;
-  margin-bottom: 0.3em;
-  font-family: sans-serif;
-}
-
-.story_character {
-  display: inline-block;
-  padding: 0.3em 0.5em;
-  line-height: 1.0em;
-  bgcolor(#23b974);
-  textcolor(#fff);
-  text-decoration: none;
-  border-radius: 0.3em;
-  border: 1px solid #1e9d63;
-  font-family: sans-serif;
-}
-
-.story_category_sex {
-  bgcolor(#992584);
-  box-shadow: 0px 1px 0px #b82c9e inset;
-  text-shadow: -1px -1px #7a1e6a;
-  border: 1px solid #821f70;
-}
-.story_category_gore {
-  bgcolor(#742828);
-  box-shadow: 0px 1px 0px #8b3030 inset;
-  text-shadow: -1px -1px #5d2020;
-  border: 1px solid #632222;
-}
-.story_category_romance {
-  bgcolor(#974bff);
-  box-shadow: 0px 1px 0px #b55aff inset;
-  text-shadow: -1px -1px #793ccc;
-  border: 1px solid #8040d9;
-}
-.story_category_dark {
-  bgcolor(#b93737);
-  box-shadow: 0px 1px 0px #de4242 inset;
-  text-shadow: -1px -1px #942c2c;
-  border: 1px solid #9d2f2f;
-}
-.story_category_sad {
-  bgcolor(#bd42a7);
-  box-shadow: 0px 1px 0px #e34fc8 inset;
-  text-shadow: -1px -1px #973586;
-  border: 1px solid #a1388e;
-}
-.story_category_tragedy {
-  bgcolor(#ffb54b);
-  box-shadow: 0px 1px 0px #ffd95a inset;
-  text-shadow: -1px -1px #cc913c;
-  border: 1px solid #d99a40;
-}
-.story_category_comedy {
-  bgcolor(#f59c00);
-  box-shadow: 0px 1px 0px #fb0 inset;
-  text-shadow: -1px -1px #c47d00;
-  border: 1px solid #d08500;
-}
-.story_category_random {
-  bgcolor(#3f74ce);
-  box-shadow: 0px 1px 0px #4c8bf7 inset;
-  text-shadow: -1px -1px #325da5;
-  border: 1px solid #3663af;
-}
-.story_category_slice_of_life {
-  bgcolor(#4b86ff);
-  box-shadow: 0px 1px 0px #5aa1ff inset;
-  text-shadow: -1px -1px #3c6bcc;
-  border: 1px solid #4072d9;
-}
-.story_category_adventure {
-  bgcolor(#45c950);
-  box-shadow: 0px 1px 0px #53f160 inset;
-  text-shadow: -1px -1px #37a140;
-  border: 1px solid #3bab44;
-}
-.story_category_alternate_universe {
-  bgcolor(#888);
-  box-shadow: 0px 1px 0px #a3a3a3 inset;
-  text-shadow: -1px -1px #6d6d6d;
-  border: 1px solid #747474;
-}
-.story_category_crossover {
-  bgcolor(#47b8a0);
-  box-shadow: 0px 1px 0px #55ddc0 inset;
-  text-shadow: -1px -1px #399380;
-  border: 1px solid #3c9c88;
-}
-.story_category_human {
-  bgcolor(#b5835a);
-  box-shadow: 0px 1px 0px #d99d6c inset;
-  text-shadow: -1px -1px #916948;
-  border: 1px solid #9a6f4d;
-}
-.story_category_anthro {
-  bgcolor(#b5695a);
-  box-shadow: 0px 1px 0px #d97e6c inset;
-  text-shadow: -1px -1px #915448;
-  border: 1px solid #9a594d;
-}
-.story_category_scifi {
-  bgcolor(#5d63a5);
-  box-shadow: 0px 1px 0px #7077c6 inset;
-  text-shadow: -1px -1px #4a4f84;
-  border: 1px solid #4f548c;
-}
-.story_category_equestria_girls {
-  bgcolor(#4d3281);
-  box-shadow: 0px 1px 0px #5c3c9b inset;
-  text-shadow: -1px -1px #3e2867;
-  border: 1px solid #412b6e;
-}
-.story_category_horror {
-  bgcolor(#6d232f);
-  box-shadow: 0px 1px 0px #832a38 inset;
-  text-shadow: -1px -1px #571c26;
-  border: 1px solid #5d1e28;
-}
-.story_category_mystery {
-  bgcolor(#444);
-  box-shadow: 0px 1px 0px #525252 inset;
-  text-shadow: -1px -1px #363636;
-  border: 1px solid #3a3a3a;
-}
-.story_category_drama {
-  bgcolor(#ec50ca);
-  box-shadow: 0px 1px 0px #ff60f2 inset;
-  text-shadow: -1px -1px #bd40a2;
-  border: 1px solid #c944ac;
-}
-.story_category_thriller {
-  bgcolor(#d62b2b);
-  box-shadow: 0px 1px 0px #ff3434 inset;
-  text-shadow: -1px -1px #ab2222;
-  border: 1px solid #b62525;
-}
-.story_category_second_person {
-  bgcolor(#02a1db);
-  box-shadow: 0px 1px 0px #02c1ff inset;
-  text-shadow: -1px -1px #0281af;
-  border: 1px solid #0289ba;
-}
diff --git a/src/styles.js b/src/styles.js
index 4affcb2..2da1757 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -1,10 +1,10 @@
 
-let styleCss, coverstyleCss, titlestyleCss
-
-styleCss = require('./style/style')
-coverstyleCss = require('./style/coverstyle')
-titlestyleCss = require('./style/titlestyle')
-let paragraphsCss = {
+const styleCss = require('./style/style')
+const coverstyleCss = require('./style/coverstyle')
+const titlestyleCss = require('./style/titlestyle')
+const navstyleCss = require('./style/navstyle')
+const iconsCss = require('./style/icons')
+const paragraphsCss = {
   spaced: require('./style/paragraphs-spaced'),
   indented: require('./style/paragraphs-indented'),
   indentedall: require('./style/paragraphs-indentedall')
@@ -12,4 +12,4 @@ let paragraphsCss = {
 
 paragraphsCss.both = paragraphsCss.indented + '\n' + paragraphsCss.spaced
 
-export { styleCss, coverstyleCss, titlestyleCss, paragraphsCss }
+export { styleCss, coverstyleCss, titlestyleCss, navstyleCss, iconsCss, paragraphsCss }