diff --git a/assets/js/kudos.js b/assets/js/kudos.js
new file mode 100644
index 0000000..c904501
--- /dev/null
+++ b/assets/js/kudos.js
@@ -0,0 +1,23 @@
+// disables kudos button after click
+
+document.addEventListener('DOMContentLoaded', () => {
+ const kudosButton = document.querySelector('.kudos-button');
+ const kudosText = document.querySelector('.kudos-text');
+ const emojiSpan = kudosButton.querySelector('.emoji');
+
+ kudosButton.addEventListener('click', () => {
+ kudosButton.disabled = true;
+ kudosButton.classList.add('clicked');
+
+ kudosText.textContent = 'Thanks!';
+ kudosText.classList.add('thanks');
+
+ // Rotate the emoji
+ emojiSpan.style.transform = 'rotate(360deg)';
+
+ // Change the emoji after rotation
+ setTimeout(() => {
+ emojiSpan.textContent = '🎉';
+ }, 150); // Half of the transition time for a smooth mid-rotation change
+ });
+});
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 09f93ce..5f288f0 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -41,7 +41,14 @@
{{- end }}
{{- if eq $reply true }}
- Enjoyed this?
+
+
+ Enjoyed this?
+
+ {{ $kudos := resources.Get "js/kudos.js" | minify }}
+
📧 Reply by email
{{- end }}
diff --git a/static/css/custom.css b/static/css/custom.css
index dde813d..9e1c13f 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -404,26 +404,37 @@ p:has(+ ul) {
}
/* Cabin kudos styling */
-.post_kudos {
+.kudos-container {
display: flex;
+ align-items: center;
}
-button.kudos {
- border: 0;
- background-color: transparent;
+.kudos-button {
+ background: none;
+ border: none;
cursor: pointer;
- display: flex;
- color: var(--off-fg);
font-size: 1.2rem;
padding: 0;
- transition: all .2s ease-in-out;
+ margin-right: 0.25rem;
}
-button.kudos:hover {
- transform: scale(1.1);
- text-shadow: var(-off-bg) 0 0 1px;
+.kudos-button:disabled {
+ cursor: default;
}
-button.kudos:active {
- transform: scale(0.9);
+.kudos-button .emoji {
+ display: inline-block;
+ transition: transform 0.3s ease;
+}
+
+.kudos-button.clicked .emoji {
+ transform: rotate(360deg);
+}
+
+.kudos-text {
+ transition: font-style 0.3s ease;
+}
+
+.kudos-text.thanks {
+ font-style: italic;
}
\ No newline at end of file