1@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&text=ARJUN&display=swap");
2
3html {
4 font-size: calc(1rem + 0.25vw);
5}
6
7body {
8 margin: 0;
9 color: #000;
10 background-color: #fff;
11 font-family: sans-serif;
12}
13
14*::before,
15*::after {
16 box-sizing: border-box;
17}
18
19#container {
20 box-sizing: border-box;
21 display: flex;
22 height: 100vh;
23}
24
25#repositories {
26 font-weight: 600;
27 margin-top: 1.5rem;
28 margin-bottom: 1.5rem;
29 font-size: 2rem;
30 line-height: 1;
31}
32
33#header > h1 {
34 font-weight: 600;
35 margin-top: 1.5rem;
36 margin-bottom: 1.5rem;
37 font-size: 2rem;
38 line-height: 1;
39}
40
41::-webkit-scrollbar {
42 width: 10px;
43}
44
45::-webkit-scrollbar-thumb {
46 background: #666;
47 border-radius: 20px;
48}
49
50::-webkit-scrollbar-track {
51 background: transparent;
52}
53
54#sidebar {
55 display: flex;
56 flex-direction: column;
57 align-items: center;
58 justify-content: center;
59 width: 25%;
60 max-width: 30%;
61 padding: 10px;
62 overflow-y: hidden;
63 overflow-x: hidden;
64 margin: 5em 0em;
65 box-sizing: border-box;
66}
67
68#profile_img {
69 width: fit-content;
70 width: 50%;
71 max-width: 350px;
72 margin: 2em 1em;
73 border: 0px solid;
74 border-radius: 25px;
75}
76
77@keyframes typing-animation {
78 from {
79 width: 0%;
80 }
81 to {
82 width: 100%;
83 }
84}
85
86#typing {
87 white-space: nowrap;
88 overflow: hidden;
89 /* margin-top: 1.5rem; */
90 letter-spacing: 0.25em;
91 font-size: 1.85rem;
92 animation: typing-animation 0.85s steps(6, end);
93 font-weight: 500;
94 font-family: "IBM Plex Sans", sans-serif;
95}
96
97@keyframes cursor-blinking-animation {
98 from,
99 to {
100 visibility: hidden;
101 }
102 50% {
103 visibility: visible;
104 }
105}
106
107#cursor {
108 background-color: currentColor;
109 color: currentColor;
110 animation: cursor-blinking-animation 1s step-end infinite;
111 height: 0.15rem;
112 width: 1em;
113 margin-bottom: 0.5em;
114}
115
116#logo {
117 position: absolute;
118 top: 0;
119 display: flex;
120 align-items: flex-end;
121 cursor: pointer;
122 justify-content: center;
123 text-decoration: none;
124 margin-top: 1.5rem;
125}
126
127#contact {
128 font-size: 1.2rem;
129}
130
131#main-view {
132 overflow-y: auto;
133 width: 100%;
134 line-height: 1.5;
135}
136
137#branches,
138#tags,
139#index,
140#log,
141#files {
142 font-family: sans-serif;
143}
144
145@media screen and (min-width: 1000px) {
146 #content {
147 display: flex;
148 flex-direction: column;
149 justify-content: flex-start;
150 align-items: center;
151 }
152}
153
154#head, #content, .table-container {
155 width: auto;
156 overflow-x: auto;
157 margin: auto;
158}
159
160#log, #index {
161 min-width: 600px;
162 width: 100%;
163 overflow-x: auto;
164}
165
166pre:not(#about) {
167 overflow-x: auto;
168 border-radius: 4px;
169 padding: 10px;
170}
171
172a {
173 color: #000;
174}
175
176a:hover {
177 color: #00c;
178}
179
180#head table {
181 margin-top: 0.5em;
182 margin-bottom: 0.5em;
183}
184
185#head table td:first-child {
186 padding: 0 0.4em 0 0;
187}
188
189#head table td:last-child {
190 padding: 0 0 0 0.4em;
191}
192
193#head p {
194 margin: 0;
195}
196
197#files .dir {
198 font-weight: bold;
199 text-decoration: none;
200}
201
202.url {
203 font-family: monospace;
204}
205
206#home h1 {
207 font-size: 1.5em;
208 text-align: center;
209 margin-top: 1em;
210}
211
212#home h2 {
213 font-size: 1.25em;
214 margin-top: 2.5em;
215 margin-bottom: 1em;
216}
217
218.md h1 {
219 font-size: 1.5em;
220}
221
222.md h2 {
223 font-size: 1.25em;
224}
225
226img, svg, h1, h2 {
227 vertical-align: middle;
228}
229
230img, svg {
231 border: 0;
232}
233
234a:target {
235 background-cchor: #ccc;
236}
237
238a.d,
239a.h,
240a.i,
241a.line {
242 margin-right: 10px;
243 text-decoration: none;
244}
245
246pre {
247 display: block;
248}
249
250#blob a {
251 color: #777;
252}
253#blob a:hover {
254 color: blue;
255 text-decoration: none;
256}
257
258pre > #diff {
259 line-height: 3em;
260 font-size: 1.2em;
261}
262
263table thead td {
264 font-weight: bold;
265}
266
267table td {
268 padding: 0 0.4em;
269}
270
271#content table td {
272 vertical-align: top;
273 white-space: nowrap;
274}
275
276#commit-message {
277 min-width: 300px;
278 white-space: normal !important;
279}
280
281#branches tr td,
282#tags tr td,
283#index tr td,
284#log tr td,
285#files tr td {
286 padding: 0.75em 0.25em;
287}
288
289#branches tr:nth-child(even),
290#tags tr:nth-child(even),
291#index tr:nth-child(even),
292#log tr:nth-child(even),
293#files tr:nth-child(even) {
294 background-color: #f2f2f2;
295}
296
297#branches tr:hover td,
298#tags tr:hover td,
299#index tr:hover td,
300#log tr:hover td,
301#files tr:hover td {
302 background-color: #eee;
303}
304
305#index tr td:nth-child(2),
306#tags tr td:nth-child(3),
307#branches tr td:nth-child(3),
308#log tr td:nth-child(2) {
309}
310
311td.num {
312 text-align: right;
313}
314
315.desc {
316 color: #777;
317}
318
319hr {
320 border: 0;
321 border-top: 1px solid #777;
322 height: 1px;
323}
324
325pre {
326 width: 90%;
327 font-family: monospace;
328}
329
330.A,
331span.i,
332pre a.i {
333 color: #181;
334}
335
336.D,
337span.d,
338pre a.d {
339 color: #e02;
340}
341
342pre a.h:hover,
343pre a.i:hover,
344pre a.d:hover {
345 text-decoration: none;
346}
347
348.md table {
349 border-collapse: collapse;
350 margin: 1em 1em;
351 border: 1px solid #d2d2d2;
352}
353
354.md table td,
355.md table th {
356 padding: 0.25em 1em;
357 border: 1px solid #d2d2d2;
358}
359
360#index .cat td {
361 font-style: italic;
362}
363
364#index .repo td:first-child {
365 padding-left: 1.5em;
366}
367
368@media screen and (max-width: 1000px) {
369 #sidebar {
370 justify-content: space-between;
371 align-items: center;
372 max-height: 60vh;
373 width: 100%;
374 max-width: 100%;
375 padding: 1em;
376 overflow-y: hidden;
377 overflow-x: hidden;
378 margin: 0;
379 }
380 #logo {
381 position: relative;
382 margin-bottom: 0rem;
383 }
384 #profile_img {
385 max-width: 250px;
386 margin: 1em;
387 }
388 #header {
389 padding: 15px;
390 }
391 #content {
392 display: block;
393 padding: 0px 10px;
394 }
395 #main-view {
396
397 }
398 #header > h1 {
399 font-size: 1.75rem;
400 }
401 #header > h2 {
402 font-size: 1.5rem;
403 }
404 #header > h3 {
405 font-size: 1.25rem;
406 }
407 #container {
408 display: block;
409 height: auto;
410 }
411}
412
413@media (prefers-color-scheme: dark) {
414 body {
415 background-color: #010509;
416 color: #fff;
417 }
418 hr {
419 border-color: #555;
420 }
421
422 a {
423 color: #fff;
424 }
425
426 a:hover {
427 color: #4d80b3;
428 }
429 a:target {
430 background-color: #222;
431 }
432 .desc {
433 color: #aaa;
434 }
435 #blob a {
436 color: #555;
437 }
438 #blob a:target {
439 color: #eee;
440 }
441 #blob a:hover {
442 color: #56c8ff;
443 }
444 pre a.h {
445 color: #0bb;
446 }
447 .A,
448 span.i,
449 pre a.i {
450 color: #1a1;
451 }
452 .D,
453 span.d,
454 pre a.d {
455 color: #e44;
456 }
457 #branches tr:hover td,
458 #tags tr:hover td,
459 #index tr:hover td,
460 #log tr:hover td,
461 #files tr:hover td {
462 background-color: #111;
463 }
464 pre:not(#about),
465 .md table,
466 .md table td,
467 .md table th {
468 border-color: #555;
469 }
470 #branches tr:nth-child(even),
471 #tags tr:nth-child(even),
472 #index tr:nth-child(even),
473 #log tr:nth-child(even),
474 #files tr:nth-child(even) {
475 background-color: #1a1a1a;
476 }
477
478}