improve tags display everywhere

themes/secluded/assets/scss/_list.scss

@@ -48,14 +48,6 @@
     }
 
     &-meta {
-        margin: 5px 0px 13px 0px;
-    }
-
-    &-tags {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 5px;
-        margin: 5px 0px 13px 0px;
+        margin: 5px 0px 10px 0px;
     }
 }

themes/secluded/assets/scss/_main.scss

@@ -75,8 +75,7 @@ pre {
   border: 2px solid unset;
   border-radius: 7px;
 }
-code,
-pre {
+code, pre {
   font-size: 16px;
   font-family: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
   color: $dark;
@@ -113,11 +112,8 @@ input[type="text"]:focus {
 }
 
 .content {
-  h2,
-  p,
-  li,
-  td {
-    a {
+  h2, p, li, td {
+    a:not(.button) {
       color: $dark;
       text-decoration: none;
       background-image: linear-gradient(
@@ -233,3 +229,11 @@ footer {
     font-style: italic;
   }
 }
+
+.tags {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin: 10px 0px 13px 0px !important;
+}

themes/secluded/assets/scss/_single.scss

@@ -7,17 +7,21 @@
   }
 }
 .frontmatter {
-    padding: 15px 0;
+  padding: 15px 0px 7px 0px;
   border-bottom: 2px solid $dark;
 
-    a {
+  a:not(.button) {
     color: $dark;
     text-decoration: none;
-        background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
+    background-image: linear-gradient(
+      120deg,
+      $gradient-left 0%,
+      $gradient-right 100%
+    );
     background-repeat: no-repeat;
     background-size: 0 0;
     background-position: 100% 21%;
-        transition: .15s ease-out;
+    transition: 0.15s ease-out;
     border-radius: 5px;
     padding-left: 4px;
     margin-left: -3px;
@@ -31,9 +35,9 @@
     &::after {
       position: relative;
       content: "\FEFF°";
-            margin-left: 0.10em;
+      margin-left: 0.1em;
       font-size: 90%;
-            top: -0.10em;
+      top: -0.1em;
       color: $light-highlight;
       font-feature-settings: "caps";
       font-variant-numeric: normal;
@@ -60,19 +64,28 @@
 }
 
 .content {
-    h2, h3 {
+  h2,
+  h3 {
     margin-top: 20px;
     margin-bottom: -10px;
   }
-    h2, h3, p, li, td {
+  h2,
+  h3,
+  p,
+  li,
+  td {
     a {
       color: $dark;
       text-decoration: none;
-            background-image: linear-gradient(120deg,$gradient-left 0%,$gradient-right 100%);
+      background-image: linear-gradient(
+        120deg,
+        $gradient-left 0%,
+        $gradient-right 100%
+      );
       background-repeat: no-repeat;
       background-size: 0 0;
       background-position: 100% 21%;
-            transition: .15s ease-out;
+      transition: 0.15s ease-out;
       border-radius: 5px;
       padding-left: 4px;
       margin-left: -3px;
@@ -86,9 +99,9 @@
       &::after {
         position: relative;
         content: "\FEFF°";
-                margin-left: 0.10em;
+        margin-left: 0.1em;
         font-size: 90%;
-                top: -0.10em;
+        top: -0.1em;
         color: $light-highlight;
         font-feature-settings: "caps";
         font-variant-numeric: normal;

themes/secluded/layouts/_default/list.html

@@ -28,12 +28,14 @@
                 <p class="posts-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{.Permalink}}">{{.Title}}</a></p>
                 <p class="posts-summary" style="view-transition-name: post-summary-{{ .Title | urlize }}">{{ .Summary | truncate 140 }}</p>
                 <p class="posts-meta"><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }}</p>
-                <p class="posts-tags">
+                {{- if .Params.tags }}
+                <p class="tags">
                     {{ $title := .Title }}
                     {{- range (.GetTerms "tags") }}
                     <a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
                     {{- end }}
                 </p>
+                {{- end }}
             </li>
             {{- end }}
             {{- end }}

themes/secluded/layouts/_default/single.html

@@ -5,6 +5,14 @@
             <h1 class="post-title" style="view-transition-name: post-title-{{ .Title | urlize }}"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>
             <p><strong>Reading Time:</strong> {{ .ReadingTime }} minutes | <strong>Published:</strong> {{ dateFormat "2006-01-02" .Date }} | <strong>Last Edited:</strong> {{ dateFormat "2006-01-02" .Lastmod }}</a></p>
             <p><strong>Download this post as:</strong> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.pdf">PDF,</a> <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.epub">EPUB,</a> or <a href="{{ .Permalink | replaceRE "^[^/]+://[^/]+/(.*)/$" "$1" }}.txt">plaintext</a></p>
+            {{- if .Params.tags }}
+            <p class="tags">
+                {{ $title := .Title }}
+                {{- range (.GetTerms "tags") }}
+                <a class="button" href="{{.Permalink}}" style="view-transition-name: post-tags-{{ $title | urlize }}{{ .Title | urlize }}">{{.Title}}</a>
+                {{- end }}
+            </p>
+            {{- end }}
             {{- if .Params.rss_only }}
             <aside class="admonition note">
                 <p><strong>Note:</strong> this is an RSS-only post; it's exclusively publicised through <a href="/posts/index.xml">my RSS feed.</a> Read about <a href="https://daverupert.com/2018/01/welcome-to-rss-club/">RSS Club</a> for more information.</p>