taxonomy support #272 #324 #539

assets/scss/_sidebar-toc.scss

@@ -1,7 +1,7 @@
 //
 // Right side toc
 //
-.td-toc {
+.td-sidebar-toc {
     border-left: 1px solid $border-color;
 
     @supports (position: sticky) {
@@ -16,6 +16,17 @@
     padding-bottom: 1.5rem;
     vertical-align: top;
 
+}
+
+.td-page-meta {
+    a {
+        display: block;
+        font-weight: $font-weight-medium;
+    }
+}
+
+.td-toc {
+
     a {
         display: block;
         font-weight: $font-weight-light;
@@ -31,12 +42,6 @@
         margin-left: 0.5rem;
     }
 
-    .td-page-meta {
-        a {
-            font-weight: $font-weight-medium;
-        }
-    }
-
     #TableOfContents {
         // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
         > ul > li > ul > li > a {}

assets/scss/_taxonomy.scss

@@ -0,0 +1,332 @@
+// Taxonomies - e.g. Tags, Categories, ...
+
+.taxonomy-terms-article {
+  width: 100%;
+  clear: both;
+  font-size: 0.8rem;
+
+  .taxonomy-title {
+    display: inline; 
+    font-size: 1.25em;
+    height: 1em;
+    line-height: 1em;
+    margin-right: 0.5em;
+    padding: 0;
+  }
+}
+
+.taxonomy-terms-cloud {
+  width: 100%;
+  clear: both;
+  font-size: 0.8rem;
+
+  .taxonomy-title {
+    display: inline-block; 
+    width: 100%;
+    font-size: 1rem;
+    font-weight: 700;
+    color: $primary;
+    border-bottom: 1px $primary solid;
+    margin-bottom: 1em;
+    padding-bottom: 0.375rem;
+    margin-top: 1em;
+  }
+}
+
+.taxonomy-terms-page {
+  max-width: 800px;
+  margin: auto;
+
+  h1 {
+    margin-bottom: 1em;
+  }
+
+  .taxonomy-terms-cloud {
+    font-size: 1em;
+
+    li {
+      display: block;
+    }
+  }
+
+  .taxo-text-tags {
+
+    li + li::before {
+      content: none;
+    }
+  }
+
+  .taxo-fruits {
+
+    .taxonomy-count,
+    .taxonomy-label {
+      display: inherit;
+      font-size: 1rem;
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5em;
+    }
+
+    .taxonomy-count::before {
+      content: "(";
+    }
+    .taxonomy-count::after {
+      content: ")";
+    }
+  }
+}
+
+.taxonomy-terms {
+  list-style: none;
+  margin: 0;
+  overflow: hidden; 
+  padding: 0;
+  display: inline;
+
+  li {
+    // https://stackoverflow.com/questions/3247358/how-do-i-wrap-text-with-no-whitespace-inside-a-td
+    display: inline;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+}
+
+.taxonomy-count {
+  font-size: 0.8em;
+  line-height: 1.25em;
+  display: inline-block;
+  padding-left: 0.6em;
+  padding-right: 0.6em;
+  margin-left: 0.6em;
+  text-align: center;
+  border-radius: 1em;
+  background-color: $white;
+}
+
+.taxonomy-term {
+  background: $gray-200;
+  border-width: 0;
+  border-radius: 0 3px 3px 0;
+  color: $gray-600;
+  display: inline-block;
+  font-size: 1em;
+  line-height: 1.5em;
+  min-height: 1.5em;
+  max-width: 100%;
+  padding: 0 0.5em 0 1em;
+  position: relative;
+  margin: 0 0.5em 0.2em 0;
+  text-decoration: none;
+  -webkit-transition: color 0.2s;
+  -webkit-clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0);
+  clip-path: polygon(100% 0,100% 100%,0.8em 100%,0 50%,0.8em 0);
+
+  &:hover {
+    background-color: $primary;
+    color: $white;
+
+    .taxonomy-count{
+      color: $dark!important;
+    }
+  }
+
+  &:hover::before {
+    background: $primary; 
+  }
+}
+
+// Example for simple tags layout
+.taxo-text-tags {
+
+  .taxonomy-term {
+    background: none;
+    border-width: 0;
+    border-radius: 0;
+    color: $gray-600;
+    font-size: 1em;
+    line-height: 1.5em;
+    min-height: 1.5em;
+    max-width: 100%;
+    padding: 0;
+    position: relative;
+    margin: 0;
+    text-decoration: none;
+    -webkit-clip-path: none;
+    clip-path: none;
+
+    &:hover {
+      background: none;
+      color: $link-color;
+
+      .taxonomy-count{
+        color: $dark!important;
+      }
+    }
+
+    &:hover::before {
+      background: none;
+    }
+  }
+
+  li + li::before {
+    content: "|";
+    color: $gray-600;
+    margin-right: 0.2em;
+  }
+
+  .taxonomy-count {
+    font-size: 1em;
+    line-height: 1.25em;
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    border-radius: 0;
+    background: none;
+    vertical-align: super;
+    font-size: 0.75em;
+  }
+
+  .taxonomy-term:hover .taxonomy-count {
+    color: $link-color !important;
+  }
+}
+
+// Example for icon tags
+.taxo-fruits {
+
+  .taxonomy-term[data-taxonomy-term]::before {
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font-family: "Font Awesome 5 Free"; 
+    // font-weight: 900; 
+    padding-right: 0.5em;
+    font-size: 2em;
+    min-width: 1.5em;
+    display: inline-block;
+  }
+
+  .taxonomy-term[data-taxonomy-term="apple"]::before {
+    content: "\f5d1";
+    color: red;
+  }
+
+  .taxonomy-term[data-taxonomy-term="carrot"]::before {
+    content: "\f787";
+    color: orange;
+  }
+
+  .taxonomy-term[data-taxonomy-term="lemon"]::before {
+    content: "\f094";
+    color: limegreen;
+  }
+
+  .taxonomy-term[data-taxonomy-term="pepper"]::before {
+    content: "\f816";
+    color: darkred;
+  }
+
+  .taxonomy-term {
+    background: none;
+    border-width: 0;
+    border-radius: 0;
+    color: $gray-600;
+    font-size: 1em;
+    line-height: 2.5em;
+    max-width: 100%;
+    padding: 0;
+    position: relative;
+    margin: 0;
+    text-decoration: none;
+    -webkit-clip-path: none;
+    clip-path: none;
+
+    &:hover {
+      background: none;
+      color: $link-color;
+
+      .taxonomy-count{
+        color: $dark!important;
+      }
+    }
+
+    &:hover::before {
+      background: none;
+      text-shadow: 0 0 3px $gray-900;
+    }
+  }
+
+  .taxonomy-count,
+  .taxonomy-label {
+    display: none;
+  }
+
+  &.taxonomy-terms-article {
+    margin-bottom: 1rem;
+
+    .taxonomy-title {
+      display: none;
+    }
+  } 
+}
+
+.taxonomy-taxonomy-page {
+  max-width: 800px;
+  margin: auto;
+
+  h1 {
+    margin-bottom: 1em;
+  }
+}
+
+.article-meta {
+  margin-bottom: 1.5rem;
+}
+
+.article-teaser.article-type-docs h3 a:before {
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  font-family: "Font Awesome 5 Free"; 
+  content: "\f02d";
+  padding-right: 0.5em;
+}
+
+.article-teaser.article-type-blog h3 a:before {
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  font-family: "Font Awesome 5 Free"; 
+  content: "\f781";
+  padding-right: 0.5em;
+}
+
+.all-taxonomy-terms {
+  font-weight: 500;
+  line-height: 1.2;
+  font-size: 1.5rem;
+
+  &:before {
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font-family: "Font Awesome 5 Free"; 
+    content: "\f122";
+    padding-right: 0.5em;
+  }
+}

assets/scss/main.scss

@@ -26,6 +26,7 @@
 @import "blocks/blocks";
 @import "section-index";
 @import "pageinfo";
+@import "taxonomy";
 
 @if $td-enable-google-fonts {
     @import url($web-font-path);

i18n/de.toml

@@ -18,6 +18,10 @@ other = "Diese Seite durchsuchen…"
 [ui_in]
 other = "in"
 
+# Used in sentences such as "All Tags"
+[ui_all]
+other = "alle"
+
 # Footer text
 [footer_all_rights_reserved]
 other = "Alle Rechte vorbehalten"