Commit 307a6f3

Eric Bower  ·  2026-05-13 22:31:44 -0400 EDT
parent 84dd9bd
style: design tweaks
13 files changed,  +407, -797
+5, -6
......@@ -29,16 +29,15 @@ test:
2929 go test ./...
3030 .PHONY: test
3131
32-static: build clean
33- ./pgit \
32+static:
33+ go run main.go \
3434 --out ./public \
3535 --label pgit \
36- --desc "static site generator for git" \
3736 --clone-url "https://github.com/picosh/pgit.git" \
38- --home-url "https://git.erock.io" \
39- --theme "dracula" \
37+ --issues-url "https://github.com/picosh/pgit/issues" \
38+ --contrib-url "https://github.com/picosh/pgit/pulls" \
4039 --revs main
41-.PHONY:
40+.PHONY: static
4241
4342 dev: static
4443 rsync -rv --delete ./public/ pgs.sh:/git-pgit-local/
+0, -3
......@@ -11,14 +11,11 @@
1111 {{template "meta" .}}
1212
1313 <link rel="stylesheet" href="{{.Repo.RootRelative}}vars.css" />
14- <link rel="stylesheet" href="{{.Repo.RootRelative}}smol.css" />
1514 <link rel="stylesheet" href="{{.Repo.RootRelative}}main.css" />
1615 </head>
1716 <body>
1817 <header class="box">{{template "header" .}}</header>
19- <hr class="my" />
2018 <main>{{template "content" .}}</main>
21- <hr class="my" />
2219 <footer>{{template "footer" .}}</footer>
2320 </body>
2421 </html>
+12, -12
......@@ -5,19 +5,19 @@
55 {{end}}
66
77 {{define "content"}}
8- <dl>
9- <dt>commit</dt>
10- <dd><a href="{{.CommitURL}}">{{.CommitID}}</a></dd>
8+ <h2>Commit <code>{{.CommitID}}</code></h2>
119
12- <dt>parent</dt>
13- <dd><a href="{{.ParentURL}}">{{.Parent}}</a></dd>
14-
15- <dt>author</dt>
16- <dd>{{.Commit.Author.Name}}</dd>
10+ <div class="flex justify-between">
11+ <div class="flex items-center gap-xs">
12+ <span>{{.Commit.Author.Name}}</span>
13+ <span>&nbsp;&centerdot;&nbsp;</span>
14+ <span>{{.Commit.Author.When}}</span>
15+ </div>
1716
18- <dt>date</dt>
19- <dd>{{.Commit.Author.When}}</dd>
20- </dl>
17+ <div>
18+ parent <a href="{{.ParentURL}}">{{.Parent}}</a>
19+ </div>
20+ </div>
2121
2222 <pre class="white-space-bs">{{.Commit.Message}}</pre>
2323
......@@ -30,7 +30,7 @@
3030
3131 <div>
3232 {{range .Diff.Files}}
33- <div class="my-sm">
33+ <div class="my">
3434 <span>{{.FileType}}</span>
3535 <a href="#diff-{{.Name}}">{{.Name}}</a>
3636 </div>
+7, -4
......@@ -5,10 +5,15 @@
55 {{end}}
66
77 {{define "content"}}
8- <div class="text-md text-transform-none">
8+ <div class="box sticky flex items-center gap border-visited" style="margin: 0 !important;">
9+ <code>{{.RevData.Name}}</code>
10+
911 {{range .Item.Crumbs}}
10- <a href="{{.URL}}">{{.Text}}</a> {{if .IsLast}}{{else}}/{{end}}
12+ <a href="{{.URL}}">{{.Text}}</a>
13+ <span>/</span>
1114 {{end}}
15+
16+ {{.Item.Name}}
1217 </div>
1318
1419 {{if .Repo.HideTreeLastCommit}}
......@@ -31,7 +36,5 @@
3136 </div>
3237 {{end}}
3338
34- <h2 class="text-lg text-transform-none">{{.Item.Name}}</h2>
35-
3639 {{.Contents}}
3740 {{end }}
+1, -1
......@@ -1,5 +1,5 @@
11 {{define "footer"}}
2-<div>
2+<div class="mb">
33 built with <a href="https://pgit.pico.sh">pgit</a>
44 </div>
55 {{end}}
+37, -9
......@@ -1,14 +1,42 @@
11 {{define "header"}}
22 <div class="flex flex-col">
3- <nav>
4- <h1 class="text-xl p-0">
5- {{.Repo.RepoName}}
6- </h1>
7- <a href="{{.SiteURLs.SummaryURL}}">README</a> |
8- <a href="{{.SiteURLs.RefsURL}}">refs</a> |
9- <span class="font-bold">{{.RevData.Name}}</span> |
10- <a href="{{.RevData.TreeURL}}">code</a> |
11- <a href="{{.RevData.LogURL}}">commits</a>
3+ <nav class="flex gap">
4+ <a class="btn-nav {{if eq .ActivePage `readme`}}btn-active{{end}}" href="{{.SiteURLs.SummaryURL}}">{{.Repo.RepoName}}</a>
5+ <a class="btn-nav flex items-center {{if eq .ActivePage `code`}}btn-active{{end}}" href="{{.RevData.TreeURL}}">
6+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 16 16" style="margin-right: 5px;">
7+ <path fill="currentColor" d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path>
8+ </svg>
9+ code
10+ </a>
11+ <a class="btn-nav flex items-center {{if eq .ActivePage `commits`}}btn-active{{end}}" href="{{.RevData.LogURL}}">
12+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 16 16" style="margin-right: 5px;">
13+ <path fill="currentColor" d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"></path>
14+ </svg>
15+ commits
16+ </a>
17+ <a class="btn-nav flex items-center {{if eq .ActivePage `refs`}}btn-active{{end}}" href="{{.SiteURLs.RefsURL}}">
18+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 16 16" style="margin-right: 5px;">
19+ <path fill="currentColor" d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"></path>
20+ </svg>
21+ refs
22+ </a>
23+ {{if .SiteURLs.IssuesURL}}
24+ <a class="btn-nav flex items-center" href="{{.SiteURLs.IssuesURL}}">
25+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 16 16" style="margin-right: 5px;">
26+ <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
27+ <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path>
28+ </svg>
29+ issues
30+ </a>
31+ {{end}}
32+ {{if .SiteURLs.ContribURL}}
33+ <a class="btn-nav flex items-center" href="{{.SiteURLs.ContribURL}}">
34+ <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 16 16" style="margin-right: 5px;">
35+ <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path>
36+ </svg>
37+ contrib
38+ </a>
39+ {{end}}
1240 </nav>
1341 </div>
1442 {{end}}
+19, -15
......@@ -5,27 +5,31 @@
55
66 {{define "content"}}
77 <div class="group-2">
8- <div><span class="font-bold">({{.NumCommits}})</span> commits</div>
8+ <div class="box sticky flex items-center gap border-visited" style="margin: 0 !important;">
9+ <code>{{.RevData.Name}}</code>
10+ <div><span class="font-bold">{{.NumCommits}}</span> commits</div>
11+ </div>
12+
913 {{range .Logs}}
1014 <div>
11- <div class="flex justify-between items-center">
15+ <div class="flex items-center gap mb text-sm">
1216 <a href="{{.URL}}" class="mono">{{.ShortID}}</a>
1317
14- <div class="mono">
15- {{range .Refs}}
16- {{if .URL}}
17- <a href="{{.URL}}">({{.Refspec}})</a>
18- {{else}}
19- ({{.Refspec}})
20- {{end}}
21- {{end}}
18+ <div class="flex items-center gap-xs">
19+ <span>{{.AuthorStr}}</span>
20+ <span>&nbsp;&centerdot;&nbsp;</span>
21+ <span>{{.WhenStr}}</span>
2222 </div>
23- </div>
2423
25- <div class="flex items-center gap-xs text-sm">
26- <span>{{.AuthorStr}}</span>
27- <span>&nbsp;&centerdot;&nbsp;</span>
28- <span>{{.WhenStr}}</span>
24+ {{range .Refs}}
25+ {{if .URL}}
26+ <code>
27+ <a href="{{.URL}}">{{.Refspec}}</a>
28+ </code>
29+ {{else}}
30+ <code>{{.Refspec}}</code>
31+ {{end}}
32+ {{end}}
2933 </div>
3034
3135 <div>
+11, -9
......@@ -4,15 +4,17 @@
44 {{define "meta"}}{{end}}
55
66 {{define "content"}}
7- <h2 class="text-lg font-bold">refs</h2>
7+ <h2>refs</h2>
88
9- <ul>
10- {{range .Refs}}
11- {{if .URL}}
12- <li><a href="{{.URL}}">{{.Refspec}}</a></li>
13- {{else}}
14- <li>{{.Refspec}}</li>
9+ <div class="box" style="padding: 0 !important;">
10+ {{range .Refs}}
11+ <div class="flex justify-between items-center gap-2 py px tree-row border-b">
12+ {{if .URL}}
13+ <div><a href="{{.URL}}">{{.Refspec}}</a></div>
14+ {{else}}
15+ <div>{{.Refspec}}</div>
16+ {{end}}
17+ </div>
1518 {{end}}
16- {{end}}
17- </ul>
19+ </div>
1820 {{end}}
+6, -5
......@@ -1,13 +1,14 @@
11 {{template "base" .}}
22
3-{{define "title"}}{{.Repo.RepoName}}{{if .Repo.Desc}}- {{.Repo.Desc}}{{end}}{{end}}
3+{{define "title"}}{{.Repo.RepoName}}{{end}}
44 {{define "meta"}}
55 <link rel="stylesheet" href="{{.Repo.RootRelative}}syntax.css" />
66 {{end}}
77
88 {{define "content"}}
9- <div>
10- {{if .SiteURLs.CloneURL}}<pre class="mb-0">git clone {{.SiteURLs.CloneURL}}</pre>{{end}}
11- </div>
12- {{.Readme}}
9+ {{if .SiteURLs.CloneURL}}
10+ <div class="box sticky border-visited mono">git clone {{.SiteURLs.CloneURL}}</div>
11+ {{end}}
12+
13+ {{.Readme}}
1314 {{end}}
+12, -10
......@@ -4,19 +4,21 @@
44 {{define "meta"}}{{end}}
55
66 {{define "content"}}
7- <div>
8- <div class="text-md text-transform-none mb">
9- {{range .Tree.Crumbs}}
10- {{if .IsLast}}
11- <span class="font-bold">{{.Text}}</span>
12- {{else}}
13- <a href="{{.URL}}">{{.Text}}</a> {{if .IsLast}}{{else}}/{{end}}
14- {{end}}
7+ <div class="box sticky flex items-center gap border-visited">
8+ <code>{{.RevData.Name}}</code>
9+
10+ {{range .Tree.Crumbs}}
11+ {{if .IsLast}}
12+ <span class="font-bold">{{.Text}}</span>
13+ {{else}}
14+ <a href="{{.URL}}">{{.Text}}</a> {{if .IsLast}}{{else}}<span>/</span>{{end}}
1515 {{end}}
16- </div>
16+ {{end}}
17+ </div>
1718
19+ <div class="box" style="padding: 0 !important;">
1820 {{range .Tree.Items}}
19- <div class="flex justify-between items-center gap-2 p tree-row border-b">
21+ <div class="flex justify-between items-center gap-2 py px tree-row border-b">
2022 <div class="flex-1 tree-path flex items-center gap">
2123 {{if .IsDir}}
2224 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 512 512">
+40, -30
......@@ -40,8 +40,6 @@ type Config struct {
4040 // optional params
4141 // generate logs anad tree based on the git revisions provided
4242 Revs []string
43- // description of repo used in the header of site
44- Desc string
4543 // maximum number of commits that we will process in descending order
4644 MaxCommits int
4745 // name of the readme file
......@@ -53,8 +51,11 @@ type Config struct {
5351 HideTreeLastCommit bool
5452
5553 // user-defined urls
56- HomeURL template.URL
5754 CloneURL template.URL
55+ // repo bug tracking url
56+ IssuesURL template.URL
57+ // repo code contribution url (e.g. pull requests, patches)
58+ ContribURL template.URL
5859
5960 // https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references#root_relative
6061 RootRelative string
......@@ -164,16 +165,18 @@ type BranchOutput struct {
164165 }
165166
166167 type SiteURLs struct {
167- HomeURL template.URL
168+ IssuesURL template.URL
169+ ContribURL template.URL
168170 CloneURL template.URL
169171 SummaryURL template.URL
170172 RefsURL template.URL
171173 }
172174
173175 type PageData struct {
174- Repo *Config
175- SiteURLs *SiteURLs
176- RevData *RevData
176+ Repo *Config
177+ SiteURLs *SiteURLs
178+ RevData *RevData
179+ ActivePage string
177180 }
178181
179182 type SummaryPageData struct {
......@@ -454,58 +457,63 @@ func (c *Config) copyStatic(dir string) error {
454457 return nil
455458 }
456459
457-func (c *Config) writeRootSummary(data *PageData, readme template.HTML) {
460+func (c *Config) writeRootSummary(data PageData, readme template.HTML) {
461+ data.ActivePage = "readme"
458462 c.Logger.Info("writing root html", "repoPath", c.RepoPath)
459463 c.writeHtml(&WriteData{
460464 Filename: "index.html",
461465 Template: "html/summary.page.tmpl",
462466 Data: &SummaryPageData{
463- PageData: data,
467+ PageData: &data,
464468 Readme: readme,
465469 },
466470 })
467471 }
468472
469-func (c *Config) writeTree(data *PageData, tree *TreeRoot) {
473+func (c *Config) writeTree(data PageData, tree *TreeRoot) {
474+ data.ActivePage = "code"
470475 c.Logger.Info("writing tree", "treePath", tree.Path)
471476 c.writeHtml(&WriteData{
472477 Filename: "index.html",
473478 Subdir: tree.Path,
474479 Template: "html/tree.page.tmpl",
475480 Data: &TreePageData{
476- PageData: data,
481+ PageData: &data,
477482 Tree: tree,
478483 },
479484 })
480485 }
481486
482-func (c *Config) writeLog(data *PageData, logs []*CommitData) {
487+func (c *Config) writeLog(data PageData, logs []*CommitData) {
488+ data.ActivePage = "commits"
483489 c.Logger.Info("writing log file", "revision", data.RevData.Name())
484490 c.writeHtml(&WriteData{
485491 Filename: "index.html",
486492 Subdir: getLogBaseDir(data.RevData),
487493 Template: "html/log.page.tmpl",
488494 Data: &LogPageData{
489- PageData: data,
495+ PageData: &data,
490496 NumCommits: len(logs),
491497 Logs: logs,
492498 },
493499 })
494500 }
495501
496-func (c *Config) writeRefs(data *PageData, refs []*RefInfo) {
502+func (c *Config) writeRefs(data PageData, refs []*RefInfo) {
503+ data.ActivePage = "refs"
497504 c.Logger.Info("writing refs", "repoPath", c.RepoPath)
498505 c.writeHtml(&WriteData{
499506 Filename: "refs.html",
500507 Template: "html/refs.page.tmpl",
501508 Data: &RefPageData{
502- PageData: data,
509+ PageData: &data,
503510 Refs: refs,
504511 },
505512 })
506513 }
507514
508-func (c *Config) writeHTMLTreeFile(pageData *PageData, treeItem *TreeItem) string {
515+func (c *Config) writeHTMLTreeFile(pageData PageData, treeItem *TreeItem) string {
516+ pageData.ActivePage = "code"
509517 d := filepath.Dir(treeItem.Path)
510518 readme := ""
511519 b, err := treeItem.Entry.Blob().Bytes()
......@@ -531,7 +539,7 @@ func (c *Config) writeHTMLTreeFile(pageData *PageData, treeItem *TreeItem) strin
531539 Filename: fmt.Sprintf("%s.html", treeItem.Entry.Name()),
532540 Template: "html/file.page.tmpl",
533541 Data: &FilePageData{
534- PageData: pageData,
542+ PageData: &pageData,
535543 Contents: template.HTML(contents),
536544 Item: treeItem,
537545 },
......@@ -540,7 +548,8 @@ func (c *Config) writeHTMLTreeFile(pageData *PageData, treeItem *TreeItem) strin
540548 return readme
541549 }
542550
543-func (c *Config) writeLogDiff(repo *git.Repository, pageData *PageData, commit *CommitData) {
551+func (c *Config) writeLogDiff(repo *git.Repository, pageData PageData, commit *CommitData) {
552+ pageData.ActivePage = "commits"
544553 commitID := commit.ID.String()
545554
546555 c.Mutex.RLock()
......@@ -601,7 +610,7 @@ func (c *Config) writeLogDiff(repo *git.Repository, pageData *PageData, commit *
601610 rnd.Files = fls
602611
603612 commitData := &CommitPageData{
604- PageData: pageData,
613+ PageData: &pageData,
605614 Commit: commit,
606615 CommitID: getShortID(commitID),
607616 Diff: rnd,
......@@ -680,7 +689,8 @@ func (c *Config) getCommitURL(commitID string) template.URL {
680689
681690 func (c *Config) getURLs() *SiteURLs {
682691 return &SiteURLs{
683- HomeURL: c.HomeURL,
692+ IssuesURL: c.IssuesURL,
693+ ContribURL: c.ContribURL,
684694 CloneURL: c.CloneURL,
685695 RefsURL: c.getRefsURL(),
686696 SummaryURL: c.getSummaryURL(),
......@@ -808,8 +818,8 @@ func (c *Config) writeRepo() *BranchOutput {
808818 Repo: c,
809819 SiteURLs: c.getURLs(),
810820 }
811- c.writeRefs(data, refInfoList)
812- c.writeRootSummary(data, template.HTML(mainOutput.Readme))
821+ c.writeRefs(*data, refInfoList)
822+ c.writeRootSummary(*data, template.HTML(mainOutput.Readme))
813823 return mainOutput
814824 }
815825
......@@ -1066,13 +1076,13 @@ func (c *Config) writeRevision(repo *git.Repository, pageData *PageData, refs []
10661076 })
10671077 }
10681078
1069- c.writeLog(pageData, logs)
1079+ c.writeLog(*pageData, logs)
10701080
10711081 for _, cm := range logs {
10721082 wg.Add(1)
10731083 go func(commit *CommitData) {
10741084 defer wg.Done()
1075- c.writeLogDiff(repo, pageData, commit)
1085+ c.writeLogDiff(repo, *pageData, commit)
10761086 }(cm)
10771087 }
10781088 }()
......@@ -1107,7 +1117,7 @@ func (c *Config) writeRevision(repo *git.Repository, pageData *PageData, refs []
11071117 return
11081118 }
11091119
1110- readmeStr := c.writeHTMLTreeFile(pageData, entry)
1120+ readmeStr := c.writeHTMLTreeFile(*pageData, entry)
11111121 if readmeStr != "" {
11121122 readme = readmeStr
11131123 }
......@@ -1122,7 +1132,7 @@ func (c *Config) writeRevision(repo *git.Repository, pageData *PageData, refs []
11221132 wg.Add(1)
11231133 go func(tree *TreeRoot) {
11241134 defer wg.Done()
1125- c.writeTree(pageData, tree)
1135+ c.writeTree(*pageData, tree)
11261136 }(t)
11271137 }
11281138 }()
......@@ -1170,8 +1180,8 @@ func main() {
11701180 var themeFlag = flag.String("theme", "dracula", "theme to use for site")
11711181 var labelFlag = flag.String("label", "", "pretty name for the subdir where we create the repo, default is last folder in --repo")
11721182 var cloneFlag = flag.String("clone-url", "", "git clone URL for upstream")
1173- var homeFlag = flag.String("home-url", "", "URL for breadcumbs to go to root page, hidden if empty")
1174- var descFlag = flag.String("desc", "", "description for repo")
1183+ var issuesFlag = flag.String("issues-url", "", "where the repo tracks bug reports")
1184+ var contribFlag = flag.String("contrib-url", "", "where the repo tracks code contributions")
11751185 var rootRelativeFlag = flag.String("root-relative", "/", "html root relative")
11761186 var maxCommitsFlag = flag.Int("max-commits", 0, "maximum number of commits to generate")
11771187 var hideTreeLastCommitFlag = flag.Bool("hide-tree-last-commit", false, "dont calculate last commit for each file in the tree")
......@@ -1212,8 +1222,8 @@ func main() {
12121222 Theme: theme,
12131223 Logger: logger,
12141224 CloneURL: template.URL(*cloneFlag),
1215- HomeURL: template.URL(*homeFlag),
1216- Desc: *descFlag,
1225+ IssuesURL: template.URL(*issuesFlag),
1226+ ContribURL: template.URL(*contribFlag),
12171227 MaxCommits: *maxCommitsFlag,
12181228 HideTreeLastCommit: *hideTreeLastCommitFlag,
12191229 RootRelative: *rootRelativeFlag,
+257, -5
......@@ -1,10 +1,232 @@
1+*,
2+::before,
3+::after {
4+ box-sizing: border-box;
5+}
6+
7+::-moz-focus-inner {
8+ border-style: none;
9+ padding: 0;
10+}
11+:-moz-focusring {
12+ outline: 1px dotted ButtonText;
13+}
14+:-moz-ui-invalid {
15+ box-shadow: none;
16+}
17+
18+:root {
19+ --line-height: 1.3rem;
20+ --grid-height: 0.65rem;
21+}
22+
23+html {
24+ background-color: var(--bg-color);
25+ color: var(--text-color);
26+ font-size: 16px;
27+ line-height: var(--line-height);
28+ font-family:
29+ -apple-system,
30+ BlinkMacSystemFont,
31+ "Segoe UI",
32+ Roboto,
33+ Oxygen,
34+ Ubuntu,
35+ Cantarell,
36+ "Fira Sans",
37+ "Droid Sans",
38+ "Helvetica Neue",
39+ Arial,
40+ sans-serif,
41+ "Apple Color Emoji",
42+ "Segoe UI Emoji",
43+ "Segoe UI Symbol";
44+ -webkit-text-size-adjust: 100%;
45+ -moz-tab-size: 4;
46+ -o-tab-size: 4;
47+ tab-size: 4;
48+}
49+
50+body {
51+ margin: 0 auto;
52+ padding: 0 1rem;
53+}
54+
55+img {
56+ max-width: 100%;
57+ height: auto;
58+}
59+
60+b,
61+strong {
62+ font-weight: bold;
63+}
64+
65+code,
66+kbd,
67+samp,
68+pre {
69+ font-family: monospace;
70+}
71+
72+code,
73+kbd,
74+samp {
75+ border: 2px solid var(--code);
76+}
77+
78+pre > code {
79+ background-color: inherit;
80+ padding: 0;
81+ border: none;
82+ border-radius: 0;
83+}
84+
85+code {
86+ font-size: 90%;
87+ border-radius: 0.3rem;
88+ padding: 0.025rem 0.3rem;
89+ border: 1px solid var(--border);
90+}
91+
192 pre {
293 border: 1px solid var(--border);
394 padding: var(--grid-height);
95+ border-radius: 1px;
96+ overflow-x: auto;
497 }
598
6-body {
7- max-width: 900px;
99+h1,
100+h2,
101+h3,
102+h4 {
103+ font-style: normal;
104+ font-size: 1rem;
105+ font-weight: bold;
106+ line-height: var(--line-height);
107+ margin: 0 0 var(--grid-height) 0;
108+ padding: 0;
109+ border: 0;
110+}
111+
112+path {
113+ fill: var(--text-color);
114+}
115+
116+a {
117+ text-decoration: none;
118+ color: var(--text-color);
119+}
120+
121+a:hover,
122+a:visited:hover {
123+ color: var(--visited);
124+ text-decoration: underline;
125+}
126+
127+a:visited {
128+ color: var(--text-color);
129+}
130+
131+header {
132+ margin: 1rem auto;
133+}
134+
135+p {
136+ margin-top: var(--line-height);
137+ margin-bottom: var(--line-height);
138+}
139+
140+footer {
141+ text-align: center;
142+}
143+
144+.font-bold {
145+ font-weight: bold;
146+}
147+
148+.mono {
149+ font-family: monospace;
150+}
151+
152+.text-sm {
153+ font-size: 0.8rem;
154+}
155+
156+.flex {
157+ display: flex;
158+}
159+
160+.flex-col {
161+ flex-direction: column;
162+}
163+
164+.items-center {
165+ align-items: center;
166+}
167+
168+.m-0 {
169+ margin: 0;
170+}
171+
172+.mb {
173+ margin-bottom: var(--grid-height);
174+}
175+
176+.mb-0 {
177+ margin-bottom: 0;
178+}
179+
180+.my {
181+ margin-top: var(--grid-height);
182+ margin-bottom: var(--grid-height);
183+}
184+
185+.px {
186+ padding-left: 0.5rem;
187+ padding-right: 0.5rem;
188+}
189+
190+.py {
191+ padding-top: var(--grid-height);
192+ padding-bottom: var(--grid-height);
193+}
194+
195+.justify-between {
196+ justify-content: space-between;
197+}
198+
199+.justify-center {
200+ justify-content: center;
201+}
202+
203+.gap {
204+ gap: var(--grid-height);
205+}
206+
207+.gap-2 {
208+ gap: var(--line-height);
209+}
210+
211+.group {
212+ display: flex;
213+ flex-direction: column;
214+ gap: var(--grid-height);
215+}
216+
217+.group-2 {
218+ display: flex;
219+ flex-direction: column;
220+ gap: var(--line-height);
221+}
222+
223+.flex-1 {
224+ flex: 1;
225+}
226+
227+.box {
228+ border: 2px solid var(--grey-light);
229+ padding: var(--grid-height);
8230 }
9231
10232 .border-b {
......@@ -21,6 +243,10 @@ body {
21243 border: 1px solid var(--border);
22244 }
23245
246+.border-visited {
247+ border-color: var(--visited);
248+}
249+
24250 .tree-size {
25251 width: 60px;
26252 text-align: right;
......@@ -30,9 +256,15 @@ body {
30256 text-wrap: wrap;
31257 }
32258
259+.sticky {
260+ position: sticky;
261+ top: 0;
262+ left: 0;
263+ background-color: var(--bg-color);
264+}
265+
33266 .diff-file {
34267 align-items: center;
35- height: 62px;
36268 position: sticky;
37269 top: 0;
38270 left: 0;
......@@ -43,11 +275,31 @@ body {
43275 white-space: break-spaces;
44276 }
45277
46-.mb-0 {
47- margin-bottom: 0;
278+.btn-nav {
279+ border-radius: 4px;
280+ padding: 6px 10px;
281+ border: 1px solid var(--border);
282+}
283+
284+.btn-nav:hover, .btn-active {
285+ border-color: var(--visited);
286+ text-decoration: none;
287+ color: var(--text-color);
48288 }
49289
50290 @media only screen and (max-width: 900px) {
291+ body {
292+ padding: 0 1rem;
293+ }
294+
295+ header {
296+ margin: 0;
297+ }
298+
299+ .flex-collapse {
300+ flex-direction: column;
301+ }
302+
51303 .tree-commit {
52304 display: none;
53305 }
+0, -688
......@@ -1,688 +0,0 @@
1-*,
2-::before,
3-::after {
4- box-sizing: border-box;
5-}
6-
7-::-moz-focus-inner {
8- border-style: none;
9- padding: 0;
10-}
11-:-moz-focusring {
12- outline: 1px dotted ButtonText;
13-}
14-:-moz-ui-invalid {
15- box-shadow: none;
16-}
17-
18-:root {
19- --line-height: 1.3rem;
20- --grid-height: 0.65rem;
21-}
22-
23-html {
24- background-color: var(--bg-color);
25- color: var(--text-color);
26- font-size: 16px;
27- line-height: var(--line-height);
28- font-family:
29- -apple-system,
30- BlinkMacSystemFont,
31- "Segoe UI",
32- Roboto,
33- Oxygen,
34- Ubuntu,
35- Cantarell,
36- "Fira Sans",
37- "Droid Sans",
38- "Helvetica Neue",
39- Arial,
40- sans-serif,
41- "Apple Color Emoji",
42- "Segoe UI Emoji",
43- "Segoe UI Symbol";
44- -webkit-text-size-adjust: 100%;
45- -moz-tab-size: 4;
46- -o-tab-size: 4;
47- tab-size: 4;
48-}
49-
50-body {
51- margin: 0 auto;
52-}
53-
54-img {
55- max-width: 100%;
56- height: auto;
57-}
58-
59-b,
60-strong {
61- font-weight: bold;
62-}
63-
64-code,
65-kbd,
66-samp,
67-pre {
68- font-family: monospace;
69-}
70-
71-code,
72-kbd,
73-samp {
74- border: 2px solid var(--code);
75-}
76-
77-pre > code {
78- background-color: inherit;
79- padding: 0;
80- border: none;
81- border-radius: 0;
82-}
83-
84-code {
85- font-size: 90%;
86- border-radius: 0.3rem;
87- padding: 0.025rem 0.3rem;
88-}
89-
90-pre {
91- font-size: 0.8rem;
92- border-radius: 1px;
93- padding: var(--line-height);
94- overflow-x: auto;
95- background-color: var(--pre);
96-}
97-
98-small {
99- font-size: 0.8rem;
100-}
101-
102-details {
103- border: 2px solid var(--grey-light);
104- padding: calc(var(--grid-height) - 2px) 1ch;
105- margin-bottom: var(--grid-height);
106-}
107-
108-details[open] summary {
109- margin-bottom: var(--grid-height);
110-}
111-
112-summary {
113- display: list-item;
114- cursor: pointer;
115-}
116-
117-h1,
118-h2,
119-h3,
120-h4 {
121- margin: 0;
122- padding: 0;
123- border: 0;
124- font-style: normal;
125- font-weight: inherit;
126- font-size: inherit;
127-}
128-
129-path {
130- fill: var(--text-color);
131- stroke: var(--text-color);
132-}
133-
134-hr {
135- color: inherit;
136- border: 0;
137- height: 2px;
138- background: var(--grey);
139- margin: calc(var(--grid-height) - 2px) auto;
140-}
141-
142-a {
143- text-decoration: none;
144- color: var(--link-color);
145-}
146-
147-a:hover,
148-a:visited:hover {
149- text-decoration: underline;
150-}
151-
152-a:visited {
153- color: var(--visited);
154-}
155-
156-section {
157- margin-bottom: 1.4rem;
158-}
159-
160-section:last-child {
161- margin-bottom: 0;
162-}
163-
164-header {
165- margin: 1rem auto;
166-}
167-
168-p {
169- margin-top: var(--line-height);
170- margin-bottom: var(--line-height);
171-}
172-
173-article {
174- overflow-wrap: break-word;
175-}
176-
177-blockquote {
178- border-left: 5px solid var(--blockquote);
179- background-color: var(--blockquote-bg);
180- padding: var(--grid-height);
181- margin: var(--line-height) 0;
182-}
183-
184-blockquote > p {
185- margin: 0;
186-}
187-
188-blockquote code {
189- border: 1px solid var(--blockquote);
190-}
191-
192-ul {
193- padding: 0 0 0 var(--line-height);
194- list-style-position: inside;
195- list-style-type: square;
196- margin: var(--line-height) 0;
197-}
198-
199-ul[style*="list-style-type: none;"] {
200- padding: 0;
201-}
202-
203-ol {
204- padding: 0 0 0 var(--line-height);
205- list-style-type: decimal;
206- margin: var(--line-height) 0;
207-}
208-
209-ol[style*="list-style-type: none;"] {
210- padding: 0;
211-}
212-
213-ol ul, ol ol, ul ol, ul ul {
214- padding: 0 0 0 3ch;
215- margin: 0;
216-}
217-
218-li {
219- margin: 0;
220- padding: 0;
221-}
222-
223-li::marker {
224- line-height: 0;
225-}
226-
227-footer {
228- text-align: center;
229- margin-bottom: calc(var(--line-height) * 3);
230-}
231-
232-dt {
233- font-weight: bold;
234-}
235-
236-dd {
237- margin-left: 0;
238-}
239-
240-dd:not(:last-child) {
241- margin-bottom: 0.5rem;
242-}
243-
244-figure {
245- margin: 0;
246-}
247-
248-sup {
249- line-height: 0;
250-}
251-
252-#toc {
253- margin-top: var(--line-height);
254-}
255-
256-.container {
257- max-width: 50em;
258- width: 100%;
259-}
260-
261-.container-sm {
262- max-width: 40em;
263- width: 100%;
264-}
265-
266-.mono {
267- font-family: monospace;
268-}
269-
270-.link-alt-hover,
271-.link-alt-hover:visited,
272-.link-alt-hover:visited:hover,
273-.link-alt-hover:hover {
274- color: var(--hover);
275- text-decoration: none;
276-}
277-
278-.link-alt-hover:visited:hover,
279-.link-alt-hover:hover {
280- text-decoration: underline;
281-}
282-
283-.link-alt,
284-.link-alt:visited,
285-.link-alt:visited:hover,
286-.link-alt:hover {
287- color: var(--white);
288- text-decoration: none;
289-}
290-
291-.link-alt:visited:hover,
292-.link-alt:hover {
293- text-decoration: underline;
294-}
295-
296-.text-2xl code, .text-xl code, .text-lg code, .text-md code {
297- text-transform: none;
298-}
299-
300-.text-2xl {
301- font-size: var(--line-height);
302- font-weight: bold;
303- line-height: var(--line-height);
304- margin-bottom: var(--grid-height);
305- text-transform: uppercase;
306-}
307-
308-.text-xl, .text-lg, .text-md {
309- font-size: 1rem;
310- font-weight: bold;
311- line-height: var(--line-height);
312- margin-bottom: var(--grid-height);
313- text-transform: uppercase;
314-}
315-
316-.text-sm {
317- font-size: 0.8rem;
318-}
319-
320-.w-full {
321- width: 100%;
322-}
323-
324-.border {
325- border: 2px solid var(--grey-light);
326-}
327-
328-.text-left {
329- text-align: left;
330-}
331-
332-.text-center {
333- text-align: center;
334-}
335-
336-.text-underline {
337- text-decoration: underline;
338- text-decoration-thickness: 2px;
339-}
340-
341-.text-hdr {
342- color: var(--hover);
343-}
344-
345-.font-bold {
346- font-weight: bold;
347-}
348-
349-.font-italic {
350- font-style: italic;
351-}
352-
353-.inline {
354- display: inline;
355-}
356-
357-.inline-block {
358- display: inline-block;
359-}
360-
361-.max-w-half {
362- max-width: 50%;
363-}
364-
365-.flex {
366- display: flex;
367-}
368-
369-.flex-col {
370- flex-direction: column;
371-}
372-
373-.flex-wrap {
374- flex-wrap: wrap;
375-}
376-
377-.items-center {
378- align-items: center;
379-}
380-
381-.m-0 {
382- margin: 0;
383-}
384-
385-.mt-0 {
386- margin-top: 0;
387-}
388-
389-.mt {
390- margin-top: var(--grid-height);
391-}
392-
393-.mt-2 {
394- margin-top: var(--line-height);
395-}
396-
397-.mt-4 {
398- margin-top: calc(var(--line-height) * 2);
399-}
400-
401-.mb {
402- margin-bottom: var(--grid-height);
403-}
404-
405-.mb-2 {
406- margin-bottom: var(--line-height);
407-}
408-
409-.mb-4 {
410- margin-bottom: calc(var(--line-height) * 2);
411-}
412-
413-.mr {
414- margin-right: 0.5rem;
415-}
416-
417-.ml {
418- margin-left: 0.5rem;
419-}
420-
421-.my {
422- margin-top: var(--grid-height);
423- margin-bottom: var(--grid-height);
424-}
425-
426-.my-2 {
427- margin-top: var(--line-height);
428- margin-bottom: var(--line-height);
429-}
430-
431-.my-4 {
432- margin-top: calc(var(--line-height) * 2);
433- margin-bottom: calc(var(--line-height) * 2);
434-}
435-
436-.p-0 {
437- padding: 0;
438-}
439-
440-.px {
441- padding-left: 0.5rem;
442- padding-right: 0.5rem;
443-}
444-
445-.px-4 {
446- padding-left: 2rem;
447- padding-right: 2rem;
448-}
449-
450-.py {
451- padding-top: var(--grid-height);
452- padding-bottom: var(--grid-height);
453-}
454-
455-.py-4 {
456- padding-top: calc(var(--line-height) * 2);
457- padding-bottom: calc(var(--line-height) * 2);
458-}
459-
460-.justify-between {
461- justify-content: space-between;
462-}
463-
464-.justify-center {
465- justify-content: center;
466-}
467-
468-.gap {
469- gap: var(--grid-height);
470-}
471-
472-.gap-2 {
473- gap: var(--line-height);
474-}
475-
476-.group {
477- display: flex;
478- flex-direction: column;
479- gap: var(--grid-height);
480-}
481-
482-.group-2 {
483- display: flex;
484- flex-direction: column;
485- gap: var(--line-height);
486-}
487-
488-.group-h {
489- display: flex;
490- gap: var(--grid-height);
491- align-items: center;
492-}
493-
494-.flex-1 {
495- flex: 1;
496-}
497-
498-.items-end {
499- align-items: end;
500-}
501-
502-.items-start {
503- align-items: start;
504-}
505-
506-.justify-end {
507- justify-content: end;
508-}
509-
510-.font-grey-light {
511- color: var(--grey-light);
512-}
513-
514-.hidden {
515- display: none;
516-}
517-
518-.align-right {
519- text-align: right;
520-}
521-
522-.text-transform-none {
523- text-transform: none;
524-}
525-
526-/* ==== MARKDOWN ==== */
527-
528-.md h1,
529-.md h2,
530-.md h3,
531-.md h4 {
532- padding: 0;
533- margin: 0;
534- /* margin: 1.5rem 0 0.9rem 0; */
535- font-weight: bold;
536-}
537-
538-.md h1 a,
539-.md h2 a,
540-.md h3 a,
541-.md h4 a {
542- color: var(--grey-light);
543- text-decoration: none;
544-}
545-
546-h1 code, h2 code, h3 code, h4 code {
547- text-transform: none;
548-}
549-
550-.md h1 {
551- font-size: 1rem;
552- line-height: var(--line-height);
553- margin-top: calc(var(--line-height) * 2);
554- margin-bottom: var(--grid-height);
555- text-transform: uppercase;
556-}
557-
558-.md h2, .md h3, .md h4 {
559- font-size: 1rem;
560- line-height: var(--line-height);
561- margin-top: calc(var(--line-height) * 2);
562- margin-bottom: var(--line-height);
563- text-transform: uppercase;
564- color: var(--white-dark);
565-}
566-
567-/* ==== HELPERS ==== */
568-
569-.logo-header {
570- line-height: 1;
571- display: inline-block;
572- background-color: #ff79c6;
573- background-image: linear-gradient(to right, #ff5555, #ff79c6, #f8f859);
574- color: transparent;
575- background-clip: text;
576- border: 3px solid #ff79c6;
577- padding: 8px 10px 10px 10px;
578- border-radius: 10px;
579- background-size: 100%;
580- margin: 0;
581- -webkit-background-clip: text;
582- -moz-background-clip: text;
583- -webkit-text-fill-color: transparent;
584- -moz-text-fill-color: transparent;
585-}
586-
587-.btn {
588- border: 2px solid var(--link-color);
589- color: var(--link-color);
590- padding: 0.4rem 1rem;
591- font-weight: bold;
592- display: inline-block;
593-}
594-
595-.btn-link,
596-.btn-link:visited {
597- border: 2px solid var(--link-color);
598- color: var(--link-color);
599- padding: var(--grid-height);
600- text-decoration: none;
601- font-weight: bold;
602- display: inline-block;
603-}
604-
605-.box {
606- border: 2px solid var(--grey-light);
607- padding: var(--grid-height);
608-}
609-
610-.box-sm {
611- border: 2px solid var(--grey-light);
612- padding: var(--grid-height);
613-}
614-
615-.box-alert {
616- border: 2px solid var(--hover);
617- padding: var(--line-height);
618-}
619-
620-.box-sm-alert {
621- border: 2px solid var(--hover);
622- padding: var(--grid-height);
623-}
624-
625-.list-none {
626- list-style-type: none;
627-}
628-
629-.list-square {
630- list-style-type: square;
631-}
632-
633-.list-disc {
634- list-style-type: disc;
635-}
636-
637-.list-decimal {
638- list-style-type: decimal;
639-}
640-
641-.pill {
642- border: 1px solid var(--link-color);
643- color: var(--link-color);
644-}
645-
646-.pill-alert {
647- border: 1px solid var(--hover);
648- color: var(--hover);
649-}
650-
651-.pill-info {
652- border: 1px solid var(--visited);
653- color: var(--visited);
654-}
655-
656-@media only screen and (max-width: 40em) {
657- body {
658- padding: 0 1rem;
659- }
660-
661- header {
662- margin: 0;
663- }
664-
665- .flex-collapse {
666- flex-direction: column;
667- }
668-}
669-
670-#debug {
671- position: relative;
672-}
673-
674-#debug .debug-grid {
675- width: 100%;
676- height: 100%;
677- position: absolute;
678- top: 0;
679- left: 0;
680- right: 0;
681- bottom: 0;
682- z-index: -1;
683- background-image:
684- repeating-linear-gradient(var(--code) 0 1px, transparent 1px 100%),
685- repeating-linear-gradient(90deg, var(--code) 0 1px, transparent 1px 100%);
686- background-size: 1ch var(--grid-height);
687- margin: 0;
688-}