privacyguides/privacyguides.org
1
0
Fork 0
mirror of https://github.com/privacyguides/privacyguides.org.git synced 2025-11-04 05:17:57 +00:00
Code Issues Activity

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

Browse Source 
Specify `logo_dark` in yaml
This commit is contained in:
Jonah Aragon
2022-01-01 00:29:43 -06:00
parent 29037a6500
commit becbf3ddcb
2 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
_data/software/video-streaming-front-ends/1_invidious.yml
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.

7
_includes/recommendation-card.html
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>