From 55588aeba1316ccb1fde8a732babae3e11ffe228 Mon Sep 17 00:00:00 2001
From: Vighnesh Shenoy <38671299+vighneshq@users.noreply.github.com>
Date: Mon, 24 Jun 2019 07:46:50 +0530
Subject: [PATCH] Allow icons for tags by setting "tagicons = true" in their
 config. (#126)

---
 layouts/partials/blog_single.html |  6 +++++-
 layouts/partials/css/main.css     | 20 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/blog_single.html b/layouts/partials/blog_single.html
index a2ca07f..91238be 100644
--- a/layouts/partials/blog_single.html
+++ b/layouts/partials/blog_single.html
@@ -23,7 +23,11 @@
                     {{ if not .Site.Params.noreadingtime }}
                     <div class="reading-time middot">{{ .ReadingTime }} minute read</div>
                     {{ end }}
-                    <div class="tags">
+                    {{ if .Site.Params.tagicons }}
+                      <div class="tags tag-icons">
+                    {{ else }}
+                      <div class="tags">
+                    {{ end }}
                         <ul>
                           {{ range .Params.tags }}
                             <li class="middot"><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
diff --git a/layouts/partials/css/main.css b/layouts/partials/css/main.css
index 5c4990b..2d2a7ca 100644
--- a/layouts/partials/css/main.css
+++ b/layouts/partials/css/main.css
@@ -359,6 +359,26 @@ div.main .content .front-matter .tags ul li:hover {
 div.main .content .front-matter .tags ul li a {
   color: #666666;
 }
+{{ if .Site.Params.tagicons }}
+div.main .content .front-matter .tags.tag-icons .middot {
+  margin-left: 8px;
+}
+div.main .content .front-matter .tags.tag-icons .middot a {
+  display: inline-block;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 0 5px 5px 0;
+  position: relative;
+}
+div.main .content .front-matter .tags.tag-icons .middot a:after {
+  content: " ";
+  position: absolute;
+  right: 100%;
+  border-top: 11.2px solid transparent;
+  border-right: 11.2px solid #eee;
+  border-bottom: 11.2px solid transparent;
+}
+{{ end }}
 div.main .container.f04 {
   -webkit-justify-content: center;
   -moz-justify-content: center;