fix(gh-pages): style fixes for theme switcher (#4748)

This commit is contained in:
David Lane
2026-02-19 21:28:26 -05:00
committed by GitHub
parent c9bcee4480
commit 4913b673dc
4 changed files with 260 additions and 467 deletions

View File

@@ -1,4 +1,4 @@
--- ---
# See https://github.com/daattali/beautiful-jekyll/blob/master/_config.yml for documented options # See https://github.com/LizardByte/beautiful-jekyll-next/blob/master/_config.yml for documented options
avatar: "/Sunshine/assets/img/navbar-avatar.png" avatar: "/Sunshine/assets/img/navbar-avatar.png"

View File

@@ -0,0 +1,167 @@
---
- name: "Android"
type: "official"
github: "https://github.com/moonlight-stream/moonlight-android"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/android.svg"
alt: "Android"
invert: true
downloads:
- label: "Get it on Google Play"
url: "https://play.google.com/store/apps/details?id=com.limelight"
img_src: "https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
img_height: 60
- label: "Available at Amazon Appstore"
url: "https://www.amazon.com/gp/product/B00JK4MFN2"
img_src: "https://images-na.ssl-images-amazon.com/images/G/01/mobile-apps/devportal2/res/images/amazon-appstore-badge-english-black.png" # yamllint disable rule:line-length
img_height: 60
img_style: "padding: 10px;"
- label: "Get it on F-Droid"
url: "https://f-droid.org/packages/com.limelight"
img_src: "https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
img_height: 60
- name: "iOS"
type: "official"
github: "https://github.com/moonlight-stream/moonlight-ios"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ios.svg"
alt: "iOS"
invert: true
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/appletv.svg"
alt: "Apple TV"
invert: true
downloads:
- label: "Download on the App Store"
url: "https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566"
img_src: "https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
img_height: 40
- label: "Download on Apple TV"
url: "https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566"
img_src: "https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-apple-tv.svg"
img_height: 40
- name: "QT"
type: "official"
github: "https://github.com/moonlight-stream/moonlight-qt"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg"
alt: "Linux"
invert: true
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/macos.svg"
alt: "macOS"
invert: true
- src: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg"
alt: "Windows"
invert: true
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/steam.svg"
alt: "Steam"
invert: true
downloads:
- label: "Download on GitHub"
url: "https://github.com/moonlight-stream/moonlight-qt/releases"
icon_fa: "fab fa-github"
btn_class: "btn btn-info"
- name: "Embedded"
type: "official"
github: "https://github.com/moonlight-stream/moonlight-embedded"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/raspberrypi.svg"
alt: "Raspberry Pi"
invert: true
downloads:
- label: "Download"
url: "https://github.com/irtimmer/moonlight-embedded/wiki/Packages"
icon_fa: "fas fa-download"
btn_class: "btn btn-info"
- name: "Xbox One/Series"
type: "community"
github: "https://github.com/TheElixZammuto/moonlight-xbox"
icons:
- src: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/xbox.svg"
alt: "Xbox"
invert: true
downloads:
- label: "Get it from Microsoft"
url: "https://apps.microsoft.com/store/detail/moonlight-uwp/9MW1BS08ZBTH"
img_src: "https://get.microsoft.com/images/en-us%20dark.svg"
img_height: 40
- name: "PS Vita"
type: "community"
github: "https://github.com/xyzz/vita-moonlight"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/playstationvita.svg"
alt: "PlayStation Vita"
invert: true
downloads:
- label: "Download on GitHub"
url: "https://github.com/xyzz/vita-moonlight/releases"
icon_fa: "fab fa-github"
btn_class: "btn btn-info"
- name: "Moonlight Switch"
type: "community"
github: "https://github.com/XITRIX/Moonlight-Switch"
icons:
- src: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/nintendo-switch.svg"
alt: "Nintendo Switch"
invert: true
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/android.svg"
alt: "Android"
invert: true
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/appletv.svg"
alt: "Apple TV"
invert: true
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ios.svg"
alt: "iOS"
invert: true
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/macos.svg"
alt: "macOS"
invert: true
downloads:
- label: "Download on GitHub"
url: "https://github.com/XITRIX/Moonlight-Switch/releases"
icon_fa: "fab fa-github"
btn_class: "btn btn-info"
- name: "Nintendo Wii U"
type: "community"
github: "https://github.com/GaryOderNichts/moonlight-wiiu"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/wiiu.svg"
alt: "Wii U"
invert: true
downloads:
- label: "Download"
url: "https://github.com/GaryOderNichts/moonlight-wiiu#quick-start"
icon_fa: "fas fa-download"
btn_class: "btn btn-info"
- name: "New Nintendo 3DS"
type: "community"
github: "https://github.com/zoeyjodon/moonlight-N3DS"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/nintendo3ds.svg"
alt: "3DS"
invert: true
downloads:
- label: "Download"
url: "https://github.com/zoeyjodon/moonlight-N3DS"
icon_fa: "fas fa-download"
btn_class: "btn btn-info"
- name: "LG webOS TV"
type: "community"
github: "https://github.com/mariotaku/moonlight-tv"
icons:
- src: "https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/lg.svg"
alt: "LG webOS TV"
invert: true
downloads:
- label: "Download"
url: "https://github.com/mariotaku/moonlight-tv#download"
icon_fa: "fas fa-download"
btn_class: "btn btn-info"

View File

@@ -0,0 +1,40 @@
---
- title: "Self-hosted"
icon_fa: "fas fa-server"
description: >
Run Sunshine on your own hardware. No need to pay monthly fees to a
cloud gaming provider.
- title: "Moonlight Support"
icon_img: "https://moonlight-stream.org/images/moonlight.svg"
icon_img_alt: "Moonlight"
description: >
Connect to Sunshine from any Moonlight client. Moonlight is available
for Windows, macOS, Linux, Android, iOS, Xbox, and more. See
<a href="#Clients">clients</a> for more information.
- title: "Hardware Encoding"
icon_fa: "fas fa-microchip"
description: >
Sunshine supports AMD, Intel, and Nvidia GPUs for hardware encoding.
Software encoding is also available.
- title: "Low Latency"
icon_fa: "fas fa-globe"
description: >
Sunshine is designed to provide the lowest latency possible to achieve optimal gaming performance.
- title: "Control"
icon_fa: "fas fa-gamepad"
description: >
Sunshine emulates an Xbox, PlayStation, or Nintendo Switch controller.
Use nearly any controller on your Moonlight client!
<br><small><ul>
<li>Nintendo Switch emulation is only available on Linux.</li>
<li>Gamepad emulation is not currently supported on macOS.</li>
</ul></small>
- title: "Configurable"
icon_fa: "fas fa-gear"
description: >
Sunshine offers many configuration options to customize your experience.

View File

@@ -17,7 +17,7 @@ ext-js:
<!-- About section--> <!-- About section-->
<section class="py-5" id="About"> <section class="py-5" id="About">
<div class="container px-auto"> <div class="container px-auto">
<p class="lead text-center text-white mx-auto mt-0 mb-5"> <p class="lead text-center mx-auto mt-0 mb-5">
Sunshine is a self-hosted game stream host for Moonlight. Offering low latency, cloud gaming Sunshine is a self-hosted game stream host for Moonlight. Offering low latency, cloud gaming
server capabilities with support for AMD, Intel, and Nvidia GPUs for hardware encoding. Software server capabilities with support for AMD, Intel, and Nvidia GPUs for hardware encoding. Software
encoding is also available. You can connect to Sunshine from any Moonlight client on a variety encoding is also available. You can connect to Sunshine from any Moonlight client on a variety
@@ -30,122 +30,29 @@ ext-js:
<!-- Features section--> <!-- Features section-->
<section class="py-5" id="Features"> <section class="py-5" id="Features">
<div class="container px-auto"> <div class="container px-auto">
<h2 class="text-center text-white fw-bolder my-5">Features</h2> <h2 class="text-center fw-bolder my-5">Features</h2>
<!-- Create a card for each feature -->
<div class="row gx-5"> <div class="row gx-5">
{% for feature in site.data.features %}
<div class="col-md-6 col-lg-4 mb-5"> <div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0"> <div class="card-custom h-100 shadow border-0 rounded-0">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="icon text-white"> <div class="icon">
<i class="fa-fw fa-2x fas fa-server"></i> {% if feature.icon_fa %}
<i class="fa-fw fa-2x {{ feature.icon_fa }}"></i>
{% elsif feature.icon_img %}
<img {% if feature.icon_img_invert %}class="invert"{% endif %} src="{{ feature.icon_img }}" alt="{{ feature.icon_img_alt | default: feature.title }}"/>
{% endif %}
</div> </div>
<div class="ms-3"> <div class="ms-3">
<h5 class="fw-bolder mb-0">Self-hosted</h5> <h5 class="fw-bolder mb-0">{{ feature.title }}</h5>
<p class="mb-0"> <p class="mb-0">{{ feature.description }}</p>
Run Sunshine on your own hardware. No need to pay monthly fees to a
cloud gaming provider.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="icon" src="https://moonlight-stream.org/images/moonlight.svg" alt="Moonlight"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Moonlight Support</h5>
<p class="mb-0">
Connect to Sunshine from any Moonlight client. Moonlight is available
for Windows, macOS, Linux, Android, iOS, Xbox, and more. See
<a class="text-white" href="#Clients">clients</a> for more information.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-microchip"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Hardware Encoding</h5>
<p class="mb-0">
Sunshine supports AMD, Intel, and Nvidia GPUs for hardware encoding.
Software encoding is also available.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-globe"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Low Latency</h5>
<p class="mb-0">
Sunshine is designed to provide the lowest latency possible to achieve optimal gaming performance.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-gamepad"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Control</h5>
<p class="mb-0">
Sunshine emulates an Xbox, PlayStation, or Nintendo Switch controller.
Use nearly any controller on your Moonlight client!<br>
<small>
<ul>
<li>Nintendo Switch emulation is only available on Linux.</li>
<li>Gamepad emulation is not currently supported on macOS.</li>
</ul>
</small>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<i class="fa-fw fa-2x fas fa-gear"></i>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">Configurable</h5>
<p class="mb-0">
Sunshine offers many configuration options to customize your experience.
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endfor %}
</div> </div>
</div> </div>
</section> </section>
@@ -153,379 +60,58 @@ ext-js:
<!-- Clients section--> <!-- Clients section-->
<section class="py-5" id="Clients"> <section class="py-5" id="Clients">
<div class="container px-auto"> <div class="container px-auto">
<h2 class="text-center text-white fw-bolder my-5">Clients</h2> <h2 class="text-center fw-bolder my-5">Clients</h2>
<!-- Create a card for each client -->
<div class="row gx-5"> <div class="row gx-5">
{% for client in site.data.clients %}
<!-- Android -->
<div class="col-md-6 col-lg-4 mb-5"> <div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0"> <div class="card-custom h-100 shadow border-0 rounded-0 d-flex flex-column">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<div class="icon text-white"> <div class="icon">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/android.svg" alt="Android"/> {% for icon in client.icons %}
<img {% if icon.invert %}class="invert"{% endif %} src="{{ icon.src }}" alt="{{ icon.alt }}"/>
{% endfor %}
</div> </div>
<div class="ms-3"> <div class="ms-3">
<h5 class="fw-bolder mb-0"> <h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-android" target="_blank" class="text-white text-decoration-none"> <a href="{{ client.github }}" target="_blank" class="text-decoration-none project-card-link crowdin-ignore">
Android {{ client.name }}
</a> </a>
</h5> </h5>
</div> </div>
<div class="ms-auto"> <div class="ms-auto">
{% if client.type == "official" %}
<span class="badge text-bg-info rounded-pill">Official</span> <span class="badge text-bg-info rounded-pill">Official</span>
</div> {% elsif client.type == "community" %}
</div>
</div>
<div class="card-footer p-3 px-4">
<div>
<a href="https://play.google.com/store/apps/details?id=com.limelight" target="_blank">
<img alt="Get it on Google Play"
src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
height="60"/>
</a>
</div>
<div>
<a href="https://www.amazon.com/gp/product/B00JK4MFN2" target="_blank">
<img alt="Available at Amazon Appstore"
src="https://images-na.ssl-images-amazon.com/images/G/01/mobile-apps/devportal2/res/images/amazon-appstore-badge-english-black.png"
height="60"
style="padding: 10px;"/>
</a>
</div>
<div>
<a href="https://f-droid.org/packages/com.limelight" target="_blank">
<img alt="Get it on F-Droid"
src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
height="60"/>
</a>
</div>
</div>
</div>
</div>
<!-- ChromeOS -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/chromewebstore.svg" alt="Chrome Web Store"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-chrome" target="_blank" class="text-white text-decoration-none">
ChromeOS
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://chrome.google.com/webstore/detail/moonlight-game-streaming/gemamigbbenahjlfnmlfdjhdnkpbkfjj" target="_blank" class="btn btn-outline-light">
<img alt="Available in the Chrome Web Store"
src="https://developer.chrome.com/static/docs/webstore/branding/image/206x58-chrome-web-043497a3d766e.png"
height="30"/>
</a>
</div>
</div>
</div>
</div>
<!-- iOS -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ios.svg" alt="iOS"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/appletv.svg" alt="Apple TV"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-ios" target="_blank" class="text-white text-decoration-none">
iOS
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566" target="_blank">
<img alt="Download on the App Store"
src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
height="40"/>
</a>
</div>
<div class="pb-3">
<a href="https://apps.apple.com/us/app/moonlight-game-streaming/id1000551566" target="_blank">
<img alt="Download on Apple TV"
src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-apple-tv.svg"
height="40"/>
</a>
</div>
</div>
</div>
</div>
<!-- Moonlight-QT -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="Linux"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/macos.svg" alt="macOS"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/steam.svg" alt="Steam"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-qt" target="_blank" class="text-white text-decoration-none">
QT
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://github.com/moonlight-stream/moonlight-qt/releases" target="_blank" class="btn btn-info">
<i class="fab fa-github"></i> Download on GitHub
</a>
</div>
</div>
</div>
</div>
<!-- Embedded -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/raspberrypi.svg" alt="Raspberry Pi"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/moonlight-stream/moonlight-embedded" target="_blank" class="text-white text-decoration-none">
Embedded
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-info rounded-pill">Official</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://github.com/irtimmer/moonlight-embedded/wiki/Packages" target="_blank" class="btn btn-info">
<i class="fas fa-download"></i> Download
</a>
</div>
</div>
</div>
</div>
<!-- Xbox One/Series -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/xbox.svg" alt="Xbox"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/TheElixZammuto/moonlight-xbox" target="_blank" class="text-white text-decoration-none">
Xbox One/Series
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span> <span class="badge text-bg-warning rounded-pill">Community</span>
{% endif %}
</div> </div>
</div> </div>
</div> </div>
{% if client.downloads %}
<div class="card-footer p-3 px-4"> <div class="card-footer p-3 px-4">
<div class="pb-3"> {% for download in client.downloads %}
<a href="https://apps.microsoft.com/store/detail/moonlight-uwp/9MW1BS08ZBTH" target="_blank"> <div class="{% unless forloop.last %}pb-3{% endunless %}">
<img alt="Get it from Microsoft" {% if download.img_src %}
src="https://get.microsoft.com/images/en-us%20dark.svg" <a href="{{ download.url }}" target="_blank"{% if download.btn_class %} class="{{ download.btn_class }}"{% endif %}>
height="40"/> <img alt="{{ download.label }}"
src="{{ download.img_src }}"
height="{{ download.img_height }}"
{% if download.img_style %}style="{{ download.img_style }}"{% endif %}/>
</a> </a>
{% else %}
<a href="{{ download.url }}" target="_blank" class="{{ download.btn_class | default: 'btn btn-info' }}">
{% if download.icon_fa %}<i class="{{ download.icon_fa }}"></i>{% endif %}
{{ download.label }}
</a>
{% endif %}
</div> </div>
{% endfor %}
</div> </div>
{% endif %}
</div> </div>
</div> </div>
{% endfor %}
<!-- PS Vita -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/playstationvita.svg" alt="PlayStation Vita"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/xyzz/vita-moonlight" target="_blank" class="text-white text-decoration-none">
PS Vita
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://github.com/xyzz/vita-moonlight/releases" target="_blank" class="btn btn-info">
<i class="fab fa-github"></i> Download on GitHub
</a>
</div>
</div>
</div>
</div>
<!-- Nintendo Switch -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/nintendo-switch.svg" alt="Nintendo Switch"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/android.svg" alt="Android"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/appletv.svg" alt="Apple TV"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/ios.svg" alt="iOS"/>
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/macos.svg" alt="macOS"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/XITRIX/Moonlight-Switch" target="_blank" class="text-white text-decoration-none">
Moonlight Switch
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://github.com/XITRIX/Moonlight-Switch/releases" target="_blank" class="btn btn-info">
<i class="fab fa-github"></i> Download on GitHub
</a>
</div>
</div>
</div>
</div>
<!-- Nintendo Wii U -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/wiiu.svg" alt="Wii U"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/GaryOderNichts/moonlight-wiiu" target="_blank" class="text-white text-decoration-none">
Nintendo Wii U
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://github.com/GaryOderNichts/moonlight-wiiu#quick-start" target="_blank" class="btn btn-info">
<i class="fas fa-download"></i> Download
</a>
</div>
</div>
</div>
</div>
<!-- New Nintendo 3DS -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v12/icons/nintendo3ds.svg" alt="3DS"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/zoeyjodon/moonlight-N3DS" target="_blank" class="text-white text-decoration-none">
New Nintendo 3DS
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://github.com/zoeyjodon/moonlight-N3DS" target="_blank" class="btn btn-info">
<i class="fas fa-download"></i> Download
</a>
</div>
</div>
</div>
</div>
<!-- LG webOS TV -->
<div class="col-md-6 col-lg-4 mb-5">
<div class="card bg-dark text-white rounded-0">
<div class="card-body p-4">
<div class="d-flex align-items-center">
<div class="icon text-white">
<img class="invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/lg.svg" alt="LG webOS TV"/>
</div>
<div class="ms-3">
<h5 class="fw-bolder mb-0">
<a href="https://github.com/mariotaku/moonlight-tv" target="_blank" class="text-white text-decoration-none">
LG webOS TV
</a>
</h5>
</div>
<div class="ms-auto">
<span class="badge text-bg-warning rounded-pill">Community</span>
</div>
</div>
</div>
<div class="card-footer p-3 px-4">
<div class="pb-3">
<a href="https://github.com/mariotaku/moonlight-tv#download" target="_blank" class="btn btn-info">
<i class="fas fa-download"></i> Download
</a>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -535,7 +121,7 @@ ext-js:
<div class="container col-md-10"> <div class="container col-md-10">
<!-- Docs section --> <!-- Docs section -->
<section class="py-4" id="Docs"> <section class="py-4" id="Docs">
<div class="card bg-dark text-white rounded-0"> <div class="card-custom shadow border-0 rounded-0">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<i class="fa-fw fa-2x fas fa-book"></i> <i class="fa-fw fa-2x fas fa-book"></i>
@@ -548,7 +134,7 @@ ext-js:
</div> </div>
</div> </div>
<div class="card-footer p-3 px-4"> <div class="card-footer p-3 px-4">
<a class="btn btn-outline-light me-3 mb-3" href="https://docs.lizardbyte.dev/projects/sunshine" target="_blank"> <a class="btn btn-outline-theme me-3 mb-3" href="https://docs.lizardbyte.dev/projects/sunshine" target="_blank">
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/readthedocs.svg" alt="ReadTheDocs"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/readthedocs.svg" alt="ReadTheDocs"/>
Read the Docs Read the Docs
</a> </a>
@@ -558,7 +144,7 @@ ext-js:
<!-- Download section --> <!-- Download section -->
<section class="py-4" id="Download"> <section class="py-4" id="Download">
<div class="card bg-dark text-white rounded-0"> <div class="card-custom shadow border-0 rounded-0">
<div class="card-body p-4"> <div class="card-body p-4">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<i class="fa-fw fa-2x fas fa-download"></i> <i class="fa-fw fa-2x fas fa-download"></i>
@@ -571,7 +157,7 @@ ext-js:
</div> </div>
</div> </div>
<div class="card-footer p-3 px-4"> <div class="card-footer p-3 px-4">
<a class="latest-button btn btn-outline-light me-3 mb-3 d-none" href="https://github.com/LizardByte/Sunshine/releases/latest" target="_blank"> <a class="latest-button btn btn-outline-theme me-3 mb-3 d-none" href="https://github.com/LizardByte/Sunshine/releases/latest" target="_blank">
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/github.svg" alt="GitHub"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/github.svg" alt="GitHub"/>
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/>
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/debian.svg" alt="Debian"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/debian.svg" alt="Debian"/>
@@ -580,7 +166,7 @@ ext-js:
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="AppImage"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="AppImage"/>
Latest: <span id="latest-version" class="crowdin-ignore"></span> Latest: <span id="latest-version" class="crowdin-ignore"></span>
</a> </a>
<a class="beta-button btn btn-outline-light me-3 mb-3 d-none" href="#" target="_blank"> <a class="beta-button btn btn-outline-theme me-3 mb-3 d-none" href="#" target="_blank">
<i class="fa-fw fa-lg fas fa-flask"></i> <i class="fa-fw fa-lg fas fa-flask"></i>
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/windows.svg" alt="Windows"/>
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/debian.svg" alt="Debian"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/debian.svg" alt="Debian"/>
@@ -589,19 +175,19 @@ ext-js:
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="AppImage"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/linux.svg" alt="AppImage"/>
Beta: <span id="beta-version" class="crowdin-ignore"></span> Beta: <span id="beta-version" class="crowdin-ignore"></span>
</a> </a>
<a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/pacman-repo" target="_blank"> <a class="btn btn-outline-theme me-3 mb-3" href="https://github.com/LizardByte/pacman-repo" target="_blank">
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/archlinux.svg" alt="Arch Linux"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/archlinux.svg" alt="Arch Linux"/>
Arch Linux Arch Linux
</a> </a>
<a class="btn btn-outline-light me-3 mb-3" href="https://hub.docker.com/r/lizardbyte/sunshine" target="_blank"> <a class="btn btn-outline-theme me-3 mb-3" href="https://hub.docker.com/r/lizardbyte/sunshine" target="_blank">
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/docker.svg" alt="Docker"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/docker.svg" alt="Docker"/>
Docker Docker
</a> </a>
<a class="btn btn-outline-light me-3 mb-3" href="https://flathub.org/apps/dev.lizardbyte.app.Sunshine" target="_blank"> <a class="btn btn-outline-theme me-3 mb-3" href="https://flathub.org/apps/dev.lizardbyte.app.Sunshine" target="_blank">
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/flathub.svg" alt="Flathub"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/flathub.svg" alt="Flathub"/>
Flathub Flathub
</a> </a>
<a class="btn btn-outline-light me-3 mb-3" href="https://github.com/LizardByte/homebrew-homebrew" target="_blank"> <a class="btn btn-outline-theme me-3 mb-3" href="https://github.com/LizardByte/homebrew-homebrew" target="_blank">
<img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/homebrew.svg" alt="Homebrew"/> <img class="icon-sm invert" src="https://cdn.jsdelivr.net/npm/simple-icons@v14/icons/homebrew.svg" alt="Homebrew"/>
Homebrew Homebrew
</a> </a>