flagon-io/g1t

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

---
// The wordmark and "Docs": the same G1T in pixel capitals as g1t.sh, the 1
// in lavender, so the two read as one product. Copied from
// apps/web/app/components/logo.tsx; keep the two in step.
const G = ['.###.', '#...#', '#....', '#.###', '#...#', '#...#', '.###.'];
const ONE = ['..#..', '.##..', '#.#..', '..#..', '..#..', '..#..', '#####'];
const T = ['#####', '..#..', '..#..', '..#..', '..#..', '..#..', '..#..'];
const pixels = (rows: string[], dx: number, one: boolean) =>
	rows.flatMap((row, y) => [...row].flatMap((c, x) => (c === '#' ? [{ x: dx + x, y, one }] : [])));
const word = [...pixels(G, 0, false), ...pixels(ONE, 6, true), ...pixels(T, 10, false)];
---

<a href="/" class="g1t-title" aria-label="g1t docs home">
	<span class="g1t-title-lockup">
		<svg viewBox="1 1 148 68" role="img" aria-label="g1t">
			{word.map((p) => (
				<rect
					x={p.x * 10 + 1}
					y={p.y * 10 + 1}
					width="8"
					height="8"
					fill={p.one ? 'var(--g1t-merged)' : 'currentColor'}
				/>
			))}
		</svg>
	</span>
	<span class="g1t-title-docs">Docs</span>
</a>

<style>
	.g1t-title {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		color: var(--g1t-fg);
		text-decoration: none;
	}
	/* As on g1t.sh: a cell is 0.125em, the letters 0.85em tall. */
	.g1t-title-lockup {
		display: inline-flex;
		align-items: baseline;
		font-size: 1.5rem;
		line-height: 1;
	}
	svg {
		height: 0.85em;
		width: auto;
		flex-shrink: 0;
	}
	.g1t-title-docs {
		border-radius: 999px;
		padding: 0.1rem 0.5rem;
		font-size: 0.72rem;
		font-weight: 500;
		color: var(--g1t-muted);
		box-shadow: inset 0 0 0 1px var(--g1t-line-strong);
	}
</style>