upgrade to tailwind v4.0 (#33)

* begin switching to tailwind v4

* remove old tw config file

* convert colors back to hex

* move all content out of tw config

* fixed colors

* better match colors

* remove abnormally large margins
This commit is contained in:
Troy 2025-01-23 18:48:20 +00:00 committed by GitHub
parent fffc8cb13e
commit 90ef859c50
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 178 additions and 182 deletions

View file

@ -16,18 +16,18 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
<summary
class="flex cursor-pointer items-center justify-between py-3 font-bold"
>
<p class="m-0 text-balance font-semibold text-secondary">
<p class="text-secondary m-0 font-semibold text-balance">
{qualification}
</p>
<span class="transition group-open:rotate-180">
<Icon
name="mdi:chevron-down"
class="h-6 w-auto text-secondary transition-colors group-open:text-tertiary"
class="text-secondary group-open:text-tertiary h-6 w-auto transition-colors"
/>
</span>
</summary>
<div class="p-4">
<p class="my-0 mb-2 font-semibold text-tertiary">
<p class="text-tertiary my-0 mb-2 font-semibold">
{institution}
</p>
<ol class="list-inside list-disc">

View file

@ -30,14 +30,14 @@ const listFormatter = new Intl.ListFormat("en-GB", {
>
<div class="mx-auto mb-8">
<h1
class="animate-reveal break-words text-start text-2xl font-semibold opacity-0"
class="animate-reveal text-start text-2xl font-semibold break-words opacity-0"
>
<span class="text-secondary">{article.data.title}</span><span
class="ml-2 text-tertiary">{article.data.description}</span
class="text-tertiary ml-2">{article.data.description}</span
>
</h1>
<div
class="mt-4 flex animate-reveal flex-col flex-wrap items-start gap-2 text-tertiary opacity-0 [animation-delay:0.1s] md:flex-row"
class="animate-reveal text-tertiary mt-4 flex flex-col flex-wrap items-start gap-2 opacity-0 [animation-delay:0.1s] md:flex-row"
>
<div class="flex items-center gap-2">
<Icon name="mdi:calendar" />
@ -79,7 +79,7 @@ const listFormatter = new Intl.ListFormat("en-GB", {
}
</div>
</div>
<div class="mx-auto animate-reveal opacity-0 [animation-delay:0.2s]">
<div class="animate-reveal mx-auto opacity-0 [animation-delay:0.2s]">
<Prose>
<Content />
</Prose>

View file

@ -9,7 +9,7 @@ const { href, link } = Astro.props;
<a href={`${href}`}>
<div
class="m-4 flex w-fit animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent text-center text-nowrap"
class="animate-reveal bg-tertiary text-primary hover:bg-accent m-4 flex w-fit flex-row items-center gap-1 justify-self-center rounded-full px-2 py-1 text-center text-sm font-medium text-nowrap capitalize opacity-0 transition-colors [animation-delay:0.1s]"
>
{link}
</div>

View file

@ -4,27 +4,31 @@ import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---
<footer class="mx-auto mb-8 mt-auto w-full max-w-prose space-y-6 pt-12">
<footer class="mx-auto mt-auto mb-8 w-full max-w-prose space-y-6 pt-12">
<div class="md:flex md:justify-between">
<div class="mb-6 text-secondary md:mb-0">
<a class="inline-flex items-center group" href="#top" title="Back to top">
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out transition-colors duration-500 group-hover:text-tertiary" />
<div class="text-secondary mb-6 md:mb-0">
<a class="group inline-flex items-center" href="#top" title="Back to top">
<Icon
name="icon"
title={SITE.TITLE}
class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
/>
<div
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block transition-colors duration-500 group-hover:text-tertiary"
class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
>
Troy Lusty
</div>
</a>
</div>
<div class="text-left sm:gap-6 md:text-right">
<ul class="font-medium text-tertiary">
<ul class="text-tertiary font-medium">
{
SITE.NAVLINKS.map((i) => (
<li class="mb-1 last:mb-0">
<a
data-navlink
href={i.href}
class="capitalize transition-colors hover:text-secondary"
class="hover:text-secondary capitalize transition-colors"
>
{i.name}
</a>
@ -34,10 +38,10 @@ import { Icon } from "astro-icon/components";
</ul>
</div>
</div>
<div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
<span class="text-sm text-tertiary sm:text-center"
<div class="sm:flex sm:items-center sm:justify-between">
<span class="text-tertiary text-sm sm:text-center"
>&copy; {new Date().getFullYear()}
<a href="/" class="transition-colors hover:text-secondary">{SITE.TITLE}</a
<a href="/" class="hover:text-secondary transition-colors">{SITE.TITLE}</a
>. All Rights Reserved.
</span>
<div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
@ -47,7 +51,7 @@ import { Icon } from "astro-icon/components";
<Icon
name={i.icon}
title={i.name}
class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
class="text-tertiary hover:text-secondary h-5 w-5 transition-colors"
/>
</Link>
))

View file

@ -5,12 +5,16 @@ import { Icon } from "astro-icon/components";
<header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
<div
class="flex h-12 items-center justify-between leading-[0px] text-secondary group"
class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
>
<a class="inline-flex items-center" href="/" title={SITE.TITLE}>
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out group-hover:text-tertiary transition-colors duration-500" />
<Icon
name="icon"
title={SITE.TITLE}
class="group-hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
/>
<div
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block group-hover:text-tertiary transition-colors duration-500"
class="group-hover:text-tertiary ml-2 hidden flex-none text-sm font-bold capitalize transition-colors duration-500 md:visible lg:block"
>
Troy Lusty
</div>

View file

@ -10,12 +10,12 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
crossorigin="anonymous"
/>
<section class="mb-32 overflow-clip">
<section class="mt-6 overflow-clip">
<h1
class="--translate-y-full animate-logo text-pretty text-4xl font-bold md:text-6xl"
class="--translate-y-full animate-logo text-4xl font-bold text-pretty md:text-6xl"
>
Digital designer based in the <span
class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl font-bold text-transparent md:text-5xl"
class="animate-gradient-x bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% bg-clip-text px-1 font-['Borel'] text-3xl text-transparent md:text-5xl"
>United Kingdom</span
>.
</h1>

View file

@ -1,5 +1,5 @@
<div
class="prose max-w-full prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded"
class="prose prose-headings:text-secondary prose-h1:text-xl prose-h1:font-bold prose-p:max-w-full prose-p:text-pretty prose-p:break-words prose-p:text-secondary prose-a:text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy prose-blockquote:border-secondary prose-strong:text-secondary prose-code:whitespace-pre-wrap prose-code:font-medium prose-code:text-secondary prose-code:before:content-none prose-code:after:content-none prose-li:text-secondary prose-li:marker:text-secondary prose-img:max-h-[90vh] prose-img:w-auto prose-img:max-w-full prose-img:rounded prose-video:max-h-[90vh] prose-video:w-auto prose-video:max-w-full prose-video:rounded max-w-full"
>
<slot />
</div>

View file

@ -19,15 +19,15 @@ const next = items[(index + 1) % items.length];
{
items.length > 1 ? (
<div class="mx-auto mt-8 flex max-w-prose md:flex-row justify-between gap-4 md:gap-0 flex-col-reverse">
<Button
href={`/${prev.collection}/${prev.slug}`}
link={`Previous: ${prev.data.title}`}
/>
<Button
href={`/${next.collection}/${next.slug}`}
link={`Next: ${next.data.title}`}
/>
<div class="mx-auto mt-8 flex max-w-prose flex-col-reverse justify-between gap-4 md:flex-row md:gap-0">
<Button
href={`/${prev.collection}/${prev.slug}`}
link={`Previous: ${prev.data.title}`}
/>
<Button
href={`/${next.collection}/${next.slug}`}
link={`Next: ${next.data.title}`}
/>
</div>
) : null
}

View file

@ -10,17 +10,17 @@ const { collection } = Astro.props;
<li>
<a
class="group bg-none hover:bg-tertiary/30"
class="group hover:bg-tertiary/30 bg-none"
href={`/${collection.collection}/${collection.slug}`}
>
<article class="flex flex-col">
<h3 class="mb-1 text-balance font-semibold">
<h3 class="mb-1 font-semibold text-balance">
<span class="text-secondary">{collection.data.title}</span><span
class="ml-2 text-tertiary transition-colors group-hover:text-accent"
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
>{collection.data.description}</span
>
</h3>
<time class="block text-sm text-accent"
<time class="text-accent block text-sm"
><FormattedDate date={collection.data.date} /></time
>
</article>

View file

@ -11,7 +11,7 @@ const { collection } = Astro.props;
<li>
<article
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pb-8 pt-40"
class="group relative isolate mx-auto flex h-full w-full flex-col justify-end overflow-hidden rounded px-8 pt-40 pb-8"
>
<Image
src={collection.data.image.url}
@ -27,12 +27,12 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`}
aria-label={collection.data.title}></a>
<h3
class="z-10 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
class="text-primary dark:text-secondary z-10 w-fit text-xl font-semibold opacity-0 transition-opacity duration-300 group-hover:opacity-100"
>
{collection.data.title}
</h3>
<div
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
class="text-accent z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
>
{
collection.data.collection ? (

View file

@ -15,10 +15,10 @@ const skills = await Promise.all(
<ul class="flex max-w-full list-none flex-wrap gap-4 px-0">
{
skills.map((entry) => (
<li class="group flex items-center gap-2 rounded border border-tertiary p-2 text-tertiary transition-colors hover:border-accent hover:text-accent">
<li class="group border-tertiary text-tertiary hover:border-accent hover:text-accent flex items-center gap-2 rounded border p-2 transition-colors">
<Icon
name={entry.data.icon}
class="h-5 w-auto text-tertiary transition-colors group-hover:text-accent"
class="text-tertiary group-hover:text-accent h-5 w-auto transition-colors"
/>
<p class="m-0 cursor-default">{entry.data.title}</p>
</li>

View file

@ -1,5 +1,5 @@
<div
class="mx-auto mb-8 mt-2 w-full max-w-[60ch] p-4 pb-16 md:mb-32 md:mt-16 md:p-5"
class="mx-auto mt-2 mb-8 w-full max-w-[60ch] p-4 pb-16 md:mt-16 md:mb-32 md:p-5"
>
<slot />
</div>

View file

@ -20,14 +20,14 @@ const work = await Promise.all(
{
work.map((entry) => (
<li class="pb-4 pl-0 last:pb-0">
<h3 class="mb-1 mt-4 text-balance font-semibold text-secondary">
<h3 class="text-secondary mt-4 mb-1 font-semibold text-balance">
<span class="text-tertiary">{entry.data.role} at</span>
{entry.data.company}
</h3>
<time class="block text-accent">
<time class="text-accent block">
{dateRange(entry.data.dateStart, entry.data.dateEnd)}
</time>
<article class="mt-2 text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
<article class="text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy mt-2">
<entry.Content />
</article>
{entry.data.article ? (