Site footer spans the page: brand on the left, link columns across the width, and a bottom bar (#257)

* Site footer spans the page: brand and tagline on the left, link columns across the width, and a bottom bar

test-bot authored 4 days ago1 parent 1d10bcfcommit 4d9ceaac2e5ea85369b9b00d7912f159d9bd329fBrowse files

CI / Typecheck and bundlesuccess
CI / Unit tests (1/2)success
CI / Unit tests (2/2)success
Deploy / Deploy to Cloudflaresuccess
Deploy / Main's current tipsuccess
End-to-end / End-to-end (agent reviews, tasks, Today)success
End-to-end / End-to-end (git, PRs, Actions)success
End-to-end / End-to-end (large pushes)success
End-to-end / End-to-end (passkeys, registry, email)success
End-to-end / End-to-end (real histories)success
End-to-end / End-to-end (runner Docker)success
End-to-end / End-to-end (security)success
Live test / Containers, registry, sandboxes, webhooks, schedules, LFS and pull requestssuccess

2 files changed+39−14

modifiedapps/diffinery/src/web/assets.ts+12−4View file

modifiedapps/diffinery/src/web/ui.tsx+27−10View file

		@@ -74,10 +74,18 @@
74	74	.flash.notice{border-color:color-mix(in srgb,var(--green) 40%,transparent);background:var(--green-soft);color:var(--green)}
75	75	.flash.info{border-color:color-mix(in srgb,var(--blue) 40%,transparent);background:var(--blue-soft)}
76	76	.flash.warn{border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:var(--amber-soft);color:var(--amber)}
77		-.site-foot{display:flex;justify-content:center;gap:20px;max-width:1280px;margin:0 auto;padding:16px 20px 32px;border-top:1px solid var(--border2);font-size:12px}.site-foot a{color:var(--fg2)}.site-foot a:hover{color:var(--accent)}
78		-.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,170px));justify-content:center;gap:24px;width:100%;padding-top:12px}
79		-.foot-cols nav{display:flex;flex-direction:column;gap:7px}.foot-cols h2{font-size:12px;font-weight:600;color:var(--fg);margin:0 0 2px}
80		-@media (max-width:600px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.top nav a.nav-site{display:none}}
	77	+/* Footer: full-width band; brand and link columns across the page width, then a bottom bar. */
	78	+.site-foot{border-top:1px solid var(--border2);background:var(--bg2);font-size:13px;color:var(--fg3)}
	79	+.site-foot a{color:var(--fg2)}.site-foot a:hover,.site-foot .brand{color:var(--fg);text-decoration:none}
	80	+.site-foot .foot-main{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(0,1fr));gap:40px 32px;padding-top:56px;padding-bottom:48px}
	81	+.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.foot-brand .brand{font-size:16px}
	82	+.foot-brand p{margin:0;max-width:320px;line-height:1.6;color:var(--fg2)}.foot-brand p strong{color:var(--fg);font-weight:550}
	83	+.site-foot .foot-brand .btn{color:var(--fg)}
	84	+.foot-main nav{display:flex;flex-direction:column;align-items:flex-start;gap:11px}.foot-main h2{font-size:13px;font-weight:600;color:var(--fg);margin:0 0 3px}
	85	+.foot-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:20px 0 28px;font-size:12px}
	86	+.foot-main+.wrap>.foot-bar{border-top:1px solid var(--border2)}.foot-bar nav{display:flex;flex-wrap:wrap;gap:20px}
	87	+@media (max-width:1000px){.site-foot .foot-main{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:44px}.foot-brand{grid-column:1/-1}.foot-brand p{max-width:520px}}
	88	+@media (max-width:600px){.site-foot .foot-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px;padding-top:36px;padding-bottom:36px}.top nav a.nav-site{display:none}}
81	89	/* Controls follow Kumo sizes: base 36px (buttons, inputs, selects), sm 26px. */
82	90	.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);color:var(--fg);font:500 14px/1 var(--sans);cursor:pointer;white-space:nowrap;text-decoration:none!important;vertical-align:middle;flex:none}
83	91	.btn svg{flex:none}

		@@ -433,7 +433,18 @@
433	433
434	434	/** Links to the public site for visitors: every page reachable from every page, for people and crawlers. */
435	435	const SiteFooter: FC = () => (
436		- <div class="foot-cols">
	436	+ <div class="wrap foot-main">
	437	+ <div class="foot-brand">
	438	+ <a class="brand" href="/" aria-label="Diffinery home">
	439	+ {raw(ICONS.logo)} <span>Diffinery</span>
	440	+ </a>
	441	+ <p>
	442	+ <strong>{SITE.tagline}.</strong> Repositories, pull requests and GitHub Actions–compatible CI for teams of people and AI agents.
	443	+ </p>
	444	+ <a href="/early-access" class="btn sm">
	445	+ Request early access
	446	+ </a>
	447	+ </div>
437	448	{[
438	449	{ title: "Product", links: [["/features", "Features"], ["/agents", "For AI agents"], ["/performance", "Performance"], ["/security", "Security"], ["/docs/migrate-from-github", "Migrate from GitHub"]] },
439	450	{ title: "Compare", links: [["/compare", "All comparisons"], ["/compare/github", "vs GitHub"], ["/compare/gitlab", "vs GitLab"], ["/compare/blacksmith", "vs Blacksmith"], ["/compare/depot", "vs Depot"]] },
		@@ -555,15 +566,21 @@
555	566	{body}
556	567	</main>
557	568	<footer class="site-foot">
558		- {active ? (
559		- <>
560		- <a href="/docs">Docs</a>
561		- <a href="/docs/security/disclosure">Security</a>
562		- <a href="/status">Status</a>
563		- </>
564		- ) : (
565		- <SiteFooter />
566		- )}
	569	+ {active ? null : <SiteFooter />}
	570	+ <div class="wrap">
	571	+ <div class="foot-bar">
	572	+ <span>© {new Date().getUTCFullYear()} Diffinery</span>
	573	+ {active ? (
	574	+ <nav aria-label="Footer">
	575	+ <a href="/docs">Docs</a>
	576	+ <a href="/docs/security/disclosure">Security</a>
	577	+ <a href="/status">Status</a>
	578	+ </nav>
	579	+ ) : (
	580	+ <span>Runs entirely on Cloudflare</span>
	581	+ )}
	582	+ </div>
	583	+ </div>
567	584	</footer>
568	585	{active ? (
569	586	<dialog id="palette" aria-label="Command palette">

codician/diffinerypublic

Site footer spans the page: brand on the left, link columns across the width, and a bottom bar (#257)