1
1
mirror of https://github.com/privacyguides/privacyguides.org.git synced 2026-05-14 23:51:24 +00:00

style: Add brand fonts/colors to Hugo CSS

This commit is contained in:
2026-05-09 00:11:35 -05:00
parent e93466dc4d
commit bc33f5190e
24 changed files with 238 additions and 69 deletions
+3
View File
@@ -0,0 +1,3 @@
[submodule "static/brand"]
path = static/brand
url = https://github.com/privacyguides/brand
+188
View File
@@ -0,0 +1,188 @@
@font-face {
font-family: 'Bagnard';
src: url("/brand/fonts/Bagnard/Bold.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Thin%20Italic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/ExtraLight%20Italic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Light%20Italic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Medium%20Italic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/SemiBold%20Italic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Bold%20Italic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/ExtraBold%20Italic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Public Sans';
src: url('/brand/fonts/Public%20Sans/Black%20Italic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'DM Mono';
src: url('/brand/fonts/DM%20Mono/Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Mono';
src: url('/brand/fonts/DM%20Mono/Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
.content {
font-family: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif;
}
.content h1, .content h2, .content h3 {
font-family: "Bagnard", "Georgia", ui-serif, serif;
font-weight: bold;
padding-top: 0.5em;
border: none;
}
:root {
--primary-hue: 40.42deg;
--primary-saturation: 100%;
--primary-lightness: 71.76%;
}
.content :where(a):not(:where([class~=not-prose],
[class~=not-prose] *)) {
color:var(--hx-color-primary-800);
text-decoration: none;
font-weight: 500;
}
+3 -13
View File
@@ -40,9 +40,7 @@ If you're looking for a specific solution to something, these are the hardware a
#### DNS Providers
We [recommend](dns.md#recommended-providers) a number of encrypted DNS servers based on a variety of criteria, such as [Mullvad](https://mullvad.net/en/help/dns-over-https-and-dns-over-tls) and [Quad9](https://quad9.net) amongst others. We recommend for you to read our pages on DNS before choosing a provider. In many cases, using an alternative DNS provider is not recommended.
[Learn more :material-arrow-right-drop-circle:](dns.md)
We [**recommend**](dns.md#recommended-providers) a number of encrypted DNS servers based on a variety of criteria, such as [Mullvad](https://mullvad.net/en/help/dns-over-https-and-dns-over-tls) and [Quad9](https://quad9.net) amongst others. We recommend for you to read our pages on DNS before choosing a provider. In many cases, using an alternative DNS provider is not recommended.
#### Encrypted DNS Proxies
@@ -285,19 +283,11 @@ We [recommend](dns.md#recommended-providers) a number of encrypted DNS servers b
{{< card link="../software/pastebins/#paaster" title="Paaster" image="../software/pastebins/paaster.svg" subtitle="Paaster is a self-hosted, open-source pastebin service that allows you to share text and code snippets securely with end-to-end encryption." >}}
{{< /cards >}}
### Real-Time Communication
{{< cards >}}
{{< card link="../software/real-time-communication/#signal" title="Signal" image="../software/real-time-communication/signal.svg" subtitle="Signal is a cross-platform, end-to-end encrypted messaging app that offers secure text messaging, voice calls, and video calls." >}}
{{< card link="../software/real-time-communication/#briar" title="Briar" image="../software/real-time-communication/briar.svg" subtitle="Briar is an open-source, peer-to-peer messaging app for Android that uses the Tor network for secure communication." >}}
{{< card link="../software/real-time-communication/#simplex-chat" title="SimpleX Chat" image="../software/real-time-communication/simplex.svg" subtitle="SimpleX Chat is a cross-platform, end-to-end encrypted messaging app that offers secure text messaging and file sharing." >}}
{{< /cards >}}
### Social Networks
{{< cards >}}
{{< card link="../services/social-networks/#mastodon" title="Mastodon" image="../services/social-networks/mastodon.svg" subtitle="Mastodon is a decentralized, open-source social network that allows users to create and join communities called instances." >}}
{{< card link="../services/social-networks/#element" title="Element" image="../services/social-networks/element.svg" subtitle="Element is a cross-platform, open-source messaging app that serves as a client for the Matrix protocol, which can be used for real-time communication and social networking." >}}
{{< card link="../software/social-networks/#mastodon" title="Mastodon" image="../software/social-networks/mastodon.svg" subtitle="Mastodon is a decentralized, open-source social network that allows users to create and join communities called instances." >}}
{{< card link="../software/social-networks/#element" title="Element" image="../software/social-networks/element.svg" subtitle="Element is a cross-platform, open-source messaging app that serves as a client for the Matrix protocol, which can be used for real-time communication and social networking." >}}
{{< /cards >}}
## Hardware
+4
View File
@@ -0,0 +1,4 @@
---
title: Advanced Topics
weight: 20
---
@@ -1,6 +1,6 @@
---
title: "Types of Communication Networks"
icon: 'material/transit-connection-variant'
weight: 40
description: An overview of several network architectures commonly used by instant messaging applications.
---
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: "DNS Overview"
icon: material/dns
weight: 10
description: The Domain Name System is the "phonebook of the internet," helping your browser find the website it's looking for.
---
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: Private Payments
icon: material/hand-coin
weight: 30
description: Your buying habits are the holy grail of ad targeting, but you still have plenty of options when it comes to making payments privately.
---
Data about your buying habits is considered the holy grail of ad targeting: Your purchases can leak a veritable treasure trove of data about you. Unfortunately, the current financial system is anti-privacy by design, enabling banks, other companies, and governments to easily trace transactions. Nevertheless, you have plenty of options when it comes to making payments privately.
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: "Tor Overview"
icon: 'simple/torproject'
weight: 20
description: Tor is a free to use, decentralized network designed for using the internet with as much privacy as possible.
---
+4
View File
@@ -0,0 +1,4 @@
---
title: The Basics
weight: 10
---
+1 -1
View File
@@ -1,7 +1,7 @@
---
meta_title: "How to Create Internet Accounts Privately - Privacy Guides"
title: "Account Creation"
icon: 'material/account-plus'
weight: 50
description: Creating accounts online is practically an internet necessity, take these steps to make sure you stay private.
---
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: Account Deletion
icon: material/account-remove
weight: 60
description: It's easy to accumulate a large number of internet accounts. Here are some tips on how to prune your collection.
---
Over time, it can be easy to accumulate a number of online accounts, many of which you may no longer use. Deleting these unused accounts is an important step in reclaiming your privacy, as dormant accounts are vulnerable to data breaches. A data breach occurs when a service's security is compromised and protected information is viewed, transmitted, or stolen by unauthorized actors. Data breaches are unfortunately all [too common](https://haveibeenpwned.com/PwnedWebsites) these days, and so practicing good digital hygiene is the best way to minimize the impact they have on your life. The goal of this guide then is to help navigate you through the irksome process of account deletion, often made difficult by [deceptive design](https://deceptive.design), for the betterment of your online presence.
+1 -35
View File
@@ -1,41 +1,7 @@
---
title: "Common Misconceptions"
icon: 'material/robot-confused'
weight: 40
description: Privacy isn't a straightforward topic, and it's easy to get caught up in marketing claims and other disinformation.
schema:
-
"@context": https://schema.org
"@type": FAQPage
mainEntity:
-
"@type": Question
name: Is open-source software inherently secure?
acceptedAnswer:
"@type": Answer
text: |
Whether the source code is available and how software is licensed does not inherently affect its security in any way. Open-source software has the potential to be more secure than proprietary software, but there is absolutely no guarantee this is the case. When you evaluate software, you should look at the reputation and security of each tool on an individual basis.
-
"@type": Question
name: Can shifting trust to another provider increase privacy?
acceptedAnswer:
"@type": Answer
text: |
We talk about "shifting trust" a lot when discussing solutions like VPNs (which shift the trust you place in your ISP to the VPN provider). While this protects your browsing data from your ISP specifically, the VPN provider you choose still has access to your browsing data: Your data isn't completely secured from all parties.
-
"@type": Question
name: Are privacy-focused solutions inherently trustworthy?
acceptedAnswer:
"@type": Answer
text: |
Focusing solely on the privacy policies and marketing of a tool or provider can blind you to its weaknesses. When you're looking for a more private solution, you should determine what the underlying problem is and find technical solutions to that problem. For example, you may want to avoid Google Drive, which gives Google access to all of your data. The underlying problem in this case is lack of E2EE, so you should make sure that the provider you switch to actually implements E2EE, or use a tool (like Cryptomator) which provides E2EE on any cloud provider. Switching to a "privacy-focused" provider (that doesn't implement E2EE) doesn't solve your problem: it just shifts trust from Google to that provider.
-
"@type": Question
name: How complicated should my threat model be?
acceptedAnswer:
"@type": Answer
text: |
We often see people describing privacy threat models that are overly complex. Often, these solutions include problems like many different email accounts or complicated setups with lots of moving parts and conditions. The replies are usually answers to "What is the best way to do X?"
Finding the "best" solution for yourself doesn't necessarily mean you are after an infallible solution with dozens of conditions—these solutions are often difficult to work with realistically. As we discussed previously, security often comes at the cost of convenience.
---
## "Open-source software is always secure" or "Proprietary software is more secure"
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: "Common Threats"
icon: 'material/eye-outline'
weight: 30
description: Your threat model is personal to you, but these are some of the things many visitors to this site care about.
---
+1 -1
View File
@@ -1,7 +1,7 @@
---
meta_title: "Why Email Isn't the Best Choice for Privacy and Security - Privacy Guides"
title: Email Security
icon: material/email
weight: 100
description: Email is insecure in many ways, and these are some of the reasons it isn't our top choice for secure communications.
---
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: "Choosing Your Hardware"
icon: 'material/chip'
weight: 90
description: Software isn't all that matters; learn about the hardware tools you use every day to protect your privacy.
---
@@ -1,6 +1,6 @@
---
title: Multifactor Authentication
icon: material/two-factor-authentication
weight: 80
description: MFA is a critical security mechanism for securing your online accounts, but some methods are stronger than others.
---
**Multifactor Authentication** (**MFA**) is a security mechanism that requires additional steps beyond entering your username (or email) and password. The most common method is time limited codes you might receive from SMS or an app.
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: Introduction to Passwords
icon: material/form-textbox-password
weight: 70
description: These are some tips and tricks on how to create the strongest passwords and keep your accounts secure.
---
+1 -1
View File
@@ -1,7 +1,7 @@
---
meta_title: "Threat Modeling: The First Step on Your Privacy Journey - Privacy Guides"
title: "Threat Modeling"
icon: 'material/target-account'
weight: 20
description: Balancing security, privacy, and usability is one of the first and most difficult tasks you'll face on your privacy journey.
---
+1 -1
View File
@@ -1,7 +1,7 @@
---
meta_title: "How Do VPNs Protect Your Privacy? Our VPN Overview - Privacy Guides"
title: VPN Overview
icon: material/vpn
weight: 110
description: Virtual Private Networks shift risk away from your ISP to a third-party you trust. You should keep these things in mind.
---
+1 -1
View File
@@ -1,6 +1,6 @@
---
title: "Why Privacy Matters"
icon: 'material/shield-account'
weight: 10
description: In the modern age of digital data exploitation, your privacy has never been more critical, and yet many believe it is already a lost cause. It is not.
---
In the modern age of digital data exploitation, your privacy has never been more critical, and yet many believe it is already a lost cause. It is not. ==Your privacy is up for grabs==, and you need to care about it. Privacy is about power, and it is so important that this power ends up in the right hands.
+20 -7
View File
@@ -34,12 +34,9 @@ menu:
- name: Activism
pageRef: /activism
weight: 3
- name: Forum ↗
url: "https://discuss.privacyguides.net"
weight: 4
- identifier: updates
name: Updates
weight: 5
weight: 4
- identifier: articles
name: Articles
pageRef: /posts/tag/articles/
@@ -52,6 +49,9 @@ menu:
name: News
pageRef: /news/
parent: updates
- name: Forum ↗
url: "https://discuss.privacyguides.net"
weight: 5
- identifier: more
name: More
weight: 6
@@ -75,13 +75,26 @@ menu:
params:
navbar:
displayTitle: true
displayLogo: false
displayTitle: false
displayLogo: true
logo:
path: "brand/logos/svg/logo/privacy-guides-logo.svg"
dark: "brand/logos/svg/logo/privacy-guides-logo-dark.svg"
link: "/"
width: 185
height: 24
# Display the last modification date
displayUpdatedDate: true
dateFormat: "January 2, 2006"
# Display the author of the last modification
displayUpdatedAuthor: true
footer:
displayCopyright: false
displayPoweredBy: true
displayPoweredBy: false
editURL:
enable: true
base: "https://github.com/privacyguides/privacyguides.org/edit/main/content"
enableGitInfo: true
Submodule
+1
Submodule static/brand added at e567eb3f0e