better design for list template

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;
+}