From bb6910c0f445882c625c2ee8bc6a08d8d50abee7 Mon Sep 17 00:00:00 2001
From: Thomas Cullen <thomascullen92@gmail.com>
Date: Tue, 10 Oct 2017 00:10:42 +0100
Subject: [PATCH 1/2] Add search to home page

---
 _data/tags.yml       | 3 +++
 _includes/icon.html  | 4 +++-
 _includes/icons.html | 5 ++++-
 index.html           | 7 +++++++
 style.css            | 4 ++++
 5 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 _data/tags.yml

diff --git a/_data/tags.yml b/_data/tags.yml
new file mode 100644
index 00000000..96f03459
--- /dev/null
+++ b/_data/tags.yml
@@ -0,0 +1,3 @@
+bell: notification
+bell-off: notification-off
+check: tick
diff --git a/_includes/icon.html b/_includes/icon.html
index 3cff361e..94781253 100644
--- a/_includes/icon.html
+++ b/_includes/icon.html
@@ -1,3 +1,4 @@
+{% assign tags = site.data.tags[include.icon.basename] | split: ", " | join " " %}
 <li>
   <a
     href="{{ include.icon.path }}"
@@ -5,6 +6,7 @@
     download
     onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
     <span class="svg flex-none lh-none">{% include_relative {{ include.icon.path }} %}</span>
-    <span class="ml3 lh-copy f6 f5-ns tc black-60 ellipse">{{ include.icon.basename }}</span>
+    <span class="ml3 lh-copy f6 f5-ns tc black-60 ellipse icon-name">{{ include.icon.basename }}</span>
+    <span class="dn icon-tags">{{tags}}</span>
   </a>
 </li>
diff --git a/_includes/icons.html b/_includes/icons.html
index 8e2ad880..8917707a 100644
--- a/_includes/icons.html
+++ b/_includes/icons.html
@@ -1,4 +1,7 @@
-<div class="w-80 mw8 center">
+<div class="w-80 mw8 center" id="js-icons">
+  <div class="w-100 w-50-ns center mb5">
+    <input class="w-100 f4 pv3 br-pill bn bg-near-white bg-animate hover-bg-light-gray tc search" placeholder="Search" />
+  </div>
   <ul class="icon-grid mv0 pl0 list">
       {% for file in site.static_files %}
         {% if file.path contains 'dist/icons/'  %}
diff --git a/index.html b/index.html
index 94a555fc..a61dd8b5 100644
--- a/index.html
+++ b/index.html
@@ -45,5 +45,12 @@
   {% include icons.html %}
   {% include footer.html links=page.links %}
 
+  <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
+  <script type="text/javascript">
+    var list = new List('js-icons', {
+      valueNames: [ 'icon-name', 'icon-tags' ]
+    })
+  </script>
+
 </body>
 </html>
diff --git a/style.css b/style.css
index e73af6c0..76bc1238 100644
--- a/style.css
+++ b/style.css
@@ -11,6 +11,10 @@
   background-color: #0055ff;
 }
 
+input.search {
+  outline: none;
+}
+
 .button {
   display: inline-block;
   padding: 1rem 2rem;

From f1c1b4d8f34f89c83896b3dc2eaaf771362d47f4 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@gmail.com>
Date: Sat, 4 Nov 2017 22:29:27 -0700
Subject: [PATCH 2/2] Adjust styles

---
 _includes/icon.html  | 4 ++--
 _includes/icons.html | 8 +++++---
 style.css            | 5 +----
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/_includes/icon.html b/_includes/icon.html
index 94781253..16a44d8a 100644
--- a/_includes/icon.html
+++ b/_includes/icon.html
@@ -6,7 +6,7 @@
     download
     onclick="ga('send', 'event', 'download', 'click', '{{ include.icon.basename }}');">
     <span class="svg flex-none lh-none">{% include_relative {{ include.icon.path }} %}</span>
-    <span class="ml3 lh-copy f6 f5-ns tc black-60 ellipse icon-name">{{ include.icon.basename }}</span>
-    <span class="dn icon-tags">{{tags}}</span>
+    <span class="icon-name ml3 lh-copy f6 f5-ns tc black-60 ellipse">{{ include.icon.basename }}</span>
+    <span class="icon-tags dn">{{tags}}</span>
   </a>
 </li>
diff --git a/_includes/icons.html b/_includes/icons.html
index 8917707a..79857c36 100644
--- a/_includes/icons.html
+++ b/_includes/icons.html
@@ -1,7 +1,9 @@
 <div class="w-80 mw8 center" id="js-icons">
-  <div class="w-100 w-50-ns center mb5">
-    <input class="w-100 f4 pv3 br-pill bn bg-near-white bg-animate hover-bg-light-gray tc search" placeholder="Search" />
-  </div>
+  <input
+    type="search"
+    class="search fuzzy-search input-reset w-100 mb3 pv3 ph3 ph4-ns rubik f5 lh-copy bg-white br1 ba b--black-20"
+    placeholder="Search"
+  />
   <ul class="icon-grid mv0 pl0 list">
       {% for file in site.static_files %}
         {% if file.path contains 'dist/icons/'  %}
diff --git a/style.css b/style.css
index 76bc1238..c44e43f8 100644
--- a/style.css
+++ b/style.css
@@ -11,10 +11,6 @@
   background-color: #0055ff;
 }
 
-input.search {
-  outline: none;
-}
-
 .button {
   display: inline-block;
   padding: 1rem 2rem;
@@ -106,6 +102,7 @@ input.search {
 }
 
 .carbon-img {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   margin-right: 1rem;