subtle pin stripe in list, better pinned style

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;

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>'