Theme fixes: wiki index shift (#30), Inter/Poppins fonts (sow-nodebb#13), unread badge (#33) (#32)

Closes #30. Addresses ShadowsOverWestgate/sow-nodebb#13 (theme-side). Partially addresses #33 (badge).

Three theme fixes, bundled into one branch since we squash-merge.

### #30 — index/section pages bump all text to the right
The namespace-index / section listing card carries the `wiki-article-prose` class, so the article-body **reading measure** leaked onto it: the wiki plugin caps prose children at `--wiki-prose-measure` (54rem) and the theme `margin-inline:auto`s them, pinning the *Articles* heading, lead, and page list into a narrow centered column with a big left gutter. Fix: opt `.wiki-namespace-index` descendants out of that measure/centering (full-width, left-aligned). **Verified** with a before/after render of the real section markup against the compiled CSS.

### Inter 404 (sow-nodebb#13), theme side
Harmony generates Inter/Poppins `@font-face` at our asset path and points its font variables at them, but we ship **Jost + Cinzel** and declare no `@fontsource/inter|poppins` dep, so those URLs 404 in production (they only resolve in dev via npm hoisting). Current theme source already renders everything in Jost (verified in compiled CSS), so the reported production 404 is a **stale build** — it clears once the nodebb image is rebuilt from current theme main. This PR makes it robust: pins the Harmony rules that read those vars (`.ff-sans`, `.ff-secondary`, breadcrumb divider) to our fonts, and removes the two dead staticDirs.

### #33 (part 1) — topbar unread badge didn't match its neighbours
The unread count was a static inline pill floating low/right of the inbox icon, unlike the corner-anchored badges on the notification and chat icons. Mirrored Harmony's notification markup (inner `position-relative` span + `top-0/start-100/translate-middle`) so the unread bubble tucks into the icon corner at the same size, shape, and height. **Verified**: unread and notification badges now sit identically (measured top/bottom match to the pixel).

The other half of #33 — the "dropdown doesn't work" report — is **not** included: I couldn't reproduce it on a current build (the custom unread drawer opens and lists topics on both `/categories` and `/wiki`), so it looks like the same stale-deploy story. Left open in #33 pending a repro on a fresh build before deciding whether to swap it for NodeBB's Notifications "Unread" view.

### Notes
- SCSS + templates + `plugin.json` only; no JS behavior change. `./nodebb build` compiles clean.
- Pre-existing impeccable design-drift findings in touched files are unrelated to this diff and left as-is.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #32
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>
Co-committed-by: vickydotbat <vickydotbat@tutamail.com>
This commit was merged in pull request #32.
This commit is contained in:
2026-07-18 12:33:57 +00:00
committed by archvillainette
parent d794f4fb87
commit 80e811e3b0
4 changed files with 48 additions and 5 deletions
-2
View File
@@ -20,8 +20,6 @@
"../client/account/theme.js": "../nodebb-theme-harmony/public/settings.js" "../client/account/theme.js": "../nodebb-theme-harmony/public/settings.js"
}, },
"staticDirs": { "staticDirs": {
"inter": "node_modules/@fontsource/inter/files",
"poppins": "node_modules/@fontsource/poppins/files",
"fonts": "public/fonts", "fonts": "public/fonts",
"game-icons": "public/game-icons", "game-icons": "public/game-icons",
"images": "public/images" "images": "public/images"
+28
View File
@@ -125,3 +125,31 @@
background: rgba(194, 163, 90, 0.32); background: rgba(194, 163, 90, 0.32);
color: #fff4dd; color: #fff4dd;
} }
/* Harmony base-theme font correction.
Harmony generates @font-face for Inter/Poppins at our asset path and points
$font-family-sans-serif -> "Inter" and $font-family-secondary -> "Poppins"
in its own overrides.scss. We ship Jost + Cinzel, not those families, and do
not declare @fontsource/inter|poppins as deps -- so any element that resolves
to Inter/Poppins 404s in production on /assets/plugins/nodebb-theme-westgate/
inter/... (it only happens to resolve in dev via npm hoisting). Our BS-variable
override already keeps the current cascade on Jost, but that hinges on subtle
import order; pin the handful of Harmony rules that read those SCSS variables
directly (.ff-sans, .ff-secondary, the breadcrumb divider) to our own fonts so
nothing can request Inter/Poppins even if a Harmony bump flips the order. The
now-pointless inter/poppins staticDirs are removed from plugin.json alongside. */
.ff-sans {
font-family: var(--wg-font-ui) !important;
}
.ff-secondary {
font-family: var(--wg-font-display);
}
.breadcrumb .breadcrumb-item {
font-family: var(--wg-font-display);
}
.breadcrumb .breadcrumb-item::before {
font-family: var(--wg-font-ui);
}
+15
View File
@@ -232,6 +232,21 @@
text-align: justify; text-align: justify;
} }
/* The namespace index / section listing card reuses .wiki-article-prose for
its card chrome, but its body is a directory listing, not reading prose.
Opt it out of the centered reading measure: the wiki plugin caps prose
children at --wiki-prose-measure and the rule above margin-inline:autos
them, which pins the heading, lead, and page list into a narrow centered
column with a big left gutter (#30). Let the listing run full-width, left. */
.westgate-wiki .wiki-namespace-index :where(p, ul, ol, h1, h2, h3, h4, h5, h6) {
margin-inline: 0;
max-width: none;
}
.westgate-wiki .wiki-namespace-index :where(p, li, blockquote) {
text-align: start;
}
.westgate-wiki .card.wiki-card:hover, .westgate-wiki .card.wiki-card:hover,
.westgate-wiki .card.wiki-topic-card:hover { .westgate-wiki .card.wiki-topic-card:hover {
background: var(--wg-velvet-panel-hover) !important; background: var(--wg-velvet-panel-hover) !important;
+4 -2
View File
@@ -1,6 +1,8 @@
<a class="nav-link dropdown-toggle d-flex gap-2 align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[unread:title]]"> <a class="nav-link dropdown-toggle d-flex align-items-center justify-content-center" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[unread:title]]">
<span class="position-relative">
<i class="fa fa-fw fa-inbox" aria-hidden="true"></i> <i class="fa fa-fw fa-inbox" aria-hidden="true"></i>
<span component="unread/count" class="badge rounded-1 bg-primary {{{ if !unreadCount.topic }}}hidden{{{ end }}}">{unreadCount.topic}</span> <span component="unread/count" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.topic }}}hidden{{{ end }}}">{unreadCount.topic}</span>
</span>
</a> </a>
<ul class="dropdown-menu wg-topbar__dropdown unread-dropdown p-1 shadow" role="menu" data-wg-unread-menu> <ul class="dropdown-menu wg-topbar__dropdown unread-dropdown p-1 shadow" role="menu" data-wg-unread-menu>
<li data-wg-unread-loading class="dropdown-item disabled"><i class="fa fa-fw fa-spinner fa-spin" aria-hidden="true"></i> [[unread:title]]</li> <li data-wg-unread-loading class="dropdown-item disabled"><i class="fa fa-fw fa-spinner fa-spin" aria-hidden="true"></i> [[unread:title]]</li>