Add checkerboard functionality

docs/assets/css/style.css

@@ -3,10 +3,14 @@
 @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
 @import url(https://fonts.googleapis.com/css?family=Damion);
 :root {
+  /* color */
   --primaryColor: #60be86;
   --primaryColorDark: #2D804E;
   --primaryColorLight: #65d693;
   --grey: #4c6857;
+
+  /* sizing */
+  --listItemPadding: 0.4rem;
 }
 
 html {
@@ -248,20 +252,24 @@ header {
   header .icons-list {
     margin: 1rem 0;
     padding: 0;
-    list-style: none; }
+    list-style: none;
+    position: relative; }
     header .icons-list > div {
       display: inline; }
+
     header .icons-list li {
       position: relative;
       display: inline-block;
       width: 6.5rem;
       margin: .5rem .3rem;
-      padding: .4rem;
+      padding: var(--listItemPadding);
       cursor: pointer;
       border: 5px solid var(--primaryColor); }
+
       header .icons-list li:hover {
         border: 5px solid var(--primaryColorLight);
         border-radius: 5px; }
+
         header .icons-list li:hover::before {
           content: ' ';
           position: absolute;
@@ -273,9 +281,11 @@ header {
           border-left: 15px solid transparent;
           border-right: 15px solid transparent;
           border-top: 15px solid var(--primaryColorLight); }
+
       header .icons-list li.selected-version {
         border: 5px solid var(--primaryColorLight);
         border-radius: 5px; }
+
       header .icons-list li.selected-version::before {
         position: absolute;
         bottom: -19px;
@@ -287,8 +297,19 @@ header {
         border-right: 15px solid transparent;
         border-left: 15px solid transparent;
         content: ' '; }
+
+      .standinDiv {
+        height: 5rem;
+      }
+
     header .icons-list i {
-      font-size: 5rem; }
+      font-size: 5rem; 
+      position: absolute;
+      left: 0;
+      top: 0;
+      margin: var(--listItemPadding); 
+    }
+
     header .icons-list img {
       max-width: 100%; }
 

docs/assets/js/script.js

@@ -1,5 +1,4 @@
 var devicon = angular.module('devicon', ['ngSanitize', 'ngAnimate']);
-// const DEFAULT_BACKGROUND = "#60be86";
 
 /*
 ||==============================================================
@@ -45,6 +44,11 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     $scope.fontBackground = $scope.DEFAULT_BACKGROUND;
     $scope.svgBackground = $scope.DEFAULT_BACKGROUND;
 
+    // whether to display the checkerboard img in the background
+    // for the font and svg respectively
+    $scope.fontDisplayChecker = false;
+    $scope.svgDisplayChecker = false;
+
     // Loop through devicon.json
     angular.forEach(data, function(devicon, key) {
 

docs/index.html

@@ -72,7 +72,7 @@
                   Background Color 
                 </div>
                 <div>
-                  <input type='checkbox' id='checkboardInput' class='checkerboardInput'>
+                  <input type='checkbox' class='checkerboardInput' ng-model="fontDisplayCheckerboard">
                   <label for='checkboardInput' >Checkerboard</label>
                 </div>
                 <button class='colorPickerResetBtn' ng-click="fontBackground = DEFAULT_BACKGROUND">Reset</button>
@@ -93,9 +93,11 @@
           <ul class="icons-list">
             <div ng-repeat="fontVersion in selectedIcon.font">
               <li ng-click="selectFont(fontVersion, false, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && !colored)}" ng-style="{'background-color': fontBackground}">
+                <img src="assets/img/checkerboard.png" ng-style="{'visibility': fontDisplayCheckerboard ? 'visible' : 'hidden'}">
                 <i class="devicon-{{selectedIcon.name}}-{{fontVersion}}"></i>
               </li>
               <li ng-click="selectFont(fontVersion, true, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && colored)}"  ng-style="{'background-color': fontBackground}">
+                <img src="assets/img/checkerboard.png" ng-style="{'visibility': fontDisplayCheckerboard ? 'visible' : 'hidden'}">
                 <i class="devicon-{{selectedIcon.name}}-{{fontVersion}} colored"></i>
               </li>
             </div>