From 47439e71c5d37b24c93a50405de84029be7f6d67 Mon Sep 17 00:00:00 2001 From: Ricardo Date: Thu, 5 Mar 2026 08:50:28 +0100 Subject: [PATCH] feat: add brand colors to social icons in hero sections Replace monochrome (black/amber) social icons with official brand colors for each service. Add socialIconColorClass macro that maps icon names to Tailwind color classes with dark mode variants. Changes: - social-icon.njk: add brand color macro for 30+ icon types - social-icon.njk: replace ActivityPub icon with official W3C logo - hero.njk: apply brand colors to icons, neutral text for labels - cv-builder.njk: same brand color treatment as hero section Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d --- _includes/components/cv-builder.njk | 6 ++-- _includes/components/sections/hero.njk | 6 ++-- _includes/components/social-icon.njk | 49 ++++++++++++++++++++++++-- 3 files changed, 53 insertions(+), 8 deletions(-) diff --git a/_includes/components/cv-builder.njk b/_includes/components/cv-builder.njk index 9f4102d..3699f73 100644 --- a/_includes/components/cv-builder.njk +++ b/_includes/components/cv-builder.njk @@ -56,17 +56,17 @@

{% endif %} - {% from "components/social-icon.njk" import socialIcon %} + {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %} {% if cvPageConfig.hero.showSocial != false and socialLinks %}
{% for link in socialLinks %} - {{ socialIcon(link.icon, "w-5 h-5") }} + {{ socialIcon(link.icon, "w-5 h-5") }} {{ link.name }} {% endfor %} diff --git a/_includes/components/sections/hero.njk b/_includes/components/sections/hero.njk index 0ac17ac..0366965 100644 --- a/_includes/components/sections/hero.njk +++ b/_includes/components/sections/hero.njk @@ -45,17 +45,17 @@ {% endif %} {# Social Links #} - {% from "components/social-icon.njk" import socialIcon %} + {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %} {% if heroConfig.showSocial != false and socialLinks %}
{% for link in socialLinks %} - {{ socialIcon(link.icon, "w-5 h-5") }} + {{ socialIcon(link.icon, "w-5 h-5") }} {{ link.name }} {% endfor %} diff --git a/_includes/components/social-icon.njk b/_includes/components/social-icon.njk index 3ccebce..54638b2 100644 --- a/_includes/components/social-icon.njk +++ b/_includes/components/social-icon.njk @@ -1,12 +1,57 @@ {# Social Icon Macro - Usage: {% from "components/social-icon.njk" import socialIcon %} + Usage: {% from "components/social-icon.njk" import socialIcon, socialIconColorClass %} {{ socialIcon("github", "w-5 h-5") }} + {{ socialIcon("github", "w-5 h-5") }} SVG paths sourced from Simple Icons (simpleicons.org) - CC0 1.0 Universal All icons render at 24x24 viewBox with fill="currentColor" + Brand colors from official brand guidelines #} +{# Returns Tailwind color classes for an icon's brand color (light + dark) #} +{% macro socialIconColorClass(name) %} +{%- if name == "activitypub" -%}text-[#f1027e] +{%- elif name == "github" -%}text-[#181717] dark:text-[#e6edf3] +{%- elif name == "gitlab" -%}text-[#FC6D26] +{%- elif name == "forgejo" -%}text-[#609926] +{%- elif name == "codeberg" -%}text-[#2185D0] +{%- elif name == "mastodon" -%}text-[#6364FF] +{%- elif name == "bluesky" -%}text-[#0085FF] +{%- elif name == "pixelfed" -%}text-[#6C42C9] +{%- elif name == "linkedin" -%}text-[#0A66C2] +{%- elif name == "twitter" -%}text-[#000000] dark:text-[#e7e9ea] +{%- elif name == "threads" -%}text-[#000000] dark:text-[#f5f5f5] +{%- elif name == "youtube" -%}text-[#FF0000] +{%- elif name == "twitch" -%}text-[#9146FF] +{%- elif name == "spotify" -%}text-[#1DB954] +{%- elif name == "bandcamp" -%}text-[#629aa9] +{%- elif name == "soundcloud" -%}text-[#FF5500] +{%- elif name == "rss" -%}text-[#F26522] +{%- elif name == "discord" -%}text-[#5865F2] +{%- elif name == "signal" -%}text-[#3A76F0] +{%- elif name == "telegram" -%}text-[#26A5E4] +{%- elif name == "matrix" -%}text-[#000000] dark:text-[#e6e6e6] +{%- elif name == "reddit" -%}text-[#FF4500] +{%- elif name == "hackernews" -%}text-[#FF6600] +{%- elif name == "funkwhale" -%}text-[#0D47A1] +{%- elif name == "lastfm" -%}text-[#D51007] +{%- elif name == "peertube" -%}text-[#F1680D] +{%- elif name == "bookwyrm" -%}text-[#002200] dark:text-[#78b578] +{%- elif name == "indieweb" -%}text-[#FF5C00] +{%- elif name == "email" -%}text-surface-600 dark:text-surface-400 +{%- elif name == "website" -%}text-surface-600 dark:text-surface-400 +{%- elif name == "keybase" -%}text-[#33A0FF] +{%- elif name == "orcid" -%}text-[#A6CE39] +{%- elif name == "flickr" -%}text-[#0063DC] +{%- elif name == "xmpp" -%}text-[#002B5C] dark:text-[#5badff] +{%- elif name == "sourcehut" -%}text-[#000000] dark:text-[#e0e0e0] +{%- elif name == "facebook" -%}text-[#0866FF] +{%- elif name == "instagram" -%}text-[#E4405F] +{%- else -%}text-surface-600 dark:text-surface-400 +{%- endif -%} +{% endmacro %} + {% macro socialIcon(name, cssClass) %} {%- if name == "github" -%} @@ -25,7 +70,7 @@ {%- elif name == "mastodon" -%} {%- elif name == "activitypub" -%} - + {%- elif name == "pixelfed" -%} {%- elif name == "twitter" -%}