From cb8135bd258d65a71837fcb2a9dd68c83c8f7c6e Mon Sep 17 00:00:00 2001
From: Jonah Aragon <jonah@privacyguides.org>
Date: Mon, 16 Feb 2026 18:42:24 -0600
Subject: [PATCH] Use markdown syntax for toolbox

---
 docs/activism/about.md             |  7 +++-
 docs/activism/toolbox/index.md     | 63 +++++-------------------------
 theme/assets/stylesheets/extra.css | 20 ++++++----
 3 files changed, 26 insertions(+), 64 deletions(-)

diff --git a/docs/activism/about.md b/docs/activism/about.md
index ad84aeb0..2a19ae07 100644
--- a/docs/activism/about.md
+++ b/docs/activism/about.md
@@ -21,5 +21,8 @@ For privacy to become a valued and respected human right, **we must work togethe
 
 This section will progressively grow with more tools to support the community in its privacy advocacy and activism effort. The Privacy Activist Toolbox is the first part of this new development.
 
-<style>.category-button {background-color: var(--pg-blue);}</style>
-[<div class="category-button" markdown>![Toolbox icon](images/icons/toolbox-solid-full.svg){.category-button-icon} Privacy Activist Toolbox</div>](toolbox/index.md)
+<div class="toolbox-button-grid" markdown>
+
+[:fontawesome-solid-toolbox:{ .toolbox-button-icon } Privacy Activist Toolbox](toolbox/index.md){ .toolbox-button .toolbox-bg-legal }
+
+</div>
diff --git a/docs/activism/toolbox/index.md b/docs/activism/toolbox/index.md
index b9b10b23..4f83289b 100644
--- a/docs/activism/toolbox/index.md
+++ b/docs/activism/toolbox/index.md
@@ -20,68 +20,23 @@ This page is also a resource to help digital rights organizations that would lik
 
 <div class="toolbox-button-grid" markdown>
 
