Change terms page

layouts/_default/terms.html

@@ -1,18 +1,18 @@
 {{ define "main" }}
 
-<div class="archive">
-    <h1>{{ .Title }}</h1>
-    <ul>
-        {{ $type := .Type }}
-        {{ range $key, $value := .Data.Terms.Alphabetical }}
-        {{ $name := .Name }}
-        {{ $count := .Count }}
-        {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
-        <h3 class="archive__post-title">
-            <a href="{{ .Permalink }}">{{ .Name }} ({{ $count }})</a>
-        </h3>
-        {{ end }}
-        {{ end }}
-    </ul>
+<div class="terms">
+  <h1>{{ .Title }}</h1>
+  <ul class="terms__list">
+    {{ $type := .Type }}
+    {{ range $key, $value := .Data.Terms.Alphabetical }}
+      {{ $name := .Name }}
+      {{ $count := .Count }}
+      {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }}
+        <li class="terms__term">
+          <a href="{{ .Permalink }}">#{{ .Name }} <span class="terms__term-count">{{ $count }}</span></a>
+        </li>
+      {{ end }}
+    {{ end }}
+  </ul>
 </div>
 {{ end }}

source/css/style.css

@@ -10,6 +10,7 @@
 @import 'pagination';
 @import 'footer';
 
+@import 'terms';
 @import 'archive';
 
 @import 'prism';

source/css/terms.css

@@ -0,0 +1,34 @@
+.terms {
+  width: 100%;
+  max-width: 800px;
+  text-align: left;
+  padding: 20px;
+  margin: 0 auto;
+
+  &__list {
+    padding: 0;
+    padding-left: 20px;
+    margin: 0;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &__term {
+    margin-bottom: 15px;
+
+    &-count {
+      background: var(--light-background-secondary);
+      font-size: 12px;
+      margin-left: 5px;
+      padding: 2px 10px;
+      border-radius: 5px;
+      text-decoration: none;
+
+      .dark-theme & {
+        background: var(--dark-background-secondary);
+      }
+    }
+  }
+}