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

feat(blog): restore typography ratios and implement smooth filter animations
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Details
Build & Deploy / 🧪 QA (push) Failing after 1m13s
Details
Build & Deploy / 🏗️ Build (push) Failing after 10m57s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-17 22:52:53 +01:00
parent d41d4d3d89
commit 786d35010b
8 changed files with 152 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -83,7 +83,7 @@ export default async function BlogPostPage({
/>
<Section containerVariant="wide" className="pt-0 md:pt-0">
<div className="max-w-3xl mx-auto px-5 md:px-0">
<div className="max-w-4xl mx-auto px-5 md:px-0">
<Reveal delay={0.4} width="100%">
{post.tags && post.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mb-10 md:mb-12">
@@ -98,7 +98,7 @@ export default async function BlogPostPage({
</div>
)}
<div className="max-w-none">
<div className="article-content max-w-none">
<MDXRemote
source={post.body.raw.replace(/^---[\s\S]*?\n---\s*/, '')}
components={MDXComponents}

76
apps/web/app/blog/page.tsx
View File

@@ -11,6 +11,8 @@ import { Section } from "../../src/components/Section";
import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
import { useAnalytics } from "../../src/components/analytics/useAnalytics";
import { motion, AnimatePresence } from "framer-motion";
export default function BlogPage() {
const [searchQuery, setSearchQuery] = useState("");
const [activeTags, setActiveTags] = useState<string[]>([]);
@@ -133,35 +135,55 @@ export default function BlogPage() {
<div className="space-y-12 relative z-10 p-4 md:p-0">
{/* Posts List (Vertical & Minimal) */}
<div id="posts-container" className="space-y-12">
{postsToShow.length === 0 ? (
<div className="py-24 text-center border border-dashed border-slate-200 rounded-3xl bg-white/50">
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
Keine Beiträge gefunden.
</p>
<button
onClick={() => {
setSearchQuery("");
setActiveTags([]);
}}
className="mt-4 text-xs font-bold text-slate-900 underline underline-offset-4 hover:text-slate-600"
<AnimatePresence mode="popLayout" initial={false}>
{postsToShow.length === 0 ? (
<motion.div
key="no-results"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95 }}
className="py-24 text-center border border-dashed border-slate-200 rounded-3xl bg-white/50"
>
Filter zurücksetzen
</button>
</div>
) : (
<div className="grid grid-cols-1 gap-6 w-full">
{postsToShow.map((post, i) => (
<Reveal
key={post.slug}
delay={0.05 * i}
width="100%"
viewport={{ once: true, margin: "20% 0px" }} // Added more margin for better back-navigation detection
<p className="text-slate-400 font-mono text-sm uppercase tracking-widest">
Keine Beiträge gefunden.
</p>
<button
onClick={() => {
setSearchQuery("");
setActiveTags([]);
}}
className="mt-4 text-xs font-bold text-slate-900 underline underline-offset-4 hover:text-slate-600"
>
<MediumCard post={post} />
</Reveal>
))}
</div>
)}
Filter zurücksetzen
</button>
</motion.div>
) : (
<motion.div
key="post-grid"
layout
className="grid grid-cols-1 gap-6 w-full"
>
<AnimatePresence mode="popLayout">
{postsToShow.map((post, i) => (
<motion.div
key={post.slug}
layout
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }}
transition={{
duration: 0.4,
delay: i < 8 ? i * 0.05 : 0,
ease: [0.16, 1, 0.3, 1]
}}
>
<MediumCard post={post} />
</motion.div>
))}
</AnimatePresence>
</motion.div>
)}
</AnimatePresence>
{/* Pagination */}
{hasMore && (

116
apps/web/app/globals.css
View File

@@ -40,7 +40,7 @@
}
p {
@apply mb-4 text-sm md:text-base leading-relaxed text-slate-700;
@apply mb-6 text-base leading-relaxed text-slate-700;
}
.lead {
@@ -86,6 +86,7 @@
/* Components - Tailwind utility classes */
@layer components {
/* Legacy hooks required by tests */
.file-example {
@apply w-full;
@@ -149,32 +150,36 @@
}
.article-content {
@apply text-lg leading-relaxed;
@apply font-serif antialiased text-slate-700;
}
.article-content p {
@apply mb-5;
@apply text-lg md:text-xl leading-relaxed mb-6;
}
.article-content h1 {
@apply text-3xl md:text-5xl font-bold text-slate-900 mb-8 mt-12 tracking-tight leading-[1.1] font-sans;
}
.article-content h2 {
@apply text-2xl font-bold mt-8 mb-3;
@apply text-2xl md:text-4xl font-bold text-slate-900 mb-6 mt-10 tracking-tight leading-tight font-sans;
}
.article-content h3 {
@apply text-xl font-bold mt-6 mb-2;
@apply text-xl md:text-2xl font-bold text-slate-900 mb-4 mt-8 tracking-tight leading-snug font-sans;
}
.article-content ul,
.article-content ol {
@apply ml-6 mb-5;
@apply ml-6 mb-6 text-lg md:text-xl;
}
.article-content li {
@apply mb-1;
@apply mb-2;
}
.article-content blockquote {
@apply border-l-2 border-slate-400 pl-4 italic text-slate-600 my-5 text-lg;
@apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-10 text-xl md:text-2xl;
}
/* Buttons */
@@ -286,6 +291,7 @@
/* Print styles */
@media print {
.floating-back-to-top,
.reading-progress-bar {
display: none !important;
@@ -344,38 +350,30 @@
}
.highlighter-yellow {
background: linear-gradient(
135deg,
rgba(255, 235, 59, 0.95) 0%,
rgba(255, 213, 79, 0.95) 100%
);
background: linear-gradient(135deg,
rgba(255, 235, 59, 0.95) 0%,
rgba(255, 213, 79, 0.95) 100%);
color: #3f2f00;
}
.highlighter-pink {
background: linear-gradient(
135deg,
rgba(255, 167, 209, 0.95) 0%,
rgba(255, 122, 175, 0.95) 100%
);
background: linear-gradient(135deg,
rgba(255, 167, 209, 0.95) 0%,
rgba(255, 122, 175, 0.95) 100%);
color: #3f0018;
}
.highlighter-green {
background: linear-gradient(
135deg,
rgba(129, 199, 132, 0.95) 0%,
rgba(102, 187, 106, 0.95) 100%
);
background: linear-gradient(135deg,
rgba(129, 199, 132, 0.95) 0%,
rgba(102, 187, 106, 0.95) 100%);
color: #002f0a;
}
.highlighter-blue {
background: linear-gradient(
135deg,
rgba(226, 232, 240, 0.95) 0%,
rgba(203, 213, 225, 0.95) 100%
);
background: linear-gradient(135deg,
rgba(226, 232, 240, 0.95) 0%,
rgba(203, 213, 225, 0.95) 100%);
color: #0f172a;
}
@@ -411,17 +409,14 @@
border-radius: 0.18em;
z-index: -1;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 20%,
rgba(253, 230, 138, 0.7) 20%,
rgba(253, 230, 138, 0.7) 100%
);
background: linear-gradient(180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 20%,
rgba(253, 230, 138, 0.7) 20%,
rgba(253, 230, 138, 0.7) 100%);
transform-origin: left center;
transform: rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg))
skewX(calc((var(--marker-seed, 0) - 3) * -0.25deg));
transform: rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg)) skewX(calc((var(--marker-seed, 0) - 3) * -0.25deg));
filter: saturate(1.05);
}
@@ -436,28 +431,24 @@
border-radius: 0.18em;
z-index: -1;
background: linear-gradient(
90deg,
rgba(253, 230, 138, 0) 0%,
rgba(253, 230, 138, 0.6) 8%,
rgba(253, 230, 138, 0.55) 60%,
rgba(253, 230, 138, 0.35) 100%
);
background: linear-gradient(90deg,
rgba(253, 230, 138, 0) 0%,
rgba(253, 230, 138, 0.6) 8%,
rgba(253, 230, 138, 0.55) 60%,
rgba(253, 230, 138, 0.35) 100%);
opacity: 0.75;
mix-blend-mode: multiply;
transform: rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg))
translateY(0.02em);
transform: rotate(calc((var(--marker-seed, 0) - 3) * 0.45deg)) translateY(0.02em);
mask-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 100%
);
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 20%,
rgba(0, 0, 0, 1) 100%);
}
@media (prefers-reduced-motion: no-preference) {
.post-link:hover .marker-title::before,
.post-link:hover .marker-title::after {
filter: saturate(1.08) contrast(1.02);
@@ -720,6 +711,7 @@ pre:has(code[class*="language-"]) {
/* Gradient Mesh Blob Animations */
@keyframes gradient-blob-1 {
0%,
100% {
transform: translate(0, 0) scale(1);
@@ -739,6 +731,7 @@ pre:has(code[class*="language-"]) {
}
@keyframes gradient-blob-2 {
0%,
100% {
transform: translate(0, 0) scale(1);
@@ -754,6 +747,7 @@ pre:has(code[class*="language-"]) {
}
@keyframes gradient-blob-3 {
0%,
100% {
transform: translate(0, 0) scale(1);
@@ -789,6 +783,7 @@ pre:has(code[class*="language-"]) {
/* Circuit Pulse (used for node glow effects) */
@keyframes circuit-pulse {
0%,
100% {
opacity: 0.2;
@@ -892,14 +887,12 @@ pre:has(code[class*="language-"]) {
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(148, 163, 184, 0.3) 25%,
rgba(191, 206, 228, 0.2) 50%,
rgba(148, 163, 184, 0.3) 75%,
transparent 100%
);
background: linear-gradient(90deg,
transparent 0%,
rgba(148, 163, 184, 0.3) 25%,
rgba(191, 206, 228, 0.2) 50%,
rgba(148, 163, 184, 0.3) 75%,
transparent 100%);
background-size: 200% 100%;
animation: border-trace 4s linear infinite;
-webkit-mask:
@@ -969,6 +962,7 @@ pre:has(code[class*="language-"]) {
}
@keyframes junctionGlow {
0%,
100% {
opacity: 0.1;
@@ -977,4 +971,4 @@ pre:has(code[class*="language-"]) {
50% {
opacity: 0.4;
}
}
}