diff --git a/astro.config.ts b/astro.config.ts
index 1eb7f9f..b03b105 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -2,13 +2,16 @@ import { defineConfig, passthroughImageService } from "astro/config";
import sitemap from "@astrojs/sitemap";
import rehypeExternalLinks from "rehype-external-links";
import mdx from "@astrojs/mdx";
-import tailwind from "@astrojs/tailwind";
+import tailwindcss from "@tailwindcss/vite";
import icon from "astro-icon";
// https://astro.build/config
export default defineConfig({
site: "https://troylusty.com",
- integrations: [sitemap(), mdx(), tailwind(), icon()],
+ integrations: [sitemap(), mdx(), icon()],
+ vite: {
+ plugins: [tailwindcss()],
+ },
output: "static",
markdown: {
rehypePlugins: [
diff --git a/bun.lockb b/bun.lockb
index a3bac85..b4cd955 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index b943b07..d55029d 100644
--- a/package.json
+++ b/package.json
@@ -12,22 +12,23 @@
},
"dependencies": {
"@astrojs/check": "0.9.4",
- "@astrojs/mdx": "^4.0.6",
+ "@astrojs/mdx": "^4.0.7",
"@astrojs/rss": "^4.0.11",
"@astrojs/sitemap": "3.2.1",
- "@astrojs/tailwind": "^5.1.4",
+ "@astrojs/tailwind": "^5.1.5",
"@fontsource-variable/outfit": "^5.1.1",
"@fontsource-variable/red-hat-mono": "^5.1.1",
"@fontsource/borel": "^5.1.1",
- "astro": "^5.1.7",
+ "@tailwindcss/vite": "^4.0.0",
+ "astro": "^5.1.8",
"astro-icon": "^1.1.5",
"rehype-external-links": "^3.0.0",
- "tailwindcss": "^3.4.17",
+ "tailwindcss": "^4.0.0",
"typescript": "^5.7.3"
},
"devDependencies": {
- "@iconify-json/mdi": "^1.2.2",
- "@iconify-json/simple-icons": "^1.2.20",
+ "@iconify-json/mdi": "^1.2.3",
+ "@iconify-json/simple-icons": "^1.2.21",
"@tailwindcss/typography": "^0.5.16",
"@types/node": "^22.10.7",
"prettier": "^3.4.2",
diff --git a/src/components/Accordion.astro b/src/components/Accordion.astro
index bfee392..61d727e 100644
--- a/src/components/Accordion.astro
+++ b/src/components/Accordion.astro
@@ -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">
diff --git a/src/components/Article.astro b/src/components/Article.astro
index 6a611b6..e2338d9 100644
--- a/src/components/Article.astro
+++ b/src/components/Article.astro
@@ -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>
diff --git a/src/components/Button.astro b/src/components/Button.astro
index aa1c22f..122acd0 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -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>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 54cf814..c61d77e 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -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>
@@ -35,9 +39,9 @@ import { Icon } from "astro-icon/components";
</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"
+ <span class="text-tertiary text-sm sm:text-center"
>© {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>
))
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 3bd1dd6..91a7221 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -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>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 69bc294..b81aa84 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -12,7 +12,7 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
<section class="mb-32 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"
diff --git a/src/components/Prose.astro b/src/components/Prose.astro
index 2f1ccdc..506359f 100644
--- a/src/components/Prose.astro
+++ b/src/components/Prose.astro
@@ -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>
diff --git a/src/components/RelatedArticles.astro b/src/components/RelatedArticles.astro
index b99fa4c..d8ae7aa 100644
--- a/src/components/RelatedArticles.astro
+++ b/src/components/RelatedArticles.astro
@@ -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
}
diff --git a/src/components/ShowcasePost.astro b/src/components/ShowcasePost.astro
index a1b61f2..b8d8d42 100644
--- a/src/components/ShowcasePost.astro
+++ b/src/components/ShowcasePost.astro
@@ -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>
diff --git a/src/components/ShowcaseProject.astro b/src/components/ShowcaseProject.astro
index 4b88db7..6e79387 100644
--- a/src/components/ShowcaseProject.astro
+++ b/src/components/ShowcaseProject.astro
@@ -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 ? (
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index c076912..6f3ed87 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -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>
diff --git a/src/components/SkinnyCenter.astro b/src/components/SkinnyCenter.astro
index 5eea84b..1f0ae0c 100644
--- a/src/components/SkinnyCenter.astro
+++ b/src/components/SkinnyCenter.astro
@@ -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>
diff --git a/src/components/Work.astro b/src/components/Work.astro
index 895a89e..16c924d 100644
--- a/src/components/Work.astro
+++ b/src/components/Work.astro
@@ -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 ? (
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index fcd5914..15eea60 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -27,7 +27,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
tags={tags}
/>
<body
- class="flex min-h-screen flex-col justify-start bg-primary p-8 pt-0 text-secondary md:pt-8"
+ class="bg-primary text-secondary flex min-h-screen flex-col justify-start p-8 pt-0 md:pt-8"
>
<Header />
<main
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 9c83232..964b0d2 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -11,13 +11,13 @@ import Button from "@components/Button.astro";
>
<div>
<h2
- class="animate-reveal break-words text-2xl font-semibold opacity-0"
+ class="animate-reveal text-2xl font-semibold break-words opacity-0"
id="featured-projects"
>
404
</h2>
<h3
- class="mt-2 animate-reveal font-bold opacity-0 [animation-delay:0.1s]"
+ class="animate-reveal mt-2 font-bold opacity-0 [animation-delay:0.1s]"
>
Content not found
</h3>
diff --git a/src/pages/cv.astro b/src/pages/cv.astro
index dd8a90b..0205f1b 100644
--- a/src/pages/cv.astro
+++ b/src/pages/cv.astro
@@ -13,15 +13,15 @@ import Link from "@components/Link.astro";
<div
class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
>
- <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
+ <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
Troy Lusty
</h1>
<div
- class="mt-4 flex flex-col items-start gap-2 text-tertiary md:flex-row"
+ class="text-tertiary mt-4 flex flex-col items-start gap-2 md:flex-row"
>
- <div class="flex animate-reveal items-center gap-2 opacity-0">
+ <div class="animate-reveal flex items-center gap-2 opacity-0">
<div
- class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
+ class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
>
<Icon name="mdi:email" />
<Link href="mailto:hello@troylusty.com">
@@ -29,7 +29,7 @@ import Link from "@components/Link.astro";
</Link>
</div>
<div
- class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
+ class="text-tertiary hover:text-accent flex flex-row items-center gap-2 transition-colors"
>
<Icon name="mdi:web" />
<Link href="/">
@@ -40,8 +40,8 @@ import Link from "@components/Link.astro";
</div>
</div>
</section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
- <h2 class="mb-4 break-words text-2xl font-semibold capitalize">About me</h2>
+ <section class="animate-reveal mt-16 opacity-0 [animation-delay:0.1s]">
+ <h2 class="mb-4 text-2xl font-semibold break-words capitalize">About me</h2>
<p class="mb-2">
Hi, my name is Troy and I’m a student 3D artist studying on a BA (Hons)
Game Arts and Design course in the UK.
@@ -57,19 +57,19 @@ import Link from "@components/Link.astro";
<p class="mb-2">
My current portfolio of work can be found on my website at:
<a
- class="text-secondary underline decoration-tertiary decoration-wavy"
+ class="text-secondary decoration-tertiary underline decoration-wavy"
href="/projects">troylusty.com/projects</a
>.
</p>
</section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.2s]">
- <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
+ <section class="animate-reveal mt-16 opacity-0 [animation-delay:0.2s]">
+ <h2 class="mb-4 text-2xl font-semibold break-words capitalize">
Education
</h2>
<Education />
</section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
- <h2 class="mb-4 break-words text-2xl font-semibold capitalize">Skills</h2>
+ <section class="animate-reveal mt-16 opacity-0 [animation-delay:0.3s]">
+ <h2 class="mb-4 text-2xl font-semibold break-words capitalize">Skills</h2>
<p class="mb-2">
My specific chosen area of focus is design, lighting, and rendering
focusing on 3D environments within software such as Blender and Unreal
@@ -78,8 +78,8 @@ import Link from "@components/Link.astro";
</p>
<Skills />
</section>
- <section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
- <h2 class="mb-4 break-words text-2xl font-semibold capitalize">
+ <section class="animate-reveal mt-16 opacity-0 [animation-delay:0.4s]">
+ <h2 class="mb-4 text-2xl font-semibold break-words capitalize">
Experience
</h2>
<Work />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6894f1c..e61295e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -28,7 +28,7 @@ const projects = allProjects
<div class="group flex w-fit flex-row items-center justify-between gap-6">
<a href="/projects">
<h2
- class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
+ class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500"
id="featured-projects"
>
Featured projects
@@ -36,7 +36,7 @@ const projects = allProjects
</a>
</div>
<ol
- class="mt-8 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
+ class="animate-reveal mt-8 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((project) => <ShowcaseProject collection={project} />)}
</ol>
@@ -50,7 +50,7 @@ const projects = allProjects
<div class="group flex w-fit flex-row items-center justify-between gap-6">
<a href="/posts">
<h2
- class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
+ class="animate-reveal group-hover:text-tertiary text-2xl font-semibold break-words capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s]"
id="featured-projects"
>
Recent posts
@@ -58,7 +58,7 @@ const projects = allProjects
</a>
</div>
<ol
- class="mt-8 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
+ class="animate-reveal mt-8 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
>
{posts.map((post) => <ShowcasePost collection={post} />)}
</ol>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 5737ed4..8e1f828 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -10,11 +10,11 @@ const posts = (await getCollection("posts"))
---
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
- <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
+ <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{POSTS.TITLE}
</h1>
<ol
- class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
+ class="animate-reveal mt-16 grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
>
{posts.map((article: any) => <ShowcasePost collection={article} />)}
</ol>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 2238093..953f773 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -10,11 +10,11 @@ const projects = (await getCollection("projects"))
---
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
- <h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
+ <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
{PROJECTS.TITLE}
</h1>
<ol
- class="mt-16 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
+ class="animate-reveal mt-16 grid grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>
diff --git a/src/styles/global.css b/src/styles/global.css
index d9e9532..0e9b70e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,9 +2,23 @@
@import "@fontsource-variable/outfit";
@import "@fontsource/borel";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+@config "../../tailwind.config.ts";
+
+@theme {
+ --font-display: "Satoshi", "sans-serif";
+ --breakpoint-3xl: 1920px;
+ --color-avocado-100: oklch(0.99 0 0);
+ --color-avocado-200: oklch(0.98 0.04 113.22);
+ --color-avocado-300: oklch(0.94 0.11 115.03);
+ --color-avocado-400: oklch(0.92 0.19 114.08);
+ --color-avocado-500: oklch(0.84 0.18 117.33);
+ --color-avocado-600: oklch(0.53 0.12 118.34);
+ --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+ --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+ /* ... */
+}
@layer base {
:root {