From b91b142448d14c270e10e097a088f425ef8dff40 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Thu, 16 Jul 2026 15:24:59 +0200 Subject: [PATCH] Theme code blocks in posts; a11y fixes from impeccable audit - Dark velvet pre/code styling + Westgate hljs syntax palette for post content and composer preview (markdown plugin's light hljs theme was rendering white blocks) - Visible focus ring on mobile drawer search (was outline: 0 with no replacement) - Placeholder contrast raised to pass 4.5:1; tagsinput placeholder now reuses the token instead of $gray-500 - prefers-reduced-motion block zeroing transitions/animations - Fix stray closing a
in quick-search-results.tpl Co-Authored-By: Claude Fable 5 --- scss/overrides.scss | 4 +- scss/westgate/_posts.scss | 95 +++++++++++++++++++++ scss/westgate/_responsive.scss | 10 +++ scss/westgate/_topbar.scss | 6 ++ templates/partials/quick-search-results.tpl | 2 +- 5 files changed, 114 insertions(+), 3 deletions(-) diff --git a/scss/overrides.scss b/scss/overrides.scss index 7e93c75..7c57860 100644 --- a/scss/overrides.scss +++ b/scss/overrides.scss @@ -66,7 +66,7 @@ $input-bg: rgba($white, 0.025) !default; $input-color: $wg-text !default; $input-border-color: rgba($wg-gold, 0.18) !default; $input-focus-border-color: rgba($wg-gold, 0.42) !default; -$input-placeholder-color: rgba($wg-text-soft, 0.62) !default; +$input-placeholder-color: rgba($wg-text-soft, 0.74) !default; $btn-border-radius: 6px !default; $border-radius: 8px !default; $border-radius-sm: 6px !default; @@ -109,5 +109,5 @@ $breadcrumb-active-color: $body-color !default; $breadcrumb-item-padding-x: 12px !default; .form-control::placeholder, .bootstrap-tagsinput::placeholder { - color: $gray-500 !important; + color: $input-placeholder-color !important; } diff --git a/scss/westgate/_posts.scss b/scss/westgate/_posts.scss index bdda286..183151e 100644 --- a/scss/westgate/_posts.scss +++ b/scss/westgate/_posts.scss @@ -129,6 +129,101 @@ li[component="post"] .content h4 { text-shadow: none; } +// Code in posts: the markdown plugin ships a light highlight.js stylesheet +// (white .hljs background), so both the block and its syntax colors must be +// re-inked for the dark ledger. +li[component="post"] .content code, +.composer .preview code { + background: rgba(8, 7, 10, 0.45); + border: 1px solid rgba(194, 163, 90, 0.12); + border-radius: 4px; + padding: 0.1em 0.35em; + color: var(--wg-text); + font-family: var(--wg-font-code); + font-size: 0.88em; +} + +li[component="post"] .content pre, +.composer .preview pre { + background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82)) !important; + border: 1px solid rgba(194, 163, 90, 0.22) !important; + border-radius: 6px; + padding: 0.85rem 1rem; + color: var(--wg-text-soft) !important; + scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48); + scrollbar-width: thin; +} + +li[component="post"] .content pre code, +.composer .preview pre code { + background: transparent; + border: 0; + padding: 0; + color: inherit; + font-size: 0.85rem; +} + +li[component="post"] .content pre code.hljs, +.composer .preview pre code.hljs { + background: transparent !important; + color: var(--wg-text-soft) !important; + + .hljs-comment, + .hljs-quote { + color: var(--wg-text-muted); + font-style: italic; + } + + .hljs-keyword, + .hljs-selector-tag, + .hljs-literal, + .hljs-tag { + color: #e0c878; + } + + .hljs-string, + .hljs-regexp, + .hljs-addition { + color: #a3c58a; + } + + .hljs-number, + .hljs-attr, + .hljs-attribute, + .hljs-variable, + .hljs-template-variable, + .hljs-symbol { + color: #d9a37a; + } + + .hljs-title, + .hljs-section, + .hljs-name, + .hljs-selector-id, + .hljs-selector-class { + color: var(--wg-ledger-ink); + } + + .hljs-type, + .hljs-built_in, + .hljs-builtin-name, + .hljs-meta { + color: var(--wg-gold); + } + + .hljs-deletion { + color: #c55a5f; + } + + .hljs-emphasis { + font-style: italic; + } + + .hljs-strong { + font-weight: 600; + } +} + li[component="post"] .content blockquote { background: rgba(35, 27, 23, 0.36); border-left: 3px solid rgba(194, 163, 90, 0.4); diff --git a/scss/westgate/_responsive.scss b/scss/westgate/_responsive.scss index 9a64978..9622d76 100644 --- a/scss/westgate/_responsive.scss +++ b/scss/westgate/_responsive.scss @@ -54,3 +54,13 @@ box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.28); } } + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} diff --git a/scss/westgate/_topbar.scss b/scss/westgate/_topbar.scss index 0caed92..76031bf 100644 --- a/scss/westgate/_topbar.scss +++ b/scss/westgate/_topbar.scss @@ -296,6 +296,12 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98); outline: 0; } +// The input's own outline is off; put the visible focus ring on its wrapper. +.wg-topbar__drawer-search:focus-within { + border-color: rgba(194, 163, 90, 0.5); + box-shadow: 0 0 0 1px var(--wg-focus); +} + .wg-topbar__drawer-nav, .wg-topbar__drawer-actions, .wg-topbar__drawer-auth { diff --git a/templates/partials/quick-search-results.tpl b/templates/partials/quick-search-results.tpl index ab7a9a2..cfab2b4 100644 --- a/templates/partials/quick-search-results.tpl +++ b/templates/partials/quick-search-results.tpl @@ -45,6 +45,6 @@ {{{ end }}} {{{if !posts.length}}} -
[[search:no-matches]] +
[[search:no-matches]]
{{{end}}} \ No newline at end of file