✨ Update general style

- Smaller width of page
- Center navbar
- Fonts
- Catppuccin Mocha colours
- TODO.md
- Show all uses at the same time
- and more...

src/components/UsesPage.astro

@@ -0,0 +1,31 @@
+---
+import Select from "./Select.svelte"
+import * as m from "@/paraglide/messages"
+import CollapseList from "@/components/collapse/CollapseList.svelte"
+import type { CollectionEntry } from "astro:content"
+
+interface Props {
+  uses: ReadonlyArray<CollectionEntry<"uses">>
+}
+
+const { uses } = Astro.props
+// TODO set url anchor to selected hardware
+---
+
+<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
+  {
+    uses.map((hardware) => (
+      <div class="my-5">
+        <h3>{hardware.data.title}</h3>
+        <CollapseList items={hardware.data.hardware} title={m.hardware()} />
+        <div class="my-2" />
+        {hardware.data.accessories && (
+          <CollapseList
+            items={hardware.data.accessories}
+            title={m.accessories()}
+          />
+        )}
+      </div>
+    ))
+  }
+</div>