mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 20:15:04 +01:00
parent 6244425551
commit cb32b9d62f
19 changed files with 722 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/web/app/blog/[slug]/page.tsx
View File

@@ -37,7 +37,7 @@ export default async function BlogPostPage({
const PostContent = PostComponents[slug];
return (
<div className="flex flex-col gap-12 py-12 md:py-24 overflow-hidden">
<div className="flex flex-col gap-8 md:gap-12 py-8 md:py-24 overflow-hidden">
<BlogPostClient readingTime={readingTime} title={post.title} />
<PageHeader
@@ -49,24 +49,26 @@ export default async function BlogPostPage({
<main id="post-content">
<Section containerVariant="wide" className="pt-0 md:pt-0">
<div className="max-w-5xl mx-auto">
<div className="max-w-5xl mx-auto px-0 sm:px-4 md:px-0">
<Card
variant="glass"
techBorder
className="relative overflow-hidden"
className="relative overflow-hidden rounded-none sm:rounded-3xl"
>
{/* Decorative background grid inside the card */}
<div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
<div className="relative z-10 px-6 py-12 md:px-16 md:py-20">
<div className="flex flex-wrap items-center justify-between gap-4 text-[10px] font-bold text-slate-400 mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
<div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md:mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
<div className="flex items-center gap-3">
<span className="w-2 h-2 rounded-full bg-slate-300" />
<time dateTime={post.date}>{formattedDate}</time>
</div>
<div className="flex items-center gap-4">
<span>{readingTime} min Lesezeit</span>
<span className="text-slate-200">|</span>
<div className="flex items-center gap-4 sm:gap-6">
<div className="flex items-center gap-2">
<span className="text-slate-200 hidden sm:inline">|</span>
<span>{readingTime} min Lesezeit</span>
</div>
<span>
{slug.substring(0, 4).toUpperCase()}-
{Math.floor(Math.random() * 999)}
@@ -75,11 +77,11 @@ export default async function BlogPostPage({
</div>
{post.tags && post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mb-12">
<div className="flex flex-wrap gap-2 mb-10 md:mb-12">
{post.tags.map((tag, index) => (
<span
key={tag}
className="px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest"
className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
>
#{tag}
</span>