✨ 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/ContactMeForm.astro

@@ -12,12 +12,12 @@ import * as m from "@/paraglide/messages.js"
   <Input label={m.name()} type="text" name="name" required />
   <Input label={m.subject()} name="subject" required />
   <Input label={m.email()} name="_replyto" />
-  <input name="_gotcha" type="text" class={"hidden"} />
   {/*Honeypot spam filter*/}
+  <input name="_gotcha" type="text" class={"hidden"} />
   <label class="flex flex-col">
     {m.message()}
-    <textarea name="message" class="textarea textarea-bordered" required
+    <textarea name="message" class="textarea textarea-bordered w-full" required
     ></textarea>
   </label>
-  <button type="submit">{m.send()}</button>
 </form>
+<button type="submit" class="btn mt-2" title={m.send()}>{m.send()}</button>

src/components/Footer.astro

@@ -9,8 +9,10 @@ import * as m from "@/paraglide/messages"
 const giteaLink = `${GIT_URL}/martials/martials.no`
 ---
 
-<div class="divider"></div>
-<div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
+<div class="divider bg-inherit"></div>
+<div
+  class="py-5 flex flex-row gap-1 justify-around w-full items-center bg-inherit"
+>
   <div>
     <GiteaLink href={giteaLink} />
     <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">

src/components/Greeting.astro

@@ -7,7 +7,7 @@ import "@/styles/global.css"
 
 <div class="flex items-center justify-around flex-wrap">
   <div class="m-5">
-    <h1 class="sm:text-7xl font-bold">
+    <h1>
       {m.hiIm()}
       <br />
       Martin Berg Alstad

src/components/Input.astro

@@ -19,7 +19,7 @@ const {
 <label class="flex flex-col">
   {label}
   <input
-    class="input input-bordered"
+    class="input input-bordered w-full"
     type={type}
     name={name}
     required={required}

src/components/Navbar.astro

@@ -1,14 +0,0 @@
----
-import LocaleLink from "./links/LocaleLink.astro"
-import Links from "@/links"
----
-
-<div class="flex justify-end">
-  {
-    Links.map(({ to, label }) => (
-      <LocaleLink to={to} class="m-2 hover:underline">
-        {label()}
-      </LocaleLink>
-    ))
-  }
-</div>

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>

src/components/UsesPage.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  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: CollectionEntry<"uses">[]
-  }
-
-  const { uses }: Props = $props()
-
-  const hardwareOptions = uses.map((item) => ({
-    key: item.id,
-    value: item.data.title,
-  }))
-
-  let selectedHardwareKey = $state(uses[0].id)
-  let selectedHardware = $derived(
-    uses.find((item) => item.id === selectedHardwareKey)!,
-  )
-  // TODO set url query param to selected hardware
-</script>
-
-<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
-  <h1 class="text-center">{m.uses()}</h1>
-  <div>
-    <Select
-      options={hardwareOptions}
-      bind:selected={selectedHardwareKey}
-      class="mx-auto w-max"
-    />
-  </div>
-  <br />
-
-  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
-  <div class="my-2"></div>
-  {#if selectedHardware.data.accessories}
-    <CollapseList
-      items={selectedHardware.data.accessories}
-      title={m.accessories()}
-    />
-  {/if}
-</div>

src/components/header/Header.astro

@@ -0,0 +1,7 @@
+---
+import Navbar from "./Navbar.astro"
+---
+
+<div class="m-auto">
+  <Navbar />
+</div>

src/components/header/Navbar.astro

@@ -0,0 +1,17 @@
+---
+import LocaleLink from "@/components/links/LocaleLink.astro"
+import Links from "@/links"
+---
+
+<div class="flex justify-end">
+  {
+    Links.map(({ to, label }) => (
+      <LocaleLink
+        to={to}
+        class={"m-2 hover:text-cat-mauve font-bold font-mono"}
+      >
+        ~/{label()}
+      </LocaleLink>
+    ))
+  }
+</div>

src/components/myLinks/LinksPage.astro

@@ -2,10 +2,8 @@
 import links from "./myLinks"
 import LinkCard from "./LinkCard.astro"
 import "@/styles/global.css"
-import * as m from "@/paraglide/messages"
 ---
 
-<h1 class="text-center">{m.myLinks()}</h1>
 <div class="flex flex-col mx-auto w-fit gap-5">
   {
     links.map((link) => (

src/components/projects/MyProjectsPage.astro

@@ -13,7 +13,6 @@ const { projects } = Astro.props
 const baseUrl: NavLink = "/projects"
 ---
 
-<h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
 <div class="flex flex-wrap justify-around">
   {
     projects.map(