feat: per-engine accent colors in search results

Each engine now has a distinctive color accent applied to its result
card (left border) and engine badge (colored left strip + text).

16 engines mapped to brand-appropriate colors:
Google blue, Bing teal, DDG orange-red, Brave red, Qwant blue,
Wikipedia dark, GitHub purple, Reddit orange-red, YouTube red,
Stack Overflow amber, arXiv crimson, Crossref navy blue.

Pure CSS via data-engine attribute — no JavaScript.
This commit is contained in:
Franz Kafka 2026-03-22 22:59:32 +00:00
parent e96040ef35
commit 0030cf97ad
2 changed files with 51 additions and 2 deletions

View file

@ -1,12 +1,12 @@
{{define "result_item"}}
<article class="result">
<article class="result" data-engine="{{.Engine}}">
<div class="result_header">
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.SafeTitle}}</a>
</div>
<div class="result_url">
<img class="result-favicon" src="https://www.google.com/s2/favicons?domain={{.URL | urlquery}}&sz=32" alt="" loading="lazy" onerror="this.style.display='none'">
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
<span class="engine-badge">{{.Engine}}</span>
<span class="engine-badge" data-engine="{{.Engine}}">{{.Engine}}</span>
</div>
{{if .Content}}
<p class="result_content">{{.SafeContent}}</p>