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 </li> closing a <div> in quick-search-results.tpl

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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;
 }

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);

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;
+	}
+}

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 {

templates/partials/quick-search-results.tpl

@@ -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}}}