Set up smarter looking prev/next arrows for chapters

antwar.config.js

@@ -84,6 +84,9 @@ module.exports = {
     require('antwar-default-theme/scss/main.scss');
     require('./styles/custom.scss');
     require('./styles/prism.css');
+    require('./styles/fontello.css');
+    require('./styles/fontello-codes.css');
+    require('./styles/fontello-embedded.css');
     require('react-ghfork/gh-fork-ribbon.css');
   },
   paths: {

layouts/ChapterPage.jsx

@@ -110,12 +110,16 @@ module.exports = React.createClass({
   },
   renderNext(item) {
     return item.next ?
-      <a className="next-page" href={`/${item.next.url}`} title={item.next.title} /> :
+      <a className="next-page" href={`/${item.next.url}`} title={item.next.title}>
+        <i className="icon-right-open" />
+      </a> :
       null;
   },
   renderPrev(item) {
     return item.prev ?
-      <a className="previous-page" href={`/${item.prev.url}`} title={item.prev.title} /> :
+      <a className="previous-page" href={`/${item.prev.url}`} title={item.prev.title}>
+        <i className="icon-left-open" />
+      </a> :
       null;
   }
 });

styles/custom.scss

@@ -371,32 +371,14 @@ footer .footer-wrapper {
     text-transform: uppercase;
     text-rendering: optimizeLegibility;
 
-    top: calc(50% - 8em);
+    top: calc(50%);
     position: fixed;
 }
 .previous-page {
     left: 1em;
-    width: 0px;
-
-    border-top: 8em solid rgba(0,0,0,0);
-    border-left: 0px solid rgba(0,0,0,0);
-    border-right: 1.5em solid rgba(0,0,0,0.10);
-    border-bottom: 8em solid rgba(0,0,0,0);
-}
-.previous-page:hover {
-    border-right: 1.5em solid rgba(0,0,0,0.20);
 }
 .next-page {
     right: 1em;
-    width: 0px;
-
-    border-top: 8em solid rgba(0,0,0,0);
-    border-left: 1.5em solid rgba(0,0,0,0.10);
-    border-right: 0px solid rgba(0,0,0,0);
-    border-bottom: 8em solid rgba(0,0,0,0);
-}
-.next-page:hover {
-    border-left: 1.5em solid rgba(0,0,0,0.20);
 }
 
 .nav {

styles/fontello-codes.css

@@ -0,0 +1,14 @@
+
+.icon-right-open:before { content: '\e800'; } /* '' */
+.icon-left-open:before { content: '\e801'; } /* '' */
+.icon-down-open:before { content: '\e802'; } /* '' */
+.icon-attention:before { content: '\e803'; } /* '' */
+.icon-attention-circled:before { content: '\e804'; } /* '' */
+.icon-rss:before { content: '\e805'; } /* '' */
+.icon-rss-squared:before { content: '\e806'; } /* '' */
+.icon-attention-alt:before { content: '\e807'; } /* '' */
+.icon-comment-empty:before { content: '\e808'; } /* '' */
+.icon-export:before { content: '\e809'; } /* '' */
+.icon-export-alt:before { content: '\e80a'; } /* '' */
+.icon-twitter-squared:before { content: '\e80b'; } /* '' */
+.icon-twitter:before { content: '\e80c'; } /* '' */

styles/fontello.css

@@ -0,0 +1,69 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot');
+  src: url('../font/fontello.eot#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff') format('woff'),
+       url('../font/fontello.ttf') format('truetype'),
+       url('../font/fontello.svg#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg#fontello') format('svg');
+  }
+}
+*/
+
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-right-open:before { content: '\e800'; } /* '' */
+.icon-left-open:before { content: '\e801'; } /* '' */
+.icon-down-open:before { content: '\e802'; } /* '' */
+.icon-attention:before { content: '\e803'; } /* '' */
+.icon-attention-circled:before { content: '\e804'; } /* '' */
+.icon-rss:before { content: '\e805'; } /* '' */
+.icon-rss-squared:before { content: '\e806'; } /* '' */
+.icon-attention-alt:before { content: '\e807'; } /* '' */
+.icon-comment-empty:before { content: '\e808'; } /* '' */
+.icon-export:before { content: '\e809'; } /* '' */
+.icon-export-alt:before { content: '\e80a'; } /* '' */
+.icon-twitter-squared:before { content: '\e80b'; } /* '' */
+.icon-twitter:before { content: '\e80c'; } /* '' */