-<a href="#check-your-laws">
-<button class="toolbox-button toolbox-bg-legal" markdown>
-    ![Scale icon](../images/icons/scale-balanced-solid-full.svg){ .toolbox-button-icon }
-    Check<br>Your Laws
-</button>
-</a>
+[:fontawesome-solid-scale-balanced:{ .toolbox-button-icon } Check<br>Your Laws](#check-your-laws){ .toolbox-button .toolbox-bg-legal }
 
-<a href="#choose-your-tools">
-<button class="toolbox-button toolbox-bg-tools" markdown>
-    ![Toolbox icon](../images/icons/toolbox-solid-full.svg){ .toolbox-button-icon }
-    Choose<br>Your Tools
-</button>
-</a>
+[:fontawesome-solid-toolbox:{ .toolbox-button-icon } Choose<br>Your Tools](#choose-your-tools){ .toolbox-button .toolbox-bg-tools }
 
-<a href="#expand-your-perspective">
-<button class="toolbox-button toolbox-bg-perspective" markdown>
-    ![Group icon](../images/icons/users-rays-solid-full.svg){ .toolbox-button-icon }
-    Expand Your Perspective
-</button>
-</a>
+[:fontawesome-solid-users-rays:{ .toolbox-button-icon } Expand Your Perspective](#expand-your-perspective){ .toolbox-button .toolbox-bg-perspective }
 
-<a href="#support-the-community">
-<button class="toolbox-button toolbox-bg-community" markdown>
-    ![Hand holding icon](../images/icons/hands-holding-circle-solid.svg){ .toolbox-button-icon }
-    Support The Community
-</button>
-</a>
+[:fontawesome-solid-hands-holding-circle:{ .toolbox-button-icon } Support The Community](#support-the-community){ .toolbox-button .toolbox-bg-community }
 
-<a href="#build-alliances">
-<button class="toolbox-button toolbox-bg-alliances" markdown>
-    ![Handshake icon](../images/icons/handshake-angle-solid.svg){ .toolbox-button-icon }
-    Build<br>Alliances
-</button>
-</a>
+[:fontawesome-solid-handshake-angle:{ .toolbox-button-icon } Build<br>Alliances](#build-alliances){ .toolbox-button .toolbox-bg-alliances }
 
-<a href="#make-it-accessible">
-<button class="toolbox-button toolbox-bg-accessibility" markdown>
-    ![Checked heart icon](../images/icons/heart-circle-check-solid.svg){ .toolbox-button-icon }
-    Make It Accessible
-</button>
-</a>
+[:fontawesome-solid-heart-circle-check:{ .toolbox-button-icon } Make It Accessible](#make-it-accessible){ .toolbox-button .toolbox-bg-accessibility }
 
-<a href="#uphold-integrity">
-<button class="toolbox-button toolbox-bg-integrity" markdown>
-    ![Star icon](../images/icons/star-solid-full.svg){ .toolbox-button-icon }
-    Uphold<br>Integrity
-</button>
-</a>
+[:fontawesome-solid-star:{ .toolbox-button-icon } Uphold<br>Integrity](#uphold-integrity){ .toolbox-button .toolbox-bg-integrity }
 
-<a href="#stay-persistent">
-<button class="toolbox-button toolbox-bg-persistence" markdown>
-    ![Heart icon](../images/icons/heart-solid.svg){ .toolbox-button-icon }
-    Stay<br>Persistent
-</button>
-</a>
+[:fontawesome-solid-heart:{ .toolbox-button-icon } Stay<br>Persistent](#stay-persistent){ .toolbox-button .toolbox-bg-persistence }
 
-<a href="#take-action">
-<button class="toolbox-button toolbox-bg-action" markdown>
-    ![Fist icon](../images/icons/hand-fist-solid-full.svg){ .toolbox-button-icon }
-    Take Action!
-</button>
-</a>
+[:fontawesome-solid-hand-fist:{ .toolbox-button-icon } Take<br>Action!](#take-action){ .toolbox-button .toolbox-bg-action }
 
 </div>
 
diff --git a/theme/assets/stylesheets/extra.css b/theme/assets/stylesheets/extra.css
index ad008da0..80e0aa01 100644
--- a/theme/assets/stylesheets/extra.css
+++ b/theme/assets/stylesheets/extra.css
@@ -628,7 +628,7 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
 }
 
 /* Category Button Style*/
-.category-button {
+.md-typeset .category-button {
     display:flex;
     text-align: center;
     font-weight: bold;
@@ -639,13 +639,13 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
     border-radius: 12px;
 }
 
-.category-button:hover {
+.md-typeset .category-button:hover {
     position: relative;
     transform: scale(1.01);
     box-shadow: 5px 10px 10px 5px rgba(0,0,0,0.3);
 }
 
-.category-button a, .category-button a:hover {
+.md-typeset .category-button a, .md-typeset .category-button a:hover {
     color: #ffffff;
 }
 
@@ -665,7 +665,7 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
     grid-gap: 0.7rem;
 }
 
-.toolbox-button {
+.toolbox-button-grid .toolbox-button {
     display: flex;
     flex-direction: column;
     text-align: center;
@@ -676,24 +676,28 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
     height: 7rem;
     width: 7rem;
     color: white;
-    background-color: grey;
     padding: 5px;
     border: 2px solid var(--pg-light-border);
     border-radius: 12px;
     cursor: pointer;
 }
 
-.toolbox-button:hover {
+.toolbox-button-grid .toolbox-button:hover {
     position: relative;
     transform: scale(1.08);
     box-shadow: 5px 10px 10px 5px rgba(0,0,0,0.3);
+    color: white;
 }
 
-.toolbox-button-icon {
+.toolbox-button-grid .toolbox-button-icon {
+    height: 5em;
     display: inline-flex;
     padding: 8px 30px 5px 30px;
     overflow: visible;
-    filter: invert(1);
+}
+
+.toolbox-button-grid .toolbox-button-icon svg {
+    width: 5em;
 }
 
 /* Toolbox Button Colors*/