diff options
Diffstat (limited to '~santisoler/assets/fira_code_v5.2/specimen.html')
| -rw-r--r-- | ~santisoler/assets/fira_code_v5.2/specimen.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/~santisoler/assets/fira_code_v5.2/specimen.html b/~santisoler/assets/fira_code_v5.2/specimen.html new file mode 100644 index 0000000..6dce70b --- /dev/null +++ b/~santisoler/assets/fira_code_v5.2/specimen.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <title>Fira Code Specimen</title> + + <link rel="stylesheet" href="fira_code.css"> + <style> + body { font: 14px/1.5em "Fira Code"; } + .code { + font-feature-settings: "calt" 1; /* Enable ligatures for IE 10+, Edge */ + text-rendering: optimizeLegibility; /* Force ligatures for Webkit, Blink, Gecko */ + width: 30em; + margin: 5em auto; + white-space: pre-wrap; + word-break: break-all; + } + .light { font-weight: 300; } + .regular { font-weight: 400; } + .medium { font-weight: 500; } + .semibold { font-weight: 600; } + .bold { font-weight: 700; } + .variable { font-family: 'Fira Code VF'; font-variation-settings: 'wght' 400; } + i { font-style: normal; color: #c33; } + b { font-weight: inherit; color: #c33; } + </style> + <script type="text/javascript"> + function onWeightChange(weight) { + // code_variable.style['font-weight'] = weight; + code_variable.style['font-variation-settings'] = "'wght' " + weight; + span_wght.innerText = weight; + } + </script> +<body> + +<div class="code light"><b># Fira Code Light</b> + +take = (n, [x, <i>...</i>xs]:list) <i>--></i> + | n <i><=</i> 0 <i>=></i> [] + | empty list <i>=></i> [] + | otherwise <i>=></i> [x] <i>++</i> take n-1, xs + +last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div> + + +<div class="code regular"><b># Fira Code Regular</b> + +take = (n, [x, <i>...</i>xs]:list) <i>--></i> + | n <i><=</i> 0 <i>=></i> [] + | empty list <i>=></i> [] + | otherwise <i>=></i> [x] <i>++</i> take n-1, xs + +last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div> + + +<div class="code medium"><b># Fira Code Medium</b> + +take = (n, [x, <i>...</i>xs]:list) <i>--></i> + | n <i><=</i> 0 <i>=></i> [] + | empty list <i>=></i> [] + | otherwise <i>=></i> [x] <i>++</i> take n-1, xs + +last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div> + + +<div class="code semibold"><b># Fira Code SemiBold</b> + +take = (n, [x, <i>...</i>xs]:list) <i>--></i> + | n <i><=</i> 0 <i>=></i> [] + | empty list <i>=></i> [] + | otherwise <i>=></i> [x] <i>++</i> take n-1, xs + +last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div> + + +<div class="code bold"><b># Fira Code Bold</b> + +take = (n, [x, <i>...</i>xs]:list) <i>--></i> + | n <i><=</i> 0 <i>=></i> [] + | empty list <i>=></i> [] + | otherwise <i>=></i> [x] <i>++</i> take n-1, xs + +last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div> + +<div id="code_variable" class="code variable"><b># Fira Code Variable</b> + +<input type="range" min="300" max="700" value="400" step="10" style="width: 300px;" oninput="onWeightChange(this.value)" onchange="onWeightChange(this.value)"> <span id="span_wght">400</span> + +take = (n, [x, <i>...</i>xs]:list) <i>--></i> + | n <i><=</i> 0 <i>=></i> [] + | empty list <i>=></i> [] + | otherwise <i>=></i> [x] <i>++</i> take n-1, xs + +last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div> |