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