switch style filters to cycle buttons

This commit is contained in:
Koen Lageveen 2020-10-07 22:25:17 +02:00 committed by Koen Lageveen
parent fd2f1a9a2b
commit d7d85f47be
4 changed files with 405 additions and 473 deletions

View File

@ -7,7 +7,7 @@
"name": "Agave",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -20,7 +20,7 @@
"name": "Anka/Coder",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"condensed",
@ -37,7 +37,7 @@
"name": "Anonymous Pro",
"rendering": "vector",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic",
@ -128,7 +128,7 @@
"name": "Bitstream Vera Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://www.fontsquirrel.com/fonts/Bitstream-Vera-Sans-Mono",
"year": 2002
},
@ -138,7 +138,7 @@
"name": "Borg Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/marnen/borg-sans-mono",
"year": 2016
},
@ -148,7 +148,7 @@
"name": "BPmono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.fontsquirrel.com/fonts/BPmono",
"year": 2007
},
@ -158,7 +158,7 @@
"name": "Bront DejaVu Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/chrismwendt/bront",
"year": 2015
},
@ -168,7 +168,7 @@
"name": "Bront Ubuntu Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/chrismwendt/bront",
"year": 2015
},
@ -178,7 +178,7 @@
"name": "CamingoCode",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.janfromm.de/typefaces/camingomono/camingocode",
"year": 2013
},
@ -190,7 +190,7 @@
"name": "Cartograph",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
@ -218,7 +218,7 @@
"name": "Cascadia Code",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/microsoft/cascadia-code",
"year": 2019
},
@ -228,7 +228,7 @@
"name": "Code New Roman",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://sourceforge.net/projects/codenewroman/",
"year": 2014
},
@ -240,7 +240,7 @@
"name": "Comic Shanns",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -253,7 +253,7 @@
"name": "Consolamono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://openfontlibrary.org/en/font/consolamono",
"year": 2011
},
@ -270,13 +270,13 @@
},
"courier-prime-code": {
"author": "Alan Dague-Greene",
"description": "Courier Prime by Quote-Unquote Apps is designed to make screenplays (which are traditionally set in Courier at 12 points) more readable. Originally a typewriter font has been transferred to digital several times but all of them have problems. This adaptation is a bit fatter to look as good on displays as on paper. For programming use the Courier Prime Code variant, based on the new sans. Several characters are now more easily distinguished and there is a slashed zero.",
"description": "Courier Prime by Quote-Unquote Apps is designed to make screenplays (which are traditionally set in Courier at 12 points) more readable. Originally a typewriter font has been transferred to digital several times but all of them have problems. This adaptation is a bit fatter to look as good on displays as on paper. For programming use the Courier Prime Code variant, based on the new sans. Several characters are now more easily distinguished and there is a slasheded zero.",
"license": "SIL OFL",
"ligatures": false,
"name": "Courier Prime Code",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic"
@ -292,7 +292,7 @@
"name": "Cousine",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
@ -308,7 +308,7 @@
"name": "Cozette",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -332,7 +332,7 @@
"name": "D2Coding",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/naver/d2codingfont",
"year": 2016,
"variants": [
@ -347,7 +347,7 @@
"name": "DaddyTimeMono",
"rendering": "vector",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/BourgeoisBear/DaddyTimeMono",
"year": 2017,
"variants": [
@ -360,7 +360,7 @@
"name": "DejaVu Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://dejavu-fonts.github.io",
"year": 2004
},
@ -382,7 +382,7 @@
"name": "Edlo",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/ehamiter/Edlo",
"year": 2011
},
@ -404,7 +404,7 @@
"name": "Ellograph",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"bold",
"bold-italic",
@ -432,7 +432,7 @@
"name": "Envy Code R",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://damieng.com/blog/2008/05/26/envy-code-r-preview-7-coding-font-released",
"year": 2008
},
@ -443,7 +443,7 @@
"name": "Fairfax",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic",
@ -460,7 +460,7 @@
"name": "Fairfax HD",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.kreativekorp.com/software/fonts/fairfaxhd.shtml",
"year": 2019
},
@ -471,7 +471,7 @@
"name": "Fairfax Serif",
"rendering": "bitmap",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.kreativekorp.com/software/fonts/fairfax.shtml",
"year": 2008
},
@ -481,7 +481,7 @@
"name": "Fantasque Sans Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/belluzj/fantasque-sans",
"year": 2013
},
@ -491,7 +491,7 @@
"name": "Fifteen",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://openfontlibrary.org/en/font/fifteen",
"year": 2013
},
@ -501,7 +501,7 @@
"name": "Fira Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/mozilla/Fira",
"year": 2013
},
@ -511,7 +511,7 @@
"name": "Fira Code",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/tonsky/FiraCode",
"year": 2014
},
@ -521,7 +521,7 @@
"name": "Fixedsys",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.moviecorner.de/en/font-fixedsys-ttf/description",
"year": 1980
},
@ -531,7 +531,7 @@
"name": "Fixedsys with Ligatures",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/kika/fixedsys",
"year": 2016
},
@ -541,7 +541,7 @@
"name": "3270",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"medium",
"narrow",
@ -556,13 +556,13 @@
"name": "Generic Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://luc.devroye.org/fonts-75172.html",
"year": 1980
},
"gnu-freefont": {
"author": "Primož Peterlin, Steve White",
"description": "This isnt a designers font, but an open source community effort to create a single font that has it all. It comes in bold and italic and has the most complete coverage of any font featured on this blog. While an OS will mix and match fonts for missing glyphs FreeFont looks to be a consistent source for anything mankind has ever put into writing. Still, every now and then new releases improve the offering. If you need specific scripts or write a lot of math in LateX, this font will not let you down. It would have been better with a more distinct zero though, it lacks a slash or dot to set it apart from the capital o.",
"description": "This isnt a designers font, but an open source community effort to create a single font that has it all. It comes in bold and italic and has the most complete coverage of any font featured on this blog. While an OS will mix and match fonts for missing glyphs FreeFont looks to be a consistent source for anything mankind has ever put into writing. Still, every now and then new releases improve the offering. If you need specific scripts or write a lot of math in LateX, this font will not let you down. It would have been better with a more distinct zero though, it lacks a slashed or dotted to set it apart from the capital o.",
"license": "GNU GPL",
"ligatures": false,
"name": "GNU Freefont",
@ -586,7 +586,7 @@
"name": "Go Mono",
"rendering": "vector",
"style": "serif",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"bold",
@ -602,7 +602,7 @@
"name": "Hack",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/chrissimpkins/Hack",
"year": 2015
},
@ -612,7 +612,7 @@
"name": "Hasklig",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/i-tu/Hasklig",
"year": 2014
},
@ -622,7 +622,7 @@
"name": "Hermit",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://pcaro.es/p/hermit/",
"year": 2013
},
@ -632,7 +632,7 @@
"name": "iA Writer Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://ia.net/writer/blog/a-typographic-christmas",
"year": 2018
},
@ -642,7 +642,7 @@
"name": "Inconsolata",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.levien.com/type/myfonts/inconsolata.html",
"year": 2001
},
@ -652,7 +652,7 @@
"name": "Inconsolata-g",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://leonardo-m.livejournal.com/77079.html",
"year": 2009
},
@ -662,7 +662,7 @@
"name": "Input",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://input.fontbureau.com",
"year": 2014
},
@ -672,7 +672,7 @@
"name": "Iosevka",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://be5invis.github.io/Iosevka/",
"year": 2015
},
@ -683,7 +683,7 @@
"name": "JetBrains Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"bold-italic",
"bold",
@ -709,13 +709,13 @@
},
"league": {
"author": "Tyler Fink",
"description": "League Mono is a new monospaced font thats clean, practical and sans-serif. Glyphs are well aligned and distinct, featuring a dotted zero. With about 374 characters it has plenty of language support. Although there are no true italics the 5 weights from ultra light to bold provide a lot of creative options. There is now even a new variable variant for endless possibilities.",
"description": "League Mono is a new monospaced font thats clean, practical and sans-serif. Glyphs are well aligned and distinct, featuring a dottedted zero. With about 374 characters it has plenty of language support. Although there are no true italics the 5 weights from ultra light to bold provide a lot of creative options. There is now even a new variable variant for endless possibilities.",
"license": "SIL OFL",
"ligatures": false,
"name": "League Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"100",
"200",
@ -757,7 +757,7 @@
"name": "Luculent",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular",
"italic",
@ -783,7 +783,7 @@
"name": "Mensch",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -796,7 +796,7 @@
"name": "Meslo",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/andreberg/Meslo-Font",
"year": 2010
},
@ -806,7 +806,7 @@
"name": "Monofur",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://www.dafont.com/monofur.font",
"year": 2000
},
@ -816,7 +816,7 @@
"name": "Monoid",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://larsenwork.com/monoid/",
"year": 2015
},
@ -826,7 +826,7 @@
"name": "Mononoki",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/madmalik/mononoki",
"year": 2013
},
@ -836,7 +836,7 @@
"name": "M+",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://mplus-fonts.sourceforge.jp",
"year": 2003
},
@ -846,7 +846,7 @@
"name": "Nanum Gothic Coding",
"rendering": "vector",
"style": "serif",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/naver/nanumfont",
"year": 2009,
"description": "Many years ago, there was some sort of competition in South Korea for developing/publishing Korean fonts among Internet/big companies. Naver, which is the biggest Internet company in South Korea, published Nanum fonts along with a few variations, and Nanum Gothic Coding was one of them. Nanum means \"sharing\" in Korean."
@ -877,7 +877,7 @@
"name": "Nova Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.google.com/fonts/specimen/Nova+Mono",
"year": 2010
},
@ -887,7 +887,7 @@
"name": "Office Code Pro",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://github.com/nathco/Office-Code-Pro",
"year": 2015
},
@ -899,7 +899,7 @@
"name": "OpenDyslexic Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular"
],
@ -914,7 +914,7 @@
"name": "Overpass Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"light",
"regular",
@ -926,13 +926,13 @@
},
"oxygen": {
"author": "Vernon Adams",
"description": "Most fonts work fine on a Mac, the best ones add hinting for The Windows ClearType system, but a scarce few pay special attention to the FreeType rendering used in Linux. Oxygen was created to work well in KDE, and this mono variation is a great choice for programmers on Linux. It features a slashed zero and 397 glyphs are enough for pretty much anyone, although purists would prefer true bold and italic.",
"description": "Most fonts work fine on a Mac, the best ones add hinting for The Windows ClearType system, but a scarce few pay special attention to the FreeType rendering used in Linux. Oxygen was created to work well in KDE, and this mono variation is a great choice for programmers on Linux. It features a slasheded zero and 397 glyphs are enough for pretty much anyone, although purists would prefer true bold and italic.",
"license": "SIL OFL",
"ligatures": false,
"name": "Oxygen Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -947,7 +947,7 @@
"name": "Plex Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"bold",
"bold-italic",
@ -985,7 +985,7 @@
"name": "Profont",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://tobiasjung.name/profont/",
"year": 1987
},
@ -995,19 +995,19 @@
"name": "Proggy Clean",
"rendering": "bitmap",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://github.com/bluescan/proggyfonts/",
"year": 2004
},
"proggy-vector": {
"author": "Tristan Grimmer",
"description": "A vector graphics variant of the venerable Proggy font. You can also op for dotted zeros or crossed sevens and zeds, and a lot of attention is payed to the way operators and braces line up with text. No bold or italic variants, but otherwise its everything youd want for in a programming font.",
"description": "A vector graphics variant of the venerable Proggy font. You can also op for dottedted zeros or crossed sevens and zeds, and a lot of attention is payed to the way operators and braces line up with text. No bold or italic variants, but otherwise its everything youd want for in a programming font.",
"license": "MIT",
"ligatures": false,
"name": "Proggy Vector",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -1020,7 +1020,7 @@
"name": "PT Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://paratype.com/public/",
"year": 2011
},
@ -1032,7 +1032,7 @@
"name": "Quinze",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"variants": [
"regular"
],
@ -1045,7 +1045,7 @@
"name": "Recursive",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://www.recursive.design",
"year": 2018
},
@ -1055,7 +1055,7 @@
"name": "Roboto Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://www.google.com/fonts/specimen/Roboto+Mono",
"year": 2015
},
@ -1075,7 +1075,7 @@
"name": "Share Tech Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://www.google.com/fonts/specimen/Share+Tech+Mono",
"year": 2012
},
@ -1085,7 +1085,7 @@
"name": "SK Modernist Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "http://seankanedesign.com/work/sk-modernist",
"year": 2015
},
@ -1096,7 +1096,7 @@
"ligatures": false,
"name": "Sometype Mono",
"rendering": "vector",
"zerostyle": "slash",
"zerostyle": "slashed",
"style": "sans",
"variants": [
"regular",
@ -1117,7 +1117,7 @@
"name": "Source Code Pro",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"black",
"black-italic",
@ -1145,7 +1145,7 @@
"name": "Space Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"variants": [
"regular",
"italic",
@ -1171,7 +1171,7 @@
"name": "Terminus (TTF)",
"rendering": "vector",
"style": "sans",
"zerostyle": "slash",
"zerostyle": "slashed",
"website": "https://files.ax86.net/terminus-ttf",
"year": 2010
},
@ -1191,7 +1191,7 @@
"name": "Ubuntu Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "http://font.ubuntu.com",
"year": 2010
},
@ -1211,7 +1211,7 @@
"name": "Verily Serif Mono",
"rendering": "vector",
"style": "serif",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://www.fontsquirrel.com/fonts/Verily-Serif-Mono",
"year": 2006
},
@ -1223,7 +1223,7 @@
"name": "Victor Mono",
"rendering": "vector",
"style": "sans",
"zerostyle": "dot",
"zerostyle": "dotted",
"website": "https://rubjo.github.io/victor-mono/",
"year": 2019
},

