gitea/templates/pages/documentation.tmpl

{{template "pages/base_head" .}}
<style>
	/* Documentation-specific styles */
	.pages-documentation {
		background: #fff;
	}
	.pages-documentation .pages-header {
		background: #24292e;
		border-bottom: none;
	}
	.pages-documentation .pages-nav-brand,
	.pages-documentation .pages-nav-link {
		color: #fff;
	}
	.pages-documentation .pages-nav-link:hover {
		color: #79b8ff;
	}
	.pages-docs-layout {
		display: flex;
		min-height: calc(100vh - 65px);
	}
	.pages-docs-sidebar {
		width: 280px;
		background: #f6f8fa;
		border-right: 1px solid #e1e4e8;
		padding: 24px;
		position: sticky;
		top: 65px;
		height: calc(100vh - 65px);
		overflow-y: auto;
	}
	.pages-docs-search {
		margin-bottom: 24px;
	}
	.pages-search-input {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #e1e4e8;
		border-radius: 6px;
		font-size: 0.875rem;
	}
	.pages-docs-section {
		margin-bottom: 24px;
	}
	.pages-docs-section-title {
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: #586069;
		margin: 0 0 12px;
	}
	.pages-docs-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.pages-docs-list li {
		margin-bottom: 8px;
	}
	.pages-docs-list a {
		color: #24292e;
		text-decoration: none;
		font-size: 0.875rem;
		display: block;
		padding: 4px 8px;
		border-radius: 4px;
	}
	.pages-docs-list a:hover {
		background: #e1e4e8;
		color: var(--pages-primary);
	}
	.pages-docs-content {
		flex: 1;
		padding: 48px;
		max-width: 900px;
	}
	.pages-docs-article {
		line-height: 1.7;
	}
	.pages-docs-article h1,
	.pages-docs-article h2,
	.pages-docs-article h3 {
		margin-top: 32px;
		padding-bottom: 8px;
		border-bottom: 1px solid #e1e4e8;
	}
	.pages-docs-article code {
		background: #f6f8fa;
		padding: 2px 6px;
		border-radius: 4px;
		font-size: 0.875em;
	}
	.pages-docs-article pre {
		background: #24292e;
		color: #e1e4e8;
		padding: 16px;
		border-radius: 6px;
		overflow-x: auto;
	}
	.pages-docs-article pre code {
		background: none;
		padding: 0;
		color: inherit;
	}
	@media (max-width: 768px) {
		.pages-docs-sidebar {
			display: none;
		}
		.pages-docs-content {
			padding: 24px;
		}
	}
</style>
<div class="pages-landing pages-documentation">
	{{template "pages/header" .}}

	<div class="pages-docs-layout">
		<aside class="pages-docs-sidebar">
			<div class="pages-docs-search">
				<input type="text" placeholder="{{ctx.Locale.Tr "search"}}..." class="pages-search-input">
			</div>
			<nav class="pages-docs-nav">
				{{if .Config.Documentation.Sidebar}}
				{{range .Config.Documentation.Sidebar}}
				<div class="pages-docs-section {{if .Collapsed}}collapsed{{end}}">
					{{if .Title}}
					<h4 class="pages-docs-section-title">{{.Title}}</h4>
					{{end}}
					<ul class="pages-docs-list">
						{{range .Items}}
						<li><a href="/docs/{{.}}">{{.}}</a></li>
						{{end}}
					</ul>
				</div>
				{{end}}
				{{else}}
				<div class="pages-docs-section">
					<h4 class="pages-docs-section-title">Documentation</h4>
					<ul class="pages-docs-list">
						<li><a href="#">Getting Started</a></li>
						<li><a href="#">Installation</a></li>
						<li><a href="#">Configuration</a></li>
					</ul>
				</div>
				{{end}}
			</nav>
		</aside>

		<main class="pages-docs-content">
			<article class="pages-docs-article">
				{{if .ReadmeContent}}
				<div class="markup">
					{{.ReadmeContent}}
				</div>
				{{else}}
				<h1>{{.Repository.Name}}</h1>
				<p>{{if .Repository.Description}}{{.Repository.Description}}{{else}}Welcome to the documentation.{{end}}</p>
				{{end}}
			</article>
		</main>
	</div>
</div>
{{template "pages/base_footer" .}}