better design for list template

themes/hugo-sustain/layouts/_default/list.html

@@ -3,33 +3,67 @@
   <div id="wrap">
     <!-- Header -->
     {{ partial "header" . }}
+    <!-- is page a category or tag page? -->
+    {{- $selection := false -}}
+    {{- if (isset .Data "Singular") -}}
+      {{- $selection = true -}}
+    {{- end -}}
     <div class="container archive">
       <h1>{{ .Site.Params.Blog.Headline }}
-        {{ if (isset .Data "Singular") }}
+        {{- if $selection -}}
           <br />({{ .Data.Singular | humanize }}: {{lower .Title}})
-          <span class="article-rss"><a href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
+        {{- end -}}
-        {{ else }}
-          <span class="article-rss"><a href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i></a></span>
-        {{ end }}
       </h1>
       {{ if .Site.Params.Social.CommentsProvider }}
         <p><a href="{{ .Site.Params.Social.CommentsProvider }}">Subscribe</a> to my Blog via Diaspora, Mastodon, Friendica or GNU Social. Never miss a article! Reshare, like and discuss it!</p>
       {{ end }}
-      <p class="categories">
+      <div class="metadata-page">
-        <a class="label label-success" href="/blog">All</a>
+        <div class="row vertical-align">
-        {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
+          <div class="col-xs-3 col-md-2 text-right">
-          <a class="label label-success" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
+            <em>Languages:</em>
-            {{ humanize $name }}
+          </div>
-          </a>
+          <div class="col-xs-9 col-md-10">
-        {{ end }}
+            <a class="label label-success {{if not $selection}}active{{end}}" href="/blog">All</a>
-      </p>
+            {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
+              <a class="label label-success {{if eq $name $.Title}}active{{end}}" href="{{ "/categories/" | relLangURL }}{{ $name | urlize }}">
+                {{- humanize $name -}}
+              </a>
+            {{- end -}}
+          </div>
+        </div>
+        <div class="row vertical-align">
+          <div class="col-xs-3 col-md-2 text-right">
+            <em>Tags:</em>
+          </div>
+          <div class="col-xs-9 col-md-10">
+            <a class="label label-success {{if not $selection}}active{{end}}" href="/blog">All</a>
+            {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
+              <a class="label label-success {{if eq $name $.Title}}active{{end}}" href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}">
+                {{- humanize $name -}}
+              </a>
+            {{- end -}}
+          </div>
+        </div>
+        <div class="row vertical-align">
+          <div class="col-xs-3 col-md-2 text-right">
+            <em>RSS Feed:</em>
+          </div>
+          <div class="col-xs-9 col-md-10">
+            {{ if $selection }}
+              <span class="article-rss"><a class="label label-rss" href="/{{ .Data.Plural }}/{{lower .Title}}/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i> Subscribe to »{{.Title}}«</a></span>
+            {{ else }}
+              <span class="article-rss"><a class="label label-rss" href="/index.xml" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i>  Subscribe to all posts</a></span>
+            {{ end }}
+          </div>
+        </div>
+      </div>
       
       <div class="panel panel-default panel-overview">
         <div class="blogpost">
           {{ range .Paginator.Pages.ByPublishDate.Reverse }}
             <div class="blog-summary">
               <h4><strong><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></strong></h4>
-              <div class="metadata">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
+              <div class="metadata-summary">Posted on {{ .Date.Format "2 January 2006" }} - Tagged with {{ range $i, $tag := .Params.tags }}{{ if $i }}, {{ end }}<a href="/tags/{{ lower $tag }}">{{ $tag }}</a>{{ end }}</div>
               <p>{{ .Summary }} <a class="learn-more" href="{{ .RelPermalink }}"></a></p>
             </div>
           {{ end }}

themes/hugo-sustain/static/css/custom.css

@@ -15,10 +15,15 @@ div.footer {
   background-color: rgba(92, 139, 184, 0.6);
   color: #FFF;
 }
-.container a.label-success:hover {
+.container a.label-success:hover,
+.container a.label-success.active {
   background-color: rgba(92, 139, 184, 0.9);
   color: #FFF;
 }
+.container a.label-rss {
+  background-color: rgba(242, 101, 34, 0.9);
+  color: #FFF;
+}
 .container h1 {
   font-weight: bold;
   color: #0D76EC;
@@ -76,14 +81,18 @@ div.contact p {
 }
 
 /* BLOG */
-.categories {
+.metadata-page {
   font-size: 18px;
-  margin: 1em 0 3em 0;
+  text-align: left;
+  margin: 3em 0 1em 0;
+}
+.metadata-page .row {
+  padding-bottom: .5em;
 }
 .blog-summary {
   padding-bottom: 1em;
 }
-.metadata {
+.metadata-summary {
   font-size: 0.8em;
   opacity: 0.7;
 }
@@ -137,3 +146,9 @@ figure.pull-right {
 figure.pull-left {
   padding: 10px 10px 10px 0;
 }
+
+/* HELPER CLASSES */
+.vertical-align {
+  display: flex;
+  align-items: center;
+}