From be344b424ccc6d9f65b537cc796eb63c07f67b27 Mon Sep 17 00:00:00 2001
From: Thomas Bui <thomasbui198@gmail.com>
Date: Tue, 21 Dec 2021 20:49:32 -0800
Subject: [PATCH] Add checkerboard functionality

---
 docs/assets/css/style.css        |  27 ++++++++++++++++++++++++---
 docs/assets/img/checkerboard.png | Bin 0 -> 8632 bytes
 docs/assets/js/script.js         |   6 +++++-
 docs/index.html                  |   4 +++-
 4 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 docs/assets/img/checkerboard.png

diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css
index 3d3548a4b..191e28777 100644
--- a/docs/assets/css/style.css
+++ b/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%; }
 
diff --git a/docs/assets/img/checkerboard.png b/docs/assets/img/checkerboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ae989dd50e627aae2eb08c18d6813ea48aa250e
GIT binary patch
literal 8632
zcmeAS@N?(olHy`uVBq!ia0y~yVA%k|9Be?5*NU6Z11Yv7Z+91l{~)+v@AAnE3<?aM
zE{-7;bKczAnCW0Bz<RL$*x&6s<qsS>za=bd@;=h+`nmT0&xWbzKGr0zo>^JTRB-a&
zp}242-+oor0?lJ!_~U+n2}mjUj#8sRFq#TRGs0+DFj^eaw?=sTea`1!Y!5D-*<;7J
zBc(o3|2KE_&G;Lq`E@`Q)FqZtYBUH&Q^9CP7%dA%i^Bn_5uW|t_xTscgL9Vi^m9y&
z*ZVW*fvP89KdLT)5$K=^YNOO>5R9gR(Tp%!7K|2$15zV=t3Fp*%UqC|7B`<EX4C!+
z)Bm>aeWU;8DZ3b`!pvkErAC8bG!+c#j8Omf)<I4N1s(>&-TyD_YL@r+P<ydlq>pI{
zX9OsZk5Z#SF!WNv*{JOOa!flmZ~xjFfA-94!3OVl`hQOUZLR+~Ivq7S9W^=~H98$N
zIvoY9+zDj_z3HvY3=E8kptS%*C?8cq-UQcMhJq6YktcV}n*j_#22WQ%mvv4FO#s7x
BRY(8;

literal 0
HcmV?d00001

diff --git a/docs/assets/js/script.js b/docs/assets/js/script.js
index debf04526..153ca460c 100644
--- a/docs/assets/js/script.js
+++ b/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) {
 
diff --git a/docs/index.html b/docs/index.html
index e7e40f36c..ae9e8910b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -72,7 +72,7 @@ <h4>
                   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 @@ <h4>
           <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>