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