From 64bbaac4034f94ada094c585001031b1434ca74d Mon Sep 17 00:00:00 2001
From: Romain Paquet <rpqt@rpqt.fr>
Date: Thu, 20 Nov 2025 17:26:50 +0100
Subject: [PATCH] add style for PL badges

---
 _config.ts      | 13 +++++++++++++
 styles/main.css | 36 +++++++++++++++++++++++++++++++++---
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/_config.ts b/_config.ts
index fe7400b..a5e3637 100644
--- a/_config.ts
+++ b/_config.ts
@@ -7,6 +7,19 @@ import djot from "@djot/djot";
 
 const site = lume();
 
+site.filter("lowercasePL", (lang: string) => {
+  switch (lang) {
+    case "C++":
+      return "cpp";
+    case "C#":
+      return "csharp";
+    case "Python 3":
+      return "python3";
+    default:
+      return lang.toLowerCase();
+  }
+});
+
 site.use(nav());
 site.use(codeHighlight());
 
diff --git a/styles/main.css b/styles/main.css
index ddfbde8..4469519 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -95,9 +95,39 @@ footer {
 }
 
 .pl-badge {
-  border: 1px solid;
+  --color: var(--color-foreground);
   border-radius: 8px;
-  padding: 0.5em;
-  margin: 0.25em;
+  padding: 0em 0.5em;
+  margin: 0em;
   display: inline-block;
+  font-size: 0.9em;
+  background: color-mix(in srgb, var(--color), transparent 60%);
+  color: var(--color);
+}
+
+.pl-python3 {
+  --color: goldenrod;
+  background: color-mix(in srgb, gold, transparent 60%);
+}
+
+.pl-cpp {
+  --color: blue;
+}
+
+.pl-csharp {
+  --color: purple;
+}
+
+.pl-rust {
+  --color: orangered;
+}
+
+/* An icon to be displayed within text, at the same size as the text */
+.text-icon {
+  height: 1em;
+  width: 1em;
+  display: inline;
+  fill: var(--color-foreground);
+  position: relative;
+  top: .125em;
 }
\ No newline at end of file