(search) Desaturate search result titles according to rank

This commit is contained in:
Viktor Lofgren 2023-11-27 16:26:33 +01:00
parent 6cd6a615fd
commit 9bc65ff0ca
2 changed files with 11 additions and 8 deletions

View File

@ -472,9 +472,15 @@ footer {
padding: 1ch;
margin: 0;
}
}
.search-result[data-ms-rank="1"] { .url, h2 { filter: grayscale(0%); } }
.search-result[data-ms-rank="2"] { .url, h2 { filter: grayscale(5%); } }
.search-result[data-ms-rank="3"] { .url, h2 { filter: grayscale(15%); } }
.search-result[data-ms-rank="4"] { .url, h2 { filter: grayscale(20%); } }
.search-result[data-ms-rank="5"] { .url, h2 { filter: grayscale(30%); } }
.search-result[data-ms-rank="10"] { .url, h2 { filter: grayscale(60%); } }
.utils {
display: flex;
font-size: 10pt;

View File

@ -1,4 +1,5 @@
<section class="card search-result {{#unless hideRanking}}rs-rank-{{logRank}} ms-rank-{{matchRank}}{{/unless}} {{#if specialDomain}}special-domain{{/if}}" >
<section {{#unless hideRanking}} data-rs-rank="{{logRank}}" data-ms-rank="{{matchRank}}"{{/unless}}
class="card search-result {{#if specialDomain}}special-domain{{/if}}" >
<div class="url"><a rel="nofollow external" href="{{url}}">{{url}}</a></div>
<h2> <a tabindex="-1" class="title" rel="nofollow external" href="{{url}}">{{title}}</a> </h2>
<p class="description">{{description}}</p>
@ -10,12 +11,8 @@
{{/unless}}
<div class="meta">
{{#if problems}} <span class="problems" title="{{problems}}"> ⚠ {{problemCount}} </span> {{/if}}
<span
aria-hidden="true"
class="meta positions"
title="Positions where keywords were found within the document">
{{positions}}
</span>
<span aria-hidden="true" class="meta positions"
title="Positions where keywords were found within the document">{{positions}}</span>
</div>
</div>
</section>