diode-editor.github.io/index.html at main · diode-editor/diode-editor.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>diode — a terminal text editor</title>
<meta name="description" content="diode is a terminal text editor. Coming soon.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 112'%3E%3Cpath d='M18 8 L98 56 L18 104 Z' fill='%2360aaf3'/%3E%3Crect x='106' y='8' width='16' height='96' fill='%2360aaf3'/%3E%3C/svg%3E">
<style>
  @font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("jetbrains-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F;
  }
  :root {
    --bg: #0c0c0d;
    --fg: #f2f0eb;
    --dim: #868686;
    --accent: #60aaf3;
    --accent: oklch(0.72 0.13 250);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }
  main { text-align: left; max-width: 34rem; width: 100%; }
  .prompt { color: var(--dim); }
  .lockup {
    display: flex;
    align-items: center;
    gap: 0.42em;
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    margin: 0.3em 0 0.35em;
  }
  .mark {
    height: 1.05em;
    width: auto;
    flex: none;
  }
  .mark path, .mark rect { fill: var(--accent); }
  h1 {
    font-size: 1em;
    font-weight: 500;
    letter-spacing: -0.03em;
  }
  .cursor {
    display: inline-block;
    width: 0.55em;
    height: 1em;
    margin-left: 0.12em;
    background: var(--fg);
    vertical-align: text-bottom;
    animation: blink 1.1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
  p.tagline { font-size: 1.05rem; margin-bottom: 0.5rem; }
  p.soon { color: var(--dim); margin-bottom: 2.5rem; }
  a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
  }
  a:hover { border-bottom-color: var(--accent); }
  footer { color: var(--dim); font-size: 0.85rem; }
  @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
</style>
</head>
<body>
<main>
  <div class="prompt">$ diode</div>
  <div class="lockup">
    <svg class="mark" viewBox="0 0 132 112" aria-hidden="true">
      <path d="M18 8 L98 56 L18 104 Z"/>
      <rect x="106" y="8" width="16" height="96"/>
    </svg>
    <h1>diode<span class="cursor"></span></h1>
  </div>
  <p class="tagline">a terminal text editor</p>
  <p class="soon">coming soon</p>
  <footer><a href="https://github.com/diode-editor">github.com/diode-editor</a></footer>
</main>
</body>
</html>