Skip to content

fix: update store listing and icons #479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ReenigneArcher merged 1 commit into from
Sep 27, 2026
+58 −28
Merged

fix: update store listing and icons #479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions _data/store_products.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
---
- id: virtual-hid-driver
name: Virtual HID Driver
category: Windows software
tagline: Modern virtual gamepads for Sunshine on Windows
name: Virtual HID Broker License
category: Windows and macOS software
tagline: Virtual gamepads for compatible apps on Windows and macOS
description: >-
Unlock expanded virtual controller support in Sunshine with a user-mode driver built and maintained alongside
the rest of the LizardByte input stack.
Activate Virtual HID Broker to let compatible applications create virtual gamepads on Windows and macOS.
Windows uses a user-mode driver and local broker; macOS uses a signed broker. Both packages include
Virtual HID Control for creating and testing virtual gamepads. Virtual HID Broker does not bypass
anti-cheat restrictions on virtual gamepad input.
cover:
src: https://raw.githubusercontent.com/LizardByte/libvirtualhid/refs/heads/master/libvirtualhid-poster-1440x2160.png
alt: A green outline of a game controller on a vertical dark green background
Expand All @@ -25,19 +27,20 @@
caption: Virtual controllers appear in the familiar Windows Game Controllers panel.
badges:
- label: Windows
icon: fa-brands fa-windows
icon_img: https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/icons/windows.svg
- label: macOS
icon_img: https://cdn.jsdelivr.net/npm/simple-icons@16/icons/macos.svg
- label: Sunshine compatible
icon: fa-solid fa-sun
prices:
- amount: $14.99
label: per year
- amount: $49.99
label: lifetime
price_note: One license can be activated on up to five machines.
price_note: One license can be activated on up to five machines. The yearly option includes a free trial.
features:
- Generic, Xbox One, Xbox Series, DualShock 4, DualSense, and Switch Pro-style profiles
- Support for advanced controller features when the selected controller and game provide them
- Ongoing driver maintenance and improvements alongside Sunshine and other LizardByte software
- Generic, Xbox 360, Xbox One, Xbox Series, DualShock 4, DualSense, and Switch Pro-style profiles
- Support for advanced controller features when the selected controller, platform, and game provide them
- Ongoing broker and Windows driver maintenance alongside Sunshine and other LizardByte software
details:
label: Learn more
url: https://app.lizardbyte.dev/libvirtualhid/virtual-hid-driver
Expand All @@ -46,4 +49,4 @@
url: https://buy.polar.sh/polar_cl_zj6Io5NVukXfZSl97ULtFvImfI5L1jbL2cSnc0Y72Pt
store: Polar
external: true
icon: fa-solid fa-cart-shopping
icon: shopping-cart
16 changes: 9 additions & 7 deletions _includes/store-product-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
<ul class="store-product-badges list-unstyled" aria-label="Product compatibility">
{% for badge in product.badges %}
<li class="store-product-badge">
{% if badge.icon %}<i class="{{ badge.icon }}" aria-hidden="true"></i>{% endif %}
{% if badge.icon_img %}
<img class="store-product-badge-icon" src="{{ badge.icon_img }}" alt="" width="16" height="16">
{% endif %}
{{ badge.label }}
</li>
{% endfor %}
Expand All @@ -36,7 +38,7 @@ <h3 class="store-product-title">{{ product.name }}</h3>
<ul class="store-product-features">
{% for feature in product.features %}
<li>
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
<i data-lucide="circle-check" aria-hidden="true"></i>
<span>{{ feature }}</span>
</li>
{% endfor %}
Expand All @@ -58,7 +60,7 @@ <h3 class="store-product-title">{{ product.name }}</h3>

{% if product.price_note %}
<p class="store-product-price-note">
<i class="fa-solid fa-display" aria-hidden="true"></i>
<i data-lucide="monitor" aria-hidden="true"></i>
{{ product.price_note }}
</p>
{% endif %}
Expand All @@ -73,7 +75,7 @@ <h3 class="store-product-title">{{ product.name }}</h3>
rel="noopener"
{% endif %}
>
{% if offer.icon %}<i class="{{ offer.icon }}" aria-hidden="true"></i>{% endif %}
{% if offer.icon %}<i data-lucide="{{ offer.icon }}" aria-hidden="true"></i>{% endif %}
{{ offer.label }}
<span class="visually-hidden">
for {{ product.name }}{% if offer.store %} from {{ offer.store }}{% endif %}
Expand All @@ -83,15 +85,15 @@ <h3 class="store-product-title">{{ product.name }}</h3>
{% if product.details %}
<a class="btn btn-outline-theme" href="{{ product.details.url }}">
{{ product.details.label }}
<i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
<i data-lucide="arrow-right" aria-hidden="true"></i>
</a>
{% endif %}
</div>

