improve pagination and taxonomy terms listing

assets/sass/_litera-soft.scss

@@ -41,6 +41,8 @@ $dark:          $gray-800 !default;
 
 $yiq-contrasted-threshold:  190 !default;
 
+$card-cap-bg:   $gray-100;
+
 // Body
 
 $body-color:                $gray-800 !default;

layouts/partials/pagination.html

@@ -19,4 +19,4 @@
       </ul>
     </div>
     <div class="col-md-4"> </div>
-{{end}}
+{{ end }}

layouts/partials/sidebar.html

@@ -5,11 +5,8 @@
          src="{{ .Site.BaseURL}}img/{{ .Params.img }}" alt="{{ .Params.title }}">
     {{ else if .Params.teaser }}
     <div class="card mt-3">
-      <div class="card-header">
-        <h4 class="card-title">{{ i18n "Teaser" }}</h4>
-      </div>
-      <div class="card-body">
-        <p class="card-text">{{ .Params.teaser }}</p>
+      <div class="card-body bg-light">
+        <h4 class="card-text">{{ .Params.teaser }}</h4>
       </div>
     </div>
     {{ else if .Site.Params.defaultImage }}

layouts/taxonomy/list.html

@@ -5,14 +5,9 @@
   <div class="row">
     <div class="col-md-12">
       <div class="card mt-3 mb-3">
-        <div class="card-header">
-          <h2 class="card-title">{{i18n "topic"}}: {{ .Title }}</h2>
+        <div class="card-body bg-light">
+          <h2 class="card-text">{{i18n "topic"}}: {{ .Title }}</h2>
         </div>
-        {{ with .Content }}
-        <div class="card-body">
-          <p class="card-text">{{ . }}</p>
-        </div>
-        {{ end }}
       </div>
     </div>
   </div>

layouts/taxonomy/terms.html

@@ -4,21 +4,28 @@
 
   <div class="row">
     <div class="col-md-12">
-    <div class="card mt-3 mb-3">
-      <div class="card-header">
-        <h2 class="card-title">{{.Title}}</h2>
-      </div>
-      <div  class="card-body">
-        <ul class="card-text list-inline">
-          {{ range .Data.Terms.Alphabetical }}
-          <li>
-            <a href="{{ .Page.Permalink }}"> 
-              {{ .Page.Title }} </a> ({{ .Count }})</li>
-          {{ end }}
-        </ul>
+      <div class="card mt-3">
+        <div class="card-body bg-light">
+          <h2 class="card-text"> {{ .Title }}</h2>
+        </div>
       </div>
     </div>
-
   </div>
 
+  <div class="row">
+    {{ range .Data.Terms.ByCount }}
+    <div class="col-md-4 mt-3">
+      <div class="card">
+        <a href="{{ .Page.Permalink }}" 
+           class="list-group-item d-flex justify-content-between align-items-center text-decoration-none">
+          {{ .Page.Title }}
+          <span class="badge badge-light badge-pill">{{ .Count }}</span>
+        </a>
+      </div>
+    </div>
+    {{ end }}
+  </div>
+
+</div>
+
 {{ end }}