Add support for dark color-scheme logos to recommendation-card.html

Specify `logo_dark` in yaml
This commit is contained in:
Jonah Aragon 2022-01-01 00:29:43 -06:00
parent 29037a6500
commit becbf3ddcb
No known key found for this signature in database
GPG Key ID: 6A957C9A9A9429F7
2 changed files with 7 additions and 1 deletions

View File

@ -1,6 +1,7 @@
title: Invidious title: Invidious
type: Recommendation type: Recommendation
logo: /assets/img/video-streaming/invidious.svg logo: /assets/img/video-streaming/invidious.svg
logo_dark: /assets/img/video-streaming/invidious-dark.svg
description: | description: |
<strong>Invidious</strong> is a free and open source front end for YouTube that is also self-hostable. There are list of <a href="https://instances.invidious.io">public instances</a>. Some instances have <a href="https://www.torproject.org">Tor</a> onion services support. <strong>Invidious</strong> is a free and open source front end for YouTube that is also self-hostable. There are list of <a href="https://instances.invidious.io">public instances</a>. Some instances have <a href="https://www.torproject.org">Tor</a> onion services support.

View File

@ -2,7 +2,12 @@
<div class="card-body"> <div class="card-body">
<div class="row p-3"> <div class="row p-3">
<div class="col-12 col-sm-4 col-md-3 text-center"> <div class="col-12 col-sm-4 col-md-3 text-center">
<img src="{{ item.logo }}" alt="{{ item.name }} logo" class="py-5 w-75"> <picture>
{% if item.logo_dark %}<source
srcset="{{ item.logo_dark }}"
media="(prefers-color-scheme: dark)">{% endif %}
<img src="{{ item.logo }}" alt= "{{ item.name }} logo" class="py-5 w-75">
</picture>
</div> </div>
<div class="col-12 col-sm-8 col-md-9 text-center text-md-start pb-4"> <div class="col-12 col-sm-8 col-md-9 text-center text-md-start pb-4">
<h2>{{ item.title }}</h2> <h2>{{ item.title }}</h2>