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