Use markdown syntax for toolbox

This commit is contained in:
Jonah Aragon 2026-02-16 18:42:24 -06:00
parent 1a24efd0c3
commit cb8135bd25
No known key found for this signature in database
3 changed files with 26 additions and 64 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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*/