✨ More Catppuccin colours, colour links by default

TODO.md

@@ -1,7 +1,7 @@
 # TODO
 
 ## Code
-- [ ] Temporal API or day.js for dates
+- [ ] day.js for dates
 
 ## SSE
 - [x] Correct Sitemap.xml
@@ -12,15 +12,18 @@
 - [x] Show current page
 - [x] Correct bg colour on entire page
 - [x] Hamburger menu on mobile
+- [ ] Dark mode toggle
+- [ ] Navigate using pathname / breadcrumbs
 
 ## Accessibility
-- [ ] Fix colours on buttons
+- [x] Fix colours on buttons
 - [x] Correct contrast
 - [ ] All interactable elements have labels
-- [ ] Colour links, also in MDX posts
+- [x] Colour links, also in MDX posts
 
 ## ~/
 - [ ] About me description
+- [ ] Latest projects
 - [ ] Non-cat image
 
 ## ~/about
@@ -29,6 +32,7 @@
 ## ~/links
 - [ ] Add Bluesky link
 - [ ] Add MusicBrainz link
+- [ ] Add Archidekt link
 
 ## ~/slashes
 - [ ] List of all slashes

src/components/ContactMeForm.astro

@@ -4,20 +4,28 @@ import * as m from "@/paraglide/messages.js"
 // TODO self-host email server
 ---
 
-<form
-  class="flex flex-col gap-2 max-w-[500px] mx-auto"
-  method="post"
-  action="https://formspree.io/f/mknykgbn"
->
-  <Input label={m.name()} type="text" name="name" required />
-  <Input label={m.subject()} name="subject" required />
-  <Input label={m.email()} name="_replyto" />
-  {/*Honeypot spam filter*/}
-  <input name="_gotcha" type="text" class={"hidden"} />
-  <label class="flex flex-col">
-    {m.message()}
-    <textarea name="message" class="textarea textarea-bordered w-full" required
-    ></textarea>
-  </label>
-</form>
-<button type="submit" class="btn mt-2" title={m.send()}>{m.send()}</button>
+<div class="max-w-[500px] mx-auto">
+  <form
+    class="flex flex-col gap-2 w-full"
+    method="post"
+    action="https://formspree.io/f/mknykgbn"
+  >
+    <Input label={m.name()} type="text" name="name" required />
+    <Input label={m.subject()} name="subject" required />
+    <Input label={m.email()} name="_replyto" />
+    {/*Honeypot spam filter*/}
+    <input name="_gotcha" type="text" class={"hidden"} />
+    <label class="flex flex-col">
+      {m.message()}
+      <textarea
+        name="message"
+        class="textarea textarea-bordered w-full bg-cat-base"
+        required></textarea>
+    </label>
+  </form>
+  <button
+    type="submit"
+    class="btn mt-2 bg-cat-base border-cat-surface0"
+    title={m.send()}>{m.send()}</button
+  >
+</div>

src/components/Footer.astro

@@ -11,11 +11,15 @@ const giteaLink = `${GIT_URL}/martials/martials.no`
 
 <div class="divider bg-inherit"></div>
 <div
-  class="py-5 flex flex-row gap-1 justify-around w-full items-center bg-inherit"
+  class="max-w-[1000px] sm:min-w-[500px] mx-auto py-5 flex flex-row flex-wrap gap-5 justify-around items-center bg-inherit px-5"
 >
   <div>
-    <GiteaLink href={giteaLink} />
-    <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
+    <GiteaLink href={giteaLink} class="!text-cat-text" />
+    <ExternalLink
+      href={STATUS_URL}
+      class="flex items-center !text-cat-text"
+      title="Status"
+    >
       <PajamasIcon
         name="pajamas:status-health"
         class="w-6 h-6 mr-2"

src/components/Input.astro

@@ -16,10 +16,10 @@ const {
 } = Astro.props
 ---
 
-<label class="flex flex-col">
+<label class="flex flex-col w-full">
   {label}
   <input
-    class="input input-bordered w-full"
+    class="input input-bordered w-full bg-cat-base"
     type={type}
     name={name}
     required={required}

src/components/LanguageButtonGroup.astro

@@ -2,14 +2,26 @@
 import LocaleLink from "./links/LocaleLink.astro"
 import { type NavLink, resolvePathname } from "@/utils/linking"
 
