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

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;
}
}
}