Adds 'Cheat Sheet' section

* lists all glyphs
* ability to search
* adds button/link to section
* moves 'Release' section to last
* adds the necessary Nerd Font
This commit is contained in:
Ryan L McIntyre 2017-04-23 17:45:35 -04:00
parent 2a26bfb2cf
commit e0a21ebb12
8 changed files with 10074 additions and 0 deletions

View file

@ -14,6 +14,37 @@
line-height: 2.3em;
}
#main .nerd-font-cheat-sheet-search {
margin-right: auto;
margin-left: auto;
font-size: 1.25em;
width: 400px;
}
#main .nerd-font-cheat-sheet {
max-height: 480px;
overflow-x: hidden;
overflow-y: scroll;
padding-top: 20px;
}
#main .nerd-font-cheat-sheet .column {
width: 114px;
height: 120px;
}
#main .nerd-font-cheat-sheet .column span {
font-family: 'mono';
font-size: 12px;
max-width: 98px;
display: inline-block;
text-align: center;
}
#main .nerd-font-cheat-sheet .nerd-font {
font-size: 2rem;
}
#forkongithub .fa {
font-size: 1.5rem;
}

4301
_includes/css/nerd-fonts.css Normal file

File diff suppressed because it is too large Load diff

View file

@ -19,6 +19,11 @@ style: center
[![GitHub release][img-version-badge-with-logo]][repo] [![Gitter][img-gitter-badge]][gitter]   ![Windows Logo][w-top]   ![macOS (OSX) Logo][m-top]   ![Linux Logo][l-top]
</div>
<div class="half column">
<h3 class="inlineblock bg-blue text-white nerd-font-button">
<i class="fa fa-search"></i>
<a href="#cheat-sheet" class="inlineblock">Icons</a>
</h3>
&nbsp;&nbsp;&nbsp;&nbsp;
<h3 class="inlineblock bg-blue text-white nerd-font-button">
<i class="fa fa-download"></i>
<a href="#downloads" class="inlineblock">Downloads</a>

File diff suppressed because it is too large Load diff

View file

@ -1,5 +1,6 @@
---
---
{% include css/nerd-fonts.css %}
{% include css/base.css %}
{% include css/skeleton.css %}
{% include css/main.css %}

Binary file not shown.

27
site.js
View file

@ -91,5 +91,32 @@ $(document).ready(function (){
}
});
// extremely basic search
$('#glyphSearch').on('keyup', searchGlyphs);
function searchGlyphs() {
console.log('searching');
var input = $('#glyphSearch');
var filter = input.val().toUpperCase();
var container = $('#glyphCheatSheet');
var i = 0;
var elements = container.find('.column');
var length = elements.length;
var element;
for (; i < length; i++) {
element = $(elements[i]).find('span');
if (element) {
if (element.text().toUpperCase().indexOf(filter) > -1) {
element.parent().show();
} else {
element.parent().hide();
}
}
}
}
});