marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: polish blog landing and cards

Browse Source
This commit is contained in:
OpenCode Worker
2026-06-03 11:06:03 -05:00
parent 755a65d9a6
commit 72f2e88673
5 changed files with 130 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/globals.css
View File

@@ -48,6 +48,7 @@
/* Shadows */
--shadow-card: 0 1px 3px oklch(0 0 0 / 0.08);
--shadow-card-hover: 0 20px 45px -32px oklch(0 0 0 / 0.35), 0 1px 3px oklch(0 0 0 / 0.08);
/* Animations */
--animate-fade-in: fade-in 0.3s ease-out;
@@ -125,6 +126,48 @@
--color-code-copy-hover: oklch(0.85 0 0);
--shadow-card: 0 1px 4px oklch(1 0 0 / 0.06);
--shadow-card-hover: 0 22px 50px -34px oklch(1 0 0 / 0.22), 0 1px 4px oklch(1 0 0 / 0.08);
}
/* === Editorial list surfaces === */
.editorial-hero {
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--color-accent) 10%, transparent), transparent 34%),
linear-gradient(135deg, color-mix(in oklch, var(--color-surface) 88%, var(--color-canvas)), var(--color-canvas));
}
.editorial-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.35;
background-image: radial-gradient(color-mix(in oklch, var(--color-ink) 18%, transparent) 0.5px, transparent 0.5px);
background-size: 12px 12px;
mask-image: linear-gradient(135deg, black, transparent 78%);
}
.dark .editorial-hero {
background:
radial-gradient(circle at 20% 10%, color-mix(in oklch, var(--color-accent) 14%, transparent), transparent 36%),
linear-gradient(135deg, color-mix(in oklch, var(--color-surface) 82%, var(--color-canvas)), var(--color-canvas));
}
.dark .editorial-hero::after {
opacity: 0.22;
}
.empty-state {
display: grid;
gap: 0.75rem;
border: 1px dashed color-mix(in oklch, var(--color-border) 78%, var(--color-ink) 22%);
border-radius: 1.25rem;
background: color-mix(in oklch, var(--color-surface) 55%, transparent);
padding: 2rem;
}
/* === Code Blocks: Borderless, VS Code Style, Line Numbers === */

45
app/page.tsx
View File

