layouts/single: Add dev.to link to subhead and use buttons for tags

Signed-off-by: Harsh Shandilya <msfjarvis@gmail.com>

layouts/_default/single.html

@@ -1,10 +1,16 @@
 {{ define "main" -}}
 <div class="post">
   <h1>{{ .Title }}</h1>
-  <p class="post-date"><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "January 2, 2006" }}</time> | ~{{ .ReadingTime }} min read |
-  {{ range .Params.tags }}
-    <span class="tag"><a class="tag" href="{{ "tags/" | absLangURL }}{{ . | urlize }}">#{{.}}</a> </span>
-  {{ end }}
+  <p class="post-date">
+    <span><time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "January 2, 2006" }}</time> | ~{{ .ReadingTime }} min read </span>
+    {{- with .Params.devLink -}}
+      | Also available on <a href="{{ . }}">dev.to</a>
+    {{- end -}}
+  </p>
+  <p>
+    {{ range .Params.tags }}
+    <button class="tag-button"><a class="tag-button" href="{{ "tags/" | absLangURL }}{{ . | urlize }}">#{{.}}</a> </button>
+    {{ end }}
   </p>
   {{- with .Content -}}
     {{ . | replaceRE "(<h[1-2] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗&#xFE0E;</a> ${3}` | safeHTML }}

themes/hyde/assets/css/poole.css

@@ -86,6 +86,18 @@ a:focus {
   color: #757575;
 }
 
+.tag-button {
+  background-color: #202020;
+  border: none;
+  color: white;
+  padding: 7px 12px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  border-radius:8px;
+}
+
 /* Headings */
 h1, h2, h3, h4, h5, h6 {
   margin-bottom: .5rem;