diff --git a/docs/index.md b/docs/index.md
index 32feb81..a20b4ad 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,9 +13,14 @@ hide:
Armada brings Steam, FEX, Proton, and a full Linux desktop to supported ARM64
gaming handhelds.
-[Install Armada](getting-started/flashing-to-an-sd-card.md){ .md-button .md-button--primary }
-[Check device support](devices/supported-devices.md){ .md-button .armada-hero__secondary }
-[See it in action](project/videos.md){ .md-button .armada-hero__secondary }
+
+
+[:material-download: Install Armada](getting-started/flashing-to-an-sd-card.md){ .md-button .md-button--primary }
+[:material-controller: Check Device Support](devices/supported-devices.md){ .md-button .armada-hero__secondary }
+[:material-play-circle-outline: See it in Action](project/videos.md){ .md-button .armada-hero__secondary }
+[:material-heart-outline: Support Armada](project/support.md){ .md-button .armada-hero__secondary }
+
+
diff --git a/docs/project/support.md b/docs/project/support.md
new file mode 100644
index 0000000..652c6a5
--- /dev/null
+++ b/docs/project/support.md
@@ -0,0 +1,47 @@
+# Support Armada
+
+Thanks for thinking about supporting Armada! There are lots of ways to get involved, and every one of them helps.
+
+## Ways to Contribute
+
+
+
+- **Code**
+
+ Fix bugs, add features, or help bring up new devices.
+
+- **Testing**
+
+ Try new builds on your device and tell us what breaks.
+
+- **Translations**
+
+ Help make Armada usable in more languages.
+
+- **Donations**
+
+ Help cover the costs listed below.
+
+
+
+## Where Donations Go
+
+### Devices for Development and Testing
+
+This is our biggest expense by far. We need hardware to support new and existing handhelds, and to explore new categories we're considering like ARM tablets and laptops.
+
+### Hosting
+
+Hosting costs are currently low, but donations will help keep the site and downloads online as the project grows.
+
+### The Wider ARM Linux Community
+
+Armada builds on a lot of other people's work. Some donations may go toward attending conferences or providing hardware to partner projects we work with.
+
+> That's the whole list. If something isn't on this page, don't expect us to spend donations on it.
+
+## Fully Transparent
+
+We take donations and track expenses through [Open Collective](https://opencollective.com/armada). Every dollar that comes in and goes out is public, so you can see exactly where your money went.
+
+[Donate on Open Collective](https://opencollective.com/armada){ .md-button .md-button--primary }
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 7ea7cc7..159cf6a 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -144,18 +144,6 @@
color: var(--armada-black);
}
-[data-md-color-scheme="slate"] .armada-hero .md-button:not(.md-button--primary) {
- background-color: transparent;
- border-color: #ffffff;
- color: #ffffff;
-}
-
-[data-md-color-scheme="slate"] .armada-hero .md-button:not(.md-button--primary):hover,
-[data-md-color-scheme="slate"] .armada-hero .md-button:not(.md-button--primary):focus {
- background-color: #ffffff;
- color: var(--armada-black);
-}
-
.armada-hero {
margin: 1.6rem 0 2.4rem;
max-width: 42rem;
@@ -202,23 +190,72 @@
max-width: 34rem;
}
-.armada-hero .md-button {
- margin: 0.45rem 0.45rem 0 0;
+.armada-hero__actions {
+ container-type: inline-size;
+ margin-top: 1.4rem;
+}
+
+.md-typeset .armada-hero__actions > p {
+ display: grid;
+ gap: 0.6rem;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ margin: 0;
+ max-width: none;
+}
+
+.md-typeset .armada-hero__actions .md-button {
+ border-width: 1px;
+ border-radius: 0.5rem;
+ font-size: 0.8rem;
+ font-weight: 600;
+ gap: 0.5rem;
+ justify-content: center;
+ line-height: 1.4;
+ margin: 0;
+ min-height: 2.6rem;
+ min-width: 0;
+ padding: 0.65rem 0.75rem;
+ text-align: center;
+ transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
+}
+
+.md-typeset .armada-hero__actions .twemoji {
+ flex-shrink: 0;
+ height: 1.15em;
+ width: 1.15em;
}
.md-typeset .armada-hero .md-button.armada-hero__secondary {
- background-color: transparent;
+ background-color: var(--md-code-bg-color);
border-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--light);
}
.md-typeset .armada-hero .md-button.armada-hero__secondary:hover,
.md-typeset .armada-hero .md-button.armada-hero__secondary:focus {
- background-color: transparent;
+ background-color: var(--md-default-fg-color--lightest);
border-color: var(--md-default-fg-color--light);
color: var(--md-default-fg-color);
}
+@container (min-width: 40rem) {
+ .md-typeset .armada-hero__actions > p {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, 1.15fr);
+ }
+}
+
+@container (max-width: 23rem) {
+ .md-typeset .armada-hero__actions > p {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .md-typeset .armada-hero__actions .md-button {
+ transition: none;
+ }
+}
+
.md-typeset ul.armada-features {
display: grid;
gap: 0.8rem;
@@ -396,9 +433,4 @@ body:has(.armada-hero) .md-content {
.armada-hero {
margin-top: 0.8rem;
}
-
- .armada-hero .md-button {
- justify-content: center;
- width: 100%;
- }
}
diff --git a/mkdocs.yml b/mkdocs.yml
index 6e4b59f..95cedc5 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -114,6 +114,7 @@ nav:
- Known Issues: troubleshooting/known-issues.md
- Project:
- Community: project/community.md
+ - Support: project/support.md
- Credits: project/credits.md
- Videos: project/videos.md