Give more space between post header and post content

- gmi: Show last mod along with post date in post meta
- both: Show simple list of tags at the end of a post
  - for web: This makes tags look like "tags" rather than "word-links",
    with removed text underline and added background color to the links.
    Small opacity/brightness change applied on hover for both dark and
    light modes.
- web: Adjust content structuring
  - hr before footnotes is removed. The footnotes is now borderless (hr
    is still visible on browsers without CSS)
  - Add upper border on footer (implemented by using bottom border on
    after content, which is now visible regardless of whether content
    exists)
  - Boldify footnotes heading - creates a visual separation in place of
    removed hr
- web: Adjust color of light text - it's now lighter and bluer to fit
  the background.

assets/main.css

@@ -52,7 +52,7 @@
         --accent-bg-light: #303035;
         --code-bg: #3e3e4b;
         --text: #eee;
-        --text-light: #cecece;
+        --text-light: #b8b8c6;
         --non-text-light: #999fbf;
 
         --border: #aaa;
@@ -436,25 +436,6 @@ nav .pfp-text {
 /*******************************************************************
  * Page sections
  */
-/* Differentiating between normal content links and meta content links */
-.meta a, .post-meta :not(.tags) a, footer a, #after-content a {
-	text-decoration: none;
-    @media (prefers-color-scheme: dark) {
-        color: var(--link-alt);
-    }
-}
-.meta a:hover, .post-meta :not(.tags) a:hover, footer a:hover, #after-content a:hover {
-    color: var(--accent-light);
-    text-decoration: underline;
-    @media (prefers-color-scheme: dark) {
-        opacity: .75;
-    }
-}
-.post-meta .tags a, .post-meta .tags a:visited {
-    text-decoration: underline;
-    color: var(--text-light);
-}
-
 main, #after-content {
     /* For better reading experience.
      * I don't want paragraphs to be too narrow, it looks ugly; Though I don't
@@ -465,17 +446,40 @@ main, #after-content {
 	margin: auto;
 	padding: 0 5%;
 }
-#after-content {
+
-	margin-bottom: 4rem;
+/* Differentiating between normal content links and meta content links */
+.meta a, footer a, #after-content a {
+	text-decoration: none;
+    @media (prefers-color-scheme: dark) {
+        color: var(--link-alt);
+    }
 }
-#after-content:empty {
+.meta a:hover, footer a:hover, #after-content a:hover {
-    display: none;
+    color: var(--accent-light);
+    text-decoration: underline;
+    @media (prefers-color-scheme: dark) {
+        opacity: .75;
+    }
 }
+
+/* Tags */
+#after-content .tags a, #after-content .tags a:visited {
+    padding: .2rem .5rem;
+    color: var(--text-light);
+    background-color: var(--accent-bg);
+}
+#after-content .tags a:hover {
+    text-decoration: none;
+    @media (prefers-color-scheme: light) {
+        filter: brightness(95%);
+    }
+}
+
 footer {
 	text-align: center;
 	font-size: .9rem;
 	color: var(--text-light);
-	padding: 1rem 0 1rem 0;
+	padding: .5rem 0 1rem 0;
     margin: 0 5%;
 }
 footer a {
@@ -545,7 +549,7 @@ a.anchor:hover {
 	margin-bottom: 0.4rem;
 }
 #post-header {
-	margin-bottom: 2rem;
+	margin-bottom: 2.5rem;
 }
 .post-meta, .meta, footer, #after-content {
 	font-size: .9rem;
@@ -553,8 +557,8 @@ a.anchor:hover {
 }
 
 #content div#main {
-    border-bottom: 2px solid var(--border-light);
     padding-bottom: 1rem;
+    margin-bottom: 5rem;
 }
 
 .footnotes {
@@ -562,9 +566,6 @@ a.anchor:hover {
 	font-size: .9rem;
     color: var(--text-light);
 }
-.footnotes #footnotes-heading {
-    margin-top: 1.5rem;
-}
 .footnotes ol {
     margin-top: none;
 }

content/posts/2024-04-10-vim-column-editing/index.md

@@ -2,13 +2,13 @@
 date = '2024-04-10T05:22:46Z'
 description = 'The visual block mode in Vim/Neovim is quite powerful. You can use it for "column" editing and vertically pasting blocks of text similar to paste(1).'
 draft = false
-footnotes_heading = 'Footnotes'
+
+hasFootnotes = true
 
 outputs = ['html', 'gemtext']
 slug = 'vim-column-editing'
 tags = ['howto', 'terminal']
 title = 'Vim visual block mode for column editing'
