Nit consistency and uprez blog images

Author: tedspare

public/images/desert.png

@@ -35,27 +35,27 @@ export default async function Page({ params }: Props) {
 
 	return (
 		<div className="flex min-h-screen flex-col items-center gap-16 p-4 py-32">
-			<div className="flex w-full max-w-5xl flex-col items-start space-y-8">
+			<div className="flex w-full max-w-5xl flex-col items-start space-y-6">
 				<div className="relative h-96 w-full overflow-hidden">
 					<CustomImage
 						src={metadata.bannerImageUrl}
 						alt={metadata.title}
 						className="object-cover object-middle"
 					/>
 				</div>
-				<div className="flex w-full justify-between text-secondary text-sm">
+				<div className="grid w-full grid-cols-3 text-secondary text-sm">
 					<p>{metadata.category}</p>
-					<p>by {metadata.author}</p>
-					<p>{formatDate(metadata.date)}</p>
+					<p className="text-center">by {metadata.author}</p>
+					<p className="text-right">{formatDate(metadata.date)}</p>
 				</div>
 				<article className="mx-auto max-w-full sm:max-w-2xl">
 					<div className="flex flex-col gap-2">
 						<h1>{metadata.title}</h1>
-						{metadata.subtitle ? <h3 className="opacity-80">{metadata.subtitle}</h3> : null}
+						{metadata.subtitle ? <h3 className="text-secondary">{metadata.subtitle}</h3> : null}
 					</div>
 					<Post />
-					<div className="flex items-center justify-center">
-						<Link href="/contact" className="no-underline">
+					<div className="mt-8 flex items-center justify-center">
+						<Link href="/contact">
 							<Button>Get in touch</Button>
 						</Link>
 					</div>

public/images/moon.png

@@ -31,7 +31,7 @@ export const Card = ({
 			<p className="max-w-full pt-4 text-lg">{post.title}</p>
 			<div className="flex items-center gap-4 text-sm">
 				<p>{post.category}</p>
-				<p className="opacity-50">{formatDate(post.date)}</p>
+				<p className="text-secondary">{formatDate(post.date)}</p>
 			</div>
 		</Link>
 	)

public/images/seedling.png

@@ -2,17 +2,19 @@
 
 :root {
 	--primary: black;
-	--secondary: #808080;
+	--secondary: #666;
 	--background: #f5f0ec;
-	--subtle: #e5e5e5;
+	--negative: #222;
+	--subtle: #ddd;
 	--danger: red;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
 		--primary: white;
-		--secondary: #808080;
+		--secondary: #999;
 		--background: black;
+		--negative: #ddd;
 		--subtle: #222;
 		--danger: red;
 	}
@@ -22,6 +24,7 @@
 	--color-primary: var(--primary);
 	--color-background: var(--background);
 	--color-subtle: var(--subtle);
+	--color-negative: var(--negative);
 	--color-secondary: var(--secondary);
 	--color-danger: var(--danger);
 	--radius-custom: 1.75rem;
@@ -45,7 +48,7 @@
 	}
 
 	a:not(:has(button)) {
-		@apply focus:outline-none opacity-90 hover:opacity-100 transition-opacity;
+		@apply focus:outline-none text-secondary hover:text-primary transition-colors;
 	}
 
 	input,
@@ -61,12 +64,19 @@
 		@apply space-y-4;
 	}
 
-	article a {
-		@apply underline underline-offset-4 decoration-dashed hover:decoration-solid;
+	article h1,
+	article h2,
+	article h3 {
+		@apply mt-8;
 	}
 
-	article p {
-		@apply opacity-90;
+	article a:not(:has(button)) {
+		@apply underline underline-offset-3 decoration-1 hover:decoration-4;
+	}
+
+	article p,
+	li {
+		@apply text-secondary;
 	}
 
 	li {
@@ -228,7 +238,7 @@
 
 	.video-controls button {
 		cursor: pointer;
-		opacity: 0.85;
+		opacity: 0.9;
 		transition: opacity 0.2s ease;
 	}
 
@@ -243,19 +253,6 @@
 		z-index: 999;
 	}
 
-	.video-inner-container.is-floating:after {
-		content: "";
-		position: absolute;
-		top: -2px;
-		left: -2px;
-		right: -2px;
-		bottom: -2px;
-		background: black;
-		border-radius: 0.6rem;
-		z-index: -1;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-	}
-
 	.video-inner-container.is-floating video {
 		border-radius: 0.5rem !important;
 		outline: none;
@@ -327,7 +324,7 @@
 	/* Codeblocks */
 
 	code {
-		@apply bg-neutral-100 dark:bg-neutral-900 rounded py-0.5 px-1.5 text-[13px];
+		@apply bg-black/10 dark:bg-white/10 rounded py-0.5 px-1.5 text-[13px];
 	}
 
 	code[data-theme] {

src/app/(rest)/blog/[slug]/page.tsx

@@ -4,7 +4,7 @@ export const metadata = {
   title: "Leveraging AI to create personalized video at scale",
   date: "2023-12-19",
   author: "Sarim Malik",
-  bannerImageUrl: "/images/desert.png",
+  bannerImageUrl: "/images/moon.png",
   category: "AI",
   description: "Rubric Labs worked with Graphite to build Year in Code: a personalized video for developers to showcase their hard work in 2023. Building on the legacy of GitHub Wrapped, we used the latest tools to generate unique videos, fast and at scale, for thousands of developers."
 }

src/app/(rest)/blog/card.tsx

@@ -5,8 +5,8 @@ const variants = {
 		'bg-black/10 dark:bg-subtle dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20 rounded-full',
 	outline:
 		'border-subtle border dark:enabled:hover:border-white/20 enabled:hover:border-black/20 rounded-full',
-	link: 'enabled:hover:opacity-80 focus:ring-0 !p-0',
-	icon: 'focus:ring-0 !p-1 rounded dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20'
+	link: 'text-secondary enabled:hover:text-primary focus:ring-0 !p-0',
+	icon: 'focus:ring-0 !p-1.5 rounded dark:enabled:hover:bg-white/20 enabled:hover:bg-black/20'
 } as const
 
 const sizes = {

src/app/globals.css

@@ -13,7 +13,7 @@ export const CustomImage = ({
 			) : (
 				<img {...props} alt={props.alt || 'Blog image'} className={cn('h-full', props.className)} />
 			)}
-			{props.title ? <span className="text-center text-sm opacity-80">{props.title}</span> : null}
+			{props.title ? <span className="text-center text-secondary text-sm">{props.title}</span> : null}
 		</span>
 	)
 }

src/lib/posts/personalized-video-at-scale.mdx

@@ -25,28 +25,23 @@ export function Nav() {
 	useShortcut('w', () => router.push('/work'))
 
 	return (
-		<nav
-			className={cn(
-				'group fixed top-0 left-0 z-30 flex w-full items-center pt-4 pl-1 sm:justify-between sm:pt-2 sm:pl-4'
-			)}
-		>
+		<nav className={cn('group fixed top-0 left-0 z-30 flex w-full items-start sm:justify-between')}>
 			<div
 				className={cn(
-					'flex h-10 items-center justify-center rounded-full border px-3 transition-all duration-300 sm:px-6',
+					'flex items-center justify-center rounded-br-custom px-4 py-4 transition-all duration-300 sm:px-6',
 					scrollDirection === 'down' ? 'opacity-0' : 'opacity-100',
-					scrollY > 0 ? 'border-subtle bg-background' : 'border-transparent'
+					scrollY > 0 ? 'bg-background' : ''
 				)}
 			>
 				<Link href="/" className="whitespace-nowrap text-xl">
 					Rubric Labs
 				</Link>
 			</div>
-
 			<div
 				className={cn(
-					'flex h-10 items-center gap-6 rounded-full border px-2 transition-all duration-300 sm:px-6',
+					'flex items-center gap-6 rounded-bl-custom px-6 py-4 transition-all duration-300',
 					scrollDirection === 'down' ? 'opacity-0' : 'opacity-100',
-					scrollY > 0 ? 'border-subtle bg-background' : 'border-transparent',
+					scrollY > 0 ? 'bg-background' : '',
 					'invisible sm:visible'
 				)}
 			>

src/ui/button.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 export const Testimonials = () => {
 	return (
 		<div className="w-full max-w-2xl space-y-20 sm:text-justify">
-			<div className="flex flex-col gap-4">
+			<div className="flex flex-col">
 				<p>
 					<span className="text-secondary/50">
 						"Rubric was an absolute pleasure to work with. They were available to meet on short notice and
@@ -15,14 +15,14 @@ export const Testimonials = () => {
 						is impressive. I will definitely be working with the Rubric team again soon."
 					</span>
 				</p>
-				<span className="self-end text-secondary/50">
-					- Daniel Bevan, CTO of{' '}
+				<span className="self-end text-secondary/50 text-xs">
+					Daniel Bevan, CTO of{' '}
 					<Link className="opacity-50" href="/work#Sligo">
 						Sligo
 					</Link>
 				</span>
 			</div>
-			<div className="flex flex-col gap-4">
+			<div className="flex flex-col">
 				<p>
 					<span className="text-secondary/50">
 						"In just a few weeks, Rubric went from initial concepts to delivering an engaging AI video
@@ -34,14 +34,14 @@ export const Testimonials = () => {
 						mile to follow through and iterate with us even after initial handoff."
 					</span>
 				</p>
-				<span className="self-end text-secondary/50">
-					- Merrill Lutsky, Co-Founder of{' '}
+				<span className="self-end text-secondary/50 text-xs">
+					Merrill Lutsky, Co-Founder of{' '}
 					<Link className="opacity-50" href="/work#Graphite">
 						Graphite
 					</Link>
 				</span>
 			</div>
-			<div className="flex flex-col gap-4">
+			<div className="flex flex-col">
 				<p>
 					<span className="text-secondary/50">
 						"Working with Rubric has been like having a CTO in our back pocket. They pair the best in
@@ -53,8 +53,8 @@ export const Testimonials = () => {
 						trusting them with our MVP build and every iteration since was the right choice."
 					</span>
 				</p>
-				<span className="self-end text-secondary/50">
-					- Mitchell White, Founder of{' '}
+				<span className="self-end text-secondary/50 text-xs">
+					Mitchell White, Founder of{' '}
 					<Link className="opacity-50" href="/work#Weave">
 						Weave
 					</Link>