-const currentPath = resolvePathname(Astro.url.pathname)
+const pathname = Astro.url.pathname
+const currentPath = resolvePathname(pathname)
+const isEnglish = pathname.startsWith("/en")
 ---
 
 <div class="join">
-  <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item"
-    >Norsk</LocaleLink
+  <LocaleLink
+    to={currentPath as NavLink}
+    lang="nb"
+    class:list={[
+      "btn join-item !text-cat-text border-cat-surface0",
+      !isEnglish ? "bg-cat-mantle" : "bg-cat-base",
+    ]}>Norsk</LocaleLink
   >
-  <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item"
-    >English</LocaleLink
+  <LocaleLink
+    to={currentPath as NavLink}
+    lang="en"
+    class:list={[
+      "btn join-item !text-cat-text border-cat-surface0",
+      isEnglish ? "bg-cat-mantle" : "bg-cat-base",
+    ]}>English</LocaleLink
   >
 </div>

src/components/badge/BadgeList.astro

@@ -7,6 +7,6 @@ interface Props {
 const { tags } = Astro.props
 ---
 
-<div class="flex flex-wrap gap-1">
+<div class="flex flex-wrap gap-1 py-0.5">
   {tags.map((tag) => <Badge tag={tag} />)}
 </div>

src/components/header/Navbar.astro

@@ -8,7 +8,7 @@ import Links from "@/links"
     Links.map(({ to, label }) => (
       <LocaleLink
         to={to}
-        class={"m-2 hover:text-cat-mauve font-bold font-mono"}
+        class={"m-2 not-hover:!text-cat-text font-bold font-mono"}
       >
         ~/{label()}
       </LocaleLink>

src/components/myLinks/LinkCard.astro

@@ -12,7 +12,7 @@ const iconStyle = "w-6 h-6"
 ---
 
 <ExternalLink href={url} noStyle>
-  <div class:list={["card bg-base-300", clazz]}>
+  <div class:list={["card bg-cat-mantle text-cat-text", clazz]}>
     <div class="card-body p-5 flex flex-row items-center">
       {
         icon ? (

src/components/projects/ProjectCard.astro

@@ -19,12 +19,13 @@ const { title, description, tags, image, imageAlt, linkTo } = Astro.props
 
 <LocaleLink
   to={linkTo}
-  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition"
+  class="card bg-cat-base max-w-96 shadow-xl hover:scale-105 transition border border-cat-surface0"
 >
   <figure>
     <Image src={image} alt={imageAlt} />
+    <figcaption class="sr-only">{imageAlt}</figcaption>
   </figure>
-  <div class="card-body">
+  <div class="card-body text-cat-text">
     <h2 class="card-title">
       {title}
     </h2>

src/components/projects/ProjectPage.astro

@@ -29,7 +29,7 @@ const {
 ---
 
 <!--TODO day.js / Temporal API for dates?-->
-<Layout title={title} class="mx-auto max-w-[750px] px-3">
+<Layout title={title} class="mx-auto max-w-[750px]">
   <div class="flex justify-between my-2">
     <div>
       <h2>{title}</h2>
@@ -46,7 +46,7 @@ const {
   </div>
   <Image src={heroImage} alt={heroImageAlt} class="m-auto" />
 
-  <GiteaLink href={source} class="text-cat-mauve my-2" />
+  <GiteaLink href={source} class="my-2" />
 
   <p class="my-2">{description}</p>
   <Content />

src/content/projects/homepage.mdx

@@ -1,5 +1,5 @@
 ---
-title: "Hjemmeside"
+title: "Welcome"
 description: "Welcome to my homepage / portfolio"
 heroImage: "assets/recursive-meme.png"
 heroImageAlt: "A recursive meme that says: Self-reference, recursive meme is self-referential"

src/layouts/Layout.astro

@@ -9,7 +9,8 @@ interface Props {
   class?: string
 }
 const { title, class: clazz } = Astro.props
-const mainClass = "grow max-w-[1000px] m-auto sm:min-w-[500px]"
+const mainClass =
+  "grow max-w-[1000px] m-auto sm:min-w-[500px] not-sm:w-full px-5"
 ---
 
 <!doctype html>

src/styles/global.css

@@ -48,6 +48,6 @@ h3 {
 
 /* TODO change default style*/
 a {
-    @apply link;
+    @apply link text-cat-mauve;
     text-decoration-line: none;
 }