add: bg gradient

src/components/CTA.astro

@@ -1,20 +1,24 @@
 ---
+interface Props {
+	color?: string
+	className?: string
+	href?: string
+}
 const { color, className, href } = Astro.props
-if (!color) throw new Error('color is required')
 ---
 
 <a
-	href={href}
+	href={href ?? '/contact'}
 	class:list={[
 		className,
-		'flex flex-row items-center gap-x-3 rounded-full border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md'
+		'inline-flex flex-row items-center gap-x-3 rounded-full border border-input px-4 py-2 text-sm shadow-sm transition-all hover:shadow-md'
 	]}
 >
 	<span class='relative flex items-center justify-center'>
 		<span
-			class=`absolute inline-flex h-2 w-2 animate-ping rounded-full border border-${color}-400 bg-blue-400 opacity-75`
+			class=`absolute inline-flex size-2 animate-ping rounded-full border border-${color}-400 bg-blue-400 opacity-75`
 		></span>
-		<span class=`relative inline-flex h-2 w-2 rounded-full bg-${color}-400`></span>
+		<span class=`relative inline-flex size-2 rounded-full bg-${color ?? 'blue'}-400`></span>
 	</span>
 	<p class='font-medium'>
 		<slot />

src/components/LightboxPortal.astro

@@ -67,7 +67,7 @@
 		pointer-events: none;
 		cursor: zoom-out;
 		// TODO: map color to API
-		background-color: var(--bg-color, hsl(0, 0%, 0%, 0.85));
+		background-color: hsl(var(--background) / 0.9);
 		opacity: 0;
 		transition: opacity 0.35s;
 

src/components/ProjectCard.astro

@@ -10,7 +10,7 @@ const {
 	subheading,
 	imagePath,
 	altText,
-	loading,
+	loading = 'lazy',
 	mediaTransitionName
 } = Astro.props
 
@@ -25,7 +25,7 @@ if (!images[imagePath])
 <Tag
 	class:list={[
 		className,
-		'flex flex-col gap-y-1 rounded-2xl border border-border bg-primary-foreground bg-gradient-to-b from-secondary shadow-sm',
+		'flex flex-col gap-y-1 rounded-2xl border border-border bg-primary-foreground/50 bg-gradient-to-b from-secondary/50 shadow-sm',
 		href && 'transition-all hover:border-foreground/25 hover:shadow-sm'
 	]}
 	href={href}

src/components/SearchBox.astro

@@ -11,9 +11,9 @@ const q = Astro.url.searchParams.get('q') ?? ''
 		data-open-modal
 		disabled
 		aria-label='search'
-		class='m-auto h-8 w-8 rounded-md border border-border transition-all hover:bg-border'
+		class='m-auto size-8 rounded-md border border-border transition-all hover:bg-border'
 	>
-		<Icon name='heroicons:magnifying-glass' class='m-auto h-6 w-6' />
+		<Icon name='heroicons:magnifying-glass' class='m-auto size-6' />
 	</button>
 	<dialog
 		aria-label='search'

src/components/ThemeToggle.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components'
 ---
 
 <theme-toggle class='ms-2 sm:ms-4'>
-	<button class='relative h-8 w-8 rounded-md border border-border transition-all hover:bg-border'>
+	<button class='relative size-8 rounded-md border border-border transition-all hover:bg-border'>
 		<span class='sr-only'>Dark Theme</span>
 		<Icon
 			name='heroicons:sun'

src/components/ToolSection.astro

@@ -43,7 +43,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
 							alt={tool.name}
 							width='64'
 							height='64'
-							class='z-20 h-10 w-10 rounded-lg bg-muted p-1'
+							class='z-20 size-10 rounded-lg bg-muted p-1'
 						/>
 						<div class='z-20 flex flex-col'>
 							<h3 class='font-medium'>{tool.name}</h3>

src/components/blog/Hero.astro

