feat(layout): misc improvements to markup and css

assets/static/css/bcarlin.css

@@ -50,7 +50,6 @@
   --pico-font-family-sans-serif: 'Nunito Sans', sans-serif, var(--pico-font-family-emoji);
   --pico-card-sectioning-background-color: transparent;
   --pico-typography-spacing-vertical: calc(1.5 * var(--pico-spacing));
-  --markup-color: rgb(194 198 207 / 100%);
 }
 
 @media only screen and (prefers-color-scheme: light) {
@@ -61,6 +60,7 @@
     --pico-code-color: inherit;
 
     --color-codeblock-meta-background: rgb(255 255 255 / 100%);
+    --markup-color: rgb(194 198 207 / 100%);
   }
 
   .admonition.warning {
@@ -79,7 +79,9 @@
     --pico-code-color: inherit;
 
     --color-codeblock-meta-background: rgb(0 0 0 / 30%);
+    --markup-color: rgb(89 94 104 / 100%);
   }
+
   .admonition.warning {
     --admonition-background-color: rgb(52 46 38 / 100%);
     --admonition-border-color: rgb(255 208 143 / 100%);
@@ -230,11 +232,6 @@ body {
   }
 }
 
-@media (width >= 1024px) {
-  .metadata p {
-    display: inline;
-  }
-}
 
 
 /*
@@ -264,6 +261,15 @@ main {
         margin-top: 0.3em;
       }
 
+      @media (width >= 1024px) {
+        .metadata p {
+          display: inline;
+        }
+      }
+
+      .tags i {
+        margin-inline-start: 0.5em;
+      }
 
       .category a {
         font-family: var(--pico-font-family-sans-serif);

layouts/blog/single.html

@@ -5,10 +5,10 @@
     <header>
       {{ with .GetTerms "categories" }}
         <p class="category">
-        {{ range . }}
+        {{- range . }}
           <a class="p-category" rel="tag" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-          {{ break }}
-        {{ end }}
+          {{- break }}
+        {{- end }}
       </p>
       {{ end }}
       <h1 class="p-name">