ShadowsOverWestgate/sow-nodebb-theme
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Activity

Theme post code blocks + a11y fixes (impeccable audit) (#25)

Browse Source 
Code blocks in posts rendered with the markdown plugin's default light highlight.js theme — white blocks on the dark ledger. This adds dark velvet pre/code styling and a Westgate-toned syntax palette (gold keywords, ledger-ink titles, muted green strings) for post content and the composer preview.

Also picks up the quick wins from an impeccable audit:

- Visible focus ring on the mobile drawer search (input had `outline: 0` with no replacement)
- Input placeholder contrast raised to pass WCAG 4.5:1; tagsinput placeholder reuses the token instead of `$gray-500`
- `prefers-reduced-motion` block zeroing transitions/animations (there were none before)
- Fixed a stray `</li>` closing a `<div>` in `quick-search-results.tpl`

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

Reviewed-on: #25
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>
Co-committed-by: vickydotbat <vickydotbat@tutamail.com>
This commit was merged in pull request #25.
This commit is contained in:
archvillainette
2026-07-16 14:44:39 +00:00
committed by archvillainette
parent 9ec0170e37
commit c3851107ab
21 changed files with 274 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/partials/category/selector-dropdown-content.tpl
+1 -1
View File
@@ -24,7 +24,7 @@
{{{ each categoryItems }}}
<li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}{{{ if ./class }}} {./class}{{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
<a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
<span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
<span component="category-markup" class="{{{ if ./match }}}fw-bold{{{end}}}">
<span class="category-item d-inline-flex align-items-center gap-1 {{{ if ./class }}}{./class}{{{ end }}}">
{{{ if ./icon }}}
{{buildCategoryIcon(@value, "24px", "rounded-circle")}}
templates/partials/footer/westgate-global.tpl
+19 -19
View File
@@ -6,36 +6,36 @@
<h2 class="wg-footer__title" id="wg-footer-title">{config.siteTitle}</h2>
</div>
<p class="wg-footer__description">
A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, set in the Forgotten Realms port city of Westgate.
[[westgate:footer.description]]
</p>
<p class="wg-footer__motto">Mind the shadows.</p>
<p class="wg-footer__motto">[[westgate:footer.motto]]</p>
</section>
<nav class="wg-footer__nav" aria-label="Explore">
<h2 class="wg-footer__heading">Explore</h2>
<nav class="wg-footer__nav" aria-label="[[westgate:footer.explore]]">
<h2 class="wg-footer__heading">[[westgate:footer.explore]]</h2>
<ul class="wg-footer__links">
<li><a href="{relative_path}/">Home</a></li>
<li><a href="{relative_path}/category/1/news">News</a></li>
<li><a href="{relative_path}/gallery">Gallery</a></li>
<li><a href="{relative_path}/category/84/developer-blog">Dev Blog</a></li>
<li><a href="{relative_path}/recruitment">Join the Team</a></li>
<li><a href="{relative_path}/">[[westgate:footer.home]]</a></li>
<li><a href="{relative_path}/category/1/news">[[westgate:footer.news]]</a></li>
<li><a href="{relative_path}/gallery">[[westgate:footer.gallery]]</a></li>
<li><a href="{relative_path}/category/84/developer-blog">[[westgate:footer.dev-blog]]</a></li>
<li><a href="{relative_path}/recruitment">[[westgate:footer.join-team]]</a></li>
</ul>
</nav>
<nav class="wg-footer__nav" aria-label="Community">
<h2 class="wg-footer__heading">Community</h2>
<nav class="wg-footer__nav" aria-label="[[westgate:footer.community]]">
<h2 class="wg-footer__heading">[[westgate:footer.community]]</h2>
<ul class="wg-footer__links">
<li><a href="{relative_path}/categories">Forums</a></li>
<li><a href="{relative_path}/wiki">Wiki</a></li>
<li><a href="{relative_path}/register">Register</a></li>
<li><a href="{relative_path}/wiki">How to Join</a></li>
<li><a href="{relative_path}/categories">[[westgate:footer.forums]]</a></li>
<li><a href="{relative_path}/wiki">[[westgate:footer.wiki]]</a></li>
<li><a href="{relative_path}/register">[[westgate:footer.register]]</a></li>
<li><a href="{relative_path}/wiki">[[westgate:footer.how-to-join]]</a></li>
</ul>
</nav>
</div>
<div class="wg-footer__meta">
<p>&copy; 2026 Shadows Over Westgate &middot; A NWN:EE Persistent World</p>
<p>Forgotten Realms &middot; Westgate &middot; Sea of Fallen Stars</p>
<p>[[westgate:footer.copyright, {currentYear}]]</p>
<p>[[westgate:footer.setting]]</p>
</div>
<div class="wg-footer__powered-by" aria-label="Platform credits">
@@ -46,7 +46,7 @@
rel="noopener noreferrer"
aria-label="Powered by NodeBB"
>
<span class="wg-footer__powered-label">Powered by</span>
<span class="wg-footer__powered-label">[[westgate:footer.powered-by]]</span>
<span class="wg-footer__powered-name">NodeBB</span>
</a>
<a
@@ -56,7 +56,7 @@
rel="noopener noreferrer"
aria-label="Powered by Tiptap"
>
<span class="wg-footer__powered-label">Powered by</span>
<span class="wg-footer__powered-label">[[westgate:footer.powered-by]]</span>
<span class="wg-footer__powered-name">Tiptap</span>
</a>
</div>
templates/partials/header/topbar.tpl
+6 -6
View File
@@ -32,22 +32,22 @@
{{{ if config.loggedIn }}}
<ul id="wg-topbar-logged-in-menu" class="wg-topbar__utility-list list-unstyled d-flex align-items-center mb-0">
{{{ if (config.searchEnabled && user.privileges.search:content) }}}
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]" role="menuitem">
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]">
<!-- IMPORT partials/sidebar/search.tpl -->
</li>
{{{ end }}}
<li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]" role="menuitem">
<li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]">
<!-- IMPORT partials/sidebar/notifications.tpl -->
</li>
{{{ if canChat }}}
<li class="nav-item chats dropdown" title="[[global:header.chats]]" role="menuitem">
<li class="nav-item chats dropdown" title="[[global:header.chats]]">
<!-- IMPORT partials/sidebar/chats.tpl -->
</li>
{{{ end }}}
<li component="sidebar/drafts" class="nav-item drafts dropdown" title="[[global:header.drafts]]" role="menuitem">
<li component="sidebar/drafts" class="nav-item drafts dropdown" title="[[global:header.drafts]]">
<!-- IMPORT partials/sidebar/drafts.tpl -->
</li>
@@ -57,14 +57,14 @@
</li>
{{{ end }}}
<li id="user_label" class="nav-item usermenu dropdown" title="{user.username}" role="menuitem">
<li id="user_label" class="nav-item usermenu dropdown" title="{user.username}">
<!-- IMPORT partials/sidebar/user-menu.tpl -->
</li>
</ul>
{{{ else }}}
<ul id="wg-topbar-logged-out-menu" class="wg-topbar__utility-list wg-topbar__utility-list--guest list-unstyled d-flex align-items-center mb-0">
{{{ if (config.searchEnabled && user.privileges.search:content) }}}
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]" role="menuitem">
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]">
<!-- IMPORT partials/sidebar/search.tpl -->
</li>
{{{ end }}}
templates/partials/quick-search-results.tpl
+1 -1
View File
@@ -45,6 +45,6 @@
{{{ end }}}
{{{if !posts.length}}}
<div class="text-center no-results py-2 py-md-0">[[search:no-matches]]</li>
<div class="text-center no-results py-2 py-md-0">[[search:no-matches]]</div>
<li role="separator" class="dropdown-divider d-block d-md-none"></li>
{{{end}}}
templates/partials/topics_list.tpl
+2 -2
View File
@@ -15,7 +15,7 @@
</a>
{{{ if showSelect }}}
<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible"></i>
<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible" role="checkbox" aria-checked="false" tabindex="0" aria-label="[[westgate:select-topic]]"></i>
</div>
{{{ end }}}
</div>
@@ -73,7 +73,7 @@
</span>
{{{ if showSelect }}}
<div class="checkbox position-absolute top-0 end-0 m-0 d-flex d-lg-none" style="max-width:max-content">
<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
<i component="topic/select" class="fa fa-square-o text-muted pointer p-1" role="checkbox" aria-checked="false" tabindex="0" aria-label="[[westgate:select-topic]]"></i>
</div>
{{{ end }}}
</div>