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
scss/westgate/_widgets.scss
+6 -6
View File
@@ -56,7 +56,7 @@
linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
var(--wg-velvet-panel) !important;
background-size: 100% var(--wg-ledger-line), auto;
border: 1px solid rgba(194, 163, 90, 0.14);
border: 1px solid var(--wg-border);
border-radius: 8px;
box-shadow: var(--wg-velvet-shadow);
}
@@ -81,7 +81,7 @@
[data-widget-area] .card-header {
background:
linear-gradient(to right, rgba(194, 163, 90, 0.08), rgba(42, 18, 34, 0.2), transparent),
linear-gradient(to right, var(--wg-border-soft), rgba(42, 18, 34, 0.2), transparent),
rgba(8, 7, 10, 0.24) !important;
border-color: rgba(194, 163, 90, 0.13) !important;
color: var(--wg-ledger-ink) !important;
@@ -97,7 +97,7 @@
}
[data-widget-area] .card-header + .card-body {
border-top: 1px solid rgba(194, 163, 90, 0.08);
border-top: 1px solid var(--wg-border-soft);
}
[data-widget-area] .alert {
@@ -135,7 +135,7 @@
background:
linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
var(--wg-velvet-panel) !important;
border-color: rgba(194, 163, 90, 0.28) !important;
border-color: var(--wg-focus) !important;
border-left-color: rgba(194, 163, 90, 0.62) !important;
color: #e0cea2 !important;
}
@@ -184,7 +184,7 @@
[data-widget-area] .list-group-item {
background: rgba(255, 255, 255, 0.014) !important;
border-color: rgba(194, 163, 90, 0.08) !important;
border-color: var(--wg-border-soft) !important;
color: var(--wg-text-soft) !important;
}
@@ -234,7 +234,7 @@
background:
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
var(--wg-velvet-panel) !important;
border: 1px solid rgba(194, 163, 90, 0.14);
border: 1px solid var(--wg-border);
border-radius: 8px;
box-shadow: var(--wg-velvet-shadow);
}