{% for offer in product.offers %}
{% if offer.store %}
<p class="store-product-seller">
<i class="fa-solid fa-lock" aria-hidden="true"></i>
<i data-lucide="lock" aria-hidden="true"></i>
Checkout provided by {{ offer.store }}
</p>
{% endif %}
Expand Down Expand Up @@ -123,7 +125,7 @@ <h4 id="{{ product.id }}-screenshots">Screenshots</h4>
loading="lazy"
>
<span class="store-screenshot-expand" aria-hidden="true">
<i class="fa-solid fa-expand"></i>
<i data-lucide="expand" aria-hidden="true"></i>
</span>
</button>
{% endfor %}
Expand Down
33 changes: 29 additions & 4 deletions assets/css/store.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@ layout: null
padding-top: 4.75rem;
}

.storefront svg.lucide {
flex-shrink: 0;
height: 1em;
vertical-align: -0.125em;
width: 1em;
}

.storefront-intro {
max-width: 48rem;
}
Expand Down Expand Up @@ -59,7 +66,7 @@ layout: null
border-left: 1px solid var(--store-border);
}

.storefront-assurance i {
.storefront-assurance svg.lucide {
color: var(--link-col);
font-size: 1.1rem;
}
Expand Down Expand Up @@ -145,6 +152,12 @@ layout: null
padding: 0.4rem 0.7rem;
}

.store-product-badge-icon {
filter: invert(1);
height: 1em;
width: 1em;
}

.store-product-content {
display: flex;
flex: 1;
Expand Down Expand Up @@ -186,7 +199,7 @@ layout: null
line-height: 1.35;
}

.store-product-features i {
.store-product-features svg.lucide {
color: var(--link-col);
margin-top: 0.25rem;
}
Expand Down Expand Up @@ -233,8 +246,8 @@ layout: null
margin: 0.55rem 0 0.75rem;
}

.store-product-price-note i,
.store-product-seller i {
.store-product-price-note svg.lucide,
.store-product-seller svg.lucide {
margin-right: 0.35rem;
}

Expand Down Expand Up @@ -327,6 +340,11 @@ layout: null
width: 1.8rem;
}

.store-screenshot-expand svg.lucide {
height: 1rem;
width: 1rem;
}

.store-screenshot-thumbnail:hover .store-screenshot-expand,
.store-screenshot-thumbnail:focus-visible .store-screenshot-expand {
opacity: 1;
Expand Down Expand Up @@ -397,6 +415,13 @@ layout: null
text-align: center;
}

.storefront-empty svg.lucide {
display: block;
height: 2rem;
margin: 0 auto 1rem;
width: 2rem;
}

@media (min-width: 992px) {
.store-product-card-featured .store-product-summary {
display: grid;
Expand Down
10 changes: 5 additions & 5 deletions store.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<div class="container py-lg-2">
<header class="storefront-intro mx-auto mb-4 text-center">
<h1 class="storefront-kicker mb-2">
<i class="fa-solid fa-bag-shopping" aria-hidden="true"></i>
<i data-lucide="shopping-bag" aria-hidden="true"></i>
LizardByte Store
</h1>
<h2 class="display-6 fw-bolder mb-3">Tools built for better streaming</h2>
Expand All @@ -31,15 +31,15 @@ <h2 class="display-6 fw-bolder mb-3">Tools built for better streaming</h2>

<ul class="storefront-assurance list-unstyled" aria-label="Store information">
<li>
<i class="fa-solid fa-code" aria-hidden="true"></i>
<i data-lucide="code" aria-hidden="true"></i>
<span>Built by LizardByte</span>
</li>
<li>
<i class="fa-solid fa-shield-halved" aria-hidden="true"></i>
<i data-lucide="shield-check" aria-hidden="true"></i>
<span>Trusted checkout providers</span>
</li>
<li>
<i class="fa-solid fa-life-ring" aria-hidden="true"></i>
<i data-lucide="life-buoy" aria-hidden="true"></i>
<span>Documentation and support</span>
</li>
</ul>
Expand All @@ -54,7 +54,7 @@ <h2 class="display-6 fw-bolder mb-3">Tools built for better streaming</h2>
</div>
{% else %}
<div class="storefront-empty">
<i class="fa-solid fa-box-open fa-2x mb-3" aria-hidden="true"></i>
<i data-lucide="package-open" aria-hidden="true"></i>
<h3 class="h4 fw-bold">More products are on the way</h3>
<p class="text-muted mb-0">Check back soon for new LizardByte products.</p>
</div>
Expand Down
Loading