From 0b3d36c64ff1153094443e6672d0f1e5c6c204aa Mon Sep 17 00:00:00 2001
From: Koen Lageveen <koen.lageveen@me.com>
Date: Fri, 10 Jan 2020 21:45:44 +0100
Subject: [PATCH] subtle pin stripe in list, better pinned style

---
 index.css | 14 +++++++++++---
 index.js  |  4 ++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/index.css b/index.css
index 6616150..193920c 100644
--- a/index.css
+++ b/index.css
@@ -101,6 +101,10 @@ section.select-list .entry {
 	position: relative;
 	display: flex;
 	padding: .5em 1em;
+	border-top: 1px solid #eee;
+}
+section.select-list .entry:last-child {
+	border-bottom: 1px solid #eee;
 }
 section.select-list .entry:hover {
 	background: #fff;
@@ -129,9 +133,6 @@ section.select-list a.favoritelink {
 	right: 1rem;
 	cursor: pointer;
 }
-section.select-list a.pinned {
-	color: #777;
-}
 section.select-list a.favoritelink:hover {
 	color: currentColor;
 }
@@ -165,6 +166,13 @@ section.select-list .entry a.website:active {
 section.select-list a.website:active {
 	margin-top: 1px;
 }
+section.select-list .pinned + .entry:not(.pinned) {
+	border-top-color: #ccc;
+}
+section.select-list .pinned a.favoritelink,
+section.select-list .pinned.entry:hover a.favoritelink {
+	color: #777;
+}
 section.select-list .details {
 	color: #777;
 	font-style: italic;
diff --git a/index.js b/index.js
index 55a95e2..e7a9888 100644
--- a/index.js
+++ b/index.js
@@ -215,12 +215,12 @@ function renderSelectList() {
                 render_info = ', bitmap';
             }
             $('#select-font').append(
-                '<div class="entry" data-alias="' + v.alias + '">' +
+                '<div class="entry' + (favoritesMap[v.alias] ? ' pinned' : '') + '" data-alias="' + v.alias + '">' +
                 '<a href="#' + v.alias + '">' +
                     '<span class="name">' + v.name + '</span>' +
                     '<span class="details">' + v.author + ' (' + v.year + ') — ' + v.style + render_info + liga_info + '</span>' +
                 '</a>' +
-                '<a class="favoritelink' + (favoritesMap[v.alias] ? ' pinned' : '') + '" onclick="toggleFavorite(\'' + v.alias + '\')">' +
+                '<a class="favoritelink" onclick="toggleFavorite(\'' + v.alias + '\')">' +
                     pinIcon +
                 '</a>' +
                 '<a class="website" href="' + v.website + '" rel="external"> <span>Info & Download</span>' + icon + '</a></div>'