✨ More Catppuccin colours, colour links by default
This commit is contained in:
parent
1b3c6c629e
commit
22cdc634f9
10
TODO.md
10
TODO.md
@ -1,7 +1,7 @@
|
|||||||
# TODO
|
# TODO
|
||||||
|
|
||||||
## Code
|
## Code
|
||||||
- [ ] Temporal API or day.js for dates
|
- [ ] day.js for dates
|
||||||
|
|
||||||
## SSE
|
## SSE
|
||||||
- [x] Correct Sitemap.xml
|
- [x] Correct Sitemap.xml
|
||||||
@ -12,15 +12,18 @@
|
|||||||
- [x] Show current page
|
- [x] Show current page
|
||||||
- [x] Correct bg colour on entire page
|
- [x] Correct bg colour on entire page
|
||||||
- [x] Hamburger menu on mobile
|
- [x] Hamburger menu on mobile
|
||||||
|
- [ ] Dark mode toggle
|
||||||
|
- [ ] Navigate using pathname / breadcrumbs
|
||||||
|
|
||||||
## Accessibility
|
## Accessibility
|
||||||
- [ ] Fix colours on buttons
|
- [x] Fix colours on buttons
|
||||||
- [x] Correct contrast
|
- [x] Correct contrast
|
||||||
- [ ] All interactable elements have labels
|
- [ ] All interactable elements have labels
|
||||||
- [ ] Colour links, also in MDX posts
|
- [x] Colour links, also in MDX posts
|
||||||
|
|
||||||
## ~/
|
## ~/
|
||||||
- [ ] About me description
|
- [ ] About me description
|
||||||
|
- [ ] Latest projects
|
||||||
- [ ] Non-cat image
|
- [ ] Non-cat image
|
||||||
|
|
||||||
## ~/about
|
## ~/about
|
||||||
@ -29,6 +32,7 @@
|
|||||||
## ~/links
|
## ~/links
|
||||||
- [ ] Add Bluesky link
|
- [ ] Add Bluesky link
|
||||||
- [ ] Add MusicBrainz link
|
- [ ] Add MusicBrainz link
|
||||||
|
- [ ] Add Archidekt link
|
||||||
|
|
||||||
## ~/slashes
|
## ~/slashes
|
||||||
- [ ] List of all slashes
|
- [ ] List of all slashes
|
||||||
|
@ -4,8 +4,9 @@ import * as m from "@/paraglide/messages.js"
|
|||||||
// TODO self-host email server
|
// TODO self-host email server
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="max-w-[500px] mx-auto">
|
||||||
<form
|
<form
|
||||||
class="flex flex-col gap-2 max-w-[500px] mx-auto"
|
class="flex flex-col gap-2 w-full"
|
||||||
method="post"
|
method="post"
|
||||||
action="https://formspree.io/f/mknykgbn"
|
action="https://formspree.io/f/mknykgbn"
|
||||||
>
|
>
|
||||||
@ -16,8 +17,15 @@ import * as m from "@/paraglide/messages.js"
|
|||||||
<input name="_gotcha" type="text" class={"hidden"} />
|
<input name="_gotcha" type="text" class={"hidden"} />
|
||||||
<label class="flex flex-col">
|
<label class="flex flex-col">
|
||||||
{m.message()}
|
{m.message()}
|
||||||
<textarea name="message" class="textarea textarea-bordered w-full" required
|
<textarea
|
||||||
></textarea>
|
name="message"
|
||||||
|
class="textarea textarea-bordered w-full bg-cat-base"
|
||||||
|
required></textarea>
|
||||||
</label>
|
</label>
|
||||||
</form>
|
</form>
|
||||||
<button type="submit" class="btn mt-2" title={m.send()}>{m.send()}</button>
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="btn mt-2 bg-cat-base border-cat-surface0"
|
||||||
|
title={m.send()}>{m.send()}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
@ -11,11 +11,15 @@ const giteaLink = `${GIT_URL}/martials/martials.no`
|
|||||||
|
|
||||||
<div class="divider bg-inherit"></div>
|
<div class="divider bg-inherit"></div>
|
||||||
<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>
|
<div>
|
||||||
<GiteaLink href={giteaLink} />
|
<GiteaLink href={giteaLink} class="!text-cat-text" />
|
||||||
<ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
|
<ExternalLink
|
||||||
|
href={STATUS_URL}
|
||||||
|
class="flex items-center !text-cat-text"
|
||||||
|
title="Status"
|
||||||
|
>
|
||||||
<PajamasIcon
|
<PajamasIcon
|
||||||
name="pajamas:status-health"
|
name="pajamas:status-health"
|
||||||
class="w-6 h-6 mr-2"
|
class="w-6 h-6 mr-2"
|
||||||
|
@ -16,10 +16,10 @@ const {
|
|||||||
} = Astro.props
|
} = Astro.props
|
||||||
---
|
---
|
||||||
|
|
||||||
<label class="flex flex-col">
|
<label class="flex flex-col w-full">
|
||||||
{label}
|
{label}
|
||||||
<input
|
<input
|
||||||
class="input input-bordered w-full"
|
class="input input-bordered w-full bg-cat-base"
|
||||||
type={type}
|
type={type}
|
||||||
name={name}
|
name={name}
|
||||||
required={required}
|
required={required}
|
||||||
|
@ -2,14 +2,26 @@
|
|||||||
import LocaleLink from "./links/LocaleLink.astro"
|
import LocaleLink from "./links/LocaleLink.astro"
|
||||||
import { type NavLink, resolvePathname } from "@/utils/linking"
|
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">
|
<div class="join">
|
||||||
<LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item"
|
<LocaleLink
|
||||||
>Norsk</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"
|
<LocaleLink
|
||||||
>English</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>
|
</div>
|
||||||
|
@ -7,6 +7,6 @@ interface Props {
|
|||||||
const { tags } = Astro.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} />)}
|
{tags.map((tag) => <Badge tag={tag} />)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@ import Links from "@/links"
|
|||||||
Links.map(({ to, label }) => (
|
Links.map(({ to, label }) => (
|
||||||
<LocaleLink
|
<LocaleLink
|
||||||
to={to}
|
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()}
|
~/{label()}
|
||||||
</LocaleLink>
|
</LocaleLink>
|
||||||
|
@ -12,7 +12,7 @@ const iconStyle = "w-6 h-6"
|
|||||||
---
|
---
|
||||||
|
|
||||||
<ExternalLink href={url} noStyle>
|
<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">
|
<div class="card-body p-5 flex flex-row items-center">
|
||||||
{
|
{
|
||||||
icon ? (
|
icon ? (
|
||||||
|
@ -19,12 +19,13 @@ const { title, description, tags, image, imageAlt, linkTo } = Astro.props
|
|||||||
|
|
||||||
<LocaleLink
|
<LocaleLink
|
||||||
to={linkTo}
|
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>
|
<figure>
|
||||||
<Image src={image} alt={imageAlt} />
|
<Image src={image} alt={imageAlt} />
|
||||||
|
<figcaption class="sr-only">{imageAlt}</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
<div class="card-body">
|
<div class="card-body text-cat-text">
|
||||||
<h2 class="card-title">
|
<h2 class="card-title">
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</h2>
|
||||||
|
@ -29,7 +29,7 @@ const {
|
|||||||
---
|
---
|
||||||
|
|
||||||
<!--TODO day.js / Temporal API for dates?-->
|
<!--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 class="flex justify-between my-2">
|
||||||
<div>
|
<div>
|
||||||
<h2>{title}</h2>
|
<h2>{title}</h2>
|
||||||
@ -46,7 +46,7 @@ const {
|
|||||||
</div>
|
</div>
|
||||||
<Image src={heroImage} alt={heroImageAlt} class="m-auto" />
|
<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>
|
<p class="my-2">{description}</p>
|
||||||
<Content />
|
<Content />
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
title: "Hjemmeside"
|
title: "Welcome"
|
||||||
description: "Welcome to my homepage / portfolio"
|
description: "Welcome to my homepage / portfolio"
|
||||||
heroImage: "assets/recursive-meme.png"
|
heroImage: "assets/recursive-meme.png"
|
||||||
heroImageAlt: "A recursive meme that says: Self-reference, recursive meme is self-referential"
|
heroImageAlt: "A recursive meme that says: Self-reference, recursive meme is self-referential"
|
||||||
|
@ -9,7 +9,8 @@ interface Props {
|
|||||||
class?: string
|
class?: string
|
||||||
}
|
}
|
||||||
const { title, class: clazz } = Astro.props
|
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>
|
<!doctype html>
|
||||||
|
@ -48,6 +48,6 @@ h3 {
|
|||||||
|
|
||||||
/* TODO change default style*/
|
/* TODO change default style*/
|
||||||
a {
|
a {
|
||||||
@apply link;
|
@apply link text-cat-mauve;
|
||||||
text-decoration-line: none;
|
text-decoration-line: none;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user