Commit `069bd1e107`

069bd1e10730364492cbb50ac43b86fcc3a35c40

parent: 479e6687f8

Verified · cmc

cmc <hello@cleberg.net> · 2026-08-24 18:05 UTC

web: align layout grid, card-based listings

One shared .container aligns header, main, and footer to the same
64rem column, so the wordmark and content share a left edge on wide
screens. Index and owner repo lists become a responsive card grid
(auto-fill 19rem columns, meta pinned to card bottom, single column
under 40rem). Owner pages get a bordered profile header and a
repository count. Tree/refs tables, log rows, and issue lists share
the bordered-card treatment with row hover; discussion threads cap at
a 48rem reading measure.

Layout: unified · split

internal/web/static/style.css +109 −25

   font-size: var(--fs-1);
 }
-/* layout */
+/* layout: one shared container aligns header, content, and footer */
+.container {
+  max-width: 64rem;
+  margin: 0 auto;
+  padding: 0 var(--sp-5);
+}
 header {
   border-bottom: 1px solid var(--faint);
-  padding: var(--sp-3) var(--sp-5);
+  padding: var(--sp-3) 0;
 }
 a.site {
   font-weight: 650;
 }
 a.site:hover { text-decoration: none; color: var(--accent); }
 a.site svg.mark { display: block; }
-main {
+main.container {
-  max-width: 64rem;
+  width: 100%;
-  margin: 0 auto;
+  padding-top: var(--sp-3);
-  padding: var(--sp-3) var(--sp-5) var(--sp-6);
+  padding-bottom: var(--sp-6);
 }
 /* tables */
 }
 .pathbar .crumbs strong { color: var(--fg); }
-/* file table */
+/* file and refs tables: bordered cards, rows inside */
+table.tree, table.refs {
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  margin-bottom: var(--sp-4);
+}
+table.tree td, table.refs td {
+  padding: var(--sp-2) var(--sp-4);
+  border-bottom: 1px solid var(--faint);
+}
+table.tree tr:last-child td, table.refs tr:last-child td { border-bottom: none; }
+table.tree tr:hover td, table.refs tr:hover td { background: var(--surface); }
 table.tree td.name { width: 100%; }
 table.tree td.name a { color: var(--fg); }
 table.tree td.name a:hover { color: var(--accent); }
 }
 /* log */
-ul.loglist { list-style: none; margin: var(--sp-3) 0; padding: 0; }
+ul.loglist {
+  list-style: none;
+  margin: var(--sp-3) 0;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+}
 ul.loglist li {
   display: flex;
   align-items: baseline;
   gap: var(--sp-3);
-  padding: var(--sp-2) 0;
+  padding: var(--sp-2) var(--sp-4);
   border-bottom: 1px solid var(--faint);
 }
+ul.loglist li:last-child { border-bottom: none; }
+ul.loglist li:hover { background: var(--surface); }
 ul.loglist .commitmain { flex: 1; min-width: 0; }
 ul.loglist p { margin: 0; }
 ul.loglist .subject a { color: var(--fg); font-weight: 550; }
 svg.icon { vertical-align: -0.125em; }
 .lede { font-size: var(--fs-3); margin: var(--sp-2) 0; }
