konoma 0.11.1

Full-screen preview-focused terminal file browser (macOS Apple Silicon)
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

/* konoma brand theme — "木の間: the terminal as a forest at night".
   Ported from the approved design comp: green-biased darks, moss/leaf accents,
   an amber reserved for the terminal cursor, monospace as the display voice.
   Only visuals live here — search, i18n, sidebar etc. stay stock Starlight. */

:root {
	--konoma-mono: 'SF Mono', Menlo, 'Cascadia Code', Consolas, 'Liberation Mono', monospace;
	--konoma-amber: #d9a94e;

	/* Dark (default) — comp palette mapped to Starlight's scale. */
	--sl-color-accent-low: #14301f;
	--sl-color-accent: #3e9b63;
	--sl-color-accent-high: #a7d3a0;
	--sl-color-white: #e9efe6; /* strongest text (paper) */
	--sl-color-gray-1: #d8e1d4;
	--sl-color-gray-2: #b9c4b3;
	--sl-color-gray-3: #87927f; /* muted text (bark) */
	--sl-color-gray-4: #57624f;
	--sl-color-gray-5: #253128; /* hairlines */
	--sl-color-gray-6: #141b16; /* raised surfaces (pane) */
	--sl-color-black: #0e1310; /* page ground (ink) */
}

:root[data-theme='light'] {
	--sl-color-accent-low: #d9f0e2;
	--sl-color-accent: #1f7a45;
	--sl-color-accent-high: #143d26;
	--sl-color-white: #17211a;
	--sl-color-gray-1: #223027;
	--sl-color-gray-2: #3c4a40;
	--sl-color-gray-3: #5f6b5a;
	--sl-color-gray-4: #8b9686;
	--sl-color-gray-5: #cfdacb;
	--sl-color-gray-6: #e9efe4;
	--sl-color-gray-7: #f0f5ec;
	--sl-color-black: #f5f8f2;
}

/* ---------- type: monospace is the display voice ---------- */

.site-title {
	font-family: var(--konoma-mono);
	letter-spacing: 0.02em;
}

.sl-markdown-content :is(h1, h2, h3, h4, h5),
h1[data-page-title],
.hero h1 {
	font-family: var(--konoma-mono);
	letter-spacing: -0.01em;
}

.hero .tagline {
	max-width: 60ch;
}

/* ---------- landing hero: ghosted vertical 木の間 ---------- */

[data-has-hero] .hero {
	position: relative;
}
[data-has-hero] .hero::after {
	content: '木の間';
	position: absolute;
	top: -1rem;
	right: -0.5rem;
	writing-mode: vertical-rl;
	font-weight: 700;
	font-size: clamp(4rem, 10vw, 8rem);
	line-height: 1;
	letter-spacing: 0.12em;
	color: var(--sl-color-accent);
	opacity: 0.1;
	user-select: none;
	pointer-events: none;
}
@media (max-width: 72rem) {
	[data-has-hero] .hero::after {
		display: none;
	}
}

/* ---------- cards (landing feature grid) ---------- */

/* One brand hue for every card: outranks Starlight's per-card color cycling
   (.card:nth-child(4n+…) sets orange/purple/red/green vars at (0,2,0) — this
   selector is (0,3,0) so it wins regardless of file order). */
.sl-markdown-content .card.sl-flex {
	--sl-card-border: var(--sl-color-accent);
	--sl-card-bg: var(--sl-color-accent-low);
	background: var(--sl-color-gray-6);
	border: 1px solid var(--sl-color-gray-5);
	border-radius: 0.5rem;
}
.card .title {
	font-family: var(--konoma-mono);
	font-size: var(--sl-text-lg);
	color: var(--sl-color-accent-high);
}
:root[data-theme='light'] .card .title {
	color: var(--sl-color-accent);
}
.card .icon {
	color: var(--sl-color-accent);
}

/* ---------- keycap chips: <kbd> everywhere ---------- */

.sl-markdown-content kbd {
	font-family: var(--konoma-mono);
	font-size: 0.8em;
	color: var(--sl-color-white);
	background: var(--sl-color-gray-6);
	border: 1px solid var(--sl-color-gray-5);
	border-bottom-width: 3px;
	border-radius: 0.3rem;
	padding: 0.1rem 0.5rem;
	white-space: nowrap;
}

/* ---------- sidebar: current page marker ---------- */

.sidebar-content a[aria-current='page'] {
	font-weight: 600;
}