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/_wiki-prose.scss
+22 -22
View File
@@ -83,7 +83,7 @@
--wiki-prose-footnote-popover-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.035),
0 14px 30px rgba(0, 0, 0, 0.46);
--wiki-prose-footnote-target-bg: rgba(194, 163, 90, 0.08);
--wiki-prose-footnote-target-bg: var(--wg-border-soft);
--wiki-prose-image-bg: rgba(8, 7, 10, 0.36);
--wiki-prose-image-border: rgba(194, 163, 90, 0.18);
--wiki-prose-image-padding: 0;
@@ -102,7 +102,7 @@
--wiki-compose-editable-focus-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.3),
0 0 18px rgba(194, 163, 90, 0.08);
0 0 18px var(--wg-border-soft);
--wiki-ck-base-background: #18141d;
--wiki-ck-base-foreground: #1e1824;
@@ -121,7 +121,7 @@
--wiki-ck-toolbar-border: rgba(194, 163, 90, 0.18);
--wiki-ck-button-bg: transparent;
--wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1);
--wiki-ck-button-active-bg: rgba(194, 163, 90, 0.14);
--wiki-ck-button-active-bg: var(--wg-border);
--wiki-ck-button-on-bg: rgba(194, 163, 90, 0.12);
--wiki-ck-button-on-hover-bg: rgba(194, 163, 90, 0.18);
--wiki-ck-button-on-active-bg: rgba(194, 163, 90, 0.22);
@@ -244,7 +244,7 @@
font-family: var(--wg-font-ui);
font-weight: 100;
line-height: 1;
text-shadow: 0 0 10px rgba(194, 163, 90, 0.28);
text-shadow: 0 0 10px var(--wg-focus);
}
.westgate-wiki .wiki-article-prose .wiki-callout::after,
@@ -333,9 +333,9 @@
linear-gradient(
90deg,
transparent,
rgba(194, 163, 90, 0.28) 22%,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(194, 163, 90, 0.28) 78%,
var(--wg-focus) 78%,
transparent
)
);
@@ -385,9 +385,9 @@
linear-gradient(
90deg,
transparent,
rgba(194, 163, 90, 0.28) 22%,
var(--wg-focus) 22%,
rgba(194, 163, 90, 0.82) 50%,
rgba(194, 163, 90, 0.28) 78%,
var(--wg-focus) 78%,
transparent
)
);
@@ -553,7 +553,7 @@
}
.westgate-wiki .wiki-sidebar-disclosure__summary:focus {
box-shadow: inset 0 0 0 2px rgba(194, 163, 90, 0.28) !important;
box-shadow: inset 0 0 0 2px var(--wg-focus) !important;
}
.westgate-wiki .wiki-article-toc__ol.wiki-article-toc__ol--nest {
@@ -662,8 +662,8 @@
.westgate-wiki .wiki-index-jump-link:focus,
.westgate-wiki .wiki-index-jump-link.is-active {
background:
linear-gradient(180deg, rgba(194, 163, 90, 0.14), rgba(81, 25, 61, 0.12)),
rgba(194, 163, 90, 0.08) !important;
linear-gradient(180deg, var(--wg-border), rgba(81, 25, 61, 0.12)),
var(--wg-border-soft) !important;
border-color: rgba(216, 194, 138, 0.36) !important;
color: #fff4dd !important;
transform: translateY(-1px);
@@ -694,7 +694,7 @@
}
.westgate-wiki .wiki-namespace-directory .wiki-index-entry:not(.wiki-index-entry--subpage) .wiki-index-entry-main::before {
background: radial-gradient(circle, #e0c878 0 30%, rgba(194, 163, 90, 0.28) 31% 58%, transparent 59%);
background: radial-gradient(circle, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
block-size: 0.42rem;
content: "";
inline-size: 0.42rem;
@@ -725,7 +725,7 @@
}
.westgate-wiki .wiki-index-entry--subpage::after {
background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
block-size: 1.18rem;
content: "";
inline-size: 1px;
@@ -793,7 +793,7 @@
}
.westgate-wiki .wiki-topic-list__item--subpage::after {
background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), var(--wiki-tree-line-color));
background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color));
block-size: 0.44em;
content: "";
inline-size: 1px;
@@ -871,7 +871,7 @@
}
.westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-row--page:has(.wiki-sidebar-parent-path)::before {
background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), rgba(194, 163, 90, 0.08));
background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), var(--wg-border-soft));
block-size: 1px;
content: "";
inline-size: 0.7rem;
@@ -942,7 +942,7 @@
.westgate-wiki .wiki-index-entry-badge {
background: rgba(194, 163, 90, 0.055) !important;
border-color: rgba(194, 163, 90, 0.14) !important;
border-color: var(--wg-border) !important;
}
.westgate-wiki .wiki-fab-dock--floating {
@@ -1088,7 +1088,7 @@
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-button:focus-visible,
.westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button:focus-visible {
outline: 2px solid rgba(194, 163, 90, 0.28) !important;
outline: 2px solid var(--wg-focus) !important;
outline-offset: 1px;
}
@@ -1200,7 +1200,7 @@
.westgate-wiki .wiki-article-prose :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table),
.westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table),
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table) {
border: 1px solid rgba(194, 163, 90, 0.14);
border: 1px solid var(--wg-border);
border-radius: 7px;
box-shadow:
inset -1.25rem 0 1rem -1rem rgba(194, 163, 90, 0.16),
@@ -1263,7 +1263,7 @@
.westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content pre[data-language]::after,
.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content pre[data-language]::after,
.westgate-wiki-compose .ck-code-block-language-label {
background: rgba(194, 163, 90, 0.14) !important;
background: var(--wg-border) !important;
border: 1px solid rgba(194, 163, 90, 0.22) !important;
border-radius: 0 0 0 5px !important;
color: var(--wg-text-soft) !important;
@@ -1372,7 +1372,7 @@ body:has(#westgate-wiki-compose) .ck.ck-dropdown__panel .ck.ck-button:not(.ck-co
body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon) .ck.ck-button:not(.ck-color-grid__tile).ck-on,
body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile).ck-on {
background: var(--wiki-ck-button-on-bg) !important;
border-color: rgba(194, 163, 90, 0.28) !important;
border-color: var(--wg-focus) !important;
color: var(--wiki-ck-button-on-color) !important;
}
@@ -1542,7 +1542,7 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:focus {
}
body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box.ck-on {
background: rgba(194, 163, 90, 0.28) !important;
background: var(--wg-focus) !important;
border-color: rgba(246, 223, 163, 0.64) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.08),
@@ -1582,7 +1582,7 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input
border-color: rgba(194, 163, 90, 0.5) !important;
box-shadow:
inset 0 1px 0 rgba(255, 244, 221, 0.026),
0 0 0 1px rgba(194, 163, 90, 0.28) !important;
0 0 0 1px var(--wg-focus) !important;
outline: none !important;
}