[feat] Add like button animation

2 files changed, 21 insertions, 5 deletions

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;