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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
package main
import "os"
// stderr is aliased so tests/handlers can log without importing os everywhere.
var stderr = os.Stderr
// pageCSS is the layout stylesheet, kept deliberately small. Chroma's
// syntax-highlight classes are appended to this at startup (see buildCSS),
// with the dark variant guarded by prefers-color-scheme.
const pageCSS = `
:root {
--bg: #ffffff;
--fg: #1a1a1a;
--muted: #666;
--link: #0b5fff;
--border: #e2e2e2;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--fg: #dddddd;
--muted: #999;
--link: #6ea8ff;
--border: #333;
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
}
main {
max-width: 60em;
margin: 2em auto;
padding: 0 1.5em;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 {
font-size: 1.2rem;
font-weight: 600;
border-bottom: 1px solid var(--border);
padding-bottom: 0.4em;
word-break: break-all;
}
.muted { color: var(--muted); font-size: 0.85em; }
/* Visually hidden but available to assistive tech (e.g. the document <h1> on
listing pages, where the visible heading is the breadcrumb nav). */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.filehead {
margin-bottom: 0.5em;
padding-bottom: 0.4em;
border-bottom: 1px solid var(--border);
}
/* Breadcrumb navigation (WAI-ARIA pattern). The "/" separators are real,
aria-hidden text nodes (not ::before content) so a text selection copies the
full slash-separated path, while screen readers still read only the labels. */
nav.breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9rem;
word-break: break-all;
}
nav.breadcrumb li { display: inline; }
nav.breadcrumb .sep { padding: 0 0.4em; color: var(--muted); }
nav.breadcrumb [aria-current="page"] { color: var(--fg); font-weight: 600; }
ul.listing {
list-style: none;
padding: 0;
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9rem;
}
ul.listing li {
padding: 0.15em 0;
border-bottom: 1px solid var(--border);
}
ul.listing li.dir a { font-weight: 600; }
ul.listing .ago {
float: right;
color: var(--muted);
font-size: 0.85em;
margin-left: 1em;
}
/* A project's blurb, shown under its entry on the site index
(serveProjectIndex). This one is block prose rather than a phrase on a
line, so it switches back to the body font rather than staying monospace.
A *directory's* blurb needs no rule of its own: it is emitted inside the
entry's own <span class="muted">, so it already reads as a continuation of
the size and file count it follows. */
.listing .proj-desc {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.9rem;
margin: 0.3em 0 0.6em;
}
/* Inline markup inside a listing line (a directory blurb's <code>, say) must
not switch font or size: the whole listing is already monospace, and the
browser default for <code> would leave it a size adrift mid-line. */
ul.listing code {
font-family: inherit;
font-size: inherit;
}
/* The same blurb shown above a directory's own listing, where it stands alone
as a paragraph rather than trailing an entry's stats. */
p.dir-desc { margin: 0.3em 0 0.8em; }
div.clone {
margin: 1em 0;
padding: 0.75em 1em;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.9rem;
}
div.clone pre { margin: 0.5em 0 0; }
div.clone p { margin: 0.5em 0 0; }
p.full-link { margin: 0.75em 0; font-size: 0.9rem; }
section.full-file {
margin-top: 1.5em;
padding-top: 0.5em;
border-top: 1px solid var(--border);
}
section.full-file h2.full-path {
font-size: 0.95rem;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
word-break: break-all;
}
img.full-image {
max-width: 100%;
height: auto;
border: 1px solid var(--border);
}
section.readme {
margin-top: 2em;
padding-top: 1em;
border-top: 1px solid var(--border);
}
section.readme img { max-width: 100%; }
/* Self-linking headings in rendered prose (see headingAnchorTransformer in
render.go): the heading's own text is the anchor, so it must inherit the
heading's colour rather than look like an ordinary link, and only reveal
itself as clickable on hover/focus. The class is emitted nowhere else, so
this is not further qualified by element — deliberately, since a selector
that failed to match would leave every heading rendered link-blue. */
section.readme a.permalink {
color: inherit;
text-decoration: none;
}
section.readme a.permalink:hover,
section.readme a.permalink:focus { text-decoration: underline; }
/* The "name(section)" heading above a rendered manpage (manpageTitleHTML in
render.go). Unlike a permalink this link goes somewhere else — to the page's
own source file — but it is styled the same way and for the same reason: it
IS the heading text, so colouring it link-blue would make the heading read as
a stray link rather than as a heading. Monospace, since it names a file. */
h1.manpage-title {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
margin-top: 0;
}
h1.manpage-title a {
color: inherit;
text-decoration: none;
}
h1.manpage-title a:hover,
h1.manpage-title a:focus { text-decoration: underline; }
/* chroma code blocks */
.chroma {
overflow-x: auto;
padding: 1em;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.85rem;
line-height: 1.45;
}
.chroma .lntable { border-spacing: 0; }
.chroma .lntd { vertical-align: top; padding: 0; }
.chroma .ln, .chroma .lnt {
color: var(--muted);
user-select: none;
padding-right: 1em;
}
`
|