boltless.me
dotfiles
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 <title>Fira Code Specimen</title>
7
8 <link rel="stylesheet" href="fira_code.css">
9 <style>
10 body { font: 14px/1.5em "Fira Code"; }
11 .code {
12 font-feature-settings: "calt" 1; /* Enable ligatures for IE 10+, Edge */
13 text-rendering: optimizeLegibility; /* Force ligatures for Webkit, Blink, Gecko */
14 width: 30em;
15 margin: 5em auto;
16 white-space: pre-wrap;
17 word-break: break-all;
18 }
19 .light { font-weight: 300; }
20 .regular { font-weight: 400; }
21 .medium { font-weight: 500; }
22 .semibold { font-weight: 600; }
23 .bold { font-weight: 700; }
24 .variable { font-family: 'Fira Code VF'; font-variation-settings: 'wght' 400; }
25 i { font-style: normal; color: #c33; }
26 b { font-weight: inherit; color: #c33; }
27 </style>
28 <script type="text/javascript">
29 function onWeightChange(weight) {
30 // code_variable.style['font-weight'] = weight;
31 code_variable.style['font-variation-settings'] = "'wght' " + weight;
32 span_wght.innerText = weight;
33 }
34 </script>
35<body>
36
37<div class="code light"><b># Fira Code Light</b>
38
39take = (n, [x, <i>...</i>xs]:list) <i>--></i>
40 | n <i><=</i> 0 <i>=></i> []
41 | empty list <i>=></i> []
42 | otherwise <i>=></i> [x] <i>++</i> take n-1, xs
43
44last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
45
46
47<div class="code regular"><b># Fira Code Regular</b>
48
49take = (n, [x, <i>...</i>xs]:list) <i>--></i>
50 | n <i><=</i> 0 <i>=></i> []
51 | empty list <i>=></i> []
52 | otherwise <i>=></i> [x] <i>++</i> take n-1, xs
53
54last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
55
56
57<div class="code medium"><b># Fira Code Medium</b>
58
59take = (n, [x, <i>...</i>xs]:list) <i>--></i>
60 | n <i><=</i> 0 <i>=></i> []
61 | empty list <i>=></i> []
62 | otherwise <i>=></i> [x] <i>++</i> take n-1, xs
63
64last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
65
66
67<div class="code semibold"><b># Fira Code SemiBold</b>
68
69take = (n, [x, <i>...</i>xs]:list) <i>--></i>
70 | n <i><=</i> 0 <i>=></i> []
71 | empty list <i>=></i> []
72 | otherwise <i>=></i> [x] <i>++</i> take n-1, xs
73
74last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
75
76
77<div class="code bold"><b># Fira Code Bold</b>
78
79take = (n, [x, <i>...</i>xs]:list) <i>--></i>
80 | n <i><=</i> 0 <i>=></i> []
81 | empty list <i>=></i> []
82 | otherwise <i>=></i> [x] <i>++</i> take n-1, xs
83
84last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>
85
86<div id="code_variable" class="code variable"><b># Fira Code Variable</b>
87
88<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>
89
90take = (n, [x, <i>...</i>xs]:list) <i>--></i>
91 | n <i><=</i> 0 <i>=></i> []
92 | empty list <i>=></i> []
93 | otherwise <i>=></i> [x] <i>++</i> take n-1, xs
94
95last3 = reverse <i>>></i> take 3 <i>>></i> reverse</div>