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