isaaccorbrey.com
A legibility-first code editor.
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>fresnel</title>
6 <style>
7 body {
8 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
9 margin: 0;
10 padding: 1rem;
11 }
12 #buffer {
13 white-space: pre;
14 margin: 0;
15 }
16 /* Selection body: subtler highlight than the cursor, so the two
17 can visually nest without confusion. */
18 .selection {
19 background: rgba(255, 204, 51, 0.25);
20 }
21 /* Block cursor in normal/select mode: strong highlight over the
22 grapheme the cursor is on. */
23 .cursor {
24 background: #ffcc33;
25 color: #000;
26 }
27 /* Insert-mode caret drawn as a left border on the character the
28 cursor sits before. No `inline-block` — this keeps the
29 monospace grid alignment perfect. */
30 .caret-on {
31 border-left: 2px solid #ffcc33;
32 /* Push the character back by the border width so we don't
33 shift the character to the right of the caret. */
34 margin-left: -2px;
35 }
36 /* Insert-mode caret at EOF, when there's no character to
37 decorate. Drawn as a bare border with a small span to give it
38 height. */
39 .caret-eof {
40 border-left: 2px solid #ffcc33;
41 margin-left: -2px;
42 /* Reserve some vertical space so the caret is visible on an
43 otherwise-empty final line. Zero-width horizontally so it
44 doesn't disrupt the grid. */
45 display: inline-block;
46 width: 0;
47 height: 1em;
48 vertical-align: text-bottom;
49 }
50 #mode {
51 margin-top: 1rem;
52 font-size: 0.85rem;
53 color: #333;
54 }
55 #status {
56 margin-top: 0.25rem;
57 color: #666;
58 font-size: 0.85rem;
59 }
60 </style>
61 </head>
62 <body>
63 <pre id="buffer">(loading buffer…)</pre>
64 <div id="mode">normal</div>
65 <div id="status">real Helix keymap active — try gg, 5l, i, esc</div>
66 <script type="module" src="/src/main.ts"></script>
67 </body>
68</html>