-/* repo listings (index, owner pages) */
+/* repo listings (index, owner pages): responsive card grid */
-ul.repolist { list-style: none; margin: var(--sp-2) 0; padding: 0; }
+.repogrid {
-ul.repolist li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--faint); }
+  display: grid;
-ul.repolist li.empty { color: var(--muted); }
+  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
-ul.repolist p { margin: 0; }
+  gap: var(--sp-3);
-ul.repolist .reponame { font-size: var(--fs-3); font-weight: 550; }
+  margin: var(--sp-3) 0 var(--sp-5);
-ul.repolist .desc { margin-top: 0.1rem; }
+}
-ul.repolist .meta { margin-top: 0.1rem; }
+.repogrid .empty { color: var(--muted); grid-column: 1 / -1; }
+.repocard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-1);
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  padding: var(--sp-3) var(--sp-4);
+  min-width: 0;
+}
+.repocard p { margin: 0; }
+.repocard .reponame {
+  font-weight: 550;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.repocard .desc {
+  font-size: var(--fs-2);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.repocard .meta { margin-top: auto; padding-top: var(--sp-1); }
+.repocard .reponame .sep { color: var(--muted); margin: 0 0.1em; }
+/* owner profile header */
+.profilehead {
+  border-bottom: 1px solid var(--faint);
+  padding-bottom: var(--sp-4);
+  margin-bottom: var(--sp-4);
+}
+.profilehead h1 { margin: var(--sp-4) 0 var(--sp-1); }
+.profilehead .lede { margin: 0 0 var(--sp-1); }
+.profilehead .meta { margin: var(--sp-1) 0 0; }
+h2 .count { color: var(--muted); font-weight: 400; font-size: var(--fs-2); }
+/* heading row with actions on the right */
+.headrow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sp-4);
+  flex-wrap: wrap;
+}
+.headrow .spacer { flex: 1; }
 /* member and org chips on owner pages */
 a.memberchip {
 nav.filters a:hover { color: var(--fg); background: var(--surface); text-decoration: none; }
 nav.filters a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
-ul.issuelist { list-style: none; margin: var(--sp-2) 0; padding: 0; }
+ul.issuelist {
+  list-style: none;
+  margin: var(--sp-2) 0;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: var(--r-lg);
+  overflow: hidden;
+}
 ul.issuelist li {
   display: flex;
   align-items: baseline;
   gap: var(--sp-3);
-  padding: var(--sp-3) 0;
+  padding: var(--sp-3) var(--sp-4);
   border-bottom: 1px solid var(--faint);
 }
+ul.issuelist li:last-child { border-bottom: none; }
+ul.issuelist li:hover { background: var(--surface); }
 ul.issuelist li.empty { display: block; color: var(--muted); }
 ul.issuelist .issuemain { flex: 1; min-width: 0; }
 ul.issuelist p { margin: 0; }
 .issuemeta { color: var(--muted); font-size: var(--fs-2); margin-top: 0; }
 .review { font-size: var(--fs-2); }
-/* comment cards */
+/* comment cards; discussion stays at a readable measure */
+article.comment, form.commentform {
+  max-width: 48rem;
+}
 article.comment {
   border: 1px solid var(--faint);
   border-radius: var(--r-lg);
 /* footer */
 footer {
-  max-width: 64rem;
-  margin: 0 auto;
-  padding: var(--sp-4) var(--sp-5);
   border-top: 1px solid var(--faint);
+  padding: var(--sp-4) 0;
   color: var(--muted);
   font-size: var(--fs-1);
 }
 /* mobile */
 @media (max-width: 40rem) {
-  header { padding: var(--sp-3) var(--sp-4); }
+  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
-  main { padding: var(--sp-2) var(--sp-4) var(--sp-6); }
+  main.container { padding-top: var(--sp-2); }
+  .repogrid { grid-template-columns: 1fr; }
   .thread { margin-left: var(--sp-3); }
   table.tree td.mode { display: none; }
   .readme, .code { padding: var(--sp-3); }

internal/web/templates/index.html +14 −11

	@@ -1,23 +1,26 @@
1	{{define "title"}}{{.Site}}{{end}}	1	{{define "title"}}{{.Site}}{{end}}
2	{{define "content"}}	2	{{define "content"}}
		3	<div class="headrow">
		4	<h1>repositories</h1>
		5	<span class="spacer"></span>
3	{{if .Viewer}}<p class="toolbar">logged in as {{.Viewer}} · <a href="/new">new repository</a> ·	6	{{if .Viewer}}<p class="toolbar">logged in as {{.Viewer}} · <a href="/new">new repository</a> ·
4	<form method="post" action="/logout" class="inline"><button type="submit" class="linklike">logout</button></form></p>{{end}}	7	<form method="post" action="/logout" class="inline"><button type="submit" class="linklike">logout</button></form></p>{{end}}
5	<h1>repositories</h1>	8	</div>
6	<ul class="repolist">	9	<div class="repogrid">
7	{{range .Repos}}<li>	10	{{range .Repos}}<div class="repocard">
8	<p class="reponame"><a href="/{{.OwnerName}}">{{.OwnerName}}</a>/<a href="/{{.OwnerName}}/{{.Name}}">{{.Name}}</a>{{if .Settings.Archived}} <span class="chip chip-stale">archived</span>{{end}}</p>	11	<p class="reponame"><a href="/{{.OwnerName}}">{{.OwnerName}}</a><span class="sep">/</span><a href="/{{.OwnerName}}/{{.Name}}">{{.Name}}</a>{{if .Settings.Archived}} <span class="chip chip-stale">archived</span>{{end}}</p>
9	{{if .Desc}}<p class="desc">{{.Desc}}</p>{{end}}	12	{{if .Desc}}<p class="desc">{{.Desc}}</p>{{end}}
10	<p class="meta">{{template "branchicon"}} {{.DefaultBranch}}</p>	13	<p class="meta">{{template "branchicon"}} {{.DefaultBranch}}</p>
11	</li>	14	</div>
12	{{else}}<li class="empty">no public repositories yet</li>{{end}}	15	{{else}}<p class="empty">no public repositories yet</p>{{end}}
13	</ul>	16	</div>
14	{{if .Mine}}<h2>your private repositories</h2>	17	{{if .Mine}}<h2>your private repositories</h2>
15	<ul class="repolist">	18	<div class="repogrid">
16	{{range .Mine}}<li>	19	{{range .Mine}}<div class="repocard">
17	<p class="reponame"><a href="/{{.OwnerName}}/{{.Name}}">{{.OwnerName}}/{{.Name}}</a> <span class="chip chip-neutral">{{.Visibility}}</span></p>	20	<p class="reponame"><a href="/{{.OwnerName}}/{{.Name}}">{{.OwnerName}}/{{.Name}}</a> <span class="chip chip-neutral">{{.Visibility}}</span></p>
18	{{if .Desc}}<p class="desc">{{.Desc}}</p>{{end}}	21	{{if .Desc}}<p class="desc">{{.Desc}}</p>{{end}}
19	<p class="meta">{{template "branchicon"}} {{.DefaultBranch}}</p>	22	<p class="meta">{{template "branchicon"}} {{.DefaultBranch}}</p>
20	</li>	23	</div>
21	{{end}}	24	{{end}}
22	</ul>{{end}}	25	</div>{{end}}
23	{{end}}	26	{{end}}

internal/web/templates/layout.html +3 −3

	@@ -9,13 +9,13 @@
9	</head>	9	</head>
10	<body>	10	<body>
11	<header>	11	<header>
12	<nav><a class="site" href="/"><svg class="mark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><rect x="1" y="1" width="22" height="22" rx="6" fill="var(--accent)"/><path d="M5 9.5c2-2.5 4-2.5 6 0s4 2.5 6 0" stroke="var(--accent-fg)" stroke-width="2.2" fill="none" stroke-linecap="round"/><path d="M5 15c2-2.5 4-2.5 6 0s4 2.5 6 0" stroke="var(--accent-fg)" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>{{.Site}}</a></nav>	12	<nav class="container"><a class="site" href="/"><svg class="mark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><rect x="1" y="1" width="22" height="22" rx="6" fill="var(--accent)"/><path d="M5 9.5c2-2.5 4-2.5 6 0s4 2.5 6 0" stroke="var(--accent-fg)" stroke-width="2.2" fill="none" stroke-linecap="round"/><path d="M5 15c2-2.5 4-2.5 6 0s4 2.5 6 0" stroke="var(--accent-fg)" stroke-width="2.2" fill="none" stroke-linecap="round"/></svg>{{.Site}}</a></nav>
13	</header>	13	</header>
14	<main>	14	<main class="container">
15	{{template "content" .}}	15	{{template "content" .}}
16	</main>	16	</main>
17	<footer>	17	<footer>
18	<p>powered by <a href="https://gitbay.org/krz/gitbay">gitbay</a>{{with gitbayVersion}} · <code>{{.}}</code>{{end}}</p>	18	<div class="container"><p>powered by <a href="https://gitbay.org/krz/gitbay">gitbay</a>{{with gitbayVersion}} · <code>{{.}}</code>{{end}}</p></div>
19	</footer>	19	</footer>
20	</body>	20	</body>
21	</html>{{end}}	21	</html>{{end}}

internal/web/templates/owner.html +8 −5

 {{define "title"}}{{.Owner}} · {{.Site}}{{end}}
 {{define "content"}}
+<section class="profilehead">
 <h1>{{.Owner}} <span class="chip chip-neutral">{{.Kind}}</span></h1>
 {{if .Profile.Description}}<p class="desc lede">{{.Profile.Description}}</p>{{end}}
 {{if .Profile.Website}}<p class="meta"><a href="{{.Profile.Website}}" rel="nofollow me">{{.Profile.Website}}</a></p>{{end}}
 {{if .Orgs}}<p class="meta">member of {{range .Orgs}}<a class="memberchip" href="/{{.Username}}">{{.Username}}</a> {{end}}</p>{{end}}
 {{if .Members}}<p class="meta">members {{range .Members}}<a class="memberchip" href="/{{.Username}}">{{.Username}} <span class="role">{{.Role}}</span></a> {{end}}</p>{{end}}
-<ul class="repolist">
+</section>
-{{range .Repos}}<li>
+<h2>repositories <span class="count">{{len .Repos}}</span></h2>
+<div class="repogrid">
+{{range .Repos}}<div class="repocard">
   <p class="reponame"><a href="/{{.OwnerName}}/{{.Name}}">{{.Name}}</a>{{if eq .Visibility "private"}} <span class="chip chip-neutral">private</span>{{end}}{{if .Settings.Archived}} <span class="chip chip-stale">archived</span>{{end}}</p>
   {{if .Desc}}<p class="desc">{{.Desc}}</p>{{end}}
   <p class="meta">{{template "branchicon"}} {{.DefaultBranch}}</p>
-</li>
+</div>
-{{else}}<li class="empty">no visible repositories</li>{{end}}
+{{else}}<p class="empty">no visible repositories</p>{{end}}
-</ul>
+</div>
 {{end}}

Commit 069bd1e107

Commit `069bd1e107`