Add tagging support

1 files changed, 136 insertions, 0 deletions

diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss
index 79d3aae..5eb978a 100644
--- a/assets/sass/_customize.scss
+++ b/assets/sass/_customize.scss
@@ -139,3 +139,139 @@ ul.pager li {
   margin-bottom: 1rem;
   display: inline-block;
 }
+
+.post-tags-wrapper {
+  position: relative;
+}
+
+.post-tags {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 24px;
+  bottom: -12px;
+  list-style: none;
+}
+
+.post-tags li,
+.post-tags a {
+  font-family: $heading-font;
+  float: left;
+  height: 24px;
+  line-height: 24px;
+  position: relative;
+  font-size: .75em;
+}
+
+.post-tags a {
+  margin-left: 20px;
+  padding: 0 10px 0 12px;
+  background: $link-color;
+  color: #fff;
+  text-decoration: none;
+  -webkit-border-bottom-right-radius:4px;
+      -moz-border-radius-bottomright:4px;
+          border-bottom-right-radius:4px;
+  -webkit-border-top-right-radius:4px;
+       -moz-border-radius-topright:4px;
+           border-top-right-radius:4px;
+}
+
+.post-tags a:before {
+  content: "";
+  float: left;
+  position: absolute;
+  top: 0;
+  left: -12px;
+  width: 0;
+  height: 0;
+  border-color: transparent $link-color transparent transparent;
+  border-style: solid;
+  border-width: 12px 12px 12px 0;
+}
+
+.post-tags a:after {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 0;
+  float: left;
+  width: 4px;
+  height: 4px;
+  background: #fff;
+  @include border-radius (2px);
+  @include box-shadow (-1px -1px 2px $text-color);
+}
+
+.post-tags a:hover {
+  background: $text-light-color;
+}
+
+.post-tags a:hover:before {
+  border-color: transparent $text-light-color transparent transparent;
+}
+
+/* Themes */
+
+/* Red */
+.theme-base-red .post-tags a {
+  background: #ac4142;
+}
+
+.theme-base-red .post-tags a:before {
+  border-color: transparent #ac4142 transparent transparent;
+}
+
+/* Orange */
+.theme-base-orange .post-tags a {
+  background: #d28445;
+}
+
+.theme-base-orange .post-tags a:before {
+  border-color: transparent #d28445 transparent transparent;
+}
+
+/* Green */
+.theme-base-green .post-tags a {
+  background: #90a959;
+}
+
+.theme-base-green .post-tags a:before {
+  border-color: transparent #90a959 transparent transparent;
+}
+
+/* Cyan */
+.theme-base-cyan .post-tags a {
+  background: #75b5aa;
+}
+
+.theme-base-cyan .post-tags a:before {
+  border-color: transparent #75b5aa transparent transparent;
+}
+
+/* Blue */
+.theme-base-blue .post-tags a {
+  background: #6a9fb5;
+}
+
+.theme-base-blue .post-tags a:before {
+  border-color: transparent #6a9fb5 transparent transparent;
+}
+
+/* Magenta */
+.theme-base-magenta .post-tags a {
+  background: #aa759f;
+}
+
+.theme-base-magenta .post-tags a:before {
+  border-color: transparent #aa759f transparent transparent;
+}
+
+/* Brown */
+.theme-base-brown .post-tags a {
+  background: #8f5536;
+}
+
+.theme-base-brown .post-tags a:before {
+  border-color: transparent #8f5536 transparent transparent;
+}