View File

@ -229,7 +229,7 @@ button {
width: 20px;
height: 18px;
position: relative;
margin: 0;
margin: 0 .5ex 0 0;
border: 1px solid #E4E4E4;
border-bottom-color: #CCC;
@ -252,17 +252,9 @@ button path,
button rect {
fill: currentColor;
}
.toggle {
display: flex;
}
.toggle button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: #E4E4E4;
}
.toggle button:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
button:not(.selected) > svg:not(:first-child),
button.selected > svg:not(.selected) {
display: none;
}
select {
all: unset;

View File

@ -1,308 +1,293 @@
<!doctype html>
<html>
<head>
<title>Programming Fonts - Test Drive</title>
<meta name="description" content="Try out the best and newest monospace fonts for code">
<title>Programming Fonts - Test Drive</title>
<meta name="description" content="Try out the best and newest monospace fonts for code">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicons -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ff6a00">
<!-- Favicons -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ff6a00">
<!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css">
<!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/minireset.css/0.0.2/minireset.min.css">
<!-- CodeMirror -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.css">
<!-- CodeMirror Themes -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-day.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/abcdef.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/ambiance.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/bespin.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/blackboard.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/cobalt.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/colorforth.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/darcula.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/dracula.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/erlang-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/gruvbox-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/hopscotch.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/isotope.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lesser-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/liquibyte.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lucario.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/material.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mbo.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mdn-like.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/midnight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/monokai.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/neo.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/nord.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/oceanic-next.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/pastel-on-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/railscasts.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/rubyblue.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/seti.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/shadowfox.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/solarized.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/the-matrix.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-bright.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-eighties.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/twilight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/vibrant-ink.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/xq-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/yeti.css">
<!-- CodeMirror -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.css">
<!-- CodeMirror Themes -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-day.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/3024-night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/abcdef.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/ambiance.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/base16-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/bespin.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/blackboard.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/cobalt.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/colorforth.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/darcula.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/dracula.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/duotone-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/erlang-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/gruvbox-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/hopscotch.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/isotope.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lesser-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/liquibyte.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/lucario.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/material.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mbo.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/mdn-like.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/midnight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/monokai.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/neo.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/night.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/nord.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/oceanic-next.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/paraiso-light.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/pastel-on-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/railscasts.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/rubyblue.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/seti.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/shadowfox.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/solarized.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/the-matrix.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-bright.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/tomorrow-night-eighties.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/twilight.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/vibrant-ink.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/xq-dark.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/yeti.css">
<!-- CodeMirror JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/edit/matchbrackets.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/selection/active-line.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clike/clike.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/commonlisp/commonlisp.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/css/css.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/go/go.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/haskell/haskell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/perl/perl.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/php/php.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/python/python.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/r/r.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/ruby/ruby.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/shell/shell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/swift/swift.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clojure/clojure.min.js"></script>
<!-- CodeMirror JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/edit/matchbrackets.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/addon/selection/active-line.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clike/clike.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/commonlisp/commonlisp.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/css/css.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/go/go.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/haskell/haskell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/perl/perl.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/php/php.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/python/python.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/r/r.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/ruby/ruby.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/shell/shell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/swift/swift.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/clojure/clojure.min.js"></script>
<link href="//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel="stylesheet" type="text/css" />
<link href="//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="fonts/stylesheets/stylesheet.css"><!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" -->
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="fonts/stylesheets/stylesheet.css"><!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" -->
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="main-wrapper">
<main>
<section id="filters">
<fieldset class="toggle" data-group="style">
<button value="sans" title="sans">
<svg width="12" height="12" alt="sans" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.64678,0,0,1.64678,-7.09053,3.87857)">
<g transform="matrix(12,0,0,12,4.97259,4.38784)">
<path d="M0.117,-0.164C0.119,-0.135 0.127,-0.112 0.139,-0.097C0.161,-0.068 0.199,-0.054 0.254,-0.054C0.286,-0.054 0.315,-0.061 0.34,-0.075C0.365,-0.09 0.377,-0.111 0.377,-0.141C0.377,-0.164 0.367,-0.181 0.347,-0.192C0.334,-0.2 0.309,-0.208 0.272,-0.217L0.202,-0.235C0.158,-0.246 0.125,-0.258 0.104,-0.272C0.066,-0.296 0.047,-0.329 0.047,-0.371C0.047,-0.42 0.065,-0.46 0.1,-0.491C0.136,-0.521 0.184,-0.537 0.244,-0.537C0.323,-0.537 0.38,-0.514 0.415,-0.467C0.436,-0.438 0.447,-0.406 0.446,-0.373L0.363,-0.373C0.362,-0.392 0.355,-0.41 0.342,-0.427C0.322,-0.45 0.287,-0.461 0.237,-0.461C0.204,-0.461 0.179,-0.455 0.162,-0.442C0.145,-0.43 0.136,-0.413 0.136,-0.392C0.136,-0.369 0.147,-0.351 0.17,-0.337C0.183,-0.329 0.202,-0.322 0.228,-0.316L0.286,-0.302C0.349,-0.286 0.391,-0.272 0.413,-0.257C0.447,-0.235 0.464,-0.2 0.464,-0.151C0.464,-0.105 0.446,-0.065 0.411,-0.031C0.376,0.003 0.322,0.02 0.25,0.02C0.172,0.02 0.117,0.002 0.084,-0.033C0.052,-0.068 0.035,-0.112 0.032,-0.164L0.117,-0.164Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
</button>
<button value="serif" title="serif">
<svg width="12" height="12" alt="serif" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.73346,0,0,1.73346,-6.72826,3.71105)">
<g transform="matrix(12,0,0,12,4.29583,4.38784)">
<path d="M0.349,-0.491L0.349,-0.513L0.437,-0.513L0.437,-0.343L0.349,-0.343L0.349,-0.374C0.32,-0.416 0.28,-0.437 0.229,-0.437C0.202,-0.437 0.181,-0.431 0.164,-0.419C0.147,-0.408 0.138,-0.393 0.138,-0.374C0.138,-0.357 0.145,-0.344 0.157,-0.335C0.17,-0.326 0.199,-0.317 0.244,-0.31L0.312,-0.297C0.413,-0.278 0.464,-0.229 0.464,-0.148C0.464,-0.101 0.446,-0.063 0.409,-0.034C0.372,-0.006 0.324,0.009 0.263,0.009C0.239,0.009 0.215,0.005 0.192,-0.002C0.169,-0.009 0.149,-0.017 0.134,-0.028L0.134,0L0.044,0L0.044,-0.176L0.134,-0.176L0.134,-0.158C0.139,-0.133 0.152,-0.114 0.175,-0.099C0.198,-0.084 0.224,-0.076 0.254,-0.076C0.287,-0.076 0.313,-0.082 0.332,-0.094C0.35,-0.105 0.36,-0.122 0.36,-0.145C0.36,-0.162 0.352,-0.174 0.337,-0.182C0.322,-0.191 0.292,-0.199 0.247,-0.208L0.195,-0.219C0.143,-0.23 0.105,-0.248 0.081,-0.273C0.057,-0.298 0.045,-0.331 0.045,-0.37C0.045,-0.402 0.054,-0.429 0.072,-0.452C0.089,-0.475 0.112,-0.492 0.14,-0.503C0.167,-0.514 0.196,-0.52 0.225,-0.52C0.274,-0.52 0.316,-0.51 0.349,-0.491Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
<div class="main-wrapper">
<main>
<section id="filters">
<fieldset>
<button value="style" title="serifs or sans">
<svg width="12" height="12" alt="sans" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.64678,0,0,1.64678,-7.09053,3.87857)">
<g transform="matrix(12,0,0,12,4.97259,4.38784)">
<path d="M0.117,-0.164C0.119,-0.135 0.127,-0.112 0.139,-0.097C0.161,-0.068 0.199,-0.054 0.254,-0.054C0.286,-0.054 0.315,-0.061 0.34,-0.075C0.365,-0.09 0.377,-0.111 0.377,-0.141C0.377,-0.164 0.367,-0.181 0.347,-0.192C0.334,-0.2 0.309,-0.208 0.272,-0.217L0.202,-0.235C0.158,-0.246 0.125,-0.258 0.104,-0.272C0.066,-0.296 0.047,-0.329 0.047,-0.371C0.047,-0.42 0.065,-0.46 0.1,-0.491C0.136,-0.521 0.184,-0.537 0.244,-0.537C0.323,-0.537 0.38,-0.514 0.415,-0.467C0.436,-0.438 0.447,-0.406 0.446,-0.373L0.363,-0.373C0.362,-0.392 0.355,-0.41 0.342,-0.427C0.322,-0.45 0.287,-0.461 0.237,-0.461C0.204,-0.461 0.179,-0.455 0.162,-0.442C0.145,-0.43 0.136,-0.413 0.136,-0.392C0.136,-0.369 0.147,-0.351 0.17,-0.337C0.183,-0.329 0.202,-0.322 0.228,-0.316L0.286,-0.302C0.349,-0.286 0.391,-0.272 0.413,-0.257C0.447,-0.235 0.464,-0.2 0.464,-0.151C0.464,-0.105 0.446,-0.065 0.411,-0.031C0.376,0.003 0.322,0.02 0.25,0.02C0.172,0.02 0.117,0.002 0.084,-0.033C0.052,-0.068 0.035,-0.112 0.032,-0.164L0.117,-0.164Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
<svg width="12" height="12" alt="serif" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.73346,0,0,1.73346,-6.72826,3.71105)">
<g transform="matrix(12,0,0,12,4.29583,4.38784)">
<path d="M0.349,-0.491L0.349,-0.513L0.437,-0.513L0.437,-0.343L0.349,-0.343L0.349,-0.374C0.32,-0.416 0.28,-0.437 0.229,-0.437C0.202,-0.437 0.181,-0.431 0.164,-0.419C0.147,-0.408 0.138,-0.393 0.138,-0.374C0.138,-0.357 0.145,-0.344 0.157,-0.335C0.17,-0.326 0.199,-0.317 0.244,-0.31L0.312,-0.297C0.413,-0.278 0.464,-0.229 0.464,-0.148C0.464,-0.101 0.446,-0.063 0.409,-0.034C0.372,-0.006 0.324,0.009 0.263,0.009C0.239,0.009 0.215,0.005 0.192,-0.002C0.169,-0.009 0.149,-0.017 0.134,-0.028L0.134,0L0.044,0L0.044,-0.176L0.134,-0.176L0.134,-0.158C0.139,-0.133 0.152,-0.114 0.175,-0.099C0.198,-0.084 0.224,-0.076 0.254,-0.076C0.287,-0.076 0.313,-0.082 0.332,-0.094C0.35,-0.105 0.36,-0.122 0.36,-0.145C0.36,-0.162 0.352,-0.174 0.337,-0.182C0.322,-0.191 0.292,-0.199 0.247,-0.208L0.195,-0.219C0.143,-0.23 0.105,-0.248 0.081,-0.273C0.057,-0.298 0.045,-0.331 0.045,-0.37C0.045,-0.402 0.054,-0.429 0.072,-0.452C0.089,-0.475 0.112,-0.492 0.14,-0.503C0.167,-0.514 0.196,-0.52 0.225,-0.52C0.274,-0.52 0.316,-0.51 0.349,-0.491Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
</button>
</button>
</fieldset>
<fieldset class="toggle" data-group="rendering">
<button value="vector" title="vector">
<svg width="12" height="12" alt="vector" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.80339,0,0,1.80339,-7.18367,2.87903)">
<g transform="matrix(12,0,0,12,4.2929,4.38784)">
<path d="M0.128,-0.476L0.251,-0.208L0.374,-0.476L0.498,-0.476L0.25,0.033L0.005,-0.476L0.128,-0.476Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
</button>
<button value="bitmap" title="bitmap">
<svg width="12" height="12" alt="bitmap" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M4,9L8,9L8,11L4,11L4,9ZM2,1L4,1L4,11L2,11L2,1ZM8,7L10,7L10,9L8,9L8,7ZM4,5L8,5L8,7L4,7L4,5ZM8,3L10,3L10,5L8,5L8,3ZM4,1L8,1L8,3L4,3L4,1Z"/>
</svg>
</button>
</fieldset>
<fieldset class="toggle" data-group="liga">
<button value="no" title="no ligatures">
<svg width="12" height="12" alt="no ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(0.829577,0,0,0.829577,-2.51769,4.72923)">
<g transform="matrix(12,0,0,12,3.03411,5.29647)">
<rect x="0.05" y="-0.374" width="0.518" height="0.121" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(12,0,0,12,10.4521,5.29647)">
<path d="M0.393,-0.318L0.393,-0.309L0.082,-0.165L0.082,-0.013L0.537,-0.254L0.537,-0.373L0.082,-0.615L0.082,-0.462L0.393,-0.318Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
<button value="zerostyle" title="zero style">
<svg width="12" height="12" alt="slashed" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/><rect transform="matrix(.82528 .56472 -.43794 .89901 0 0)" x="7.3105" y="-2.1319" width="1.1796" height="8.8701" stroke-width=".39701"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
<svg width="12" height="12" alt="dotted" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" stroke-width=".39487" aria-label="0"><path d="m4.8368 5.7326h1.349v1.5988h-1.349zm4.6207 0.77235q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
<svg width="12" height="12" alt="empty" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
</button>
<button value="yes" title="ligatures">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<path d="M7.87,5.4L5.97,4.52L5.97,3.003L10.5,5.414L10.5,6.591L5.97,8.997L5.97,7.485L7.87,6.605L1.5,6.605L1.5,5.4L7.87,5.4Z" style="fill-rule:nonzero;"/>
</g>
</svg>
</button>
</fieldset>
<fieldset>
<select id="authors-list">
<optgroup>
<option value="all">All Authors</option>
</optgroup>
<optgroup class="other">
<!-- filled from json -->
</optgroup>
</select>
</fieldset>
<fieldset>
<input type="text" id="name-search" placeholder="Search">
</fieldset>
<fieldset class="toggle" data-group="zerostyle">
<button value="empty" title="empty">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
<button value="slash" title="slash">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" aria-label="0"><path d="m9.4576 6.5049q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z" stroke-width=".39487"/><rect transform="matrix(.82528 .56472 -.43794 .89901 0 0)" x="7.3105" y="-2.1319" width="1.1796" height="8.8701" stroke-width=".39701"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
<button value="dot" title="dot">
<svg width="12" height="12" alt="ligatures" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="scale(1.0887 .91856)" stroke-width=".39487" aria-label="0"><path d="m4.8368 5.7326h1.349v1.5988h-1.349zm4.6207 0.77235q0 3.0927-0.97176 4.5426-0.96404 1.4422-3.0001 1.4422-2.0669 0-3.0232-1.4653-0.94862-1.4653-0.94862-4.504 0-3.0618 0.96404-4.5194 0.96404-1.4653 3.0078-1.4653 2.0669 0 3.0155 1.4885 0.95633 1.4808 0.95633 4.4809zm-2.0283 3.5014q0.26993-0.6247 0.36248-1.4653 0.10026-0.84836 0.10026-2.0361 0-1.1723-0.10026-2.0361-0.092548-0.86378-0.37019-1.4653-0.26993-0.59385-0.74039-0.89463-0.46274-0.30078-1.1954-0.30078-0.72496 0-1.2031 0.30078-0.47045 0.30078-0.7481 0.91006-0.26222 0.57071-0.36248 1.4885-0.092548 0.91777-0.092548 2.0129 0 1.2031 0.084836 2.0129t0.36248 1.4499q0.25451 0.60156 0.71725 0.91777 0.47045 0.31621 1.2417 0.31621 0.72496 0 1.2031-0.30078t0.74039-0.91006z"/></g>
<ellipse cx="6.2063" cy="6.0628" rx="3.9731" ry="5.5157" clip-rule="evenodd" fill="none" stroke-linejoin="round" stroke-miterlimit="1.4142"/>
</svg>
</button>
</fieldset>
</section>
<section class="select-list" tabindex="0">
<div id="select-font">
<!-- filled from json -->
</div>
</section>
<section class="config">
<p>
<label for="size">Size</label>
<input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
</p>
<p>
<label for="spacing">/</label>
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
</p>
<p class="select">
<button class="nav-button" id="theme-previous"></button>
<button class="nav-button" id="theme-next"></button>
<label for="select-theme">Theme</label>
<select onchange="selectTheme()" id="select-theme">
<option>3024-day</option>
<option>3024-night</option>
<option>abcdef</option>
<option>ambiance</option>
<option>base16-dark</option>
<option>base16-light</option>
<option>bespin</option>
<option>blackboard</option>
<option>cobalt</option>
<option>colorforth</option>
<option>darcula</option>
<option>dracula</option>
<option>duotone-dark</option>
<option>duotone-light</option>
<option>erlang-dark</option>
<option>gruvbox-dark</option>
<option>hopscotch</option>
<option>isotope</option>
<option>lesser-dark</option>
<option>liquibyte</option>
<option>lucario</option>
<option>material</option>
<option>mbo</option>
<option>mdn-like</option>
<option>midnight</option>
<option selected>monokai</option>
<option>neo</option>
<option>night</option>
<option>nord</option>
<option>oceanic-next</option>
<option>paraiso-dark</option>
<option>paraiso-light</option>
<option>pastel-on-dark</option>
<option>railscasts</option>
<option>rubyblue</option>
<option>seti</option>
<option>shadowfox</option>
<option>solarized light</option>
<option>solarized dark</option>
<option>the-matrix</option>
<option>tomorrow-night-bright</option>
<option>tomorrow-night-eighties</option>
<option>twilight</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
<option>yeti</option>
</select>
</p>
<p class="select">
<label for="select-language">Language</label>
<select onchange="selectLanguage()" id="select-language">
<option>None</option>
<option selected="">JavaScript</option>
<option value="clike">C (-like)</option>
<option>CSS</option>
<option>Go</option>
<option>Haskell</option>
<option value="commonlisp">Common Lisp</option>
<option>Clojure</option>
<option>PHP</option>
<option>Perl</option>
<option>Python</option>
<option>R</option>
<option>Ruby</option>
<option>Shell</option>
<option>Swift</option>
<option>XML</option>
</select>
</p>
</section>
<button value="rendering" title="rendering">
<svg width="12" height="12" alt="vector" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.80339,0,0,1.80339,-7.18367,2.87903)">
<g transform="matrix(12,0,0,12,4.2929,4.38784)">
<path d="M0.128,-0.476L0.251,-0.208L0.374,-0.476L0.498,-0.476L0.25,0.033L0.005,-0.476L0.128,-0.476Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
<svg width="12" height="12" alt="bitmap" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<path d="M4,9L8,9L8,11L4,11L4,9ZM2,1L4,1L4,11L2,11L2,1ZM8,7L10,7L10,9L8,9L8,7ZM4,5L8,5L8,7L4,7L4,5ZM8,3L10,3L10,5L8,5L8,3ZM4,1L8,1L8,3L4,3L4,1Z"/>
</svg>
</button>
<footer>
<h1>
<a href="https://programmingfonts.tumblr.com">Programming Fonts</a>
<button value="liga" title="ligatures">
<svg width="12" height="12" alt="yes" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g>
<path d="M7.87,5.4L5.97,4.52L5.97,3.003L10.5,5.414L10.5,6.591L5.97,8.997L5.97,7.485L7.87,6.605L1.5,6.605L1.5,5.4L7.87,5.4Z" style="fill-rule:nonzero;"/>
</g>
</svg>
<svg width="12" height="12" alt="no" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(0.829577,0,0,0.829577,-2.51769,4.72923)">
<g transform="matrix(12,0,0,12,3.03411,5.29647)">
<rect x="0.05" y="-0.374" width="0.518" height="0.121" style="fill-rule:nonzero;"/>
</g>
<g transform="matrix(12,0,0,12,10.4521,5.29647)">
<path d="M0.393,-0.318L0.393,-0.309L0.082,-0.165L0.082,-0.013L0.537,-0.254L0.537,-0.373L0.082,-0.615L0.082,-0.462L0.393,-0.318Z" style="fill-rule:nonzero;"/>
</g>
</g>
</svg>
</button>
</fieldset>
<fieldset>
<select id="authors-list">
<optgroup>
<option value="all">All Authors</option>
</optgroup>
<optgroup class="other">
<!-- filled from json -->
</optgroup>
</select>
</fieldset>
<fieldset>
<input type="text" id="name-search" placeholder="Search">
</fieldset>
</section>
<section class="select-list" tabindex="0">
<div id="select-font">
<!-- filled from json -->
</div>
</section>
<section class="config">
<p>
<label for="size">Size</label>
<input onchange="setSize()" type="number" id="size" value="16" min="1" max="32" step="1">
</p>
<p>
<label for="spacing">/</label>
<input onchange="setSpacing()" type="number" id="spacing" value="1.4" min="1" max="2" step="0.1">
</p>
<p class="select">
<button class="nav-button" id="theme-previous"></button>
<button class="nav-button" id="theme-next"></button>
<label for="select-theme">Theme</label>
<select onchange="selectTheme()" id="select-theme">
<option>3024-day</option>
<option>3024-night</option>
<option>abcdef</option>
<option>ambiance</option>
<option>base16-dark</option>
<option>base16-light</option>
<option>bespin</option>
<option>blackboard</option>
<option>cobalt</option>
<option>colorforth</option>
<option>darcula</option>
<option>dracula</option>
<option>duotone-dark</option>
<option>duotone-light</option>
<option>erlang-dark</option>
<option>gruvbox-dark</option>
<option>hopscotch</option>
<option>isotope</option>
<option>lesser-dark</option>
<option>liquibyte</option>
<option>lucario</option>
<option>material</option>
<option>mbo</option>
<option>mdn-like</option>
<option>midnight</option>
<option selected>monokai</option>
<option>neo</option>
<option>night</option>
<option>nord</option>
<option>oceanic-next</option>
<option>paraiso-dark</option>
<option>paraiso-light</option>
<option>pastel-on-dark</option>
<option>railscasts</option>
<option>rubyblue</option>
<option>seti</option>
<option>shadowfox</option>
<option>solarized light</option>
<option>solarized dark</option>
<option>the-matrix</option>
<option>tomorrow-night-bright</option>
<option>tomorrow-night-eighties</option>
<option>twilight</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
<option>yeti</option>
</select>
</p>
<p class="select">
<label for="select-language">Language</label>
<select onchange="selectLanguage()" id="select-language">
<option>None</option>
<option selected="">JavaScript</option>
<option value="clike">C (-like)</option>
<option>CSS</option>
<option>Go</option>
<option>Haskell</option>
<option value="commonlisp">Common Lisp</option>
<option>Clojure</option>
<option>PHP</option>
<option>Perl</option>
<option>Python</option>
<option>R</option>
<option>Ruby</option>
<option>Shell</option>
<option>Swift</option>
<option>XML</option>
</select>
</p>
</section>
<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>
</a>
<footer>
<h1>
<a href="https://programmingfonts.tumblr.com">Programming Fonts</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>
</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>
</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>
</a>
</h1>
<p class="subtitle">Test drive all the programming fonts!</p>
</footer>
</footer>
</main>
</div>
</main>
</div>
<form>
<textarea id="code" name="code">
@ -311,29 +296,29 @@
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
function updateGutters(cm) {
var gutters = cm.display.gutters,
__specs = cm.options.gutters;
var gutters = cm.display.gutters,
__specs = cm.options.gutters;
removeChildren(gutters);
removeChildren(gutters);
for (var i = 0; i < specs.length; ++i) {
var gutterClass = __specs[i];
var gElt = gutters.appendChild(
elt(
"div",
null,
"CodeMirror-gutter " + gutterClass
)
);
if (gutterClass == "CodeMirror-linenumbers") {
cm.display.lineGutter = gElt;
gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
}
}
gutters.style.display = i ? "" : "none";
updateGutterSpace(cm);
for (var i = 0; i < specs.length; ++i) {
var gutterClass = __specs[i];
var gElt = gutters.appendChild(
elt(
"div",
null,
"CodeMirror-gutter " + gutterClass
)
);
if (gutterClass == "CodeMirror-linenumbers") {
cm.display.lineGutter = gElt;
gElt.style.width = (cm.display.lineNumWidth || 1) + "px";
}
}
gutters.style.display = i ? "" : "none";
updateGutterSpace(cm);
return false;
return false;
}
</textarea>

