troy/troylusty.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

set max-w-prose on entire site (#30)

Browse source
This commit is contained in:
Troy 2025-01-17 22:16:14 +00:00 • committed by GitHub
parent cf859eda1b
commit 70875623b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 184 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Accordion.astro
View file

@ -16,7 +16,7 @@ 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 text-xl font-semibold text-secondary">
<p class="m-0 text-balance font-semibold text-secondary">
{qualification}
</p>
<span class="transition group-open:rotate-180">
@ -26,7 +26,7 @@ const { institution, qualification, grades, isOpen = false } = Astro.props;
/>
</span>
</summary>
<div class="p-4 text-lg">
<div class="p-4">
<p class="my-0 mb-2 font-semibold text-tertiary">
{institution}
</p>

10
src/components/Article.astro
View file

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

16
src/components/Button.astro Normal file
View file

@ -0,0 +1,16 @@
---
type Props = {
href: String;
link: String;
};
const { href, link } = Astro.props;
---
<a href={`${href}`}>
<div
class="mt-2 flex 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"
>
{link}
</div>
</a>

91
src/components/Footer.astro
View file

@ -4,59 +4,54 @@ import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---
<footer class="mt-auto">
<div class="mx-auto w-full max-w-screen-lg p-4 py-6 lg:py-8">
<div class="md:flex md:justify-between">
<div class="mb-6 text-secondary md:mb-0">
<a class="inline-flex items-center" href="#top" title="Back to top">
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out" />
<div
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block"
>
Troy Lusty
</div>
</a>
</div>
<div class="text-left sm:gap-6 md:text-right">
<div>
<ul class="font-medium text-tertiary">
{
SITE.NAVLINKS.map((i) => (
<li class="mb-4 last:mb-0">
<a
data-navlink
href={i.href}
class="capitalize transition-colors hover:text-secondary"
>
{i.name}
</a>
</li>
))
}
</ul>
<footer class="mx-auto mb-8 mt-auto 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" href="#top" title="Back to top">
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out" />
<div
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block"
>
Troy Lusty
</div>
</div>
</a>
</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"
>&copy; {new Date().getFullYear()}
<a href="/" class="transition-colors hover:text-secondary"
>{SITE.TITLE}</a
>. All Rights Reserved.
</span>
<div class="mt-4 flex gap-5 sm:mt-0 sm:justify-center">
<div class="text-left sm:gap-6 md:text-right">
<ul class="font-medium text-tertiary">
{
SITE.LINKS.map((i) => (
<Link href={i.href}>
<Icon
name={i.icon}
title={i.name}
class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
/>
</Link>
SITE.NAVLINKS.map((i) => (
<li class="mb-1 last:mb-0">
<a
data-navlink
href={i.href}
class="capitalize transition-colors hover:text-secondary"
>
{i.name}
</a>
</li>
))
}
</div>
</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"
>&copy; {new Date().getFullYear()}
<a href="/" class="transition-colors hover:text-secondary">{SITE.TITLE}</a
>. All Rights Reserved.
</span>
<div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
{
SITE.LINKS.map((i) => (
<Link href={i.href}>
<Icon
name={i.icon}
title={i.name}
class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
/>
</Link>
))
}
</div>
</div>
</footer>

2
src/components/Header.astro
View file

@ -3,7 +3,7 @@ import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
---
<header id="header" class="mx-auto w-full max-w-screen-lg p-4">
<header class="mx-auto mb-8 w-full max-w-prose space-y-6">
<div
class="flex h-12 items-center justify-between leading-[0px] text-secondary"
>

4
src/components/Hero.astro
View file

@ -12,10 +12,10 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
<section class="mb-32 overflow-clip">
<h1
class="--translate-y-[480px] animate-logo text-pretty text-8xl font-bold md:text-9xl"
class="--translate-y-full animate-logo text-pretty text-4xl font-bold 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 font-['Borel'] text-7xl font-medium text-transparent md:text-8xl"
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 font-['Borel'] text-3xl font-medium text-transparent md:text-5xl"
>United Kingdom</span
>.
</h1>

2
src/components/Prose.astro
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-lg 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-pre:w-fit prose-pre:max-w-full prose-pre:border prose-pre:border-tertiary prose-pre:bg-primary 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 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-pre:w-fit prose-pre:max-w-full prose-pre:border-2 prose-pre:border-dashed prose-pre:border-tertiary prose-pre:bg-primary 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"
>
<slot />
</div>

4
src/components/RelatedArticles.astro
View file

@ -33,14 +33,14 @@ const next = items[(index + 1) % items.length];
/>
</a>
<a href={`/${prev.collection}/${prev.slug}`}>
<p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
<p class="animate-reveal break-words font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
{prev.data.title}
</p>
</a>
</div>
<div class="group flex w-fit flex-row items-center justify-between gap-2 self-end">
<a href={`/${next.collection}/${next.slug}`}>
<p class="animate-reveal break-words text-xl font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
<p class="animate-reveal break-words font-medium text-tertiary opacity-0 transition-colors duration-300 group-hover:text-accent">
{next.data.title}
</p>
</a>

6
src/components/ShowcasePost.astro
View file

@ -14,10 +14,8 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`}
>
<article class="flex flex-col">
<h3 class="mb-3 text-balance text-xl font-semibold">
<span title="Title" class="text-secondary">{collection.data.title}</span
><span
title="Description"
<h3 class="mb-1 text-balance font-semibold">
<span class="text-secondary">{collection.data.title}</span><span
class="ml-2 text-tertiary transition-colors group-hover:text-accent"
>{collection.data.description}</span
>

2
src/components/ShowcaseProject.astro
View file

@ -27,7 +27,7 @@ const { collection } = Astro.props;
href={`/${collection.collection}/${collection.slug}`}
aria-label={collection.data.title}></a>
<h3
class="z-10 mt-3 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
class="z-10 w-fit text-xl font-semibold text-primary opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:text-secondary"
>
{collection.data.title}
</h3>

2
src/components/Skills.astro
View file

@ -19,7 +19,7 @@ const skills = await Promise.all(
<Icon
name={entry.data.icon}
title={entry.data.title}
class="h-6 w-auto text-tertiary transition-colors group-hover:text-accent"
class="h-5 w-auto text-tertiary transition-colors group-hover:text-accent"
/>
<p class="m-0 cursor-default">{entry.data.title}</p>
</li>

2
src/components/SkinnyCenter.astro
View file

@ -1,5 +1,5 @@
<div
class="mx-auto mb-8 mt-2 max-w-full p-4 pb-16 md:mb-32 md:mt-16 md:max-w-screen-lg md:p-5"
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"
>
<slot />
</div>

17
src/components/Work.astro
View file

@ -1,6 +1,7 @@
---
import { getCollection } from "astro:content";
import { dateRange } from "@lib/utils";
import Button from "./Button.astro";
const collection = (await getCollection("work")).sort(
(a, b) =>
@ -18,23 +19,19 @@ const work = await Promise.all(
<ul class="list-none pl-0">
{
work.map((entry) => (
<li class="pb-8 pl-0 last:pb-0">
<h3 class="mb-1 mt-4 text-balance text-xl font-semibold text-secondary">
<span class="text-tertiary">{entry.data.role} at</span>{" "}
<li class="pb-4 pl-0 last:pb-0">
<h3 class="mb-1 mt-4 text-balance font-semibold text-secondary">
<span class="text-tertiary">{entry.data.role} at</span>
{entry.data.company}
</h3>
<time class="block text-sm text-accent">
<time class="block text-accent">
{dateRange(entry.data.dateStart, entry.data.dateEnd)}
</time>
<article class="mt-4 text-lg text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
<article class="mt-2 text-secondary prose-a:underline prose-a:decoration-tertiary prose-a:decoration-wavy">
<entry.Content />
</article>
{entry.data.article ? (
<a href={entry.data.article}>
<div class="mt-2 flex flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary transition-colors hover:bg-accent">
View project
</div>
</a>
<Button href={entry.data.article} link="View project" />
) : null}
</li>
))

6
src/content/projects/packard/index.mdx
View file

@ -3,11 +3,7 @@ title: "Packard"
description: "A simple RSS aggregator meant to allow you to take a quick glance at what's occurring in topics you care about."
date: 2025-01-12
updated: 2025-01-12
image:
{
url: "packard.avif",
alt: "Packard GitHub v0.0.1 Release",
}
image: { url: "packard.avif", alt: "Packard GitHub v0.0.1 Release" }
tags: ["rust", "rss aggregator"]
categories: ["personal"]
---

6
src/content/work/camouflage-store.md
View file

@ -6,8 +6,4 @@ dateEnd: "Current"
article: "https://troylusty.com/projects/camouflage-store"
---
Setup and ongoing management of an
[online e-commerce store](https://camouflagestore.uk) in addition to creating,
editing, and publishing informational
[YouTube](https://www.youtube.com/@camouflagestoreuk) and social media content
for a family run outdoors store.
Migrating and managing an ecommerce store, in addition to creating informational video content.

11
src/layouts/Layout.astro
View file

@ -2,7 +2,6 @@
import Head from "@components/Head.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import SkinnyCenter from "@components/SkinnyCenter.astro";
import "@styles/global.css";
interface Props {
@ -18,7 +17,7 @@ const { title, description, image, date, updated, tags } = Astro.props;
---
<!doctype html>
<html lang="en" class="overflow-y-scroll scroll-smooth subpixel-antialiased">
<html lang="en" class="scroll-smooth antialiased">
<Head
title={title}
description={description}
@ -28,12 +27,10 @@ const { title, description, image, date, updated, tags } = Astro.props;
tags={tags}
/>
<body class="bg-primary text-secondary">
<div class="flex min-h-screen flex-col justify-start">
<div class="flex min-h-screen flex-col justify-start p-8 pt-0 md:pt-8">
<Header />
<main>
<SkinnyCenter>
<slot />
</SkinnyCenter>
<main class="mx-auto w-full max-w-prose space-y-6">
<slot />
</main>
<Footer />
</div>

18
src/pages/404.astro
View file

@ -1,7 +1,7 @@
---
import Layout from "@layouts/Layout.astro";
import { SITE } from "@consts";
import { Icon } from "astro-icon/components";
import Button from "@components/Button.astro";
---
<Layout title="404" description={SITE.DESCRIPTION}>
@ -11,29 +11,19 @@ import { Icon } from "astro-icon/components";
>
<div>
<h2
class="animate-reveal break-words text-4xl font-semibold opacity-0"
class="animate-reveal break-words text-2xl font-semibold opacity-0"
id="featured-projects"
>
404
</h2>
<h3
class="mt-2 animate-reveal text-xl font-bold opacity-0 [animation-delay:0.1s]"
class="mt-2 animate-reveal font-bold opacity-0 [animation-delay:0.1s]"
>
Content not found
</h3>
</div>
<div class="animate-reveal opacity-0 [animation-delay:0.2s]">
<a
href="/"
class="flex items-center gap-1 rounded bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary"
>
<p>Go back home</p>
<Icon
name="mdi:arrow-u-left-top"
title="Send me an email"
class="h-4 w-auto"
/>
</a>
<Button href="/" link="Go home" />
</div>
</div>
</section>

147
src/pages/cv.astro
View file

@ -6,89 +6,82 @@ import Education from "@components/Education.astro";
import Skills from "@components/Skills.astro";
import { Icon } from "astro-icon/components";
import Link from "@components/Link.astro";
import Prose from "@components/Prose.astro";
---
<Layout title={CV.TITLE} description={CV.DESCRIPTION}>
<div class="mx-auto max-w-full md:max-w-prose">
<section>
<section>
<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">
Troy Lusty
</h1>
<div
class="flex flex-col items-start justify-between gap-6 md:flex-row md:items-center"
class="mt-4 flex flex-col items-start gap-2 text-tertiary md:flex-row"
>
<h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
Troy Lusty
</h1>
<div
class="mt-4 flex flex-col items-start gap-2 text-lg text-tertiary md:flex-row"
>
<div class="flex animate-reveal items-center gap-2 opacity-0">
<div
class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
>
<Icon name="mdi:email" />
<Link href="mailto:hello@troylusty.com">
<p>hello@troylusty.com</p>
</Link>
</div>
<div
class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
>
<Icon name="mdi:web" />
<Link href="/">
<p>troylusty.com</p>
</Link>
</div>
<div class="flex animate-reveal items-center gap-2 opacity-0">
<div
class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
>
<Icon name="mdi:email" />
<Link href="mailto:hello@troylusty.com">
<p>hello@troylusty.com</p>
</Link>
</div>
<div
class="flex flex-row items-center gap-2 text-tertiary transition-colors hover:text-accent"
>
<Icon name="mdi:web" />
<Link href="/">
<p>troylusty.com</p>
</Link>
</div>
</div>
</div>
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.1s]">
<h2 class="mb-16 break-words text-4xl font-semibold capitalize">
About me
</h2>
<p class="mb-8 text-lg">
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.
</p>
<p class="mb-8 text-lg">
In 2019 I began experimenting with Blender after having used various 2D
art applications such as Adobe Photoshop for over 5 years. After making
this change, I realised that I have a huge interest in creating 3D
graphics for video games and TV. At the moment I am working on expanding
my skillset to encompass other areas with a focus on lighting and
rendering techniques in relation to environment art.
</p>
<p class="mb-8 text-lg">
My current portfolio of work can be found on my website at:
<a
class="text-secondary underline decoration-tertiary 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-16 break-words text-4xl font-semibold capitalize">
Education
</h2>
<Education />
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.3s]">
<h2 class="mb-16 break-words text-4xl font-semibold capitalize">
Skills
</h2>
<p class="mb-8 text-lg">
My specific chosen area of focus is design, lighting, and rendering
focusing on 3D environments within software such as Blender and Unreal
Engine. Using either real-time or offline rendering techniques. In
addition to this, I am also very interested in web development.
</p>
<Skills />
</section>
<section class="mt-16 animate-reveal opacity-0 [animation-delay:0.4s]">
<h2 class="mb-16 break-words text-4xl font-semibold capitalize">
Experience
</h2>
<Work />
</section>
</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>
<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.
</p>
<p class="mb-2">
In 2019 I began experimenting with Blender after having used various 2D
art applications such as Adobe Photoshop for over 5 years. After making
this change, I realised that I have a huge interest in creating 3D
graphics for video games and TV. At the moment I am working on expanding
my skillset to encompass other areas with a focus on lighting and
rendering techniques in relation to environment art.
</p>
<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"
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">
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>
<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
Engine. Using either real-time or offline rendering techniques. In
addition to this, I am also very interested in web development.
</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">
Experience
</h2>
<Work />
</section>
</Layout>

22
src/pages/index.astro
View file

@ -5,6 +5,7 @@ import { getCollection } from "astro:content";
import ShowcaseProject from "@components/ShowcaseProject.astro";
import ShowcasePost from "@components/ShowcasePost.astro";
import Hero from "@components/Hero.astro";
import Button from "@components/Button.astro";
const allPosts = await getCollection("posts");
@ -27,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-4xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 group-hover:text-tertiary"
id="featured-projects"
>
Featured projects
@ -35,17 +36,13 @@ const projects = allProjects
</a>
</div>
<ol
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
class="mt-8 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((project) => <ShowcaseProject collection={project} />)}
</ol>
{
allProjects.length > HOME.HOMESETTINGS!.NUM_PROJECTS_ON_HOMEPAGE ? (
<a href="/projects">
<div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent">
View all
</div>
</a>
<Button href="/projects" link="View all" />
) : null
}
</section>
@ -53,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-4xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
class="animate-reveal break-words text-2xl font-semibold capitalize opacity-0 transition-colors duration-500 [animation-delay:0.2s] group-hover:text-tertiary"
id="featured-projects"
>
Recent posts
@ -61,18 +58,13 @@ const projects = allProjects
</a>
</div>
<ol
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
class="mt-8 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.3s]"
>
{posts.map((post) => <ShowcasePost collection={post} />)}
</ol>
{
allPosts.length > HOME.HOMESETTINGS!.NUM_POSTS_ON_HOMEPAGE ? (
<a href="/posts">
{" "}
<div class="mt-8 flex animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-3 py-2 font-medium capitalize text-primary opacity-0 transition-colors duration-300 [animation-delay:0.1s] hover:bg-accent">
View all
</div>
</a>
<Button href="/posts" link="View all" />
) : null
}
</section>

2
src/pages/posts/index.astro
View file

@ -10,7 +10,7 @@ const posts = (await getCollection("posts"))
---
<Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
<h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
<h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
{POSTS.TITLE}
</h1>
<ol

4
src/pages/projects/index.astro
View file

@ -10,11 +10,11 @@ const projects = (await getCollection("projects"))
---
<Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
<h1 class="animate-reveal break-words text-4xl font-semibold opacity-0">
<h1 class="animate-reveal break-words text-2xl font-semibold opacity-0">
{PROJECTS.TITLE}
</h1>
<ol
class="mt-16 grid animate-reveal grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3 md:[&>*:nth-child(4n+2)]:col-span-2 md:[&>*:nth-child(4n+3)]:col-span-2 md:[&>*:only-child]:col-span-3"
class="mt-16 grid animate-reveal grid-cols-1 gap-4 opacity-0 [animation-delay:0.1s] md:grid-cols-2"
>
{projects.map((article: any) => <ShowcaseProject collection={article} />)}
</ol>

8
src/styles/global.css
View file

@ -28,3 +28,11 @@
@apply transition-transform hover:scale-[98%] active:scale-[200%];
}
}
@media print {
body {
margin: 0;
color: #000;
background-color: #fff;
}
}

6
tailwind.config.ts
View file

@ -19,7 +19,7 @@ export default {
},
animation: {
reveal: "reveal 0.3s forwards ease-in-out",
logo: "logo 1s forwards ease-out",
logo: "logo 0.5s forwards ease-out",
"gradient-x": "gradient-x 6s ease infinite",
"gradient-y": "gradient-y 6s ease infinite",
"gradient-xy": "gradient-xy 6s ease infinite",
@ -39,11 +39,11 @@ export default {
},
logo: {
"0%": {
transform: "translateY(480px)",
transform: "translateY(100%)",
color: "hsl(var(--primary))",
},
"100%": {
transform: "translateY(0px)",
transform: "translateY(0%)",
color: "hsl(var(--secondary))",
},
},