From dd209ba2b5212a393ba8584e3412a91e97a6f446 Mon Sep 17 00:00:00 2001
From: Hanju Jo <dev.hanju.jo@gmail.com>
Date: Sat, 7 Oct 2017 03:45:37 +0900
Subject: [PATCH] Tag styles

---
 _sass/_variables.scss | 10 +++++++---
 style.scss            | 45 +++++++++++++++++++++++++++++++++++++++++++
 tags/index.html       | 27 ++++++++++++--------------
 3 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index fac7d12899f..15b6016c3be 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -50,23 +50,27 @@ $selection-background-color: $oc-gray-1;
 $pagination-color: $oc-gray-6;
 $pagination-over-color: $oc-gray-7;
 
+$tag-index-label-color: $oc-white;
+$tag-index-label-background-color: $oc-gray-6;
+$tag-index-count-background-color: $oc-gray-7;
+
 $footer-border-color: $oc-gray-2;
 $footer-background-color: $oc-gray-1;
 
 // List
 $li-bottom-space: 0.4em;
-$li-bullets-width: 1.7em;
+$li-bullets-width: 1.4em;
 $li-line-height: 1.55;
 
 $ul-bullets-font: inherit;
 $ul-bullets-font-size: 1.4em;
 $ul-bullets-font-line-height: 1.2;
-$ul-bullets-right-space: .5em;
+$ul-bullets-right-space: .3em;
 
 $ol-bullets-font: inherit;
 $ol-bullets-font-size: 1em;
 $ol-bullets-font-line-height: inherit;
-$ol-bullets-right-space: .5em;
+$ol-bullets-right-space: .3em;
 
 $li-child-size-ratio: 0.95;
 
diff --git a/style.scss b/style.scss
index 6e86c83192d..4b393e32787 100644
--- a/style.scss
+++ b/style.scss
@@ -462,6 +462,51 @@ nav {
   }
 }
 
+// Tags
+.tags > .label {
+  > li:before {
+    content: "";
+  }
+
+  > li {
+    margin: 0;
+    font-size: $small-font-size;
+    display: inline;
+
+    > a {
+      display: inline-block;
+      margin: 1px;
+      color: $tag-index-label-color;
+      background-color: $tag-index-label-background-color;
+      border-radius: 3px;
+
+      span {
+        float: left;
+        padding: .5px 5px;
+
+        &.count {
+          background-color: $tag-index-count-background-color;
+          border-radius: 0 3px 3px 0;
+        }
+      }
+    }
+  }
+}
+
+.tags > .tag {
+  a {
+    color: $base-color;
+  }
+  time {
+    color: $base-lighten-color;
+    font-size: $small-font-size;
+    font-weight: 300;
+    margin-left: 3px;
+  }
+}
+
+// Footer
+
 .wrapper-footer {
   margin-top: 50px;
   border-top: 1px solid $footer-border-color;
diff --git a/tags/index.html b/tags/index.html
index 5f865521661..edc00443a5e 100644
--- a/tags/index.html
+++ b/tags/index.html
@@ -8,8 +8,8 @@
   <h2>No post found</h2>
 {% endif %}
 
-<div class="tag-index">
-  <ul>
+<div class="tags">
+  <ul class="label">
     {% for tag in site.tags %}
     <li>
       <a href="#{{ tag[0] }}">
@@ -19,29 +19,26 @@ <h2>No post found</h2>
     </li>
     {% endfor %}
   </ul>
-</div>
 
-{% for tag in site.tags %}
-  <article>
-    <div class="tag-title" id="{{ tag[0] }}">
+  {% for tag in site.tags %}
+    <h2 id="{{ tag[0] }}">
       {{ tag[0] }}
-    </div>
-    <ul>
+    </h2>
+    <ul class="tag">
       {% for post in tag[1] %}
         {% if post.title != null %}
-          <li class="tag-post">
+          <li>
             {% if post.link %}
               <a href="{{ post.link }}">
-                <span class="tag-post-title">{{ post.title }}</span>
-              </a>
             {% else %}
               <a href="{{ site.baseurl }}{{ post.url }}">
-                <span class="tag-post-title">{{ post.title }}</span>
-              </a>
             {% endif %}
+                {{ post.title }}
+              </a>
+              <time>{{ post.date | date: "%Y-%m-%d" }}</time>
           </li>
         {% endif %}
       {% endfor %}
     </ul>
-  </article>
-{% endfor %}
+  {% endfor %}
+</div>