@@ -48,7 +48,7 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 {
 	!!data.tags?.length && (
 		<div class='mt-3 flex flex-row items-center gap-x-1'>
-			<Icon name='heroicons:tag' class='h-6 w-6' />
+			<Icon name='heroicons:tag' class='size-6' />
 			{data.tags.map((tag, i) => (
 				<div>
 					<a

src/components/blog/webmentions/Comments.astro

@@ -42,7 +42,7 @@ const comments = mentions.filter(
 								>
 									<Image
 										alt={mention.author?.name}
-										class='my-0 h-12 w-12'
+										class='my-0 size-12'
 										height={48}
 										src={mention.author?.photo}
 										width={48}
@@ -51,7 +51,7 @@ const comments = mentions.filter(
 							) : (
 								<Image
 									alt={mention.author?.name}
-									class='my-0 h-12 w-12 rounded-full'
+									class='my-0 size-12 rounded-full'
 									height={48}
 									src={mention.author?.photo}
 									width={48}
@@ -71,7 +71,7 @@ const comments = mentions.filter(
 									<span class='hidden' id='cmt-source'>
 										Vist the source of this webmention
 									</span>
-									<Icon name='heroicons:arrow-top-right-on-square' class='h-5 w-5' />
+									<Icon name='heroicons:arrow-top-right-on-square' class='size-5' />
 								</a>
 							</div>
 							<p class='mb-0 mt-1 break-words [word-break:break-word]'>{mention.content?.text}</p>

src/components/blog/webmentions/Likes.astro

@@ -36,7 +36,7 @@ const likesToShow = likes
 							>
 								<Image
 									alt={like.author!.name}
-									class='my-0 inline-block h-12 w-12'
+									class='my-0 inline-block size-12'
 									height={48}
 									src={like.author!.photo}
 									width={48}

src/components/layout/Footer.astro

@@ -14,7 +14,7 @@ const { showViewCount = false } = Astro.props
 			<div class='flex gap-x-4 text-sm'>
 				<p class='text-muted-foreground'>&copy;{new Date().getFullYear()} {siteConfig.author}</p>
 			</div>
-			<div class='sm:absolute sm:left-1/2 sm:-translate-x-1/2'>
+			<div class='sm:absolute sm:start-1/2 sm:-translate-x-1/2'>
 				{showViewCount && <ViewCount />}
 			</div>
 			<div class='flex items-center justify-between'>
@@ -27,7 +27,7 @@ const { showViewCount = false } = Astro.props
 						href='https://snapchat.com/t/uMm9JFth'
 						target='_blank'
 					>
-						<Icon name='fa6-brands:snapchat' class='h-5 w-5 flex-shrink-0' />
+						<Icon name='fa6-brands:snapchat' class='size-5 flex-shrink-0' />
 					</a>
 					<!-- Instagram -->
 					<a
@@ -36,7 +36,7 @@ const { showViewCount = false } = Astro.props
 						href='https://www.instagram.com/michaelpayne02/'
 						target='_blank'
 					>
-						<Icon name='fa6-brands:instagram' class='h-5 w-5 flex-shrink-0' />
+						<Icon name='fa6-brands:instagram' class='size-5 flex-shrink-0' />
 					</a>
 					<!-- GitHub -->
 					<a
@@ -46,7 +46,7 @@ const { showViewCount = false } = Astro.props
 						href='https://github.com/michaelpayne02'
 						target='_blank'
 					>
-						<Icon name='fa6-brands:github' class='h-5 w-5 flex-shrink-0' />
+						<Icon name='fa6-brands:github' class='size-5 flex-shrink-0' />
 					</a>
 					<!-- Linkedin -->
 					<a
@@ -55,7 +55,7 @@ const { showViewCount = false } = Astro.props
 						target='_blank'
 						href='https://www.linkedin.com/in/michaelpayne02/'
 					>
-						<Icon name='fa6-brands:linkedin' class='h-5 w-5 flex-shrink-0' />
+						<Icon name='fa6-brands:linkedin' class='size-5 flex-shrink-0' />
 					</a>
 					<!-- Email -->
 					<a
@@ -65,7 +65,7 @@ const { showViewCount = false } = Astro.props
 						target='_blank'
 						href='mailto:michael@payne.cx'
 					>
-						<Icon name='heroicons:envelope' class='h-5 w-5 flex-shrink-0' />
+						<Icon name='heroicons:envelope' class='size-5 flex-shrink-0' />
 					</a>
 				</div>
 				<!-- End Social Brands -->

src/components/layout/Header.astro

@@ -33,7 +33,6 @@ const url = new URL(Astro.request.url)
 	</div>
 </header>
 <script>
-	// Resize the drawing surface if the window resizes
 	function getCurrentTheme() {
 		return localStorage.getItem('theme')
 	}

src/layouts/Base.astro

@@ -26,6 +26,9 @@ const {
 	</head>
 
 	<body class='flex justify-center bg-background'>
+		<div class='absolute -z-10 h-screen w-full overflow-hidden'>
+			<div id='gradient' class='absolute start-1/2 size-[35rem] -translate-x-1/2'></div>
+		</div>
 		<ThemeProvider />
 		<SkipLink />
 		<main
@@ -35,5 +38,14 @@ const {
 			<slot />
 			<Footer showViewCount={showViewCount} />
 		</main>
+		<style>
+			#gradient {
+				background: radial-gradient(
+					circle at top,
+					hsl(var(--primary-foreground)) 0%,
+					transparent 40%
+				);
+			}
+		</style>
 	</body>
 </html>

src/layouts/BlogPost.astro

@@ -28,7 +28,7 @@ const { headings } = await project.render()
 	<LightBox />
 	<div class='w-full'>
 		<Button transition:persist='back' title='Back' href='/projects' style='button'>
-			<Icon slot='icon-before' name='heroicons:arrow-left' class='h-4 w-4' />
+			<Icon slot='icon-before' name='heroicons:arrow-left' class='size-4' />
 		</Button>
 		<div class='mt-8 gap-x-10 lg:flex lg:items-start'>
 			{!!headings.length && <TOC headings={headings} />}
@@ -45,11 +45,11 @@ const { headings } = await project.render()
 		</div>
 		<button
 			aria-label='Back to Top'
-			class='z-90 fixed bottom-8 end-4 flex h-8 w-8 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-primary-foreground text-3xl opacity-0 transition-all duration-300 hover:border-border/75 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 sm:end-8 sm:h-12 sm:w-12'
+			class='z-90 fixed bottom-8 end-4 flex size-8 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-primary-foreground text-3xl opacity-0 transition-all duration-300 hover:border-border/75 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 sm:end-8 sm:h-12 sm:w-12'
 			data-show='false'
 			id='to-top-btn'
 		>
-			<Icon name='heroicons:chevron-up' class='h-4 w-4' />
+			<Icon name='heroicons:chevron-up' class='size-4' />
 		</button>
 	</div>
 </PageLayout>

src/pages/404.astro

@@ -15,11 +15,11 @@ const meta = {
 <PageLayout meta={meta}>
 	<div class='px-4 py-10 text-center sm:px-6 lg:px-8'>
 		<h1 class='block font-mono text-7xl font-bold sm:text-9xl'>404</h1>
-		<p class='mt-3 text-muted-foreground'>how could this happen</p>
-		<p class=''>couldn't find that page</p>
+		<p class='mt-3 text-muted-foreground'>How could this happen</p>
+		<p>We couldn't find that page</p>
 		<Button title='Back to home' href='/' style='button' class='mt-5'>
 			<Icon slot='icon-before' name='heroicons:arrow-left' />
 		</Button>
 	</div>
-	<CTA href='/contact' color='blue'>Contact</CTA>
+	<CTA>Contact</CTA>
 </PageLayout>

src/pages/contact/index.astro

@@ -97,7 +97,7 @@ const meta = {
 			</label>
 			{errors.message && <p class='text-red-500'>{errors.message}</p>}
 			<button
-				class='border-borde rounded-lg border border-border bg-secondary px-4 py-2 transition-all hover:bg-input'
+				class='rounded-lg border-border bg-secondary px-4 py-2 transition-all hover:bg-input'
 				type='submit'>Submit</button
 			>
 		</form>