Restyle tag labels

They now look like actual tags

_includes/blog-post.html

@@ -33,17 +33,7 @@
 {% endif %}
             </main>
 
-{% capture tagsize %}{{post.tags | size}}{% endcapture %}
-{% if tagsize != '0' %}
-            <footer>
-                <p class="article-tags">
-                    Tags:
-{%     for tag in post.tags %}
-{%         include tag-link.html %}
-{%     endfor %}
-                </p>
-            </footer>
-{% endif %}
+{% include tag-link.html %}
 {% if page.post_listing %}
         </li>
     </ul>

_includes/tag-link.html

@@ -1 +1,10 @@
-<a href="{{tag | prepend: '/blog/tag/' | prepend: site.baseurl}}" class="label label-default">{{tag}}</a>
+{% capture tagsize %}{{post.tags | size}}{% endcapture %}
+{% if tagsize != '0' %}
+            <footer>
+                <p class="article-tags">
+{%     for tag in post.tags %}
+                    <a href="{{tag | prepend: '/blog/tag/' | prepend: site.baseurl}}" class="tag-label">{{tag}}</a>
+{%     endfor %}
+                </p>
+            </footer>
+{% endif %}

css/style.sass

@@ -14,6 +14,37 @@ $well-background: #ccc
 $link-color: #018cb0
 $light-color: #666
 
+=border-top-right-radius($value)
+  border-top-right-radius: $value
+  -moz-border-radius-topright: 2px
+  -webkit-border-top-right-radius: $value
+
+=border-top-left-radius($value)
+  border-top-left-radius: $value
+  -moz-border-radius-topleft: $value
+  -webkit-border-top-left-radius: $value
+
+=border-bottom-right-radius($value)
+  border-bottom-right-radius: $value
+  -moz-border-radius-bottomright: $value
+  -webkit-border-bottom-right-radius: $value
+
+=border-bottom-left-radius($value)
+  border-bottom-left-radius: $value
+  -moz-border-radius-bottomleft: $value
+  -webkit-border-bottom-left-radius: $value
+
+=border-radius($tr, $br: $tr, $bl: $br, $tl: $tr)
+  +border-top-right-radius($tr)
+  +border-bottom-right-radius($br)
+  +border-bottom-left-radius($bl)
+  +border-top-left-radius($tl)
+
+=background-clip-padding-box
+  -moz-background-clip: padding
+  -webkit-background-clip: padding-box
+  background-clip: padding-box
+
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
   color: $content-text
 
@@ -121,3 +152,55 @@ body
   .plusone-container
     margin-left: 1em
     display: inline
+
+.tag-label
+  +border-radius(2px, 2px, 0, 0)
+  +background-clip-padding-box
+  float: left
+  position: relative
+  background: #ccc
+  margin-left: 16px
+  margin-top: 3px
+  padding: 0 15px 0 14px
+  line-height: 24px
+  font-size: 12px
+  color: #555
+  display: inline-block
+
+.tag-label:first-child
+  margin-left: 7px
+
+.tag-label:before
+  position: absolute
+  left: -7px
+  top: 0
+  width: 0
+  height: 0
+  display: block
+  border-style: solid
+  border-width: 12px 7px 12px 0
+  border-color: transparent #ccc transparent transparent
+  content: ""
+
+/* the "hole" on the left end */
+.tag-label:after
+  content: ""
+  position: absolute
+  width: 5px
+  height: 5px
+  background: $content-background
+  top: 9px
+  left: -1px
+  border-radius: 50%
+  box-shadow: inset 0 1px 1px #aaa
+
+.tag-label:hover:before
+  border-color: transparent $menu-background transparent transparent
+
+.tag-label:hover
+  background: $menu-background
+  color: $menu-text
+  text-decoration: none
+
+.tag-label:hover:after
+  box-shadow: inset 0 1px 1px $menu-background