From 650ba58070bf8578bcd379278a53757ae41fa108 Mon Sep 17 00:00:00 2001
From: paulsohier <paul@sohier.me>
Date: Sat, 19 Sep 2026 16:06:29 +0100
Subject: [PATCH] Style the header's SVG social icons as brand-coloured tiles

The page headers of the Symfony site, the forum and the old site are
switching their social icons from PNGs to inline SVG glyphs with a
.social-icons container (paul999/phpbb-website-private#74). Give each
link a 20px rounded tile in its brand's colour with the glyph in white,
laid out with flexbox and an even 6px spacing, plus hover and focus
states. Bump the website.css import in index.css so browsers fetch it
again.

The PNG rules stay until every deployed header uses the new markup.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 css/index.css   |  2 +-
 css/website.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)

diff --git a/css/index.css b/css/index.css
index 9c906d9..9c777be 100644
--- a/css/index.css
+++ b/css/index.css
@@ -3,7 +3,7 @@
    --------------------------------------------------------------
 */
 
-@import url("/assets/css/website.css?5");
+@import url("/assets/css/website.css?6");
 @import url("/assets/css/headers.css?4");
 @import url("/assets/css/navigation.css?3");
 @import url("/assets/css/silver.css?2");
diff --git a/css/website.css b/css/website.css
index 767f35a..db97d2b 100644
--- a/css/website.css
+++ b/css/website.css
@@ -289,6 +289,54 @@ body.home #main div.column1 li, body.home #main div.column2 li {
 	padding: 0 3px !important;
 }
 
+/* Brand icons drawn as inline SVG: a white glyph on a tile in the brand's colour.
+   Interim until the website has its own icon font (paul999/phpbb-website-private#40). */
+.social-icons {
+	display: flex;
+	padding: 0 3px;
+}
+.social-icons a + a {
+	margin-left: 6px;
+}
+.social-icons a {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+	border-radius: 4px;
+	overflow: hidden;
+	color: #FFFFFF;
+	text-decoration: none;
+	transition: box-shadow 0.15s ease-in-out;
+}
+.social-icons a:hover,
+.social-icons a:focus {
+	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
+}
+.social-icons a:focus-visible {
+	outline: 2px solid #FFFFFF;
+	outline-offset: 1px;
+}
+.social-icons svg {
+	display: block;
+	fill: currentColor;
+}
+.social-icons .social-icon-rss {
+	background-color: #F26522;
+}
+.social-icons .social-icon-facebook {
+	/* The "f" stands on the tile's bottom edge, as in Facebook's own app icon */
+	align-items: flex-end;
+	background-color: #0866FF;
+}
+.social-icons .social-icon-x {
+	background-color: #000000;
+}
+.social-icons .social-icon-discord {
+	background-color: #5865F2;
+}
+
 /* News listing */
 #main ul.news {
 	border-top: 1px solid #FFFFFF;