1:root {
  2  --white: #fff;white
  3  --light: #f4f4f4;
  4  --cyan: #509c93;
  5  --light-gray: #eee;
  6  --medium-gray: #ddd;
  7  --gray: #6a6a6a;
  8  --dark: #444;
  9  --darker: #222;
 10
 11  --sans-font: "Geist", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
 12  --display-font: "Geist", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
 13  --mono-font: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', 'Roboto Mono', Menlo, Consolas, monospace;
 14}
 15
 16@media (prefers-color-scheme: dark) {
 17  :root {
 18    color-scheme: dark light;
 19    --light: #181818;
 20    --cyan: #76c7c0;
 21    --light-gray: #333;
 22    --medium-gray: #444;
 23    --gray: #aaa;
 24    --dark: #ddd;
 25    --darker: #f4f4f4;
 26  }
 27}
 28
 29html {
 30  background: var(--white);
 31  -webkit-text-size-adjust: none;
 32  font-family: var(--sans-font);
 33  font-weight: 380;
 34  font-feature-settings: "ss03" 1, "ss04" 1, "ss0h" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss09" 1;
 35  font-variant-ligatures: discretionary-ligatures;
 36  font-variant-ligatures: common-ligatures;
 37}
 38
 39pre {
 40  font-family: var(--mono-font);
 41}
 42
 43::selection {
 44  background: var(--medium-gray);
 45  opacity: 0.3;
 46}
 47
 48* {
 49  box-sizing: border-box;
 50  padding: 0;
 51  margin: 0;
 52}
 53
 54body {
 55  max-width: 1000px;
 56  padding: 0 13px;
 57  margin: 40px auto;
 58}
 59
 60main, footer {
 61  font-size: 1rem;
 62  padding: 0;
 63  line-height: 160%;
 64}
 65
 66header h1, h2, h3 {
 67  font-family: var(--display-font);
 68}
 69
 70h2 {
 71  font-weight: 400;
 72}
 73
 74strong {
 75  font-weight: 500;
 76}
 77
 78main h1 {
 79  padding: 10px 0 10px 0;
 80}
 81
 82main h2 {
 83  font-size: 18px;
 84}
 85
 86main h2, h3 {
 87  padding: 20px 0 15px 0;
 88}
 89
 90nav {
 91  padding: 0.4rem 0 1.5rem 0;
 92}
 93
 94nav ul {
 95  padding: 0;
 96  margin: 0;
 97  list-style: none;
 98  padding-bottom: 20px;
 99}
100
101nav ul li {
102  padding-right: 10px;
103  display: inline-block;
104}
105
106a {
107  margin: 0;
108  padding: 0;
109  box-sizing: border-box;
110  text-decoration: none;
111  word-wrap: break-word;
112}
113
114a {
115  color: var(--darker);
116  border-bottom: 1.5px solid var(--medium-gray);
117}
118
119a:hover {
120  border-bottom: 1.5px solid var(--gray);
121}
122
123.index {
124  padding-top: 2em;
125  display: grid;
126  grid-template-columns: 6em 1fr minmax(0, 7em);
127  grid-row-gap: 0.5em;
128  min-width: 0;
129}
130
131.clone-url {
132  padding-top: 2rem;
133}
134
135.clone-url pre {
136  color: var(--dark);
137  white-space: pre-wrap;
138}
139
140.desc {
141  font-weight: normal;
142  color: var(--gray);
143  font-style: italic;
144}
145
146.tree {
147  display: grid;
148  grid-template-columns: 10ch auto 1fr;
149  grid-row-gap: 0.5em;
150  grid-column-gap: 1em;
151  min-width: 0;
152}
153
154.log {
155  display: grid;
156  grid-template-columns: 20rem minmax(0, 1fr);
157  grid-row-gap: 0.8em;
158  grid-column-gap: 8rem;
159  margin-bottom: 2em;
160  padding-bottom: 1em;
161  border-bottom: 1.5px solid var(--medium-gray);
162}
163
164.log pre {
165  white-space: pre-wrap;
166}
167
168.mode, .size {
169  font-family: var(--mono-font);
170}
171.size {
172  text-align: right;
173}
174
175.readme pre {
176  white-space: pre-wrap;
177  overflow-x: auto;
178}
179
180.readme {
181  background: var(--light-gray);
182  padding: 0.5rem;
183}
184
185.readme ul {
186  padding: revert;
187}
188
189.readme img {
190  max-width: 100%;
191}
192
193.diff {
194  margin: 1rem 0 1rem 0;
195  padding: 1rem 0 1rem 0;
196  border-bottom: 1.5px solid var(--medium-gray);
197}
198
199.diff pre {
200  overflow: scroll;
201}
202
203.diff-stat {
204  padding: 1rem 0 1rem 0;
205}
206
207.commit-hash, .commit-email {
208  font-family: var(--mono-font);
209}
210
211.commit-email:before {
212  content: '<';
213}
214
215.commit-email:after {
216  content: '>';
217}
218
219.commit {
220  margin-bottom: 1rem;
221}
222
223.commit pre {
224  padding-bottom: 1rem;
225  white-space: pre-wrap;
226}
227
228.diff-stat ul li {
229  list-style: none;
230  padding-left: 0.5em;
231}
232
233.diff-add {
234  color: green;
235}
236
237.diff-del {
238  color: red;
239}
240
241.diff-noop {
242  color: var(--gray);
243}
244
245.ref {
246  font-family: var(--sans-font);
247  font-size: 14px;
248  color: var(--gray);
249  display: inline-block;
250  padding-top: 0.7em;
251}
252
253.refs pre {
254  white-space: pre-wrap;
255  padding-bottom: 0.5rem;
256}
257
258.refs strong {
259  padding-right: 1em;
260}
261
262.line-numbers {
263  white-space: pre-line;
264  -moz-user-select: -moz-none;
265  -khtml-user-select: none;
266  -webkit-user-select: none;
267  -o-user-select: none;
268  user-select: none;
269  display: flex;
270  float: left;
271  flex-direction: column;
272  margin-right: 1ch;
273}
274
275.file-wrapper {
276  display: flex;
277  flex-direction: row;
278  grid-template-columns: 1rem minmax(0, 1fr);
279  gap: 1rem;
280  padding: 0.5rem;
281  background: var(--light-gray);
282  overflow-x: auto;
283}
284
285.chroma-file-wrapper {
286  display: flex;
287  flex-direction: row;
288  grid-template-columns: 1rem minmax(0, 1fr);
289  overflow-x: auto;
290}
291
292.file-content {
293  background: var(--light-gray);
294  overflow-y: hidden;
295  overflow-x: auto;
296}
297
298.diff-type {
299  color: var(--gray);
300}
301
302.commit-info {
303  color: var(--gray);
304  padding-bottom: 1.5rem;
305  font-size: 0.85rem;
306}
307
308@media (max-width: 600px) {
309  .index {
310    grid-row-gap: 0.8em;
311  }
312
313  .log {
314    grid-template-columns: 1fr;
315    grid-row-gap: 0em;
316  }
317
318  .index {
319    grid-template-columns: 1fr;
320    grid-row-gap: 0em;
321  }
322
323  .index-name:not(:first-child) {
324    padding-top: 1.5rem;
325  }
326
327  .commit-info:not(:last-child) {
328    padding-bottom: 1.5rem;
329  }
330
331  pre {
332    font-size: 0.8rem;
333  }
334}