[feat] Add like button animation

4 files changed, 23 insertions, 7 deletions

diff --git a/layouts/post.njk b/layouts/post.njk
index 53deceb..0e8ba22 100644
--- a/layouts/post.njk
+++ b/layouts/post.njk
@@ -19,7 +19,7 @@ layout: page.njk
       </p>
 {% endif %}
       <nav>
-      <a id="like-post" href="TODO" title="Like Post" aria-label="Like Post"><span></span></a>
+      <a id="like-post" title="Like Post" aria-label="Like Post"><span></span></a>
       {%- set prevPost = collections.all | getPreviousCollectionItem(page) %}
       {%- set nextPost = collections.all | getNextCollectionItem(page) %}
       {%- if nextPost %}<a id="next" rel="next" href="{{ nextPost.url }}">Next</a>{% else %}<div id="end" title="End of latest post"></div>{% endif %}
diff --git a/posts/index.njk b/posts/index.njk
index 64ea7a6..1e3d11f 100644
--- a/posts/index.njk
+++ b/posts/index.njk
@@ -26,7 +26,7 @@
 
 {%- if collections.all.length > 1 %}
       <nav>
-        <a id="like-post" href="TODO" title="Like Post" aria-label="Like Post"><span></span></a>
+        <a id="like-post" title="Like Post" aria-label="Like Post"><span></span></a>
         <a id="prev" rel="prev" href="/archive/{{ previousPage }}/">Older</a>
         <a id="first" rel="first" href="/archive/1/">First</a>
       </nav>
diff --git a/static/main.js b/static/main.js
index 5e7c18c..002a4fe 100644
--- a/static/main.js
+++ b/static/main.js
@@ -23,6 +23,14 @@ document.addEventListener("DOMContentLoaded", () => {
   // Disable Android Chrome "tap to search" when revealing spoiler text
   [...d[q]("mark")].forEach(e => e.tabIndex = "-1");
 
+  // Trigger like button animation
+  d.querySelector("#like-post").addEventListener("click", function() {
+    setTimeout(() => this[l].remove("like-anim"), 700);
+    this[l].add("like-anim");
+    this[l].add("liked");
+  });
+
+  /*
   const ZLM_UNICODE_START = 0xED80;
   const LERFU_INDEX = "ptkflscmx.' 1234bdgvrzjn`-,~    aeiouy    qw    AEIOUY";
   const lerfuLookup = c => String.fromCodePoint(ZLM_UNICODE_START + LERFU_INDEX.indexOf(c));
@@ -38,4 +46,5 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   [...d[q]("[lang=jbo]")].forEach(e => e.innerText = e.innerText.split("").map(latinToZlm).join(""));
+  //*/
 });
diff --git a/static/style.css b/static/style.css
index 64973ab..b871802 100644
--- a/static/style.css
+++ b/static/style.css
@@ -14,7 +14,7 @@ html.invert { --filter: invert(1) }
 }*/
 
 html, pre.hljs, img:not(.emoji):not([alt^=Diagram]),
-#end, .emoji-container { filter: var(--filter) }
+#like-post, #end, .emoji-container { filter: var(--filter) }
 
 html {
   background: #fff;
@@ -487,10 +487,10 @@ nav a:not(:hover) {
 #like-post {
   display: block;
   position: relative;
-  height: 1.7rem;
-  width: 1.7rem;
-  margin: -.05rem auto -1.65em;
-  padding: .6rem .55rem;
+  height: 2.3rem;
+  width: 2.3rem;
+  margin: -.35rem auto -1.95em;
+  padding: .9rem .85rem;
   text-align: center;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
@@ -499,11 +499,18 @@ nav a:not(:hover) {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  cursor: pointer;
 }
 #like-post span {
   margin: 0;
   position: relative;
   transform: rotate(45deg);
+  filter: drop-shadow(0 0px 0 #955ebaff);
+  transition: filter 0s;
+}
+#like-post.like-anim span {
+  filter: drop-shadow(-11px -11px 2px #955eba00);
+  transition: filter .7s ease-out;
 }
 #like-post span, #like-post span::before, #like-post span::after {
   display: block;