115
index.js
View File

@ -95,69 +95,25 @@ function setCounter(amount) {
function applyFilters() {
var count = 0;
switch (filters.style) {
case 'sans':
$('[data-group="style"] [value="sans"]').addClass('selected');
$('[data-group="style"] [value="serif"]').removeClass('selected');
break;
case 'serif':
$('[data-group="style"] [value="sans"]').removeClass('selected');
$('[data-group="style"] [value="serif"]').addClass('selected');
break;
default:
$('[data-group="style"] [value="sans"]').removeClass('selected');
$('[data-group="style"] [value="serif"]').removeClass('selected');
}
switch (filters.rendering) {
case 'vector':
$('[data-group="rendering"] [value="vector"]').addClass('selected');
$('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
break;
case 'bitmap':
$('[data-group="rendering"] [value="vector"]').removeClass('selected');
$('[data-group="rendering"] [value="bitmap"]').addClass('selected');
break;
default:
$('[data-group="rendering"] [value="vector"]').removeClass('selected');
$('[data-group="rendering"] [value="bitmap"]').removeClass('selected');
}
switch (filters.liga) {
case 'yes':
$('[data-group="liga"] [value="yes"]').addClass('selected');
$('[data-group="liga"] [value="no"]').removeClass('selected');
break;
case 'no':
$('[data-group="liga"] [value="yes"]').removeClass('selected');
$('[data-group="liga"] [value="no"]').addClass('selected');
break;
default:
$('[data-group="liga"] [value="yes"]').removeClass('selected');
$('[data-group="liga"] [value="no"]').removeClass('selected');
}
switch (filters.zerostyle) {
case 'empty':
$('[data-group="zerostyle"] [value="empty"]').addClass('selected');
$('[data-group="zerostyle"] [value="slash"]').removeClass('selected');
$('[data-group="zerostyle"] [value="dot"]').removeClass('selected');
break;
case 'slash':
$('[data-group="zerostyle"] [value="empty"]').removeClass('selected');
$('[data-group="zerostyle"] [value="slash"]').addClass('selected');
$('[data-group="zerostyle"] [value="dot"]').removeClass('selected');
break;
case 'dot':
$('[data-group="zerostyle"] [value="empty"]').removeClass('selected');
$('[data-group="zerostyle"] [value="slash"]').removeClass('selected');
$('[data-group="zerostyle"] [value="dot"]').addClass('selected');
break;
default:
$('[data-group="zerostyle"] [value="empty"]').removeClass('selected');
$('[data-group="zerostyle"] [value="slash"]').removeClass('selected');
$('[data-group="zerostyle"] [value="dot"]').removeClass('selected');
}
Object.keys(filters).forEach(function(filter) {
var button = document.querySelector('button[value="' + filter + '"]');
if (! button) {
return;
}
if (filters[filter]) {
button.classList.add('selected');
button.querySelectorAll('svg').forEach(function(image){
image.classList.remove('selected');
});
button.querySelector('svg[alt="' + filters[filter] + '"]').classList.add('selected');
} else {
button.classList.remove('selected');
button.querySelectorAll('svg').forEach(function(image){
image.classList.remove('selected');
});
}
});
$('.entry[data-alias]').each(function(iteration, element) {
var data = font_data[$(element).data().alias];
@ -306,23 +262,23 @@ function decreaseFontSize() {
sizeEl.onchange();
}
function toggleFilter(filter, group) {
function toggleValue(name, value) {
if (filters[name] === value) {
filters[name] = false;
} else {
filters[name] = value;
}
}
function toggleFilter(filter) {
// cycle through the possible values for each filter
// and set the filters[filter] value,
// or at the end of the cycle set it to false
var options = {
'style': [false, 'sans', 'serif'],
'rendering': [false, 'vector', 'bitmap'],
'liga': [false, 'yes', 'no'],
'zerostyle': [false, 'slashed', 'dotted', 'empty'],
};
if (group === 'style') {
toggleValue('style', filter);
} else if (group === 'rendering') {
toggleValue('rendering', filter);
} else if (group === 'liga') {
toggleValue('liga', filter);
} else if (group === 'zerostyle') {
toggleValue('zerostyle', filter);
var current_index = options[filter].indexOf(filters[filter]);
var next = current_index + 1;
if (next < options[filter].length) {
filters[filter] = options[filter][next];
} else {
filters[filter] = options[filter][0];
}
applyFilters();
@ -365,10 +321,9 @@ $(document).ready(function() {
$('#filters button').on('click', function(event) {
var button = $(this);
var button_group = button.parent().data().group;
event.preventDefault();
event.stopPropagation();
toggleFilter(button.val(), button_group);
toggleFilter(button.val());
});
$('#authors-list').on('change', function() {
filters.author = $(this).val();