From cc05b550c85f676e1cbc2cd3621906ffffc68b21 Mon Sep 17 00:00:00 2001
From: JP Hastings-Spital <jphastings@gmail.com>
Date: Sun, 7 Apr 2024 14:38:28 +0100
Subject: [PATCH] Fix colour of clap button

---
 assets/js/main.js      |  5 +++--
 assets/scss/_main.scss | 48 +++++++++++++++++++++---------------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index ce8a8dd8..2bb751b7 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -79,14 +79,15 @@ const forEveryClapButton = (fn, sameAction = '') => {
 document.addEventListener("DOMContentLoaded", () => {
   let toCheck = []
   forEveryClapButton((btn) => {
+    btn.addEventListener("click", performClap)
+
     const action = btn.parentElement.action
     const lastClappedTo = localStorage.getItem(clapKey(action));
-    toCheck.push(action)
     if (lastClappedTo) {
       btn.parentElement.classList.add('clapped')
       setClapCount(btn, lastClappedTo)
     }
-    btn.addEventListener("click", performClap)
+    toCheck.push(action)
   })
 
   toCheck.forEach((action) => {
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index cb0e37fa..905acaa8 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -617,7 +617,7 @@ a[href^="#fn:"] {
 
 form.claps {
   display: inline-block;
-  &.clapped {
+  &.clapped button {
     color: var(--accent);
   }
 
@@ -874,29 +874,6 @@ mark {
   }
 }
 
-.small-post-list {
-  position: relative;
-  text-align: left;
-  margin: 1em 1.5em;
-  list-style: none;
-
-  @media #{$media-size-phone} {
-    font-size: 1rem;
-    padding: 0;
-    width: fit-content;
-    max-width: calc(100% - 2em);
-    margin-inline: auto;
-  }
-
-  li > svg {
-    color: var(--accent);
-    position: absolute;
-    left: -1.5em;
-    margin-top: 0.25em;
-    text-align: right;
-  }
-}
-
 .homepage {
   .content {
     align-items: center;
@@ -995,6 +972,29 @@ mark {
   }
 }
 
+.small-post-list {
+  position: relative;
+  text-align: left;
+  margin: 1em 1.5em;
+  list-style: none;
+
+  @media #{$media-size-phone} {
+    font-size: 1rem;
+    padding: 0;
+    width: fit-content;
+    max-width: calc(100% - 2em);
+    margin-inline: auto;
+  }
+
+  li > svg {
+    color: var(--accent);
+    position: absolute;
+    left: -1.5em;
+    margin-top: 0.25em;
+    text-align: right;
+  }
+}
+
 .embed iframe {
   border-radius:12px;
   width:100%;