Add cover images (#2137)

docs/android.md

@@ -3,6 +3,7 @@ meta_title: "Android Recommendations: GrapheneOS and DivestOS - Privacy Guides"
 title: "Android"
 icon: 'simple/android'
 description: You can replace the operating system on your Android phone with these secure and privacy-respecting alternatives.
+cover: android.png
 schema:
   - 
     "@context": http://schema.org

docs/calendar.md

@@ -2,6 +2,7 @@
 title: "Calendar Sync"
 icon: material/calendar
 description: Calendars contain some of your most sensitive data; use products that implement encryption at rest.
+cover: calendar.png
 ---
 Calendars contain some of your most sensitive data; use products that implement E2EE at rest to prevent a provider from reading them.
 

docs/cloud.md

@@ -3,6 +3,7 @@ meta_title: "The Best Private and Secure Cloud Storage Providers - Privacy Guide
 title: "Cloud Storage"
 icon: material/file-cloud
 description: Many cloud storage providers require your trust that they will not look at your files. These are private alternatives!
+cover: cloud.png
 ---
 Many cloud storage providers require your full trust that they will not look at your files. The alternatives listed below eliminate the need for trust by implementing secure E2EE.
 

docs/cryptocurrency.md

@@ -2,6 +2,7 @@
 meta_title: "Private Cryptocurrency Blockchains - Privacy Guides"
 title: Cryptocurrency
 icon: material/bank-circle
+cover: cryptocurrency.png
 ---
 
 Making payments online is one of the biggest challenges to privacy. These cryptocurrencies provide transaction privacy by default (something which is **not** guaranteed by the majority of cryptocurrencies), provided you have a strong understanding of how to make private payments effectively. We strongly encourage you first read our payments overview article before making any purchases:

docs/data-redaction.md

@@ -3,6 +3,7 @@ meta_title: "Remove PII with Metadata Scrubbers and Data Redaction Tools - Priva
 title: "Data and Metadata Redaction"
 icon: material/tag-remove
 description: Use these tools to remove metadata like GPS location and other identifying information from photos and files you share.
+cover: data-redaction.png
 ---
 When sharing files, be sure to remove associated metadata. Image files commonly include [Exif](https://en.wikipedia.org/wiki/Exif) data. Photos sometimes even include GPS coordinates in the file metadata.
 

docs/desktop-browsers.md

@@ -3,6 +3,7 @@ meta_title: "Privacy Respecting Web Browsers for PC and Mac - Privacy Guides"
 title: "Desktop Browsers"
 icon: material/laptop
 description: These web browsers provide stronger privacy protections than Google Chrome.
+cover: desktop-browsers.png
 schema:
   - 
     "@context": http://schema.org

docs/desktop.md

@@ -2,6 +2,7 @@
 title: "Desktop/PC"
 icon: simple/linux
 description: Linux distributions are commonly recommended for privacy protection and software freedom.
+cover: desktop.png
 ---
 Linux distributions are commonly recommended for privacy protection and software freedom. If you don't already use Linux, below are some distributions we suggest trying out, as well as some general privacy and security improvement tips that are applicable to many Linux distributions.
 

docs/dns.md

@@ -2,6 +2,7 @@
 title: "DNS Resolvers"
 icon: material/dns
 description: These are some encrypted DNS providers we recommend switching to, to replace your ISP's default configuration.
+cover: dns.png
 ---
 
 Encrypted DNS with third-party servers should only be used to get around basic [DNS blocking](https://en.wikipedia.org/wiki/DNS_blocking) when you can be sure there won't be any consequences. Encrypted DNS will not help you hide any of your browsing activity.

docs/email-clients.md

@@ -2,6 +2,7 @@
 title: "Email Clients"
 icon: material/email-open
 description: These email clients are privacy-respecting and support OpenPGP email encryption.
+cover: email-clients.png
 ---
 Our recommendation list contains email clients that support both [OpenPGP](encryption.md#openpgp) and strong authentication such as [Open Authorization (OAuth)](https://en.wikipedia.org/wiki/OAuth). OAuth allows you to use [Multi-Factor Authentication](basics/multi-factor-authentication.md) and prevent account theft.
 

docs/email.md

@@ -3,6 +3,7 @@ meta_title: "Encrypted Private Email Recommendations - Privacy Guides"
 title: "Email Services"
 icon: material/email
 description: These email providers offer a great place to store your emails securely, and many offer interoperable OpenPGP encryption with other providers.
+cover: email.png
 ---
 Email is practically a necessity for using any online service, however we do not recommend it for person-to-person conversations. Rather than using email to contact other people, consider using an instant messaging medium that supports forward secrecy.
 

docs/encryption.md

@@ -3,6 +3,7 @@ meta_title: "Recommended Encryption Software: VeraCrypt, Cryptomator, PicoCrypt,
 title: "Encryption Software"
 icon: material/file-lock
 description: Encryption of data is the only way to control who can access it. These tools allow you to encrypt your emails and any other files.
+cover: encryption.png
 ---
 Encryption of data is the only way to control who can access it. If you are currently not using encryption software for your hard disk, emails or files, you should pick an option here.
 

docs/file-sharing.md

@@ -2,6 +2,7 @@
 title: "File Sharing and Sync"
 icon: material/share-variant
 description: Discover how to privately share your files between your devices, with your friends and family, or anonymously online.
+cover: file-sharing.png
 ---
 Discover how to privately share your files between your devices, with your friends and family, or anonymously online.
 

docs/financial-services.md

@@ -1,6 +1,7 @@
 ---
 title: Financial Services
 icon: material/bank
+cover: financial-services.png
 ---
 
 Making payments online is one of the biggest challenges to privacy. These services can assist you in protecting your privacy from merchants and other trackers, provided you have a strong understanding of how to make private payments effectively. We strongly encourage you first read our payments overview article before making any purchases:

docs/frontends.md

@@ -2,6 +2,7 @@
 title: "Frontends"
 icon: material/flip-to-front
 description: These open-source frontends for various internet services allow you to access content without JavaScript or other annoyances.
+cover: frontends.png
 ---
 
 Sometimes services will try to force you to sign up for an account by blocking access to content with annoying popups. They might also break without JavaScript enabled. These frontends can allow you to get around these restrictions.

docs/mobile-browsers.md

@@ -3,6 +3,7 @@ meta_title: "Privacy Respecting Mobile Web Browsers for Android and iOS - Privac
 title: "Mobile Browsers"
 icon: material/cellphone-information
 description: These browsers are what we currently recommend for standard/non-anonymous internet browsing on your phone.
+cover: mobile-browsers.png
 schema:
   - 
     "@context": http://schema.org

docs/multi-factor-authentication.md

@@ -2,6 +2,7 @@
 title: "Multi-Factor Authenticators"
 icon: 'material/two-factor-authentication'
 description: These tools assist you with securing your internet accounts with Multi-Factor Authentication without sending your secrets to a third-party.
+cover: multi-factor-authentication.png
 ---
 ## Hardware Security Keys
 

docs/news-aggregators.md

@@ -2,6 +2,7 @@
 title: "News Aggregators"
 icon: material/rss
 description: These news aggregator clients let you keep up with your favorite blogs and news sites using internet standards like RSS.
+cover: news-aggregators.png
 ---
 
 A [news aggregator](https://en.wikipedia.org/wiki/News_aggregator) is a way to keep up with your favorite blogs and news sites.

docs/notebooks.md

@@ -2,6 +2,7 @@
 title: "Notebooks"
 icon: material/notebook-edit-outline
 description: These encrypted note-taking apps let you keep track of your notes without giving them to a third-party.
+cover: notebooks.png
 ---
 
 Keep track of your notes and journalings without giving them to a third-party.

docs/passwords.md

@@ -3,6 +3,7 @@ meta_title: "The Best Password Managers to Protect Your Privacy and Security - P
 title: "Password Managers"
 icon: material/form-textbox-password
 description: Password managers allow you to securely store and manage passwords and other credentials.
+cover: passwords.png
 schema:
   - 
     "@context": http://schema.org

docs/productivity.md

@@ -2,6 +2,7 @@
 title: "Productivity Tools"
 icon: material/file-sign
 description: Most online office suites do not support E2EE, meaning the cloud provider has access to everything you do.
+cover: productivity.png
 ---
 Most online office suites do not support E2EE, meaning the cloud provider has access to everything you do. The privacy policy may legally protect your rights, but it does not provide technical access constraints.
 

docs/real-time-communication.md

@@ -3,6 +3,7 @@ meta_title: "The Best Private Instant Messengers - Privacy Guides"
 title: "Real-Time Communication"
 icon: material/chat-processing
 description: Other instant messengers make all of your private conversations available to the company that runs them.
+cover: real-time-communication.png
 ---
 
 These are our recommendations for encrypted real-time communication.

docs/router.md

@@ -2,6 +2,7 @@
 title: "Router Firmware"
 icon: material/router-wireless
 description: These alternative operating systems can be used to secure your router or Wi-Fi access point.
+cover: router.png
 ---
 Below are a few alternative operating systems, that can be used on routers, Wi-Fi access points, etc.
 

docs/search-engines.md

@@ -3,6 +3,7 @@ meta_title: "Recommended Search Engines: Anonymous Google Alternatives - Privacy
 title: "Search Engines"
 icon: material/search-web
 description: These privacy-respecting search engines don't build an advertising profile based on your searches.
+cover: search-engines.png
 ---
 Use a search engine that doesn't build an advertising profile based on your searches.
 

docs/tor.md

@@ -3,6 +3,7 @@ meta_title: "Tor Browser and Network: Anonymous Web Browsing - Privacy Guides"
 title: "Tor Network"
 icon: simple/torproject
 description: Protect your internet browsing from prying eyes by using the Tor network, a secure network which circumvents censorship.
+cover: tor.png
 schema:
   - 
     "@context": http://schema.org

docs/video-streaming.md

@@ -2,6 +2,7 @@
 title: "Video Streaming"
 icon: material/video-wireless
 description: These networks allow you to stream internet content without building an advertising profile based on your interests.
+cover: video-streaming.png
 ---
 The primary threat when using a video streaming platform is that your streaming habits and subscription lists could be used to profile you. You should combine these tools with a [VPN](vpn.md) or [Tor](https://www.torproject.org/) to make it harder to profile your usage.
 

docs/vpn.md

@@ -3,6 +3,7 @@ meta_title: "Private VPN Service Recommendations and Comparison, No Sponsors or
 title: "VPN Services"
 icon: material/vpn
 description: These are the best VPN services for protecting your privacy and security online. Find a provider here that isn’t out to spy on you.
+cover: vpn.png
 ---
 
 If you're looking for additional **privacy** from your ISP, on a public Wi-Fi network, or while torrenting files, a VPN may be the solution for you as long as you understand the risks involved. We think these providers are a cut above the rest:

theme/assets/img/cover/README.md

@@ -0,0 +1,7 @@
+# Cover images
+
+The cover images in this folder were obtained from Unsplash.
+
+## License
+
+See the [Unsplash License](https://unsplash.com/license) for details.

theme/assets/stylesheets/extra.css

@@ -454,3 +454,31 @@ div[class="md-source__icon md-icon"], div[class="md-source__repository md-source
 path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"] {
     d: path('M16.937 3.722a2.363 2.363 0 1 1 3.341 3.341L19.342 8 16 4.658l.937-.936ZM13.467 7 3 17.467V21h3.532L17 10.533 13.465 7h.001Z')
 }
+
+/* Cover images */
+.center-cropped {
+    width: 100%;
+    height: 200px;
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    position: relative;
+    text-align: center;
+    border-radius: 0.5em;
+}
+
+/* Set the image to fill its parent and make transparent */
+.center-cropped img {
+    min-height: 100%;
+    min-width: 100%;
+    opacity: 0;
+}
+
+.center-cropped h1 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+}

theme/main.html

@@ -84,13 +84,31 @@
     <strong>Visit privacyguides.org for current advice.</strong>
     </a>
 {% else %}{% endif %}{% endblock %}
-{% block extrahead %}{% if page and page.meta and page.meta.schema %}
+{% block extrahead %}
+<meta name="robots" content="max-snippet:-1, max-image-preview:large">
+{% if page and page.meta and page.meta.schema %}
 <script type="application/ld+json">
 {{ page.meta.schema|tojson }}
 </script>
 {% endif %}{% endblock %}
 {% block content %}
-    {% include "partials/content.html" %}
+    {% if page and page.meta and page.meta.cover %}
+    <div class="center-cropped" style="background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/en/assets/img/cover/{{ page.meta.cover }}');">
+        <h1>{{ page.title | d(config.site_name, true)}}</h1>
+        <img src="/en/assets/img/cover/{{ page.meta.cover }}" alt="{{ page.title | d(config.site_name, true)}} cover image" title="{{ page.title | d(config.site_name, true)}}">
+    </div>
+    {% endif %}
+    {% if "material/tags" in config.plugins %}
+    {% include "partials/tags.html" %}
+    {% endif %}
+    {% include "partials/actions.html" %}
+    {% if "\x3ch1" not in page.content and not page.meta.cover %}
+    <h1>{{ page.title | d(config.site_name, true)}}</h1>
+    {% endif %}
+    {{ page.content }}
+    {% include "partials/source-file.html" %}
+    {% include "partials/feedback.html" %}
+    {% include "partials/comments.html" %}
     {% if config.theme.language == "es" %}
     <div class="admonition info">
     <p>Está viendo la copia en español de Privacy Guides, traducidas por nuestro fantástico equipo lingüístico en <a href="https://crowdin.com/project/privacyguides">Crowdin</a>. Si nota un error o ve alguna sección sin traducir en esta página, ¡<a href="https://matrix.to/#/#pg-i18n:aragon.sh">considere ayudar</a>!</p>