-EOF = false
 
 publicReplyTo = "mailto:~hedy/posts@lists.sr.ht?cc=hedy%20%3Chedy.dev%40protonmail.com%3E&in-reply-to=%3Cn7UVukOUgCClct4d56HGVviI9Ig0QFF1dp0XIjC1EHZkOq9kBq4oHhA_CpVUa1LKxD73wJAZn4kUaTBoIQtENvNDF6RiSUsMfbN8fT4y2fI%3D%40protonmail.com%3E&subject=Re%3A%20Vim%20visual%20block%20mode%20for%20column%20editing"
 +++

layouts/_default/baseof.html

@@ -12,8 +12,10 @@
                 {{ block "main" . }}{{ end }}
             </div>
         </main>
-        <!-- Don't use line breaks here, we want to hide this section if 'after' is empty. -->
+        <section id="after-content">
-        <section id="after-content">{{- block "after" . }}{{ end }}</section>
+            {{- block "after" . }}{{ end }}
+            <hr style="margin-top: 4rem; margin-bottom: 0;"/>
+        </section>
         <footer>
             {{ partial "footer.html" . }}
         </footer>

layouts/partials/footer.html

@@ -1,4 +1,3 @@
-<hr style="display: none;">
 <p>
 Copyright © {{ with .Site.Params.CopyrightYearStart }}{{ . }}-{{ end -}}
 {{ now.Format "2006" }}

layouts/partials/processed-content.html

@@ -1,5 +1,5 @@
 {{ $footnotes := `(<div class="footnotes" role="doc-endnotes">
 <hr>)` -}}
-{{ $footnotesWithHeading := printf `<div class="footnotes" role="doc-endnotes">
+{{ $footnotesWithHeading := printf `<hr style="display: none;"><div class="footnotes" role="doc-endnotes">
-<hr><p id="footnotes-heading">%s</p>` "Footnotes" -}}
+<p id="footnotes-heading"><strong>%s</strong></p>` "Footnotes" -}}
 {{ .Content | replaceRE $footnotes $footnotesWithHeading | safeHTML -}}

layouts/partials/tags.gmi

@@ -1,4 +1,4 @@
 {{ $taxonomy := "tags" -}}
 {{ with .Page.Param $taxonomy -}}{{ with $.Prefix }}{{ . | safeHTML }}{{ end }}
 {{- range $index, $tag := . -}}{{- with $.Page.Site.GetPage (printf "/%s/%s" $taxonomy $tag) -}}
-{{- if $index -}}, {{ end -}}#{{ $tag | urlize }}{{ end }}{{ end }}{{ with $.Postfix }}{{ . | safeHTML }}{{ end }}{{ end }}
+{{- if $index -}}, {{ end -}}#{{ $tag | urlize }}{{ end }}{{ end }}{{ with $.Postfix }}{{ . | safeHTML }}{{ end }}{{ end -}}

layouts/partials/tags.html

@@ -5,7 +5,7 @@
     <span class="tags">
     {{- range $index, $tag := $tags -}}
         {{- $taglink := $.Page.Site.GetPage (printf "/%s/%s" $taxonomy $tag) -}}
-        {{- if $index -}}, {{ end -}}<a href="{{ $taglink.RelPermalink }}">{{ $tag | urlize }}</a>
+        {{- if $index -}}&nbsp;&nbsp;{{ end -}}<a class="tag" href="{{ $taglink.RelPermalink }}">#{{ $tag | urlize }}</a>
     {{- end }}
     </span>
 {{- end }}

layouts/posts/single.gmi

@@ -1,7 +1,7 @@
 {{ define "content" -}}
 # {{ $.Title }}
 
-{{ .Date.UTC.Format "Jan 02, 2006" }}
+{{ .Date.UTC.Format "Jan 02, 2006" }}{{ partial "lastmod.gmi" (dict "Page" . "Prefix" " (updated on " "Postfix" ")") }}
 
 {{ partial "processed-content.gmi" . }}
 
@@ -12,8 +12,7 @@ EOF
 => {{ with .Params.publicReplyTo }}{{ . |safeHTML }}{{ else }}mailto:~hedy/posts@lists.sr.ht?subject={{ $subject }}{{ end }} Reply via email publicly (plain-text only)
 => mailto:{{ .Site.Author.email }}?subject={{ $subject }} Reply via email privately
 
-{{ .WordCount }} words
+{{ .WordCount }} words{{ partial "tags.gmi" (dict "Page" . "Prefix" " · ") }}
-{{ partial "lastmod.gmi" (dict "Page" . "Prefix" "This post was last updated on " "Postfix" ".") }}
 
 => . ← Gemlog
 => / ← Capsule home

layouts/posts/single.html

@@ -19,7 +19,7 @@
 </div>
 {{- end }}
 {{- define "after" }}
-{{ if (eq .Params.EOF false) }}{{ else }}<p id="#EOF">EOF</p>{{ end }}
+<p>{{ partial "tags.html" (dict "Page" .) }}</p>
 <section class="comments">
   <p>
   Questions, comments? Send an email to my{{ $subject := printf "Re: %s" .Title }}