Set specific footer icon and link based on the browser used

content/options.html

@@ -29,7 +29,8 @@
   </div>
   <footer>
     <nav>
-      <a href="https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk" class="icon-chrome">Chrome Store</a>
+      <a href="https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk" class="icon-chrome icon-hidden">Chrome Store</a>
+      <a href="https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/" class="icon-firefox icon-hidden">Firefox Store</a>
       <a href="https://github.com/simov/markdown-viewer" class="icon-github">GitHub</a>
     </nav>
   </footer>

content/options.js

@@ -276,3 +276,8 @@ m.mount(document.querySelector('main'), {
       ),
     )
 })
+
+// ff: set appropriate footer icon
+document.querySelector('.icon-' + (
+  /Firefox/.test(navigator.userAgent) ? 'firefox' : 'chrome'
+)).classList.remove('icon-hidden')

css/icons.css

@@ -10,7 +10,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?96655196#fontello') format('svg');
+    src: url('../font/fontello.svg?2723038#fontello') format('svg');
   }
 }
 */
@@ -50,7 +50,8 @@
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
-.icon-remove:before { content: '\e800'; } /* '' */
-.icon-refresh:before { content: '\e802'; } /* '' */
+.icon-refresh:before { content: '\e801'; } /* '' */
+.icon-remove:before { content: '\e802'; } /* '' */
+.icon-firefox:before { content: '\e840'; } /* '' */
 .icon-github:before { content: '\f09b'; } /* '' */
 .icon-chrome:before { content: '\f268'; } /* '' */

css/options.css

@@ -49,11 +49,18 @@ footer a {
   color: #9e9e9e;
   text-decoration: none;
 }
-footer a:nth-of-type(1) { margin-right: 10px; }
-footer a:nth-of-type(1):before { font-size: 17px; }
-footer a:nth-of-type(2):before {
+footer .icon-chrome { margin-right: 10px; }
+footer .icon-chrome:before { font-size: 17px; }
+footer .icon-firefox { margin-right: 10px; }
+footer .icon-firefox:before {
+  font-size: 18px; position: relative; top: 1px;
+}
+footer .icon-github:before {
   font-size: 20px; position: relative; top: 1px;
 }
+footer .icon-hidden {
+  display: none;
+}
 
 
 /*custom scrollbars in WebKit*/