Restyle tag labels

They now look like actual tags
This commit is contained in:
Gergely Polonkai 2015-04-28 15:20:15 +02:00
parent 1dbb08d00c
commit 2336e7df0b
3 changed files with 94 additions and 12 deletions

View File

@ -33,17 +33,7 @@
{% endif %} {% endif %}
</main> </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 %} {% include tag-link.html %}
{% endfor %}
</p>
</footer>
{% endif %}
{% if page.post_listing %} {% if page.post_listing %}
</li> </li>
</ul> </ul>

View File

@ -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 %}

View File

@ -14,6 +14,37 @@ $well-background: #ccc
$link-color: #018cb0 $link-color: #018cb0
$light-color: #666 $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 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
color: $content-text color: $content-text
@ -121,3 +152,55 @@ body
.plusone-container .plusone-container
margin-left: 1em margin-left: 1em
display: inline 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