diff --git a/assets/css/custom.css b/assets/css/custom.css index 3e81d927..e2312969 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -184,25 +184,48 @@ h1, .content h1, .content h2, .content h3 { --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif; } -:root:has(body.recommended-privacy-tools) { +:root:has(body.recommended-privacy-tools), body.privacy-guides .hextra-feature-grid a[href*="tools"] { --primary-hue: 200deg; --primary-saturation: 37.75%; --primary-lightness: 70.39%; - --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif; } -:root:has(body.privacy-wiki) { +:root:has(body.privacy-wiki), body.privacy-guides .hextra-feature-grid a[href*="wiki"] { --primary-hue: 167.57deg; --primary-saturation: 97.13%; --primary-lightness: 40.98%; - --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif; } -:root:has(body.privacy-activism) { +:root:has(body.privacy-activism), body.privacy-guides .hextra-feature-grid a[href*="activism"] { --primary-hue: 5deg; --primary-saturation: 96.43%; --primary-lightness: 56.08%; - --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif; +} + +body.privacy-guides .hextra-feature-grid a[href*="youtube.com"] { + --primary-hue: 259.83deg; + --primary-saturation: 95.04%; + --primary-lightness: 76.27%; +} + +body.privacy-guides .hextra-feature-grid a[href*="discuss.privacyguides.net"] { + --primary-hue: 33deg; + --primary-saturation: 100%; + --primary-lightness: 92.16%; +} + +body.privacy-guides .hextra-feature-grid a[href*="news"] { + --primary-hue: 217.97deg; + --primary-saturation: 100%; + --primary-lightness: 69.02%; +} + +body.privacy-guides .hextra-feature-grid a.pg\:colored-card:has(img) { + background: radial-gradient(ellipse at 50% 80%,hsl(var(--primary-hue)var(--primary-saturation)calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness))/50)*16)),hsla(0,0%,100%,0)); +} + +.hextra-feature-grid img { + filter: opacity(85%) } .hextra-nav-container { diff --git a/content/_index.md b/content/_index.md index 16e0b706..9d437319 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,7 +3,7 @@ title: Privacy Guides layout: pg-home --- -{{< hextra/hero-container image="brand/logos/svg/square/pg-yellow-nobg.svg" imageTitle="Privacy Guides shield logo" >}} +{{< hextra/hero-container image="brand/logos/svg/square/pg-yellow-nobg.svg" imageTitle="Privacy Guides shield logo" imageClass="hx:sm:block hx:hidden" >}}
{{< hextra/hero-headline >}} @@ -36,55 +36,49 @@ layout: pg-home {{< hextra/feature-card title="Privacy Wiki" subtitle="A comprehensive resource for understanding digital privacy concepts and best practices." - class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]" + class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card" image="pg-home-privacy-wiki.png" imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80" - style="background: radial-gradient(ellipse at 50% 80%,rgba(53, 142, 62, 0.15),hsla(0,0%,100%,0));" link="wiki" >}} {{< hextra/feature-card title="Educational Videos" subtitle="Watch our educational videos to learn more about digital privacy and how to protect yourself online." - class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]" + class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card" image="pg-home-youtube.png" imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80" - style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));" link="https://youtube.com/@PrivacyGuides" >}} {{< hextra/feature-card title="Activism Toolbox" subtitle="Get involved in privacy activism and help us build a more private internet." - class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]" + class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card" image="pg-home-privacy-activism.png" imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80" - style="background: radial-gradient(ellipse at 50% 80%,rgba(221, 59, 59, 0.15),hsla(0,0%,100%,0));" link="activism" >}} {{< hextra/feature-card title="Privacy Tools" subtitle="The essential tools you need to safeguard your digital privacy, chosen by community consensus." - class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]" + class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card" image="pg-home-privacy-tools.png" imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80" - style="background: radial-gradient(ellipse at 50% 80%,rgba(0, 0, 0, 0.15),hsla(0,0%,100%,0));" link="tools" >}} {{< hextra/feature-card title="Community Forum" subtitle="Join the conversation, get answers, and connect with others who share your commitment to digital privacy." - class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]" + class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card" image="pg-home-privacy-forum.png" imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80" - style="background: radial-gradient(ellipse at 50% 80%,rgba(59, 202, 221, 0.15),hsla(0,0%,100%,0));" link="https://discuss.privacyguides.net" >}} {{< hextra/feature-card title="News Briefs" subtitle="Stay updated with the latest news and developments in the world of cybersecurity, privacy, and digital rights." - class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]" + class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card" image="pg-home-privacy-news.png" imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80" - style="background: radial-gradient(ellipse at 50% 80%,rgba(183, 59, 221, 0.15),hsla(0,0%,100%,0));" link="news" >}} {{< /hextra/feature-grid >}}