website: add status badges and category pills

Add a content-before partial that renders a colored status badge
(wishlist=blue, in-progress=yellow, completed=green) and clickable
category pills at the top of each feature page. Completed items also
show their commit SHA.

Update _custom.scss with the badge, pill, and typography styles.
Slightly widen the sidebar and TOC in _variables.scss.

Signed-off-by: Christian Brauner <brauner@kernel.org>

Author: brauner

website/assets/_custom.scss

@@ -1,5 +1,73 @@
-nav>ul:last-of-type>li:last-child::before {
-  content: "⸻";
+// Status badges
+.status-badge {
   display: inline-block;
-  margin: 0.5em 0;
+  padding: 0.15em 0.6em;
+  font-size: 0.8em;
+  font-weight: 600;
+  border-radius: 4px;
+  margin-bottom: 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.status-in-progress {
+  background-color: #fff3cd;
+  color: #856404;
+}
+
+.status-wishlist {
+  background-color: #d1ecf1;
+  color: #0c5460;
+}
+
+.status-completed {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+// Category pills
+.category-pills {
+  margin-bottom: 1em;
+}
+
+.category-pill {
+  display: inline-block;
+  padding: 0.1em 0.5em;
+  font-size: 0.75em;
+  border-radius: 3px;
+  margin-right: 0.3em;
+  margin-bottom: 0.3em;
+  background-color: var(--gray-100);
+  color: var(--gray-500);
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--gray-200);
+    text-decoration: none;
+  }
+}
+
+// Separator before the last menu item
+.book-menu nav > ul > li:last-child {
+  border-top: 1px solid var(--gray-200);
+  padding-top: 0.5em;
+  margin-top: 0.5em;
+}
+
+// Typography refinements
+.book-page {
+  line-height: 1.7;
+}
+
+.markdown h1 {
+  margin-top: 0;
+}
+
+// Commit reference styling
+.commit-ref {
+  font-family: monospace;
+  font-size: 0.85em;
+  background-color: var(--gray-100);
+  padding: 0.15em 0.4em;
+  border-radius: 3px;
 }

website/assets/_variables.scss

@@ -1,5 +1,4 @@
 $body-min-width: 20rem;
 $container-max-width: 110rem;
-
-$menu-width: 15rem;
-$toc-width: 15rem;
+$menu-width: 16rem;
+$toc-width: 16rem;

website/layouts/partials/docs/inject/content-before.html

@@ -0,0 +1,19 @@
+{{ with .Params.status }}
+  {{ $label := . }}
+  {{ if eq . "in-progress" }}{{ $label = "In Progress" }}{{ end }}
+  {{ if eq . "wishlist" }}{{ $label = "Wishlist" }}{{ end }}
+  {{ if eq . "completed" }}{{ $label = "Completed" }}{{ end }}
+  <span class="status-badge status-{{ . }}">{{ $label }}</span>
+{{ end }}
+
+{{ with .Params.categories }}
+  <div class="category-pills">
+    {{ range . }}
+      <a class="category-pill" href='{{ "/categories/" | relURL }}{{ . | urlize }}/'>{{ . }}</a>
+    {{ end }}
+  </div>
+{{ end }}
+
+{{ with .Params.commit }}
+  <p><span class="commit-ref">{{ . }}</span></p>
+{{ end }}