Add terms layout and section icon to taxonomy.html

themes/hugodocs/layouts/_default/taxonomy.html

@@ -5,14 +5,16 @@
 	</header>
 	<div class="body-copy taxonomies">
 		{{range .Data.Pages}}
-		<a href="{{.Permalink}}" class="taxonomy">
-		<article>
+		<article class="taxonomy">
 			<header>
-				<h2>{{.Title}}</h2>
+				<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
+				<div class="list-header-image-wrapper">
+					<img src="{{.Site.BaseURL}}images/{{.Section}}.svg" alt="">
+					<!-- <span>{{replace .Section "-" " " | title}}</span> -->
+				</div>
 			</header>
 			<p>{{.Description}}</p>
 		</article>
-		</a>
 		{{end}}
 	</div>
 </main>

themes/hugodocs/pipeline/scss/base/_typography.scss

@@ -18,17 +18,15 @@ h1.page-title {
     font-size: 2.25em;
     padding-top: 1em;
   }
-  a {
-    i[class^="icon-"] {
-      margin-left:-.15em;
-    }
+  i[class^="icon-"] {
+    margin-left: -.15em;
   }
 }
 
 h2,
 h3 {
   padding-bottom: 24px;
-  padding-right:1.5em;
+  padding-right: 1.5em;
 }
 
 h2 {

themes/hugodocs/pipeline/scss/components/_table-of-contents.scss

@@ -47,6 +47,7 @@ aside#toc {
     box-shadow: none;
     top: $site-header-height + 20px;
     left: calc(#{$site-navigation-width} + #{$content-max-width} + 3em);
+    bottom:auto;
     opacity: 1;
     transform: scale(1);
   }

themes/hugodocs/pipeline/scss/components/_taxonomy-lists.scss

@@ -4,12 +4,17 @@
     background-color: transparent;
     color: $base-font-color;
     margin-bottom: 1em;
-    &:before,
-    &:after,
-    &:hover {
-      background-color: transparent;
-      border: none;
-      color: $base-font-color;
+    position: relative;
+    a {
+      width:100%;
+      color:$base-font-color;
+      &:before,
+      &:after,
+      &:hover {
+        background-color: transparent;
+        border: none;
+        color: $base-font-color;
+      }
     }
     h2 {
       padding-bottom: 2px;
@@ -22,7 +27,28 @@
   .taxonomy-term {
     font-size: 1.3em;
     display: inline-block;
-    width:auto;
-    clear:both;
+    width: auto;
+    clear: both;
+  }
+  .list-header-image-wrapper {
+    max-width: 30px;
+    position: absolute;
+    top: 4px;
+    right: 0px;
+    img {
+      max-width: 30px;
+      min-width: 30px;
+      margin-bottom: 0px;
+      margin-left: auto;
+      margin-right: auto;
+      display: block;
+    }
+    span {
+      font-size: .7em;
+      display: block;
+      margin-top: 0px;
+      text-align: center;
+      line-height: 1.2;
+    }
   }
 }