Add support page

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 }
+<div class="armada-hero__actions" markdown>
+
+[: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 }
+
+</div>
 
 </div>
 

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
+
+<div class="grid cards" markdown>
+
+-   **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.
+
+</div>
+
+## 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 }

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%;
-  }
 }

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