various cleanup

index.css

@@ -162,7 +162,6 @@ section.select-list [data-style='serif'] .name {
     font-family: 'ui-font-serif', serif;
 }
 section.select-list .entry {
-    display: flex;
     position: relative;
     padding: .5em 1em;
     border-top: 1px solid #EEE;
@@ -195,9 +194,9 @@ section.select-list .active .name {
 }
 section.select-list a.website {
     position: absolute;
-    right: 1rem;
-    bottom: .5rem;
-    padding: 0 .5rem;
+    top: 4px;
+    right: 28px;
+    padding: 0 4px;
     font-size: 10px;
     color: #F5F5F5;
     transition: all .2s ease-in-out;
@@ -211,8 +210,9 @@ section.select-list a.website span {
     padding-right: 1ex;
 }
 section.select-list a.favoritelink {
-    flex-grow: 0;
-    margin-right: .25em;
+    position: absolute;
+    top: 6px;
+    right: 4px;
     color: #F5F5F5;
     cursor: pointer;
 }
@@ -236,13 +236,13 @@ section.select-list a.website:active {
 section.select-list .pinned {
     background: #FAFAFA;
 }
+section.select-list .entry.active a.favoritelink,
 section.select-list .pinned a.favoritelink,
 section.select-list .pinned.entry:hover a.favoritelink {
     color: #777;
 }
 section.select-list .details {
     display: block;
-    width: 60%;
     font-size: 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -393,11 +393,18 @@ label + .nav-button {
 
 footer .logo {
     display: inline-block;
-    margin-left: 1ex;
+    position: absolute;
+    bottom: 4px;
+    left: 8px;
+    opacity: .5;
 }
 footer .logo svg path {
     fill: currentColor;
 }
+footer .logo:last-child {
+    right: 8px;
+    left: auto;
+}
 
 @media screen and (max-width: 56em) {
     .main-wrapper,

index.html

@@ -269,6 +269,8 @@
             <footer>
                 <h1>
                     <a href="https://programmingfonts.tumblr.com">Programming Fonts</a>
+                </h1>
+                <p class="subtitle">Test drive all the programming fonts!</p>
 
                 <a class="logo" href="https://programmingfonts.tumblr.com">
                     <svg alt="tumblr logo" width="9px" height="15px" viewBox="0 0 9 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -283,8 +285,6 @@
                     </svg>
                     <span class="screenreader-only">Github repo</span>
                 </a>
-                </h1>
-                <p class="subtitle">Test drive all the programming fonts!</p>
             </footer>
 
         </main>

index.js

@@ -197,30 +197,22 @@ function renderSelectList() {
         });
 
         fonts.forEach(function(v) {
-            var liga_info = '';
-            var render_info = '';
             var option = document.createElement('div');
 
-            if (v.ligatures) {
-                liga_info = ', ligatures';
-            }
-            if (v.rendering === 'bitmap') {
-                render_info = ', bitmap';
-            }
-
             option.classList.add('entry');
             if (favoritesMap[v.alias]) {
                 option.classList.add('pinned');
             }
+
             option.setAttribute('data-alias', v.alias);
-            option.innerHTML = '<a href="#' + v.alias + '">' +
+            option.innerHTML = '<a href="#' + v.alias + '" data-style="' + v.style + '">' +
                 '<span class="name">' + v.name + '</span>' +
-                '<span class="details">' + v.author + ' (' + v.year + ') — ' + v.style + render_info + liga_info + '</span>' +
+                '<span class="details">' + v.year + ' — ' + v.author + '</span>' +
                 '</a>' +
                 '<a class="favoritelink" onclick="toggleFavorite(\'' + v.alias + '\')">' +
                     pinIcon +
                 '</a>' +
-                '<a class="website" href="' + v.website + '" rel="external"> <span>Info & Download</span>' + icon + '</a>';
+                '<a class="website" href="' + v.website + '" rel="external"> <span>Website</span>' + icon + '</a>';
 
             document.getElementById('select-font').appendChild(option);
         });