Woodpecker CI c6e05105528b47a952d5367d5326a349608e456e [SKIP CI]

5 files changed, 719 insertions, 259 deletions

diff --git a/docs/index.html b/docs/index.html
index 4436e5ad..5eaa4213 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,84 +7,176 @@
 	<style>
 	:root {
 		color-scheme: dark;
-	}
+		--bg: #0d0d0d;
+		--bg-alt: #141414;
+		--bg-code: #1a1a1a;
+		--fg: #e0e0e0;
+		--fg-dim: #888;
+		--accent: #a8a8a8;
+		--accent-hover: #e0e0e0;
+		--border: #222;
+	}
+	* { margin: 0; padding: 0; box-sizing: border-box; }
 	body {
-		font-family: monospace;
-		font-size: 14px;
-		line-height: 1.25;
-		max-width: 92ch;
-		margin-left: auto;
-		margin-right: auto;
-		padding: 1em;
-		background-color: #242424;
-		color: #fefefe;
-	}
-	h1 {
-		margin: 0 0 0.35em;
-		font-size: 2rem;
-		line-height: 1.1;
+		font-family: "Terminus", "Monaco", "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
+		font-size: 15px;
+		line-height: 1.6;
+		max-width: 88ch;
+		margin: 0 auto;
+		padding: 2em 1.5em;
+		background: var(--bg);
+		color: var(--fg);
+		-webkit-font-smoothing: antialiased;
+	}
+	h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
+	h1 { font-size: 1.75rem; margin-bottom: 0.6em; }
+	h2 { font-size: 1.3rem; margin: 1.6em 0 0.5em; }
+	h3 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
+	h4 { font-size: 1rem; margin: 1.2em 0 0.3em; }
+	p { margin: 0 0 1em; }
+	a {
+		color: var(--accent);
+		text-decoration: none;
+	}
+	a:hover { color: var(--accent-hover); text-decoration: underline; }
+	nav { margin-bottom: 1.5em; }
+	nav a { color: var(--fg-dim); font-size: 0.9em; }
+	nav a:hover { color: var(--accent); }
+	nav span { color: var(--border); margin: 0 0.3em; }
+	hr {
+		border: 0;
+		border-top: 1px solid var(--border);
+		margin: 1.5em 0;
 	}
-	h2, h3, h4 {
-		line-height: 1.2;
-		margin-top: 1.4em;
-		margin-bottom: 0.5em;
+	pre, code { font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace; font-size: 0.9em; }
+	code {
+		background: var(--bg-code);
+		padding: 0.15em 0.4em;
+		border-radius: 3px;
+		color: #c0c0c0;
 	}
 	pre {
-		background-color: #2b2b2b;
-		border-radius: 3px;
-		padding: 10px;
+		background: var(--bg-code);
+		border: 1px solid var(--border);
+		border-radius: 4px;
+		padding: 1em;
 		overflow-x: auto;
+		margin: 1em 0;
+		line-height: 1.45;
 	}
-	code {
-		color: #f7f3d6;
+	pre code {
+		background: none;
+		padding: 0;
+		border-radius: 0;
 	}
 	img {
 		display: block;
 		max-width: 100%;
+		height: auto;
+		margin: 1em 0;
+		border-radius: 4px;
 	}
-	hr {
-		border: 0;
-		border-top: 1px dashed #fefefe;
-		margin: 20px 0;
+	blockquote {
+		margin: 1em 0;
+		padding-left: 1em;
+		border-left: 3px solid var(--border);
+		color: var(--fg-dim);
 	}
 	table {
 		width: 100%;
 		border-collapse: collapse;
-		margin: 0.75rem 0;
+		margin: 1em 0;
 	}
 	th, td {
-		padding: 4px;
-	}
-	th {
-		background-color: #221e1f;
+		padding: 0.5em 0.6em;
 		text-align: left;
+		border-bottom: 1px solid var(--border);
 	}
-	table, th, td {
-		border: 1px dashed #e7e8eb;
-	}
-	table thead th {
-		border-bottom-color: #e7e8eb;
-	}
-	a {
-		color: #90cbf9;
-		text-decoration: none
-	}
-	a:hover {
-		color: #869edc;
-		text-decoration: underline
-	}
-	blockquote {
-		margin: 1rem 0;
-		padding-left: 1rem;
-		border-left: 2px solid rgba(254, 254, 254, 0.18);
-		color: #d0d0d0;
+	th {
+		font-weight: 600;
+		border-bottom-color: #333;
+	}
+	tr:last-child td { border-bottom: none; }
+	ul, ol { margin: 0 0 1em 1.5em; }
+	li { margin-bottom: 0.3em; }
+	input, button, textarea { font: inherit; color: inherit; }
+	.ports-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		margin-bottom: 1em;
+	}
+	.ports-toolbar button {
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		padding: 0.3em 0;
+		cursor: pointer;
+		color: var(--fg-dim);
+		font-size: 0.9em;
+	}
+	.ports-toolbar button.active {
+		color: var(--accent);
+		border-bottom-color: var(--accent);
+	}
+	.ports-toolbar button:hover { color: var(--fg); }
+	.ports-toolbar input {
+		flex: 1 1 18em;
+		min-width: 0;
+		background: var(--bg-alt);
+		border: 1px solid var(--border);
+		border-radius: 3px;
+		padding: 0.4em 0.6em;
+	}
+	.ports-toolbar input:focus { outline: none; border-color: var(--accent); }
+	.ports-count { margin-bottom: 0.8em; color: var(--fg-dim); font-size: 0.9em; }
+	#commits { list-style: none; margin: 0; }
+	#commits li {
+		padding: 0.8em 0;
+		border-bottom: 1px solid var(--border);
+		display: flex;
+		align-items: flex-start;
+		gap: 0.8em;
+	}
+	#commits li:last-child { border-bottom: none; }
+	.commit-hash {
+		font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
+		font-size: 0.8em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		min-width: 7em;
+	}
+	.commit-msg { flex: 1; word-break: break-word; }
+	.commit-meta {
+		font-size: 0.85em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		text-align: right;
+		min-width: 9em;
+	}
+	#commits-loading {
+		text-align: center;
+		padding: 1.5em;
+		color: var(--fg-dim);
+		display: none;
+	}
+	#commits-error {
+		text-align: center;
+		padding: 1em;
+		color: #e77;
+		display: none;
 	}
