Change link redirect to center messsage footer

Previously when you liked a post it would redirect you back to the
previous page with the top of the post at the top of the screen. This
was jarring and weird and I didn't like it at all.

This change makes it so that the footer of the message you liked
appears in the center of the screen, which is (in my experience) much
closer to where it usually is when you click the like button.

Before: when you click the like button the scroll resets so the top of the
message is at the top of the screen.

After: when you click the like button the scroll resets so that the footer of
the message is in the center of the screen.

Wanted: a way to redirect back to the original page *without* resetting the
scroll position.

src/assets/style.css

@@ -87,6 +87,32 @@ pre {
   color: black;
   text-decoration: none;
 }
+
+/*
+ * HACK: centered-footer
+ *
+ * When someone likes a message we want to submit the form and then redirect
+ * them back to the original page. Unfortunately when you link to anchor tags
+ * that scrolls the browser so that they're at the *top* of the page, not the
+ * center of the page. In our view we have an empty div with an appropriate
+ * anchor tag, so here we use CSS to center it on the screen.
+ *
+ * The code below creates padding-top that takes up 50% of the height of the
+ * viewport and then gets rid of it with negative margin. This has no effect
+ * on the display of the item, but means that when we link to the anchor tag
+ * it centers this empty element vertically on the screen.
+ *
+ * We also use `pointer-events: none` to ensure that this invisible div doesn't
+ * capture cursor events (clicks, drags, etc) on surrounding elements, because
+ * otherwise we could have a problem where someone clicks above the invisible
+ * div but the browser things they're clicking the gigantic amount of padding.
+ */
+.message > .centered-footer {
+  padding-top: 50vh;
+  margin-top: -50vh;
+  pointer-events: none;
+}
+
 .message > footer > * {
   margin-right: 1rem;
   text-decoration: none;

src/routes/like.js

@@ -7,6 +7,6 @@ module.exports = async function like (ctx) {
 
   await vote.publish(msgId, value)
 
-  referer.hash = encodeURIComponent(ctx.params.id)
+  referer.hash = `centered-footer-${encodeURIComponent(ctx.params.id)}`
   ctx.redirect(referer)
 }

src/routes/views/components/post.js

@@ -1,6 +1,7 @@
 const {
   a,
   abbr,
+  div,
   header,
   img,
   section,
@@ -67,6 +68,18 @@ module.exports = ({ msg }) => {
       )
     ),
     article({ class: 'content', innerHTML: markdownContent }),
+
+    // HACK: centered-footer
+    //
+    // Here we create an empty div with an anchor tag that can be linked to.
+    // In our CSS we ensure that this gets centered on the screen when we
+    // link to this anchor tag.
+    //
+    // This is used for redirecting users after they like a post, when we
+    // want the like button that they just clicked to remain close-ish to
+    // where it was before they clicked the button.
+    div({ id: `centered-footer-${encoded.key}`, class: 'centered-footer' }),
+
     footer(
       form({ action: url.likeForm, method: 'post' },
         button({