From 301571c94a0fbfb1ff6880ca295960248bccd63f Mon Sep 17 00:00:00 2001
From: Pastel de N4ta <n4ta@NULL.Home>
Date: Wed, 2 Oct 2024 15:20:30 +0100
Subject: [PATCH] Changed anchor tag donate buttons to use CSS variables for
 more consistent declaration

Donate buttons now use the variables used in the a.button declaration
for more consistent declaration
---
 static-src/styles/typography.scss | 44 +++++++++++--------------------
 1 file changed, 16 insertions(+), 28 deletions(-)

diff --git a/static-src/styles/typography.scss b/static-src/styles/typography.scss
index 2c1e527..cf9d3b3 100644
--- a/static-src/styles/typography.scss
+++ b/static-src/styles/typography.scss
@@ -105,40 +105,28 @@ a.button.button--donate {
 a.button.button--donate svg {
     width: 24px;
     height: 24px;
-    fill: var(--text-color);
+    fill: var(--button-text-color);
 }
+
 a.button.button--donate.button--opencollective {
-    color: #fff;
-    background-color: #0c2d66;
-}
-a.button.button--donate.button--opencollective svg {
-    fill: #fff;
-}
-a.button.button--donate.button--opencollective:hover {
-    color: #fff;
-    background-color: #144aa9;
+    --button-text-color: #fff;
+    --button-background-color: #0c2d66;
+    --button-text-color-hover: #fff;
+    --button-background-color-hover: #144aa9;
 }
+
 a.button.button--donate.button--liberapay {
-    color: #333;
-    background-color: #ffee16;
-}
-a.button.button--donate.button--liberapay svg {
-    fill: #333;
-}
-a.button.button--donate.button--liberapay:hover {
-    color: #333;
-    background-color: #fff463;
+    --button-text-color: #333;
+    --button-background-color: #ffee16;
+    --button-text-color-hover: #333;
+    --button-background-color-hover: #fff463;
 }
+
 a.button.button--donate.button--kofi {
-    color: #333;
-    background-color: #1ac0ff;
-}
-a.button.button--donate.button--kofi svg {
-    fill: #333;
-}
-a.button.button--donate.button--kofi:hover {
-    color: #333;
-    background-color: #66d4ff;
+    --button-text-color: #333;
+    --button-background-color: #1ac0ff;
+    --button-text-color-hover: #333;
+    --button-background-color-hover: #66d4ff;
 }
 
 ul {