diff --git a/index.css b/index.css index bdc87b0..8bc71a2 100644 --- a/index.css +++ b/index.css @@ -5,19 +5,19 @@ html { height: 100%; min-height: 100%; background: #f5f0e6; -} -body { - color: #2a2a2a; - background: #f5f5f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 14px; line-height: 20px; + font-weight: 300; +} +body { + color: #2a2a2a; + background: #f5f5f5; height: 100%; min-height: 100%; - font-weight: 300; } h1 { text-align: center; @@ -105,28 +105,39 @@ section.select-list .active .name { font-weight: bold; } section.select-list a.favoritelink { - margin-right: 2px; - color: #ccc; + margin-right: .25em; + color: #f5f5f5; + position: absolute; + top: .5rem; + right: 1rem; + cursor: pointer; } section.select-list a.pinned { - color: black; + color: #777; +} +section.select-list a.favoritelink:hover { + color: currentColor; } section.select-list a.website { position: absolute; - top: 5px; - right: 10px; - opacity: 0; + bottom: .5rem; + right: 1rem; transition: all .2s ease-in-out; font-size: 10px; - padding: 2px 1ex; + padding: 0 .5rem; + color: #f5f5f5; +} +section.select-list a.website svg { + position: relative; + top: 2px; } section.select-list a.website span { display: inline-block; padding-right: 1ex; } -section.select-list .entry:hover a.website { - color: #e4e4e4; - opacity: 1; +section.select-list .entry:hover a.website, +section.select-list .entry:hover a.favoritelink { + color: #ccc; } section.select-list .entry .active + a.website, section.select-list .entry .active + a.website, @@ -134,7 +145,6 @@ section.select-list .entry a.website:hover, section.select-list .entry a.website:active { background: #e4e4e4; color: #777; - opacity: 1; } section.select-list a.website:active { margin-top: 1px; diff --git a/index.js b/index.js index 321efd8..8c81227 100644 --- a/index.js +++ b/index.js @@ -113,13 +113,13 @@ function renderSelectList() { } $("#select-font").append( "
" + - "" + - pinIcon + - "" + - "" + - "" + v.name + "" + - "" + v.author + " (" + v.year + ") — " + v.style + render_info + liga_info + "" + - "" + + "" + + "" + v.name + "" + + "" + v.author + " (" + v.year + ") — " + v.style + render_info + liga_info + "" + + "" + + "" + + pinIcon + + "" + " Info & Download" + icon + "
" ); });