improve post meta/list css

_includes/post-meta.html

@@ -1,29 +1,30 @@
 {%- assign curpage = include.page -%}
 <p class="post-meta" style="color: #555555">
   <!--date-->
-  <img src="{{ '/assets/images/date.svg' | relative_url }}"
-       alt="date" class="svg-icon">
-  <time class="dt-published"
-        datetime="{{ curpage.date | date_to_xmlschema }}"
-        itemprop="datePublished">
-    {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
-    {{ curpage.date | date: date_format }}
-  </time>
+  <span class="meta-date">
+      <img src="{{ '/assets/images/date.svg' | relative_url }}"
+           alt="date" class="svg-icon">
+      <time class="dt-published"
+            datetime="{{ curpage.date | date_to_xmlschema }}"
+            itemprop="datePublished">
+        {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+        {{ curpage.date | date: date_format }}
+      </time>
+  </span>
   <!--catetory-->
-  <span class="meta-category">
-    <img src="{{ '/assets/images/category.svg' | relative_url }}"
-         alt="category" class="svg-icon">
     <a href="{{ curpage.categories | first | relative_url }}" 
-       class="category-string">
+       class="meta-category">
+        <img src="{{ '/assets/images/category.svg' | relative_url }}"
+             alt="category" class="svg-icon">
         {{ curpage.categories }}
     </a>
-  </span>
   <!--tag-->
-  <span class="meta-tags">
+  {%- for tag in curpage.tags -%}
+  <a href="{{ "/tags" | relative_url }}/#{{ tag | slugify }}"
+     class="meta-tags">
     <img src="{{ '/assets/images/tag.svg' | relative_url }}"
          alt="tag" class="svg-icon">
-    {%- for tag in curpage.tags -%}
-      <a href="" class="tag-string"> {{ tag }} </a>
-    {%- endfor -%}
-  </span>
+    {{ tag }}
+  </a>
+  {%- endfor -%}
 </p>

_layouts/category.html

@@ -16,7 +16,7 @@ layout: default
             {% assign pc = page.category %}
             {% if ic == pc %}
                 <li>
-                    <h3 style="margin-top:16px;margin-bottom:0px">
+                    <h3 class="post-list-title">
                         <a class="post-link" href="{{ item.url | relative_url }}">
                             {{ item.title | escape }}
                         </a>

assets/css/mystyle.css

@@ -43,16 +43,29 @@ pre, code{
 }
 
 /* post meta */
-.meta-tags, .meta-category {
-    margin-left: 16px;
+.meta-tags, .meta-category, .meta-date {
+    display: inline-block;
+    margin: 3px 4px;
+    padding:0px 4px;
 }
-.tag-string {
-    margin-right: 4px;
+a.meta-tags:hover, a.meta-category:hover {
+    text-decoration: none;
+}
+.meta-tags {
+    padding:0px 12px;
+    background:#2a7ae21a;
+    border-radius:4px;
 }
 .svg-icon {
     vertical-align: text-bottom;
 }
 
+/* post list */
+.post-list-title {
+    margin-top:16px;
+    margin-bottom:0px;
+}
+
 /* tags page */
 .tagnames {
     margin-bottom: 16px;