Files
2026-09-23 08:34:45 +00:00

219 lines
6.7 KiB
Cheetah

{{template "base/head" .}}
<div role="main" aria-label="{{if .IsSigned}}{{ctx.Locale.Tr "dashboard"}}{{else}}{{ctx.Locale.Tr "home_title"}}{{end}}" class="page-content home tpg-home">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400&display=swap">
<style>
.tpg-home {
--tpg-font-display: "Space Grotesk", sans-serif;
--tpg-font-body: "Instrument Sans", sans-serif;
--tpg-font-mono: "IBM Plex Mono", monospace;
--tpg-ink: #111111;
--tpg-paper: #FFFFFF;
--tpg-secondary: #666666;
--tpg-muted: #999999;
--tpg-border: #E5E5E5;
--tpg-hover: #FAFAFA;
--tpg-accent: #ED254E;
font-family: var(--tpg-font-body);
color: var(--tpg-ink);
background: var(--tpg-paper);
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
/* Gitea dark themes (class is set on <html> by Gitea) */
html.theme-gitea-dark .tpg-home,
html[class*="dark"] .tpg-home {
--tpg-ink: #FFFFFF;
--tpg-paper: #111111;
--tpg-secondary: #B0B0B0;
--tpg-muted: #8A8A8A;
--tpg-border: #2B2B2B;
--tpg-hover: #191919;
}
@media (prefers-color-scheme: dark) {
html.theme-gitea-auto .tpg-home {
--tpg-ink: #FFFFFF;
--tpg-paper: #111111;
--tpg-secondary: #B0B0B0;
--tpg-muted: #8A8A8A;
--tpg-border: #2B2B2B;
--tpg-hover: #191919;
}
}
.tpg-home a { color: var(--tpg-ink); text-decoration: none; }
.tpg-home a:hover {
color: var(--tpg-ink);
text-decoration: underline;
text-decoration-color: var(--tpg-accent);
text-underline-offset: 3px;
}
.tpg-wrap { max-width: 1000px; margin: 0 auto; padding: 0 32px; }
/* Hero */
.tpg-hero { padding: 112px 32px 96px; text-align: center; }
.tpg-eyebrow {
font-family: var(--tpg-font-mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--tpg-secondary);
}
.tpg-mark { display: block; margin: 0 auto 32px; width: 56px; height: 56px; }
html.theme-gitea-dark .tpg-mark-light, html[class*="dark"] .tpg-mark-light { display: none; }
.tpg-mark-dark { display: none; }
html.theme-gitea-dark .tpg-mark-dark, html[class*="dark"] .tpg-mark-dark { display: block; }
.tpg-hero h1 {
font-family: var(--tpg-font-display);
font-weight: 600;
letter-spacing: -0.02em;
font-size: clamp(44px, 6vw, 76px);
line-height: 1.04;
margin: 28px 0 24px;
text-wrap: balance;
color: var(--tpg-ink);
}
.tpg-hero p {
font-size: 20px;
line-height: 1.5;
color: var(--tpg-secondary);
max-width: 620px;
margin: 0 auto;
text-wrap: pretty;
}
/* Section headers */
.tpg-section { padding-bottom: 96px; }
.tpg-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid var(--tpg-ink);
}
.tpg-section-head h2 {
font-family: var(--tpg-font-mono);
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--tpg-secondary);
margin: 0;
}
.tpg-link-mono {
font-family: var(--tpg-font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Repository rows */
.tpg-repo {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
padding: 24px 0;
border-bottom: 1px solid var(--tpg-border);
}
.tpg-repo:hover { background: var(--tpg-hover); text-decoration: none; }
.tpg-repo-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tpg-repo-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tpg-repo-name {
font-family: var(--tpg-font-display);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.02em;
color: var(--tpg-ink);
}
.tpg-tag {
font-family: var(--tpg-font-mono);
font-size: 12px;
padding: 4px 8px;
letter-spacing: 0.04em;
background: #F2F2F2;
color: #111111;
}
.tpg-tag-sky { background: #E9E8FF; color: #4A45D6; }
.tpg-tag-coral { background: #FCE1E7; color: #B01A3A; }
.tpg-tag-indigo { background: #E3E4E9; color: #2B2D42; }
.tpg-tag-yellow { background: #F5F7DE; color: #5C6600; }
.tpg-repo-desc {
font-size: 15px;
line-height: 1.5;
color: var(--tpg-secondary);
max-width: 560px;
text-wrap: pretty;
}
.tpg-repo-meta {
display: flex;
align-items: center;
gap: 20px;
font-family: var(--tpg-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--tpg-muted);
white-space: nowrap;
padding-top: 6px;
}
.tpg-lang { display: inline-flex; align-items: center; gap: 7px; }
.tpg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Docs grid */
.tpg-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 16px; }
.tpg-doc { display: flex; flex-direction: column; gap: 10px; }
.tpg-doc h3 {
font-family: var(--tpg-font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.02em;
margin: 0;
color: var(--tpg-ink);
}
.tpg-doc p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--tpg-secondary); text-wrap: pretty; }
@media (max-width: 800px) {
.tpg-hero { padding: 72px 24px 64px; }
.tpg-docs { grid-template-columns: 1fr; gap: 40px; }
.tpg-repo { grid-template-columns: 1fr; gap: 12px; }
.tpg-repo-meta { padding-top: 0; }
}
</style>
<section class="tpg-hero">
<img class="tpg-mark tpg-mark-light" src="{{AssetUrlPrefix}}/img/tpg-mark-black.svg" width="56" height="56" alt="{{ctx.Locale.Tr "logo"}}">
<img class="tpg-mark tpg-mark-dark" src="{{AssetUrlPrefix}}/img/tpg-mark-white.svg" width="56" height="56" alt="{{ctx.Locale.Tr "logo"}}">
<div class="tpg-eyebrow">git.appstage.space</div>
<h1>{{AppName}}</h1>
<p>Bespoke software for teams who know exactly what they need. The open parts of what we build live here.</p>
</section>
<section class="tpg-wrap tpg-section">
<div class="tpg-section-head">
<h2>Docs &amp; handbook</h2>
</div>
<div class="tpg-docs">
<div class="tpg-doc">
<h3>Handbook</h3>
<p>How we branch, review and ship. Everything about how we work with code.</p>
<a class="tpg-link-mono" href="{{AppSubUrl}}/thepublicgood/thepublicgood.code/src/branch/main/HANDBOOK.md">Read the handbook →</a>
</div>
<div class="tpg-doc">
<h3>AI</h3>
<p>Read about how we use AI in our code bases.</p>
<a class="tpg-link-mono" href="{{AppSubUrl}}/thepublicgood/thepublicgood.code/src/branch/main/AI.md">Browse docs →</a>
</div>
<div class="tpg-doc">
<h3>Contributing</h3>
<p>Sometimes, we make open things. Read our contribution guide.</p>
<a class="tpg-link-mono" href="{{AppSubUrl}}/thepublicgood/thepublicgood.code/src/branch/main/CONTRIBUTING.md">Read the guide →</a>
</div>
</div>
</section>
</div>
{{template "base/footer" .}}