add: bg gradient

michaelpayne02 · May 10, 2024 · 9a6c0b9 · 9a6c0b9
1 parent 0381073
commit 9a6c0b9
Show file tree

Hide file tree

Showing 19 changed files with 64 additions and 71 deletions.
diff --git a/src/components/CTA.astro b/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 />

diff --git a/src/components/LightboxPortal.astro b/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;
 

diff --git a/src/components/SearchBox.astro b/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'

diff --git a/src/components/ThemeToggle.astro b/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'

diff --git a/src/components/ToolSection.astro b/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>

diff --git a/src/components/blog/Hero.astro b/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

diff --git a/src/components/blog/webmentions/Comments.astro b/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>

diff --git a/src/components/blog/webmentions/Likes.astro b/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}

diff --git a/src/components/layout/Footer.astro b/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 -->

diff --git a/src/components/layout/Header.astro b/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')
 	}

diff --git a/src/layouts/Base.astro b/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>
diff --git a/src/layouts/BlogPost.astro b/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>

diff --git a/src/pages/404.astro b/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>
diff --git a/src/pages/contact/index.astro b/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>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -31,29 +31,29 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
 				width={128}
 				src={profilepic}
 				alt='profile'
-				class='h-32 w-32 rounded-full p-2'
+				class='min-w-32 rounded-full p-2'
 				loading='eager'
 			/>
 			<div class='flex flex-col items-center gap-y-4'>
 				<h1 class='font-sans text-3xl font-bold'>what's up</h1>
-				<CTA href='/contact' color='blue'>Contact</CTA>
+				<CTA>Contact</CTA>
 				<div class='flex flex-wrap justify-center gap-x-7 gap-y-3'>
 					<Label title='Overland Park, KS'>
-						<Icon slot='icon' name='heroicons:map-pin' class='h-5 w-5' />
+						<Icon slot='icon' name='heroicons:map-pin' class='size-5' />
 					</Label>
 					<Label title='21'>
-						<Icon slot='icon' name='heroicons:cake' class='h-5 w-5' />
+						<Icon slot='icon' name='heroicons:cake' class='size-5' />
 					</Label>
 					<Label
 						title='LinkedIn'
 						as='a'
 						href='https://www.linkedin.com/in/michaelpayne02/'
 						target='_blank'
 					>
-						<Icon slot='icon' name='fa6-brands:linkedin' class='h-5 w-5 text-foreground/75' />
+						<Icon slot='icon' name='fa6-brands:linkedin' class='size-5 text-foreground/75' />
 					</Label>
 					<Label as='a' title='Resume' href='/MichaelPayne_Resume_2024.pdf' target='_blank'>
-						<Icon slot='icon' name='heroicons:arrow-down-tray' class='h-5 w-5 text-foreground/75' />
+						<Icon slot='icon' name='heroicons:arrow-down-tray' class='size-5 text-foreground/75' />
 					</Label>
 				</div>
 			</div>
@@ -179,9 +179,9 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
 					<a
 						href='https://www.unldu.org'
 						target='_blank'
-						class='relative mx-auto my-2 inline-flex w-min items-center rounded-lg bg-foreground/90 px-4 py-2 font-bold text-background hover:bg-foreground/70'
+						class='relative mx-auto my-2 inline-flex items-center rounded-lg bg-foreground/90 px-4 py-2 font-bold text-background hover:bg-foreground/80'
 					>
-						<Icon name='heroicons:arrow-top-right-on-square' class='mr-2 h-4 w-4' />
+						<Icon name='heroicons:arrow-top-right-on-square' class='mr-2 size-4' />
 						<span class='mr-3'> unldu.org </span>
 						<span
 							class='absolute -right-5 -top-2 inline-flex items-center justify-center rounded-full bg-red-600 px-2 py-1 text-xs font-bold leading-none text-white'
@@ -210,5 +210,5 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
 			)
 		}
 	</div>
-	<CTA href='/contact' color='blue' className='mt-16'>Contact</CTA>
+	<CTA className='mt-16'>Contact</CTA>
 </PageLayout>
diff --git a/src/pages/projects/[...page].astro b/src/pages/projects/[...page].astro
@@ -49,7 +49,7 @@ const paginationProps = {
 <PageLayout meta={meta}>
 	<div class='w-full'>
 		<Button transition:persist='back' title='Back' href='/' 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>
 
 		<h1 class='mb-6 mt-5 text-2xl font-bold'>Projects</h1>
@@ -69,7 +69,7 @@ const paginationProps = {
 					{!!uniqueTags.length && (
 						<aside>
 							<h2 class='mb-4 flex items-center text-lg font-semibold'>
-								<Icon name='heroicons:tag' class='h-6 w-6' />
+								<Icon name='heroicons:tag' class='size-6' />
 								Tags
 							</h2>
 							<ul class='text-bgColor flex flex-wrap gap-2'>
@@ -86,7 +86,7 @@ const paginationProps = {
 									href='/tags/'
 									data-astro-prefetch
 								>
-									View all <Icon name='heroicons:arrow-right' class='mx-1 h-4 w-4' />
+									View all <Icon name='heroicons:arrow-right' class='mx-1 size-4' />
 								</a>
 							</span>
 						</aside>
@@ -95,5 +95,5 @@ const paginationProps = {
 			)
 		}
 	</div>
-	<CTA href='/contact' color='blue' className='mt-16'>Contact</CTA>
+	<CTA className='mx-auto mt-16'>Contact</CTA>
 </PageLayout>
diff --git a/src/pages/tags/[tag]/[...page].astro b/src/pages/tags/[tag]/[...page].astro
@@ -9,6 +9,7 @@ import PostPreview from '@/components/blog/PostPreview.astro'
 import { getAllPosts, getUniqueTags, sortMDByDate } from '@/data/project'
 import PageLayout from '@/layouts/Base.astro'
 import { Icon } from 'astro-icon/components'
+import CTA from '@/components/CTA.astro'
 
 export const getStaticPaths: GetStaticPaths = async ({ paginate }) => {
 	const allPosts = await getAllPosts()
@@ -55,7 +56,7 @@ const paginationProps = {
 <PageLayout meta={meta}>
 	<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>
 		<h1 class='mb-6 mt-5 flex items-end gap-x-2 text-2xl font-bold'>
 			Tags:
@@ -67,18 +68,6 @@ const paginationProps = {
 			</ul>
 			<Pagination {...paginationProps} />
 		</section>
-		<a
-			href='mailto:michael@payne.cx'
-			class='mt-16 inline-flex flex-row items-center gap-x-3 rounded-3xl 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-blue-400 bg-blue-400 opacity-75'
-				></span>
-				<span class='relative inline-flex h-2 w-2 rounded-full bg-blue-400'></span>
-			</span>
-
-			<p class='font-medium'>Connect</p>
-		</a>
+		<CTA className='mt-16'>Contact</CTA>
 	</div>
 </PageLayout>