[+] Implement tag directions

src/components/BlogPostPreview.vue

@@ -78,10 +78,10 @@ export default class BlogPostPreview extends Vue
     > * + *
         margin-top: 10px
 
-    .tag
+    .tags
         font-size: 0.7em
 
-    .tag + .tag
+    .tag-wrap + .tag-wrap
         margin-left: 5px
 
     #titles

src/components/Tag.vue

@@ -1,16 +1,20 @@
 <template>
-    <div class="tag fbox-vcenter">
-        <slot></slot>
-        <div class="after"></div>
+    <div class="tag-wrap">
+        <div class="tag fbox-vcenter" :class="direction">
+            <slot></slot>
+            <div class="after"></div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
+import {Prop} from "vue-property-decorator";
 
 @Options({components: {}})
 export default class Tag extends Vue
 {
+    @Prop({default: 'left'}) direction: 'left' | 'right' = 'left'
 }
 </script>
 
@@ -24,15 +28,15 @@ $text-color: $color-text-light
 $padding: $tag-height / 2
 $triangle-width: $tag-height / 2 * 0.8
 
+.tag-wrap
+    display: inline-block
+
 .tag
     background: $tag-color
-    border-radius: 3px 0 0 3px
     color: $text-color
     display: inline-flex
     height: $tag-height
-    padding: 0 ($padding - 4) 0 $padding
     position: relative
-    margin-right: $triangle-width
     transition: color 0.2s
 
     .after
@@ -40,6 +44,22 @@ $triangle-width: $tag-height / 2 * 0.8
         border-top: $tag-height / 2 solid transparent
         border-left: $triangle-width solid $tag-color
         position: absolute
-        right: -$triangle-width
         top: 0
+
+.tag.right
+    padding: 0 ($padding - 4) 0 $padding
+    margin-right: $triangle-width
+    border-radius: 3px 0 0 3px
+
+    .after
+        right: -$triangle-width
+
+.tag.left
+    padding: 0 $padding 0 ($padding - 4)
+    margin-left: $triangle-width
+    border-radius: 0 3px 3px 0
+
+    .after
+        transform: rotate(180deg)
+        left: -$triangle-width
 </style>