+	.dl-table td:nth-child(1) { width: 60%; }
+	.dl-table td:nth-child(2) { width: 15%; text-align: right; }
+	.dl-table td:nth-child(3) { width: 25%; white-space: nowrap; }
+	.dl-empty { color: var(--fg-dim); font-style: italic; }
 	</style>
 </head>
 <body>
 <div class="centered-wrapper">
-	<h1>docs</h1>
-	<a href="/">home</a> / <a href="/docs">docs</a> / <a href="/ports.html">ports</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a>
+	<nav>
+		<a href="/">home</a><span> / </span><a href="/docs">docs</a><span> / </span><a href="/ports.html">ports</a><span> / </span><a href="/commits.html">commits</a><span> / </span><a href="/download.html">download</a><span> / </span><a href="https://codeberg.org/emmett1/alicelinux">development</a><span> / </span><a href="/community.html">community</a><span> / </span><a href="/donate.html">donate</a>
+	</nav>
 	<hr>
 <h1>Documentation</h1>
 <p>This section covers the main parts of <strong>Alice Linux</strong>: installation, package
@@ -94,8 +186,8 @@ management, networking, service supervision, etc.</p>
 <li><a href="./networking.html">Networking</a></li>
 <li><a href="./packagemanager.html">Package Manager</a></li>
 </ul>
-	<br><hr>
-	<p>Copyright (C) Alice Linux, 2024-2026</p>
+	<hr>
+	<p style="color: var(--fg-dim); font-size: 0.85em;">Copyright &copy; Alice Linux, 2024-2026</p>
 </div>
 </body>
 </html>
diff --git a/docs/install.html b/docs/install.html
index f64ff0f9..fc7f3318 100644
--- a/docs/install.html
+++ b/docs/install.html
@@ -7,84 +7,176 @@
 	<style>
 	:root {
 		color-scheme: dark;
+		--bg: #0d0d0d;
+		--bg-alt: #141414;
+		--bg-code: #1a1a1a;
+		--fg: #e0e0e0;
+		--fg-dim: #888;
+		--accent: #a8a8a8;
+		--accent-hover: #e0e0e0;
+		--border: #222;
 	}
+	* { margin: 0; padding: 0; box-sizing: border-box; }
 	body {
-		font-family: monospace;
-		font-size: 14px;
-		line-height: 1.25;
-		max-width: 92ch;
-		margin-left: auto;
-		margin-right: auto;
-		padding: 1em;
-		background-color: #242424;
-		color: #fefefe;
+		font-family: "Terminus", "Monaco", "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
+		font-size: 15px;
+		line-height: 1.6;
+		max-width: 88ch;
+		margin: 0 auto;
+		padding: 2em 1.5em;
+		background: var(--bg);
+		color: var(--fg);
+		-webkit-font-smoothing: antialiased;
 	}
