Implement HTML and CSS to support hierarchical tags

static/main.css

@@ -54,6 +54,7 @@ a {
 
 .taglist { display: flex; }
 .tag {
+    color: #555;
     padding-right: 0.4em;
 }
 
@@ -208,3 +209,15 @@ form > div {
     padding: 2em;
     word-spacing: 1em;
 }
+
+.tag_container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tag_container span {
+    display: block;
+    text-indent: -1em;
+    margin-left: 1em;
+    padding-left: 0.3em;
+}

templates/link.mustache

@@ -1,9 +1,7 @@
 <div id="link_{{id}}" class="link{{#private}} private{{/private}}">
   <div class="text"><a href="{{url}}">{{name}}</a></div>
   <div class="url"><a href="{{url}}">{{url}}</a></div>
-  <div class="taglist">{{#tags}}
-    <span class="tag"><a href="{{url}}">{{name}}</a></span>
-  {{/tags}}</div>
+  <div class="taglist">{{{ hier_tags }}}</div>
   <div class="datetime">
     <a href="{{link_url}}">{{created}}</a>
     {{#is_mine}}

templates/linklist.mustache

@@ -5,9 +5,9 @@
     {{/links}}
   </div>
   <div class="tags">
-    {{#tags}}
-      <a href="{{url}}">{{name}}</a>
-    {{/tags}}
+    <div class="tag_container">
+      {{{hier_tags}}}
+    </div>
   </div>
 </div>
 {{#pages}}