@@ -7,14 +7,45 @@ export default async function HomePage() {
return (
<Template>
<main className="max-w-4xl mx-auto px-6 py-12">
<header className="mb-16 text-center">
<main className="mx-auto max-w-5xl px-6 py-10 sm:py-14">
<header className="editorial-hero mb-14 rounded-[2rem] border border-border px-6 py-12 shadow-card sm:px-10 sm:py-16">
<div className="relative z-10 max-w-3xl">
<p className="mb-4 font-mono text-xs uppercase tracking-[0.28em] text-ink-soft">
Minimal static journal
</p>
<h1 className="heading-xl mb-5 max-w-2xl text-ink sm:text-5xl">
Quiet notes on design, code, and the web.
</h1>
<p className="max-w-2xl text-base leading-7 text-ink-soft sm:text-lg">
A small, fast blog for thoughtful essays, implementation notes, and experiments in readable interfaces.
</p>
</div>
</header>
<section>
<h1 className="heading-xl text-ink mb-8">
Latest
</h1>
<PostList posts={posts} />
<section aria-labelledby="latest-heading" className="space-y-7">
<div className="flex flex-col gap-2 border-b border-border pb-5 sm:flex-row sm:items-end sm:justify-between">
<div>
<p className="mb-2 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Latest</p>
<h2 id="latest-heading" className="heading-lg m-0 text-ink">
Recent writing
</h2>
</div>
<p className="max-w-md text-sm leading-6 text-ink-soft">
Fresh posts appear here as soon as they are published.
</p>
</div>
{posts.length > 0 ? (
<PostList posts={posts} />
) : (
<div className="empty-state">
<p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
<h3 className="heading-sm m-0 text-ink">The notebook is ready.</h3>
<p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
Add your first MDX post and it will show up here with the same polished card treatment.
</p>
</div>
)}
</section>
</main>
</Template>

27
app/posts/page.tsx
View File

@@ -9,11 +9,28 @@ export default async function PostsPage() {
return (
<Template>
<main className="max-w-4xl mx-auto px-6 py-16">
<h1 className="heading-xl text-ink mt-0 mb-12">
Posts
</h1>
<PostSearch posts={posts} />
<main className="mx-auto max-w-5xl px-6 py-12 sm:py-16">
<header className="mb-10 border-b border-border pb-8">
<p className="mb-3 font-mono text-xs uppercase tracking-[0.24em] text-ink-soft">Archive</p>
<h1 className="heading-xl m-0 text-ink">
Posts
</h1>
<p className="mt-4 max-w-2xl text-sm leading-6 text-ink-soft sm:text-base">
Browse every essay, note, and experiment in one place. Search and tag filters stay local and fast.
</p>
</header>
{posts.length > 0 ? (
<PostSearch posts={posts} />
) : (
<section className="empty-state" aria-label="No posts published">
<p className="font-mono text-xs uppercase tracking-[0.22em] text-ink-soft">No posts yet</p>
<h2 className="heading-sm m-0 text-ink">The archive is empty.</h2>
<p className="m-0 max-w-xl text-sm leading-6 text-ink-soft">
Publish an MDX post to populate this list and enable archive search.
</p>
</section>
)}
</main>
</Template>
)

29
components/blog/PostCard.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import Link from 'next/link';
import { m } from 'motion/react';
import { m, useReducedMotion } from 'motion/react';
import type { PostMeta } from '@/lib/posts';
const tagToClientSlug = (tag: string): string =>
@@ -17,43 +17,46 @@ const tagToClientSlug = (tag: string): string =>
.replace(/^-|-$/g, '');
export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0, coverImage }: PostMeta & { index?: number }) {
const shouldReduceMotion = useReducedMotion();
return (
<m.article
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.07 }}
viewport={{ once: true }}
className="group relative scroll-mt-20 rounded-xl border border-border bg-canvas p-6 transition-all hover:border-border/80 hover:shadow-card"
initial={shouldReduceMotion ? false : { opacity: 0, y: 14 }}
whileInView={shouldReduceMotion ? undefined : { opacity: 1, y: 0 }}
whileHover={shouldReduceMotion ? undefined : { y: -2 }}
transition={{ duration: 0.35, delay: shouldReduceMotion ? 0 : Math.min(index * 0.04, 0.18), ease: [0.22, 1, 0.36, 1] }}
viewport={{ once: true, amount: 0.2 }}
className="group relative scroll-mt-20 rounded-2xl border border-border/90 bg-canvas p-5 shadow-card transition-[background-color,border-color,box-shadow] duration-200 ease-out hover:border-ink/25 hover:bg-surface/40 hover:shadow-card-hover dark:hover:border-ink/35 sm:p-7"
>
<Link href={`/posts/${slug}/`} className="block">
{coverImage && (
<div className="mb-4 overflow-hidden rounded-lg">
<div className="mb-5 overflow-hidden rounded-xl border border-border/80 bg-surface">
<img
src={coverImage}
alt={`Cover image for ${title}`}
className="w-full h-40 object-cover"
className="h-44 w-full object-cover transition-transform duration-300 ease-out group-hover:scale-[1.015] sm:h-52"
loading="lazy"
/>
</div>
)}
<div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
<div className="mb-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-soft">
<time className="font-mono" dateTime={date}>{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
{author && <span className="text-ink-soft/70">·</span>}
{author && <span>{author}</span>}
{readingTime && <span className="text-ink-soft/70">·</span>}
{readingTime && <span className="font-mono">{readingTime} min read</span>}
</div>
<h3 className="heading-md text-ink mt-0 mb-3 group-hover:text-accent transition-colors">
<h3 className="heading-md mb-3 mt-0 text-ink transition-colors duration-200 group-hover:text-accent">
{title}
</h3>
{excerpt && (
<p className="text-ink-soft leading-relaxed mt-3 text-sm">{excerpt}</p>
<p className="mt-3 max-w-3xl text-sm leading-7 text-ink-soft">{excerpt}</p>
)}
</Link>
{tags && tags.length > 0 && (
<div className="flex flex-wrap gap-1.5 mt-3">
<div className="mt-5 flex flex-wrap gap-2">
{tags.slice(0, 3).map((tag) => (
<Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
<Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full border border-border bg-surface/70 px-3 py-1 text-xs text-ink-soft transition-colors duration-200 hover:border-accent/60 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
{tag}
</Link>
))}

15
components/blog/PostList.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { m } from "motion/react";
import { m, useReducedMotion } from "motion/react";
import { PostCard } from "./PostCard";
import type { PostMeta } from "@/lib/posts";
@@ -19,11 +19,18 @@ interface PostListProps {
}
export function PostList({ posts }: PostListProps) {
const shouldReduceMotion = useReducedMotion();
return (
<m.ul variants={listVariants} initial="hidden" animate="visible" className="space-y-8">
{posts.map((post) => (
<m.ul
variants={shouldReduceMotion ? undefined : listVariants}
initial={shouldReduceMotion ? false : "hidden"}
animate="visible"
className="space-y-6"
>
{posts.map((post, index) => (
<li key={post.slug}>
<PostCard {...post} index={posts.indexOf(post)} />
<PostCard {...post} index={index} />
</li>
))}
</m.ul>