-	h1 {
-		margin: 0 0 0.35em;
-		font-size: 2rem;
-		line-height: 1.1;
+	h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
+	h1 { font-size: 1.75rem; margin-bottom: 0.6em; }
+	h2 { font-size: 1.3rem; margin: 1.6em 0 0.5em; }
+	h3 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
+	h4 { font-size: 1rem; margin: 1.2em 0 0.3em; }
+	p { margin: 0 0 1em; }
+	a {
+		color: var(--accent);
+		text-decoration: none;
 	}
-	h2, h3, h4 {
-		line-height: 1.2;
-		margin-top: 1.4em;
-		margin-bottom: 0.5em;
+	a:hover { color: var(--accent-hover); text-decoration: underline; }
+	nav { margin-bottom: 1.5em; }
+	nav a { color: var(--fg-dim); font-size: 0.9em; }
+	nav a:hover { color: var(--accent); }
+	nav span { color: var(--border); margin: 0 0.3em; }
+	hr {
+		border: 0;
+		border-top: 1px solid var(--border);
+		margin: 1.5em 0;
 	}
-	pre {
-		background-color: #2b2b2b;
+	pre, code { font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace; font-size: 0.9em; }
+	code {
+		background: var(--bg-code);
+		padding: 0.15em 0.4em;
 		border-radius: 3px;
-		padding: 10px;
+		color: #c0c0c0;
+	}
+	pre {
+		background: var(--bg-code);
+		border: 1px solid var(--border);
+		border-radius: 4px;
+		padding: 1em;
 		overflow-x: auto;
+		margin: 1em 0;
+		line-height: 1.45;
 	}
-	code {
-		color: #f7f3d6;
+	pre code {
+		background: none;
+		padding: 0;
+		border-radius: 0;
 	}
 	img {
 		display: block;
 		max-width: 100%;
+		height: auto;
+		margin: 1em 0;
+		border-radius: 4px;
 	}
-	hr {
-		border: 0;
-		border-top: 1px dashed #fefefe;
-		margin: 20px 0;
+	blockquote {
+		margin: 1em 0;
+		padding-left: 1em;
+		border-left: 3px solid var(--border);
+		color: var(--fg-dim);
 	}
 	table {
 		width: 100%;
 		border-collapse: collapse;
-		margin: 0.75rem 0;
+		margin: 1em 0;
 	}
 	th, td {
-		padding: 4px;
+		padding: 0.5em 0.6em;
+		text-align: left;
+		border-bottom: 1px solid var(--border);
 	}
 	th {
-		background-color: #221e1f;
-		text-align: left;
+		font-weight: 600;
+		border-bottom-color: #333;
 	}
-	table, th, td {
-		border: 1px dashed #e7e8eb;
+	tr:last-child td { border-bottom: none; }
+	ul, ol { margin: 0 0 1em 1.5em; }
+	li { margin-bottom: 0.3em; }
+	input, button, textarea { font: inherit; color: inherit; }
+	.ports-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		margin-bottom: 1em;
 	}
-	table thead th {
-		border-bottom-color: #e7e8eb;
+	.ports-toolbar button {
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		padding: 0.3em 0;
+		cursor: pointer;
+		color: var(--fg-dim);
+		font-size: 0.9em;
 	}
-	a {
-		color: #90cbf9;
-		text-decoration: none
+	.ports-toolbar button.active {
+		color: var(--accent);
+		border-bottom-color: var(--accent);
 	}
-	a:hover {
-		color: #869edc;
-		text-decoration: underline
+	.ports-toolbar button:hover { color: var(--fg); }
+	.ports-toolbar input {
+		flex: 1 1 18em;
+		min-width: 0;
+		background: var(--bg-alt);
+		border: 1px solid var(--border);
+		border-radius: 3px;
+		padding: 0.4em 0.6em;
 	}
-	blockquote {
-		margin: 1rem 0;
-		padding-left: 1rem;
-		border-left: 2px solid rgba(254, 254, 254, 0.18);
-		color: #d0d0d0;
+	.ports-toolbar input:focus { outline: none; border-color: var(--accent); }
+	.ports-count { margin-bottom: 0.8em; color: var(--fg-dim); font-size: 0.9em; }
+	#commits { list-style: none; margin: 0; }
+	#commits li {
+		padding: 0.8em 0;
+		border-bottom: 1px solid var(--border);
+		display: flex;
+		align-items: flex-start;
+		gap: 0.8em;
 	}
+	#commits li:last-child { border-bottom: none; }
+	.commit-hash {
+		font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
+		font-size: 0.8em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		min-width: 7em;
+	}
+	.commit-msg { flex: 1; word-break: break-word; }
+	.commit-meta {
+		font-size: 0.85em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		text-align: right;
+		min-width: 9em;
+	}
+	#commits-loading {
+		text-align: center;
+		padding: 1.5em;
+		color: var(--fg-dim);
+		display: none;
+	}
+	#commits-error {
+		text-align: center;
+		padding: 1em;
+		color: #e77;
+		display: none;
+	}
+	.dl-table td:nth-child(1) { width: 60%; }
+	.dl-table td:nth-child(2) { width: 15%; text-align: right; }
+	.dl-table td:nth-child(3) { width: 25%; white-space: nowrap; }
+	.dl-empty { color: var(--fg-dim); font-style: italic; }
 	</style>
 </head>
 <body>
 <div class="centered-wrapper">
-	<h1>docs</h1>
-	<a href="/">home</a> / <a href="/docs">docs</a> / <a href="/ports.html">ports</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a>
+	<nav>
+		<a href="/">home</a><span> / </span><a href="/docs">docs</a><span> / </span><a href="/ports.html">ports</a><span> / </span><a href="/commits.html">commits</a><span> / </span><a href="/download.html">download</a><span> / </span><a href="https://codeberg.org/emmett1/alicelinux">development</a><span> / </span><a href="/community.html">community</a><span> / </span><a href="/donate.html">donate</a>
+	</nav>
 	<hr>
 <h1>Install Alice</h1>
 <p>Here is a guide to installing Alice Linux on your computer using the chroot method. You can do this from your existing Linux distribution or from a live environment, such as Alice Live or another Linux distribution. Make sure your chosen environment has the necessary partitioning tools, filesystem tools, and extraction tools.</p>
@@ -286,8 +378,8 @@ Create a symlink from <code>/etc/sv/&lt;service&gt;</code> to <code>/var/service
 <li>Use <code>revdep</code> to scan for broken libraries and binaries after system upgrades and package removals. You can use <code>revdep -v</code> to print out missing required libraries, and use <code>apkg -f -u $(revdep)</code> to scan and rebuild broken packages.</li>
 <li>Run <code>updateconf</code> to update config files in <code>/etc</code> after package upgrades.</li>
 </ul>
-	<br><hr>
-	<p>Copyright (C) Alice Linux, 2024-2026</p>
+	<hr>
+	<p style="color: var(--fg-dim); font-size: 0.85em;">Copyright &copy; Alice Linux, 2024-2026</p>
 </div>
 </body>
 </html>
diff --git a/docs/networking.html b/docs/networking.html
index 6916045d..17c28dd7 100644
--- a/docs/networking.html
+++ b/docs/networking.html
@@ -7,84 +7,176 @@
 	<style>
 	:root {
 		color-scheme: dark;
+		--bg: #0d0d0d;
+		--bg-alt: #141414;
+		--bg-code: #1a1a1a;
+		--fg: #e0e0e0;
+		--fg-dim: #888;
+		--accent: #a8a8a8;
+		--accent-hover: #e0e0e0;
+		--border: #222;
 	}
+	* { margin: 0; padding: 0; box-sizing: border-box; }
 	body {
-		font-family: monospace;
-		font-size: 14px;
-		line-height: 1.25;
-		max-width: 92ch;
-		margin-left: auto;
-		margin-right: auto;
-		padding: 1em;
-		background-color: #242424;
-		color: #fefefe;
+		font-family: "Terminus", "Monaco", "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
+		font-size: 15px;
+		line-height: 1.6;
+		max-width: 88ch;
+		margin: 0 auto;
+		padding: 2em 1.5em;
+		background: var(--bg);
+		color: var(--fg);
+		-webkit-font-smoothing: antialiased;
 	}
-	h1 {
-		margin: 0 0 0.35em;
-		font-size: 2rem;
-		line-height: 1.1;
+	h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
+	h1 { font-size: 1.75rem; margin-bottom: 0.6em; }
+	h2 { font-size: 1.3rem; margin: 1.6em 0 0.5em; }
+	h3 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
+	h4 { font-size: 1rem; margin: 1.2em 0 0.3em; }
+	p { margin: 0 0 1em; }
+	a {
+		color: var(--accent);
+		text-decoration: none;
 	}
-	h2, h3, h4 {
-		line-height: 1.2;
-		margin-top: 1.4em;
-		margin-bottom: 0.5em;
+	a:hover { color: var(--accent-hover); text-decoration: underline; }
+	nav { margin-bottom: 1.5em; }
+	nav a { color: var(--fg-dim); font-size: 0.9em; }
+	nav a:hover { color: var(--accent); }
+	nav span { color: var(--border); margin: 0 0.3em; }
+	hr {
+		border: 0;
+		border-top: 1px solid var(--border);
+		margin: 1.5em 0;
 	}
-	pre {
-		background-color: #2b2b2b;
+	pre, code { font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace; font-size: 0.9em; }
+	code {
+		background: var(--bg-code);
+		padding: 0.15em 0.4em;
 		border-radius: 3px;
-		padding: 10px;
+		color: #c0c0c0;
+	}
+	pre {
+		background: var(--bg-code);
+		border: 1px solid var(--border);
+		border-radius: 4px;
+		padding: 1em;
 		overflow-x: auto;
+		margin: 1em 0;
+		line-height: 1.45;
 	}
-	code {
-		color: #f7f3d6;
+	pre code {
+		background: none;
+		padding: 0;
+		border-radius: 0;
 	}
 	img {
 		display: block;
 		max-width: 100%;
+		height: auto;
+		margin: 1em 0;
+		border-radius: 4px;
 	}
-	hr {
-		border: 0;
-		border-top: 1px dashed #fefefe;
-		margin: 20px 0;
+	blockquote {
+		margin: 1em 0;
+		padding-left: 1em;
+		border-left: 3px solid var(--border);
+		color: var(--fg-dim);
 	}
 	table {
 		width: 100%;
 		border-collapse: collapse;
-		margin: 0.75rem 0;
+		margin: 1em 0;
 	}
 	th, td {
-		padding: 4px;
+		padding: 0.5em 0.6em;
+		text-align: left;
+		border-bottom: 1px solid var(--border);
 	}
 	th {
-		background-color: #221e1f;
-		text-align: left;
+		font-weight: 600;
+		border-bottom-color: #333;
 	}
-	table, th, td {
-		border: 1px dashed #e7e8eb;
+	tr:last-child td { border-bottom: none; }
+	ul, ol { margin: 0 0 1em 1.5em; }
+	li { margin-bottom: 0.3em; }
+	input, button, textarea { font: inherit; color: inherit; }
+	.ports-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		margin-bottom: 1em;
 	}
-	table thead th {
-		border-bottom-color: #e7e8eb;
+	.ports-toolbar button {
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		padding: 0.3em 0;
+		cursor: pointer;
+		color: var(--fg-dim);
+		font-size: 0.9em;
 	}
-	a {
-		color: #90cbf9;
-		text-decoration: none
+	.ports-toolbar button.active {
+		color: var(--accent);
+		border-bottom-color: var(--accent);
 	}
-	a:hover {
-		color: #869edc;
-		text-decoration: underline
+	.ports-toolbar button:hover { color: var(--fg); }
+	.ports-toolbar input {
+		flex: 1 1 18em;
+		min-width: 0;
+		background: var(--bg-alt);
+		border: 1px solid var(--border);
+		border-radius: 3px;
+		padding: 0.4em 0.6em;
 	}
-	blockquote {
-		margin: 1rem 0;
-		padding-left: 1rem;
-		border-left: 2px solid rgba(254, 254, 254, 0.18);
-		color: #d0d0d0;
+	.ports-toolbar input:focus { outline: none; border-color: var(--accent); }
+	.ports-count { margin-bottom: 0.8em; color: var(--fg-dim); font-size: 0.9em; }
+	#commits { list-style: none; margin: 0; }
+	#commits li {
+		padding: 0.8em 0;
+		border-bottom: 1px solid var(--border);
+		display: flex;
+		align-items: flex-start;
+		gap: 0.8em;
 	}
+	#commits li:last-child { border-bottom: none; }
+	.commit-hash {
+		font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
+		font-size: 0.8em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		min-width: 7em;
+	}
+	.commit-msg { flex: 1; word-break: break-word; }
+	.commit-meta {
+		font-size: 0.85em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		text-align: right;
+		min-width: 9em;
+	}
+	#commits-loading {
+		text-align: center;
+		padding: 1.5em;
+		color: var(--fg-dim);
+		display: none;
+	}
+	#commits-error {
+		text-align: center;
+		padding: 1em;
+		color: #e77;
+		display: none;
+	}
+	.dl-table td:nth-child(1) { width: 60%; }
+	.dl-table td:nth-child(2) { width: 15%; text-align: right; }
+	.dl-table td:nth-child(3) { width: 25%; white-space: nowrap; }
+	.dl-empty { color: var(--fg-dim); font-style: italic; }
 	</style>
 </head>
 <body>
 <div class="centered-wrapper">
-	<h1>docs</h1>
-	<a href="/">home</a> / <a href="/docs">docs</a> / <a href="/ports.html">ports</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a>
+	<nav>
+		<a href="/">home</a><span> / </span><a href="/docs">docs</a><span> / </span><a href="/ports.html">ports</a><span> / </span><a href="/commits.html">commits</a><span> / </span><a href="/download.html">download</a><span> / </span><a href="https://codeberg.org/emmett1/alicelinux">development</a><span> / </span><a href="/community.html">community</a><span> / </span><a href="/donate.html">donate</a>
+	</nav>
 	<hr>
 <h1>Networking</h1>
 <p>This document describes how to configure networking on <strong>Alice Linux</strong> using <code>eiwd</code>/<code>wpa_supplicant</code> + <code>udhcpc</code>/<code>dhcpcd</code>.</p>
@@ -216,8 +308,8 @@ DisablePeriodicScan=true
 # ln -s /etc/sv/wpa_supplicant /var/service
 # ln -s /etc/sv/udhcpc /var/service
 </code></pre>
-	<br><hr>
-	<p>Copyright (C) Alice Linux, 2024-2026</p>
+	<hr>
+	<p style="color: var(--fg-dim); font-size: 0.85em;">Copyright &copy; Alice Linux, 2024-2026</p>
 </div>
 </body>
 </html>
diff --git a/docs/packagemanager.html b/docs/packagemanager.html
index ca621d1e..b20ba3d0 100644
--- a/docs/packagemanager.html
+++ b/docs/packagemanager.html
@@ -7,84 +7,176 @@
 	<style>
 	:root {
 		color-scheme: dark;
+		--bg: #0d0d0d;
+		--bg-alt: #141414;
+		--bg-code: #1a1a1a;
+		--fg: #e0e0e0;
+		--fg-dim: #888;
+		--accent: #a8a8a8;
+		--accent-hover: #e0e0e0;
+		--border: #222;
 	}
+	* { margin: 0; padding: 0; box-sizing: border-box; }
 	body {
-		font-family: monospace;
-		font-size: 14px;
-		line-height: 1.25;
-		max-width: 92ch;
-		margin-left: auto;
-		margin-right: auto;
-		padding: 1em;
-		background-color: #242424;
-		color: #fefefe;
+		font-family: "Terminus", "Monaco", "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
+		font-size: 15px;
+		line-height: 1.6;
+		max-width: 88ch;
+		margin: 0 auto;
+		padding: 2em 1.5em;
+		background: var(--bg);
+		color: var(--fg);
+		-webkit-font-smoothing: antialiased;
 	}
-	h1 {
-		margin: 0 0 0.35em;
-		font-size: 2rem;
-		line-height: 1.1;
+	h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
+	h1 { font-size: 1.75rem; margin-bottom: 0.6em; }
+	h2 { font-size: 1.3rem; margin: 1.6em 0 0.5em; }
+	h3 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
+	h4 { font-size: 1rem; margin: 1.2em 0 0.3em; }
+	p { margin: 0 0 1em; }
+	a {
+		color: var(--accent);
+		text-decoration: none;
 	}
-	h2, h3, h4 {
-		line-height: 1.2;
-		margin-top: 1.4em;
-		margin-bottom: 0.5em;
+	a:hover { color: var(--accent-hover); text-decoration: underline; }
+	nav { margin-bottom: 1.5em; }
+	nav a { color: var(--fg-dim); font-size: 0.9em; }
+	nav a:hover { color: var(--accent); }
+	nav span { color: var(--border); margin: 0 0.3em; }
+	hr {
+		border: 0;
+		border-top: 1px solid var(--border);
+		margin: 1.5em 0;
 	}
-	pre {
-		background-color: #2b2b2b;
+	pre, code { font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace; font-size: 0.9em; }
+	code {
+		background: var(--bg-code);
+		padding: 0.15em 0.4em;
 		border-radius: 3px;
-		padding: 10px;
+		color: #c0c0c0;
+	}
+	pre {
+		background: var(--bg-code);
+		border: 1px solid var(--border);
+		border-radius: 4px;
+		padding: 1em;
 		overflow-x: auto;
+		margin: 1em 0;
+		line-height: 1.45;
 	}
-	code {
-		color: #f7f3d6;
+	pre code {
+		background: none;
+		padding: 0;
+		border-radius: 0;
 	}
 	img {
 		display: block;
 		max-width: 100%;
+		height: auto;
+		margin: 1em 0;
+		border-radius: 4px;
 	}
-	hr {
-		border: 0;
-		border-top: 1px dashed #fefefe;
-		margin: 20px 0;
+	blockquote {
+		margin: 1em 0;
+		padding-left: 1em;
+		border-left: 3px solid var(--border);
+		color: var(--fg-dim);
 	}
 	table {
 		width: 100%;
 		border-collapse: collapse;
-		margin: 0.75rem 0;
+		margin: 1em 0;
 	}
 	th, td {
-		padding: 4px;
+		padding: 0.5em 0.6em;
+		text-align: left;
+		border-bottom: 1px solid var(--border);
 	}
 	th {
-		background-color: #221e1f;
-		text-align: left;
+		font-weight: 600;
+		border-bottom-color: #333;
 	}
-	table, th, td {
-		border: 1px dashed #e7e8eb;
+	tr:last-child td { border-bottom: none; }
+	ul, ol { margin: 0 0 1em 1.5em; }
+	li { margin-bottom: 0.3em; }
+	input, button, textarea { font: inherit; color: inherit; }
+	.ports-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		margin-bottom: 1em;
 	}
-	table thead th {
-		border-bottom-color: #e7e8eb;
+	.ports-toolbar button {
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		padding: 0.3em 0;
+		cursor: pointer;
+		color: var(--fg-dim);
+		font-size: 0.9em;
 	}
-	a {
-		color: #90cbf9;
-		text-decoration: none
+	.ports-toolbar button.active {
+		color: var(--accent);
+		border-bottom-color: var(--accent);
 	}
-	a:hover {
-		color: #869edc;
-		text-decoration: underline
+	.ports-toolbar button:hover { color: var(--fg); }
+	.ports-toolbar input {
+		flex: 1 1 18em;
+		min-width: 0;
+		background: var(--bg-alt);
+		border: 1px solid var(--border);
+		border-radius: 3px;
+		padding: 0.4em 0.6em;
 	}
-	blockquote {
-		margin: 1rem 0;
-		padding-left: 1rem;
-		border-left: 2px solid rgba(254, 254, 254, 0.18);
-		color: #d0d0d0;
+	.ports-toolbar input:focus { outline: none; border-color: var(--accent); }
+	.ports-count { margin-bottom: 0.8em; color: var(--fg-dim); font-size: 0.9em; }
+	#commits { list-style: none; margin: 0; }
+	#commits li {
+		padding: 0.8em 0;
+		border-bottom: 1px solid var(--border);
+		display: flex;
+		align-items: flex-start;
+		gap: 0.8em;
 	}
+	#commits li:last-child { border-bottom: none; }
+	.commit-hash {
+		font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
+		font-size: 0.8em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		min-width: 7em;
+	}
+	.commit-msg { flex: 1; word-break: break-word; }
+	.commit-meta {
+		font-size: 0.85em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		text-align: right;
+		min-width: 9em;
+	}
+	#commits-loading {
+		text-align: center;
+		padding: 1.5em;
+		color: var(--fg-dim);
+		display: none;
+	}
+	#commits-error {
+		text-align: center;
+		padding: 1em;
+		color: #e77;
+		display: none;
+	}
+	.dl-table td:nth-child(1) { width: 60%; }
+	.dl-table td:nth-child(2) { width: 15%; text-align: right; }
+	.dl-table td:nth-child(3) { width: 25%; white-space: nowrap; }
+	.dl-empty { color: var(--fg-dim); font-style: italic; }
 	</style>
 </head>
 <body>
 <div class="centered-wrapper">
-	<h1>docs</h1>
-	<a href="/">home</a> / <a href="/docs">docs</a> / <a href="/ports.html">ports</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a>
+	<nav>
+		<a href="/">home</a><span> / </span><a href="/docs">docs</a><span> / </span><a href="/ports.html">ports</a><span> / </span><a href="/commits.html">commits</a><span> / </span><a href="/download.html">download</a><span> / </span><a href="https://codeberg.org/emmett1/alicelinux">development</a><span> / </span><a href="/community.html">community</a><span> / </span><a href="/donate.html">donate</a>
+	</nav>
 	<hr>
 <h1>Package Manager</h1>
 <p>In Alice, two package manager are used, <a href="https://codeberg.org/emmett1/spm">spm</a> and <a href="https://codeberg.org/emmett1/autils">autils</a>. And why two package manager? <code>spm</code> was written for generic package manager for linux distribution. And <code>autils</code> is written specifically for <code>Alice</code> and requires <code>spm</code> in order to install, remove and update packages while managing conflicts. The command <code>apkg</code> (part of <code>autils</code>) is used to fetch and build packages from ports and their <code>abuild</code> files.</p>
@@ -390,8 +482,8 @@ $ apkg-redundantdeps
 (remove redundant dependencies for depends list)
 $ apkg-redundantdeps -f
 </code></pre>
-	<br><hr>
-	<p>Copyright (C) Alice Linux, 2024-2026</p>
+	<hr>
+	<p style="color: var(--fg-dim); font-size: 0.85em;">Copyright &copy; Alice Linux, 2024-2026</p>
 </div>
 </body>
 </html>
diff --git a/docs/readme.html b/docs/readme.html
index 54fed867..6634c9d8 100644
--- a/docs/readme.html
+++ b/docs/readme.html
@@ -7,90 +7,182 @@
 	<style>
 	:root {
 		color-scheme: dark;
-	}
+		--bg: #0d0d0d;
+		--bg-alt: #141414;
+		--bg-code: #1a1a1a;
+		--fg: #e0e0e0;
+		--fg-dim: #888;
+		--accent: #a8a8a8;
+		--accent-hover: #e0e0e0;
+		--border: #222;
+	}
+	* { margin: 0; padding: 0; box-sizing: border-box; }
 	body {
-		font-family: monospace;
-		font-size: 14px;
-		line-height: 1.25;
-		max-width: 92ch;
-		margin-left: auto;
-		margin-right: auto;
-		padding: 1em;
-		background-color: #242424;
-		color: #fefefe;
-	}
-	h1 {
-		margin: 0 0 0.35em;
-		font-size: 2rem;
-		line-height: 1.1;
+		font-family: "Terminus", "Monaco", "Cascadia Code", "Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
+		font-size: 15px;
+		line-height: 1.6;
+		max-width: 88ch;
+		margin: 0 auto;
+		padding: 2em 1.5em;
+		background: var(--bg);
+		color: var(--fg);
+		-webkit-font-smoothing: antialiased;
+	}
+	h1, h2, h3, h4 { font-weight: 600; line-height: 1.3; }
+	h1 { font-size: 1.75rem; margin-bottom: 0.6em; }
+	h2 { font-size: 1.3rem; margin: 1.6em 0 0.5em; }
+	h3 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
+	h4 { font-size: 1rem; margin: 1.2em 0 0.3em; }
+	p { margin: 0 0 1em; }
+	a {
+		color: var(--accent);
+		text-decoration: none;
+	}
+	a:hover { color: var(--accent-hover); text-decoration: underline; }
+	nav { margin-bottom: 1.5em; }
+	nav a { color: var(--fg-dim); font-size: 0.9em; }
+	nav a:hover { color: var(--accent); }
+	nav span { color: var(--border); margin: 0 0.3em; }
+	hr {
+		border: 0;
+		border-top: 1px solid var(--border);
+		margin: 1.5em 0;
 	}
-	h2, h3, h4 {
-		line-height: 1.2;
-		margin-top: 1.4em;
-		margin-bottom: 0.5em;
+	pre, code { font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace; font-size: 0.9em; }
+	code {
+		background: var(--bg-code);
+		padding: 0.15em 0.4em;
+		border-radius: 3px;
+		color: #c0c0c0;
 	}
 	pre {
-		background-color: #2b2b2b;
-		border-radius: 3px;
-		padding: 10px;
+		background: var(--bg-code);
+		border: 1px solid var(--border);
+		border-radius: 4px;
+		padding: 1em;
 		overflow-x: auto;
+		margin: 1em 0;
+		line-height: 1.45;
 	}
-	code {
-		color: #f7f3d6;
+	pre code {
+		background: none;
+		padding: 0;
+		border-radius: 0;
 	}
 	img {
 		display: block;
 		max-width: 100%;
+		height: auto;
+		margin: 1em 0;
+		border-radius: 4px;
 	}
-	hr {
-		border: 0;
-		border-top: 1px dashed #fefefe;
-		margin: 20px 0;
+	blockquote {
+		margin: 1em 0;
+		padding-left: 1em;
+		border-left: 3px solid var(--border);
+		color: var(--fg-dim);
 	}
 	table {
 		width: 100%;
 		border-collapse: collapse;
-		margin: 0.75rem 0;
+		margin: 1em 0;
 	}
 	th, td {
-		padding: 4px;
-	}
-	th {
-		background-color: #221e1f;
+		padding: 0.5em 0.6em;
 		text-align: left;
+		border-bottom: 1px solid var(--border);
 	}
-	table, th, td {
-		border: 1px dashed #e7e8eb;
-	}
-	table thead th {
-		border-bottom-color: #e7e8eb;
-	}
-	a {
-		color: #90cbf9;
-		text-decoration: none
-	}
-	a:hover {
-		color: #869edc;
-		text-decoration: underline
-	}
-	blockquote {
-		margin: 1rem 0;
-		padding-left: 1rem;
-		border-left: 2px solid rgba(254, 254, 254, 0.18);
-		color: #d0d0d0;
+	th {
+		font-weight: 600;
+		border-bottom-color: #333;
+	}
+	tr:last-child td { border-bottom: none; }
+	ul, ol { margin: 0 0 1em 1.5em; }
+	li { margin-bottom: 0.3em; }
+	input, button, textarea { font: inherit; color: inherit; }
+	.ports-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+		margin-bottom: 1em;
+	}
+	.ports-toolbar button {
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		padding: 0.3em 0;
+		cursor: pointer;
+		color: var(--fg-dim);
+		font-size: 0.9em;
+	}
+	.ports-toolbar button.active {
+		color: var(--accent);
+		border-bottom-color: var(--accent);
+	}
+	.ports-toolbar button:hover { color: var(--fg); }
+	.ports-toolbar input {
+		flex: 1 1 18em;
+		min-width: 0;
+		background: var(--bg-alt);
+		border: 1px solid var(--border);
+		border-radius: 3px;
+		padding: 0.4em 0.6em;
+	}
+	.ports-toolbar input:focus { outline: none; border-color: var(--accent); }
+	.ports-count { margin-bottom: 0.8em; color: var(--fg-dim); font-size: 0.9em; }
+	#commits { list-style: none; margin: 0; }
+	#commits li {
+		padding: 0.8em 0;
+		border-bottom: 1px solid var(--border);
+		display: flex;
+		align-items: flex-start;
+		gap: 0.8em;
+	}
+	#commits li:last-child { border-bottom: none; }
+	.commit-hash {
+		font-family: "SF Mono", "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
+		font-size: 0.8em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		min-width: 7em;
+	}
+	.commit-msg { flex: 1; word-break: break-word; }
+	.commit-meta {
+		font-size: 0.85em;
+		color: var(--fg-dim);
+		white-space: nowrap;
+		text-align: right;
+		min-width: 9em;
+	}
+	#commits-loading {
+		text-align: center;
+		padding: 1.5em;
+		color: var(--fg-dim);
+		display: none;
+	}
+	#commits-error {
+		text-align: center;
+		padding: 1em;
+		color: #e77;
+		display: none;
 	}
+	.dl-table td:nth-child(1) { width: 60%; }
+	.dl-table td:nth-child(2) { width: 15%; text-align: right; }
+	.dl-table td:nth-child(3) { width: 25%; white-space: nowrap; }
+	.dl-empty { color: var(--fg-dim); font-style: italic; }
 	</style>
 </head>
 <body>
 <div class="centered-wrapper">
-	<h1>docs</h1>
-	<a href="/">home</a> / <a href="/docs">docs</a> / <a href="/ports.html">ports</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a>
+	<nav>
+		<a href="/">home</a><span> / </span><a href="/docs">docs</a><span> / </span><a href="/ports.html">ports</a><span> / </span><a href="/commits.html">commits</a><span> / </span><a href="/download.html">download</a><span> / </span><a href="https://codeberg.org/emmett1/alicelinux">development</a><span> / </span><a href="/community.html">community</a><span> / </span><a href="/donate.html">donate</a>
+	</nav>
 	<hr>
 <h1>Documentation</h1>
 <p>This section covers the main parts of <strong>Alice Linux</strong>: installation, package
 management, networking, service supervision, etc.</p>
-	<br><hr>
-	<p>Copyright (C) Alice Linux, 2024-2026</p>
+	<hr>
+	<p style="color: var(--fg-dim); font-size: 0.85em;">Copyright &copy; Alice Linux, 2024-2026</p>
 </div>
 </body>
 </html>