Tuning the blog - 3) styling the categories and tags

The last post (!) got me almost there with the look I wanted for the category and tags list in the post, but the look wasn’t quite right. A bit more delving in Stephan’s site showed me two areas where I needed to add some styling.

The first of these revolves around <span class="label" ... which appears in _layouts\post.html. This is styling the category label. Looking at Stephan’s styles.css, I can see that at least some of the styling is from Bootstrap, which I’ve used on a couple of web sites. Although I’ll probably do so later, I’m not ready to introduce Bootstrap yet, so I took these few lines of CSS and put tmem in style.scss:

.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}
.label[href]:focus,.label[href]:hover{color:#fff;text-decoration:none;cursor:pointer}
.label:empty{display:none}.btn .label{position:relative;top:-1px}
.label-default{background-color:#999}
.label-default[href]:focus,.label-default[href]:hover{background-color:gray}
.label-primary{background-color:#428bca}
.label-primary[href]:focus,.label-primary[href]:hover{background-color:#3071a9}
.label-success{background-color:#5cb85c}
.label-success[href]:focus,
.label-success[href]:hover{background-color:#449d44}
.label-info{background-color:#5bc0de}
.label-info[href]:focus,.label-info[href]:hover{background-color:#31b0d5}
.label-warning{background-color:#f0ad4e}
.label-warning[href]:focus,.label-warning[href]:hover{background-color:#ec971f}
.label-danger{background-color:#d9534f}
.label-danger[href]:focus,.label-danger[href]:hover{background-color:#c9302c}
.label>a{color:#fff}

The first line of this gives the general size and shape of the category label, whilst the last ensures that the text is white.

The second change is to the style that goes with this line from _layouts\post.html

 <p id="post-meta">Posted {{ category_content }}{{ tags_content }}</p>

To give this the correct styling I added these lines to style.scss

#post-meta {
    margin-top:30px;
    color:#999;
    font-style:italic
}

Posted in Blogging with : Categories, Tags