set max-w-prose on entire site (#30)
This commit is contained in:
GitHub
parent
cf859eda1b
commit
70875623b1
23 changed files with 184 additions and 208 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
16
src/components/Button.astro
Normal 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>
|
||||
|
|
@ -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"
|
||||
>© {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"
|
||||
>© {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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue