Styling updates

barvian · Dec 23, 2024 · 4ebeb5d · 4ebeb5d
1 parent 5775a71
commit 4ebeb5d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/site/src/assets/main.css b/site/src/assets/main.css
@@ -46,7 +46,7 @@
 	}
 
 	.btn-callout {
-		@apply hover:bg-zinc-850 bg-zinc-900 text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900 hover:dark:bg-white;
+		@apply btn-primary dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white dark:hover:brightness-100;
 	}
 
 	.btn-secondary {

diff --git a/site/src/components/AnimationsOnTheWeb.astro b/site/src/components/AnimationsOnTheWeb.astro
@@ -5,13 +5,13 @@ import { ArrowUpRight } from 'lucide-react'
 ---
 
 <aside class="border-faint my-16 border-y py-8">
-	<h2 class="not-prose text-lg font-medium">Learn to build components like NumberFlow</h2>
-	<blockquote class="text-pretty not-italic">
+	<h2 class="m-0 text-lg font-medium">Learn to build components like NumberFlow</h2>
+	<blockquote class="text-pretty not-italic text-[unset] [font-weight:unset]">
 		<!-- prettier-ignore -->
 		<p>Emil Kowalski's Animations on the Web course taught me everything I know about UI animation. I can't
 			imagine having built NumberFlow without it.</p>
 	</blockquote>
-	<p class="not-prose text-muted mb-6 flex items-center gap-2 text-sm">
+	<p class="not-prose text-muted -mt-1 mb-6 flex items-center gap-2 text-sm">
 		<Image
 			src={headshot}
 			alt="Headshot of Maxwell Barvian"

diff --git a/site/tailwind.config.ts b/site/tailwind.config.ts
@@ -128,6 +128,10 @@ export default {
 							'margin-top': '1.25em'
 						},
 
+						blockquote: {
+							'@apply border-faint': {}
+						},
+
 						'[role=alert]': {
 							'@apply my-[1.25em]': {}
 						},