various cleanup
This commit is contained in:
Koen Lageveen
parent
6cece45277
commit
0d3582608f
25
index.css
25
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;
|
||||
}
|
||||
|
|
@ -224,7 +224,7 @@ section.select-list .entry:hover a.favoritelink:hover,
|
|||
section.select-list a.favoritelink:hover {
|
||||
color: #777;
|
||||
}
|
||||
section.select-list .entry .active a.website,
|
||||
section.select-list .entry.active a.website,
|
||||
section.select-list .entry a.website:hover,
|
||||
section.select-list .entry a.website:active {
|
||||
background: #E4E4E4;
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
28
index.html
28
index.html
|
|
@ -269,22 +269,22 @@
|
|||
<footer>
|
||||
<h1>
|
||||
<a href="https://programmingfonts.tumblr.com">Programming Fonts</a>
|
||||
|
||||
<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">
|
||||
<path d="M6.16676166,14 L5.95411471,14 C2.45979282,14 1.69024243,11.4348475 1.70117563,10 L1.70117563,6.52631579 L0.265808692,6.52631579 C0.119006605,6.52631579 -8.8817842e-16,6.40180889 -8.8817842e-16,6.24235454 L-8.8817842e-16,4.21052632 C-8.8817842e-16,4.05367375 0.132891436,3.86896458 0.425293908,3.78947368 C2.15160506,3.16783805 2.72233881,1.60568509 2.7644104,0.421052632 C2.77170098,0.215767854 2.76748611,0.268658642 2.76748611,0.268658642 C2.76578744,0.120282571 2.88319366,0 3.03957914,0 L5.25365206,0 C5.40562356,0 5.5288208,0.119077984 5.5288208,0.280833997 L5.5288208,3.57894737 L8.23113995,3.57894737 C8.38287367,3.57894737 8.50587815,3.70559211 8.50587815,3.85094572 L8.50587815,6.25431743 C8.50587815,6.40453798 8.38221964,6.52631579 8.22828381,6.52631579 L5.25,6.52631579 L5.25,9.57894737 C5.64320148,10.5739331 6.29010788,10.8411532 6.59205557,10.8421053 C7.07296368,10.8320778 7.45037861,10.7172508 7.65529034,10.6315789 C7.77989081,10.587074 7.93265029,10.5783691 8.08058425,10.6315789 C8.2285182,10.6847888 8.27180297,10.7924676 8.2932312,10.8421053 L8.93117206,12.7368421 C9.0447897,13.0325221 8.99818233,13.1033871 8.93117206,13.1578947 C8.35626878,13.6192174 7.17773158,13.9818652 6.16676166,14 Z" id="logo"></path>
|
||||
</svg>
|
||||
<span class="screenreader-only">Tumblr blog</span>
|
||||
</a>
|
||||
|
||||
<a class="logo" href="https://github.com/braver/programmingfonts">
|
||||
<svg alt="github logo" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
|
||||
</svg>
|
||||
<span class="screenreader-only">Github repo</span>
|
||||
</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">
|
||||
<path d="M6.16676166,14 L5.95411471,14 C2.45979282,14 1.69024243,11.4348475 1.70117563,10 L1.70117563,6.52631579 L0.265808692,6.52631579 C0.119006605,6.52631579 -8.8817842e-16,6.40180889 -8.8817842e-16,6.24235454 L-8.8817842e-16,4.21052632 C-8.8817842e-16,4.05367375 0.132891436,3.86896458 0.425293908,3.78947368 C2.15160506,3.16783805 2.72233881,1.60568509 2.7644104,0.421052632 C2.77170098,0.215767854 2.76748611,0.268658642 2.76748611,0.268658642 C2.76578744,0.120282571 2.88319366,0 3.03957914,0 L5.25365206,0 C5.40562356,0 5.5288208,0.119077984 5.5288208,0.280833997 L5.5288208,3.57894737 L8.23113995,3.57894737 C8.38287367,3.57894737 8.50587815,3.70559211 8.50587815,3.85094572 L8.50587815,6.25431743 C8.50587815,6.40453798 8.38221964,6.52631579 8.22828381,6.52631579 L5.25,6.52631579 L5.25,9.57894737 C5.64320148,10.5739331 6.29010788,10.8411532 6.59205557,10.8421053 C7.07296368,10.8320778 7.45037861,10.7172508 7.65529034,10.6315789 C7.77989081,10.587074 7.93265029,10.5783691 8.08058425,10.6315789 C8.2285182,10.6847888 8.27180297,10.7924676 8.2932312,10.8421053 L8.93117206,12.7368421 C9.0447897,13.0325221 8.99818233,13.1033871 8.93117206,13.1578947 C8.35626878,13.6192174 7.17773158,13.9818652 6.16676166,14 Z" id="logo"></path>
|
||||
</svg>
|
||||
<span class="screenreader-only">Tumblr blog</span>
|
||||
</a>
|
||||
|
||||
<a class="logo" href="https://github.com/braver/programmingfonts">
|
||||
<svg alt="github logo" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
|
||||
</svg>
|
||||
<span class="screenreader-only">Github repo</span>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
|
|
|
|||
16
index.js
16
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);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue