Downloads: Make font name searchable

[why] The download page is not searchable for font names (except in some cases where the font is RFN or something). Because the font name is just in the preview image (and thus an image) users can not quickly go to some download link by searching for the name. [how] Lay the font name invisible over the preview image. Fixes: #1660 Reported-by: @willhansen Signed-off-by: Fini Jastrow <[email protected]>
ryanoasis · Jun 19, 2024 · cff4a7b · cff4a7b
1 parent 8a55ec2
commit cff4a7b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/_includes/css/nerd-font-tweaks.scss b/_includes/css/nerd-font-tweaks.scss
@@ -9,6 +9,10 @@ p {
 	padding: 8px 18px;
 }
 
+.nerd-font-invisible-text {
+	opacity: 0.0;
+}
+
 input.nerd-font-input {
 	cursor: inherit;
 }

diff --git a/_posts/2017-01-03-downloads.md b/_posts/2017-01-03-downloads.md
@@ -13,6 +13,7 @@ page: font-downloads
 {% for font in site.data.fonts.fonts %}
   <div class="item">
       <a href="https://github.com/ryanoasis/nerd-fonts/releases/download/v{{ site.current_version }}/{{ font.folderName }}.zip" class="font-preview" style="background-image: url('/assets/img/previews/{{ font.imagePreviewFont }}.svg')">
+      <span class="nerd-font-invisible-text"> {{ font.patchedName }} </span>
       </a>
       {% assign upN = font.unpatchedName | split: " " | join: "" %}
       {% assign pN = font.patchedName | split: " " | join: "" %}