breadcrumb improvements

2026-05-17 13:20:08 +02:00
parent aa2a5ea10b
commit 119e470767
2 changed files with 120 additions and 5 deletions
@@ -451,15 +451,63 @@
 }

 .westgate-wiki .wiki-breadcrumb-trail {
-	color: var(--wg-text-muted);
-	font-family: var(--wg-font-ui);
-	font-weight: 600;
-	letter-spacing: 0.08em;
+	color: #b9b2a6;
+	font-family: var(--wg-font-display);
+	font-size: 0.875rem;
+	gap: 0;
+	font-weight: 500;
+	letter-spacing: 0;
+	text-transform: none;
 }

+.westgate-wiki .wiki-breadcrumb-trail__list {
+	gap: 0;
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__item {
+	gap: 0;
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__item:not(:last-child)::after {
+	content: none;
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__item + .wiki-breadcrumb-trail__item {
+	padding-left: 12px;
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__item + .wiki-breadcrumb-trail__item::before,
+.westgate-wiki .wiki-breadcrumb-trail__action::before {
+	color: var(--wg-gold-soft);
+	content: "→";
+	font-family: var(--wg-font-ui);
+	font-weight: 500;
+	padding-right: 12px;
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__link,
+.westgate-wiki .wiki-breadcrumb-trail__text,
 .westgate-wiki .wiki-breadcrumb-trail__text--current,
 .westgate-wiki .wiki-breadcrumb-trail__action {
-	color: var(--wg-text);
+	color: var(--wiki-breadcrumb-color);
+	font-family: var(--wg-font-display);
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__link:hover,
+.westgate-wiki .wiki-breadcrumb-trail__link:focus {
+	color: #e0c878;
+	text-decoration: underline;
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__action {
+	display: inline-flex;
+	letter-spacing: 0;
+	text-transform: none;
+}
+
+.westgate-wiki .wiki-breadcrumb-trail__action::before {
+	margin-right: 0;
+	opacity: 1;
 }

 .westgate-wiki :where(.wiki-card h2, .wiki-topic-card h2, .wiki-section-heading h2, .wiki-subsection-card h3) {
@@ -0,0 +1,67 @@
+const assert = require("assert");
+const fs = require("fs");
+const path = require("path");
+
+const stylesheet = fs.readFileSync(
+	path.join(__dirname, "..", "scss", "westgate", "_wiki-prose.scss"),
+	"utf8"
+);
+
+function ruleHasDeclaration(selector, declaration) {
+	const rulePattern = /([^{}]+)\{([^{}]*)\}/g;
+	let match;
+	while ((match = rulePattern.exec(stylesheet)) !== null) {
+		const selectors = match[1].split(",").map(value => value.trim());
+		const body = match[2];
+		if (selectors.includes(selector) && body.includes(declaration)) {
+			return true;
+		}
+	}
+	return false;
+}
+
+[
+	"--wiki-breadcrumb-color: color-mix(in srgb, var(--wg-text-muted) 68%, transparent)",
+	"font-family: var(--wg-font-display)",
+	"font-size: 0.875rem",
+	"gap: 0",
+	"font-weight: 600",
+	"letter-spacing: 0",
+	"text-transform: none",
+].forEach(declaration => {
+	assert(
+		ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail", declaration),
+		`Wiki breadcrumbs should inherit regular forum breadcrumb typography: ${declaration}`
+	);
+});
+
+assert(
+	ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail__list", "gap: 0"),
+	"Wiki breadcrumbs should use Bootstrap breadcrumb spacing instead of a custom flex gap"
+);
+
+assert(
+	ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail__item:not(:last-child)::after", "content: none"),
+	"Wiki breadcrumbs should suppress the plugin slash divider"
+);
+
+assert(
+	ruleHasDeclaration(".westgate-wiki .wiki-breadcrumb-trail__item + .wiki-breadcrumb-trail__item::before", "content: \"→\""),
+	"Wiki breadcrumbs should use the same arrow divider as regular forum breadcrumbs"
+);
+
+[
+	".westgate-wiki .wiki-breadcrumb-trail__link",
+	".westgate-wiki .wiki-breadcrumb-trail__text",
+	".westgate-wiki .wiki-breadcrumb-trail__text--current",
+	".westgate-wiki .wiki-breadcrumb-trail__action",
+].forEach(selector => {
+	assert(
+		ruleHasDeclaration(selector, "color: var(--wiki-breadcrumb-color)"),
+		`${selector} should use the dimmed forum breadcrumb color`
+	);
+	assert(
+		ruleHasDeclaration(selector, "font-family: var(--wg-font-display)"),
+		`${selector} should explicitly use the forum breadcrumb display font`
+	);
+});