91a1111182
Made the theme button toggable by keyboard Added aria-label to many <a> without any text (usually, they contains Font Awesome icons) Added aria-hidden whenever necessary Labelled the "Copy URL and Description" contained in footer Added an hidden label for the menu toggle for mobile accessibility Changed some colors to meet the Color Contrast AA level: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
332 lines
14 KiB
HTML
332 lines
14 KiB
HTML
<div class="card">
|
|
<div class="card-header text-white bg-secondary">
|
|
<h3 class="h5">
|
|
{% if include.badges %}
|
|
<span class="mr-2">{{ include.title }}</span>
|
|
{% assign badges = include.badges | split:"|" %}
|
|
{% for badge in badges %}
|
|
{% assign badge_data = badge | split:":" %}
|
|
{% assign color = badge_data[0] %}
|
|
{% assign text = badge_data[1] %}
|
|
{% assign tooltip = badge_data[2] | default: false %}
|
|
{% assign help_icon = '<i class="far fa-question-circle"></i>' %}
|
|
<span
|
|
class="badge badge-{{color}}"
|
|
{% if tooltip %}
|
|
data-toggle="tooltip"
|
|
data-original-title="{{ tooltip }}"
|
|
> {{text}} {{ help_icon }}
|
|
{% else %}
|
|
> {{text}}
|
|
{% endif %}
|
|
</span>
|
|
{% endfor %}
|
|
{% else %}
|
|
{{ include.title }}
|
|
{% endif %}
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">
|
|
<img
|
|
src="{{include.image}}"
|
|
{% if include.image-dark %}
|
|
data-theme-src="{{include.image-dark}}"
|
|
{% endif %}
|
|
height="120"
|
|
width="120"
|
|
class="panel-pic"
|
|
alt="{{include.title}} logo"
|
|
>
|
|
{{ include.description }}
|
|
{% if include.labels %}
|
|
{% assign labels = include.labels | split:"|" %}
|
|
{% for label in labels %}
|
|
{% assign label_data = label | split:"::" %}
|
|
{% for label_attr in label_data %}
|
|
{% assign attr = label_attr | split:"==" %}
|
|
{% if attr[0] == "color" %}
|
|
{% assign color = attr[1] %}
|
|
{% elsif attr[0] == "link" %}
|
|
{% assign link = attr[1] %}
|
|
{% elsif attr[0] == "text" %}
|
|
{% assign text = attr[1] %}
|
|
{% elsif attr[0] == "icon" %}
|
|
{% assign icon = attr[1] %}
|
|
{% elsif attr[0] == "tooltip" %}
|
|
{% assign tooltip = attr[1] %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% include badge.html
|
|
link=link
|
|
color=color
|
|
text=text
|
|
icon=icon
|
|
tooltip=tooltip
|
|
%}
|
|
{% assign color = nil %}
|
|
{% assign link = nil %}
|
|
{% assign text = nil %}
|
|
{% assign icon = nil %}
|
|
{% assign tooltip = nil %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</p>
|
|
<div class="d-flex justify-content-between flex-column flex-md-row align-items-start align-items-md-center">
|
|
<div class="flow-root flex-shrink-0 mr-1">
|
|
<a
|
|
href="{{include.website}}"
|
|
rel="noopener"
|
|
class="btn btn-primary mt-1 mr-1">
|
|
<i class="fas fa-external-link-alt fa-fw"></i>
|
|
Website
|
|
</a>
|
|
{% if include.privacy-policy %}
|
|
<a
|
|
href="{{include.privacy-policy}}"
|
|
rel="noopener"
|
|
class="btn btn-warning mt-1 mr-1">
|
|
<i class="fas fa-book fa-fw"></i>
|
|
Privacy Policy
|
|
</a>
|
|
{% endif %}
|
|
{% if include.forum %}
|
|
<a
|
|
href="{{include.forum}}"
|
|
rel="noopener"
|
|
class="btn btn-success mt-1 mr-1">
|
|
<i class="fab fa-discourse fa-fw"></i>
|
|
Forum
|
|
</a>
|
|
{% endif %}
|
|
{% if include.tor %}
|
|
<a
|
|
href="{{include.tor}}"
|
|
aria-label="Tor Onion link for {{include.title}}"
|
|
rel="noopener"
|
|
class="btn icon-btn hover-text-decoration-none mt-1 mr-1"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
data-original-title="Requires specific software to access: torproject.org">
|
|
<span class="ptio-tor btn-tor btn-icon"></span>
|
|
</a>
|
|
{% endif %}
|
|
{% if include.i2p %}
|
|
<a
|
|
href="{{include.i2p}}"
|
|
aria-label="i2p link for {{include.title}}"
|
|
rel="noopener"
|
|
class="btn icon-btn hover-text-decoration-none mt-1 mr-1"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
data-original-title="Requires specific software to access: geti2p.net">
|
|
<span class="ptio-i2p-garlic btn-secondary btn-icon"></span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mt-2">
|
|
{% if include.windows %}
|
|
{% if include.windows != "" %}
|
|
<a href="{{ include.windows }}" aria-label="Go to {{include.title}} for Windows" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i class="fab fa-windows fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.mac %}
|
|
{% if include.mac != "" %}
|
|
<a href="{{ include.mac }}" aria-label="Go to {{include.title}} for Mac" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="ptio-macos fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i class="ptio-macos fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.linux %}
|
|
{% if include.linux != "" %}
|
|
<a href="{{ include.linux }}" aria-label="Go to {{include.title}} for Linux" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="ptio-linux fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i class="ptio-linux fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.freebsd %}
|
|
{% if include.freebsd != "" %}
|
|
<a href="{{ include.freebsd }}" aria-label="Go to {{include.title}} for FreeBSD" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i class="fab fa-freebsd fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.openbsd %}
|
|
{% if include.openbsd != "" %}
|
|
<a href="{{ include.openbsd }}" aria-label="Go to {{include.title}} for OpenBSD" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="ptio-openbsd fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i class="ptio-openbsd fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.netbsd %}
|
|
{% if include.netbsd != "" %}
|
|
<a href="{{ include.netbsd }}" aria-label="Go to {{include.title}} for NetBSD" el="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="ptio-netbsd fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i class="ptio-netbsd fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.firefox %}
|
|
{% if include.firefox != "" %}
|
|
<a href="{{ include.firefox }}" aria-label="Firefox Add-on link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available as Firefox Add-on" class="fab fa-firefox fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.chrome %}
|
|
{% if include.chrome != "" %}
|
|
<a href="{{ include.chrome }}" aria-label="Chrome Extension link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available as Chrome Extension" class="fab fa-chrome fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.safari %}
|
|
{% if include.safari != "" %}
|
|
<a href="{{ include.safari }}" aria-label="Safari Extension link for {{include.title}} rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available as Safari Extension" class="fab fa-safari fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.opera %}
|
|
{% if include.opera != "" %}
|
|
<a href="{{ include.opera }}" aria-label="Opera Extension link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available as Opera Extension" class="fab fa-opera fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.edge %}
|
|
{% if include.edge != "" %}
|
|
<a href="{{ include.edge }}" aria-label="Edge Addon link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available as Edge Addon" class="fab fa-edge fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.fdroid %}
|
|
{% if include.fdroid != "" %}
|
|
<a href="{{ include.fdroid }}" aria-label="F-Droid link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="ptio-f-droid fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available on F-Droid" class="ptio-f-droid fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.googleplay %}
|
|
{% if include.googleplay != "" %}
|
|
<a href="{{ include.googleplay }}" aria-label="Play Store link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-google-play fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available on Play Store" class="fab fa-google-play fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.android %}
|
|
{% if include.android != "" %}
|
|
<a href="{{ include.android }}" aria-label="Android link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available for Android" class="fab fa-android fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.ios %}
|
|
{% if include.ios != "" %}
|
|
<a href="{{ include.ios }}" aria-label="iOS link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="ptio-ios fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available for iOS" class="ptio-ios fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.sailfish %}
|
|
{% if include.sailfish != "" %}
|
|
<a href="{{ include.sailfish }}" aria-label="SailFish link for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="ptio-sailfish-os fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i alt="{{include.title}} available for SailFish" class="ptio-sailfish-os fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if include.web %}
|
|
{% if include.web != "" %}
|
|
<a href="{{ include.web }}" aria-label="Go to {{include.title}} official website" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fas fa-globe-americas fa-2x fa-fw d-inline pr-1"></i>
|
|
</a>
|
|
{% else %}
|
|
<i class="fas fa-globe-americas fa-2x fa-fw d-inline pr-1"></i>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{{include.icon1}}
|
|
{{include.icon2}}
|
|
{{include.icon3}}
|
|
|
|
{% if include.github %}
|
|
<a href="{{include.github}}" aria-label="GitHub repository for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-github fa-2x fa-fw d-inline"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if include.gitlab %}
|
|
<a href="{{include.gitlab}}" aria-label="GitLab repository for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-gitlab fa-2x fa-fw d-inline"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if include.git %}
|
|
<a href="{{include.git}}" aria-label="Git repository for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fab fa-git-square fa-2x fa-fw d-inline"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if include.source %}
|
|
<a href="{{include.source}}" aria-label="Source Code for {{include.title}}" rel="noopener" class="text-decoration-none hover-text-decoration-none">
|
|
<i aria-hidden="true" class="fas fa-code-branch fa-2x fa-fw d-inline"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|