From bc33f5190e4e9087d3e3f5ebc6ff3531d00b5825 Mon Sep 17 00:00:00 2001 From: Jonah Aragon Date: Sat, 9 May 2026 00:11:35 -0500 Subject: [PATCH] style: Add brand fonts/colors to Hugo CSS --- .gitmodules | 3 + assets/css/custom.css | 188 ++++++++++++++++++ content/tools/all.md | 16 +- content/wiki/advanced/_index.md | 4 + .../advanced/communication-network-types.md | 2 +- content/wiki/advanced/dns-overview.md | 2 +- content/wiki/advanced/payments.md | 2 +- content/wiki/advanced/tor-overview.md | 2 +- content/wiki/basics/_index.md | 4 + content/wiki/basics/account-creation.md | 2 +- content/wiki/basics/account-deletion.md | 2 +- content/wiki/basics/common-misconceptions.md | 36 +--- content/wiki/basics/common-threats.md | 2 +- content/wiki/basics/email-security.md | 2 +- content/wiki/basics/hardware.md | 2 +- .../basics/multi-factor-authentication.md | 2 +- content/wiki/basics/passwords-overview.md | 2 +- content/wiki/basics/threat-modeling.md | 2 +- content/wiki/basics/vpn-overview.md | 2 +- content/wiki/basics/why-privacy-matters.md | 2 +- content/wiki/os/{index.md => _index.md} | 0 .../wiki/os/windows/{index.md => _index.md} | 0 hugo.yaml | 27 ++- static/brand | 1 + 24 files changed, 238 insertions(+), 69 deletions(-) create mode 100644 .gitmodules create mode 100644 assets/css/custom.css create mode 100644 content/wiki/advanced/_index.md create mode 100644 content/wiki/basics/_index.md rename content/wiki/os/{index.md => _index.md} (100%) rename content/wiki/os/windows/{index.md => _index.md} (100%) create mode 160000 static/brand diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..614dd378 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "static/brand"] + path = static/brand + url = https://github.com/privacyguides/brand diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 00000000..17c66b1d --- /dev/null +++ b/assets/css/custom.css @@ -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; +} diff --git a/content/tools/all.md b/content/tools/all.md index 12def95d..d1b463c7 100644 --- a/content/tools/all.md +++ b/content/tools/all.md @@ -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 diff --git a/content/wiki/advanced/_index.md b/content/wiki/advanced/_index.md new file mode 100644 index 00000000..2c19bc6a --- /dev/null +++ b/content/wiki/advanced/_index.md @@ -0,0 +1,4 @@ +--- +title: Advanced Topics +weight: 20 +--- diff --git a/content/wiki/advanced/communication-network-types.md b/content/wiki/advanced/communication-network-types.md index 1598b540..056fb04d 100644 --- a/content/wiki/advanced/communication-network-types.md +++ b/content/wiki/advanced/communication-network-types.md @@ -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. --- diff --git a/content/wiki/advanced/dns-overview.md b/content/wiki/advanced/dns-overview.md index 489e3343..e701bb5c 100644 --- a/content/wiki/advanced/dns-overview.md +++ b/content/wiki/advanced/dns-overview.md @@ -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. --- diff --git a/content/wiki/advanced/payments.md b/content/wiki/advanced/payments.md index 9f473298..42cfdb1b 100644 --- a/content/wiki/advanced/payments.md +++ b/content/wiki/advanced/payments.md @@ -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. diff --git a/content/wiki/advanced/tor-overview.md b/content/wiki/advanced/tor-overview.md index 0c58add5..2852fed2 100644 --- a/content/wiki/advanced/tor-overview.md +++ b/content/wiki/advanced/tor-overview.md @@ -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. --- diff --git a/content/wiki/basics/_index.md b/content/wiki/basics/_index.md new file mode 100644 index 00000000..010b9014 --- /dev/null +++ b/content/wiki/basics/_index.md @@ -0,0 +1,4 @@ +--- +title: The Basics +weight: 10 +--- diff --git a/content/wiki/basics/account-creation.md b/content/wiki/basics/account-creation.md index 19a6a485..013b5474 100644 --- a/content/wiki/basics/account-creation.md +++ b/content/wiki/basics/account-creation.md @@ -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. --- diff --git a/content/wiki/basics/account-deletion.md b/content/wiki/basics/account-deletion.md index 6b1db1ac..2c5d3ae3 100644 --- a/content/wiki/basics/account-deletion.md +++ b/content/wiki/basics/account-deletion.md @@ -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. diff --git a/content/wiki/basics/common-misconceptions.md b/content/wiki/basics/common-misconceptions.md index 3fc5e21c..be357ae2 100644 --- a/content/wiki/basics/common-misconceptions.md +++ b/content/wiki/basics/common-misconceptions.md @@ -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" diff --git a/content/wiki/basics/common-threats.md b/content/wiki/basics/common-threats.md index 833810db..1acde519 100644 --- a/content/wiki/basics/common-threats.md +++ b/content/wiki/basics/common-threats.md @@ -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. --- diff --git a/content/wiki/basics/email-security.md b/content/wiki/basics/email-security.md index 71a01850..af70e45b 100644 --- a/content/wiki/basics/email-security.md +++ b/content/wiki/basics/email-security.md @@ -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. --- diff --git a/content/wiki/basics/hardware.md b/content/wiki/basics/hardware.md index abe30fe5..6200c24c 100644 --- a/content/wiki/basics/hardware.md +++ b/content/wiki/basics/hardware.md @@ -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. --- diff --git a/content/wiki/basics/multi-factor-authentication.md b/content/wiki/basics/multi-factor-authentication.md index 94f129bd..1acbe6ca 100644 --- a/content/wiki/basics/multi-factor-authentication.md +++ b/content/wiki/basics/multi-factor-authentication.md @@ -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. diff --git a/content/wiki/basics/passwords-overview.md b/content/wiki/basics/passwords-overview.md index 9416dd90..7f52c308 100644 --- a/content/wiki/basics/passwords-overview.md +++ b/content/wiki/basics/passwords-overview.md @@ -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. --- diff --git a/content/wiki/basics/threat-modeling.md b/content/wiki/basics/threat-modeling.md index 80dc58ac..952f8547 100644 --- a/content/wiki/basics/threat-modeling.md +++ b/content/wiki/basics/threat-modeling.md @@ -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. --- diff --git a/content/wiki/basics/vpn-overview.md b/content/wiki/basics/vpn-overview.md index e05293aa..432bc6c6 100644 --- a/content/wiki/basics/vpn-overview.md +++ b/content/wiki/basics/vpn-overview.md @@ -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. --- diff --git a/content/wiki/basics/why-privacy-matters.md b/content/wiki/basics/why-privacy-matters.md index c309d97f..449bbbb7 100644 --- a/content/wiki/basics/why-privacy-matters.md +++ b/content/wiki/basics/why-privacy-matters.md @@ -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. diff --git a/content/wiki/os/index.md b/content/wiki/os/_index.md similarity index 100% rename from content/wiki/os/index.md rename to content/wiki/os/_index.md diff --git a/content/wiki/os/windows/index.md b/content/wiki/os/windows/_index.md similarity index 100% rename from content/wiki/os/windows/index.md rename to content/wiki/os/windows/_index.md diff --git a/hugo.yaml b/hugo.yaml index 3d5d34c3..eee47fd0 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -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 diff --git a/static/brand b/static/brand new file mode 160000 index 00000000..e567eb3f --- /dev/null +++ b/static/brand @@ -0,0 +1 @@ +Subproject commit e567eb3f0e6cb54242a809661d78d884caa05b72