Add color to wishlist buttons

godotengine · Nov 15, 2024 · 2794e7c · 2794e7c
1 parent 9ce93f0
commit 2794e7c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/assets/css/priorities/base.scss b/assets/css/priorities/base.scss
@@ -23,6 +23,8 @@ $border-radius: 15px;
 $element-meta-planning-bar-width: 15%;
 $element-meta-ongoing-bar-width: 50%;
 
+$color-red: #f35774;
+
 //
 // Functions
 //
@@ -141,6 +143,17 @@ html {
 			.contact {
 				grid-area: contact;
 			}
+
+			.wishlist-btn-anchor {
+				text-decoration: none;
+				color: $color-red;
+			}
+
+			.wishlist-btn-text {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 		}
 	}
 

diff --git a/pages/priorities/index.html b/pages/priorities/index.html
@@ -79,14 +79,29 @@ <h1>Priorities</h1>
 				<li>where corporate partners could lend a helping hand</li>
 			</ol>
 			<div class="wishlist-btns">
-				<a class="donate" href="https://fund.godotengine.org/" target="_blank">
-					<div class="wishlist-btn-text">Donate to the Fund</div>
+				<a class="wishlist-btn-anchor donate" href="https://fund.godotengine.org/" target="_blank">
+					<div class="wishlist-btn-text">
+						<span>Donate to the Fund</span>
+						<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M6 3L11 8L6 13" stroke="CurrentColor" stroke-width="1.5"></path>
+						</svg>
+					</div>
 				</a>
-				<a class="howto" href="https://docs.godotengine.org/en/stable/contributing/how_to_contribute.html" target="_blank">
-					<div class="wishlist-btn-text">How to contribute</div>
+				<a class="wishlist-btn-anchor howto" href="https://docs.godotengine.org/en/stable/contributing/how_to_contribute.html" target="_blank">
+					<div class="wishlist-btn-text">
+						<span>How to contribute</span>
+						<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M6 3L11 8L6 13" stroke="CurrentColor" stroke-width="1.5"></path>
+						</svg>
+					</div>
 				</a>
-				<a class="contact" href="mailto:[email protected]" target="_blank">
-					<div class="wishlist-btn-text">Contact the Foundation</div>
+				<a class="wishlist-btn-anchor contact" href="mailto:[email protected]" target="_blank">
+					<div class="wishlist-btn-text">
+						<span>Contact the Foundation</span>
+						<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M6 3L11 8L6 13" stroke="CurrentColor" stroke-width="1.5"></path>
+						</svg>
+					</div>
 				</a>
 			</div>
 		</div>