Spicing up blog list and tag list pages

assets/css/style.css

@@ -65,7 +65,7 @@ a:active {
   align-items: center;
   margin-left: auto;
   margin-right: auto;
-  max-width: 800px;
+  max-width: 1000px;
 }
 
 .header-top .title { margin-right: 1rem; max-width: 400px; }
@@ -121,7 +121,6 @@ mark {
 
 #searchBox {
   position: relative;
-  max-width: 300px;
   height: 30px;
   margin: 20px auto;
 }
@@ -137,7 +136,7 @@ mark {
   bottom: 0;
   border-radius: 15px;
   outline: 0;
-  font-size: 15px;
+  /* font-size: 15px; */
   color: #707070;
   background-color:#f6f6f6;
   border: solid 1px #c9c9c9;
@@ -159,10 +158,10 @@ mark {
 #searchResults {
   display: none;
   position: absolute;
-  max-width: 600px;
+  max-width: 1000px;
   /* min-width: 300px; */
   margin: 0 auto;
-  top: 330px;
+  top: 230px;
   left: 0;
   right: 0;
   padding: 5px;
@@ -195,16 +194,22 @@ mark {
 /*
 ** TAGS
 */
-#tags ul {
+.tags {
+  text-align: left;
+}
+.tags ul {
   margin: 0 auto;
   display: flex;
   padding: 0;
-  justify-content: center;
   flex-wrap: wrap;
   list-style: none;
 }
 
-#tags li a {
+.tags-page ul {
+  justify-content: center;
+}
+
+.tags li a {
   display: block;
   height: 24px;
   margin: 5px;
@@ -216,7 +221,7 @@ mark {
   text-decoration: none;
 }
 
-#tags li a:hover {
+.tags li a:hover {
   border: 1px solid black;
 }
 
@@ -231,6 +236,7 @@ mark {
   margin-left: auto;
   margin-right: auto;
   max-width: 650px;
+  text-align: left;
 }
 
 .bloglist-date {
@@ -240,10 +246,34 @@ mark {
 }
 
 .bloglist {
+  text-align: left;
   font-size: 1.5rem;
   padding: 20px 0;
 }
 
+.bloglist-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+.bloglist-item-tag a {
+  color: gray;
+  text-decoration: none;
+  font-size: 0.75em;
+}
+
+.bloglist-item-tag a:hover {
+  color: #555;
+}
+
+@media (max-width: 850px) {
+  .bloglist-item-tag {
+    display: none;
+  }
+}
+
 .bloglist hr.separator {
   width: 10px;
   margin: 30px auto;
@@ -255,7 +285,7 @@ mark {
 */
 #feedList {
   text-align: left;
-  max-width: 800px;
+  max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -282,10 +312,12 @@ main {
 }
 
 article {
-  padding-bottom: 20px;
+  padding-bottom: 2rem;
 }
 
 main .e-content {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
   text-align: left;
 }
 
@@ -346,7 +378,7 @@ footer a:link {
 }
 
 .footer-navs {
-  max-width: 800px;
+  max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
   display: flex;

layouts/blog/list.html

@@ -28,7 +28,17 @@
       {{ end }}
       <p class="bloglist-date">{{ .Key }}</p>
       {{ range .Pages }}
-        <p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
+        <div class="bloglist-item">
+          <p><a href="{{ .Permalink }}">{{ .Title }}</a></p>
+          <p class="bloglist-item-tag">
+            {{ range .Params.tags }}
+            {{ $name := . }}
+            {{ with $.Site.GetPage (printf "/tags/%s" (. | urlize)) }}
+            <span><a href="{{ .Permalink }}">#{{ $name }}</a> </span>
+            {{ end }}
+            {{ end }}
+          </p>
+        </div>
       {{ end }}
     {{ end }}
   </div>

layouts/partials/tags/all.html

@@ -1,5 +1,5 @@
   <!-- tags -->
-  <details id="tags">
+  <details class="tags tags-all">
     <summary>Tags</summary>
     <ul>
       {{ range .Site.Taxonomies.tags.ByCount }}

layouts/partials/tags/page.html

@@ -1,5 +1,5 @@
 <!-- List the tags that apply to this page -->
-<div id="tags">
+<div class="tags tags-page">
   <ul>
     {{ range .Param "tags" }}
       {{ $name := . }}

layouts/tags/list.html

@@ -1,14 +1,16 @@
 {{ define "main"}}
   {{ partial "header.html" . }}
   <main>
-  {{ partial "search.html" . }}
-  {{ partial "tags/all.html" . }}
+  <div class='bloglist-teaser' style="margin-top: 2rem;">
+    Here you'll find <strong>{{ len .Pages | lang.NumFmt 0 }} posts</strong>
+    about <u>{{ .Title }}</u> </strong>.
+  </div>
   <!-- contents -->
   <div class="bloglist">
     {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
     {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
     {{ if (ne $index 0) }}
-    <hr class="separator">
+    <br/>
     {{ end }}
     <p class="date">{{ .Key }}</p>
     {{ range .Pages }}

layouts/tags/single.html

@@ -18,7 +18,7 @@
     </ul>
   </div>
   <!-- content -->
-  <div id="contentBody">
+  <div class="e-content">
     {{ .Content }}
   </div>
   {{ partial "footer.html" . }}

layouts/tags/terms.html

@@ -1,7 +1,26 @@
 {{ define "main"}}
   {{ partial "header.html" . }}
   <main>
-    {{ partial "tags/all.html" . }}
+    {{ $posts := where site.RegularPages "Type" "blog" }}
+    {{ $postCount := len $posts }}
+    {{ range last 1 $posts }}
+      {{ $tags := .Site.Taxonomies.tags }}
+      <div class='bloglist-teaser'>
+      Here you'll find <strong>{{ $postCount | lang.NumFmt 0 }} posts</strong>
+      written spanning <strong>{{ len $tags }} topics</strong>.
+      </div>
+    {{ end }}
+    <br/>
+    <div class="tags tags-all">
+    <ul>
+      {{ range .Site.Taxonomies.tags.ByCount }}
+        <li><a href="{{ .Page.Permalink }}">{{ .Page.Title }} ({{ .Count }})</a></li>
+      {{ end }}
+    </ul>
+  </div>
+  <div class="e-content">
+    {{ .Content }}
+  </div>
   </main>
   {{ partial "footer.html" . }}
 {{ end }}