Add categories for docs template

web-app/template-styles/docs-styles.css

@@ -0,0 +1,58 @@
+.container {
+  margin-inline: auto;
+  inline-size: min(100% - var(--space-m), 75ch);
+}
+
+nav {
+  position: sticky;
+  block-size: var(--space-xl);
+  display: flex;
+  align-items: center;
+  inset-block-start: 0;
+  background-color: var(--bg-primary);
+  border-block-end: var(--border-primary);
+}
+
+nav > .container {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+}
+
+header > .container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+}
+
+nav,
+header,
+main,
+footer {
+  padding-block: var(--space-s);
+}
+
+section {
+  scroll-margin-block-start: var(--space-xl);
+}
+
+label[for="toggle-sidebar"] {
+  display: inline-grid;
+  place-content: center;
+}
+
+@media (min-width: 1525px) {
+  #table-of-contents {
+    position: fixed;
+    inset-inline-start: calc(50% + 37.5ch + var(--space-m));
+    inset-block-start: calc(var(--space-xl) + var(--space-s));
+    max-inline-size: 35ch;
+    padding: var(--space-s);
+    background-color: var(--bg-primary);
+    border: var(--border-primary);
+  }
+
+  #table-of-contents + section {
+    margin-block-start: 0;
+  }
+}