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

design

Browse Source
This commit is contained in:
Marc Mintel
2026-01-29 21:50:28 +01:00
parent eafb740b1d
commit ae303d8a5a
12 changed files with 88 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/globals.css
View File

@@ -9,9 +9,8 @@
} }
body { body {
@apply bg-white text-slate-800 font-serif antialiased; @apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
font-family: 'Georgia', 'Times New Roman', serif; line-height: 1.8;
line-height: 1.75;
} }
/* Typography */ /* Typography */
@@ -20,27 +19,19 @@
} }
h1 { h1 {
@apply text-3xl md:text-4xl leading-tight mb-6; @apply text-4xl md:text-5xl leading-[1.1] mb-8 tracking-tight;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
} }
h2 { h2 {
@apply text-2xl md:text-3xl leading-tight mb-4 mt-8; @apply text-3xl md:text-4xl leading-[1.2] mb-6 mt-12 tracking-tight;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
} }
h3 { h3 {
@apply text-xl md:text-2xl leading-tight mb-3 mt-6; @apply text-2xl md:text-3xl leading-[1.3] mb-4 mt-8 tracking-tight;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
} }
h4 { h4 {
@apply text-lg md:text-xl leading-tight mb-2 mt-4; @apply text-xl md:text-2xl leading-[1.4] mb-3 mt-6 tracking-tight;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
} }
p { p {
@@ -65,19 +56,18 @@
} }
code:not([class*='language-']) { code:not([class*='language-']) {
@apply bg-slate-100 px-1 py-0.5 rounded font-mono text-sm text-slate-700; @apply bg-slate-50 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] text-slate-800 border border-slate-100;
} }
blockquote { blockquote {
@apply border-l-2 border-slate-300 pl-4 italic text-slate-600 my-4; @apply border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif;
} }
/* Focus states */ /* Focus states */
a:focus, a:focus,
button:focus, button:focus,
input:focus { input:focus {
outline: 2px solid #0f172a; @apply outline-none ring-2 ring-slate-900 ring-offset-2 rounded-sm;
outline-offset: 2px;
} }
} }
@@ -89,26 +79,24 @@
} }
.container { .container {
@apply max-w-4xl mx-auto px-6 py-10; @apply max-w-6xl mx-auto px-6 py-12;
} }
.wide-container { .wide-container {
@apply max-w-5xl mx-auto px-6 py-12; @apply max-w-7xl mx-auto px-6 py-16;
} }
.narrow-container { .narrow-container {
@apply max-w-3xl mx-auto px-6 py-8; @apply max-w-4xl mx-auto px-6 py-10;
} }
.highlighter-tag { .highlighter-tag {
@apply inline-block text-xs font-bold px-2 py-0.5 rounded cursor-pointer transition-all duration-200; @apply inline-block text-[10px] uppercase tracking-wider font-bold px-3 py-1 rounded-full cursor-pointer transition-all duration-300;
position: relative; position: relative;
transform: rotate(-1deg);
box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
} }
.search-box { .search-box {
@apply w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-slate-900 transition-colors; @apply w-full px-6 py-4 border border-slate-200 rounded-2xl focus:outline-none focus:border-slate-400 transition-all duration-300;
background: rgba(255,255,255,0.9); background: rgba(255,255,255,0.9);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -136,7 +124,7 @@
/* Article page */ /* Article page */
.article-header { .article-header {
@apply mb-8; @apply mb-12;
} }
.article-title { .article-title {
@@ -178,15 +166,15 @@
/* Buttons */ /* Buttons */
.btn { .btn {
@apply inline-block px-4 py-2 bg-slate-900 text-white font-sans font-medium hover:bg-slate-700 transition-colors rounded; @apply inline-block px-6 py-3 bg-slate-900 text-white font-sans font-bold text-sm uppercase tracking-widest hover:bg-slate-800 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 rounded-full shadow-sm hover:shadow-md;
} }
.btn-primary { .btn-primary {
@apply bg-slate-900 hover:bg-slate-800 text-white px-3 py-1.5 rounded transition-colors; @apply bg-slate-900 hover:bg-slate-800 text-white px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
} }
.btn-secondary { .btn-secondary {
@apply bg-white text-slate-700 hover:bg-slate-100 border border-slate-300 px-3 py-1.5 rounded transition-colors; @apply bg-white text-slate-900 hover:bg-slate-50 border border-slate-200 px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
} }
/* Hide scrollbars */ /* Hide scrollbars */
@@ -233,8 +221,8 @@
/* Floating back to top button */ /* Floating back to top button */
.floating-back-to-top { .floating-back-to-top {
position: fixed; position: fixed;
bottom: 1.5rem; bottom: 2rem;
right: 1.5rem; right: 2rem;
width: 2.5rem; width: 2.5rem;
height: 2.5rem; height: 2.5rem;
background: white; background: white;
@@ -315,25 +303,22 @@
/* Tag Styles */ /* Tag Styles */
.highlighter-tag { .highlighter-tag {
transform: rotate(-1deg) translateY(0); animation: tagPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
animation: tagPopIn 0.3s ease-out both;
animation-delay: calc(var(--tag-index, 0) * 0.05s); animation-delay: calc(var(--tag-index, 0) * 0.05s);
} }
.highlighter-tag:hover { .highlighter-tag:hover {
transform: rotate(-2deg) translateY(-2px) scale(1.05); @apply -translate-y-0.5 scale-105 shadow-lg shadow-slate-200;
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
} }
@keyframes tagPopIn { @keyframes tagPopIn {
from { from {
opacity: 0; opacity: 0;
transform: rotate(-1deg) scale(0.8) translateY(5px); transform: scale(0.8) translateY(10px);
} }
to { to {
opacity: 1; opacity: 1;
transform: rotate(-1deg) scale(1) translateY(0); transform: scale(1) translateY(0);
} }
} }
@@ -374,10 +359,7 @@
} }
.highlighter-tag:focus { .highlighter-tag:focus {
outline: 2px solid #0f172a; @apply ring-2 ring-slate-900 ring-offset-2 -translate-y-0.5 scale-105;
outline-offset: 2px;
transform: rotate(-1deg) translateY(-2px) scale(1.05);
box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.1), 3px 3px 0 rgba(0, 0, 0, 0.15);
} }
/* Marker Title Styles */ /* Marker Title Styles */
@@ -500,10 +482,10 @@
/* Generic Embed Styles */ /* Generic Embed Styles */
.generic-embed { .generic-embed {
--max-width: 100%; --max-width: 100%;
--border-radius: 8px; --border-radius: 24px;
--bg-color: #ffffff; --bg-color: #ffffff;
--border-color: #e2e8f0; --border-color: #e2e8f0;
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow: none;
margin: 1.5rem 0; margin: 1.5rem 0;
width: 100%; width: 100%;

10
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import { Inter } from 'next/font/google'; import { Inter, Newsreader } from 'next/font/google';
import './globals.css'; import './globals.css';
import { Footer } from '../src/components/Footer'; import { Footer } from '../src/components/Footer';
import { Header } from '../src/components/Header'; import { Header } from '../src/components/Header';
@@ -8,6 +8,12 @@ import { InteractiveElements } from '../src/components/InteractiveElements';
import { Analytics } from '../src/components/Analytics'; import { Analytics } from '../src/components/Analytics';
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' }); const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
const newsreader = Newsreader({
subsets: ['latin'],
variable: '--font-newsreader',
style: 'italic',
display: 'swap',
});
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@@ -24,7 +30,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en" className={`${inter.variable}`}> <html lang="en" className={`${inter.variable} ${newsreader.variable}`}>
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />

8
src/components/ArticleBlockquote.tsx
View File

@@ -20,7 +20,7 @@ interface BlockquoteProps {
} }
export const Blockquote: React.FC<BlockquoteProps> = ({ children, className = '' }) => ( export const Blockquote: React.FC<BlockquoteProps> = ({ children, className = '' }) => (
<blockquote className={`border-l-4 border-slate-400 pl-4 italic text-slate-600 my-6 ${className}`}> <blockquote className={`border-l-4 border-slate-900 pl-6 italic text-slate-700 my-8 text-xl md:text-2xl font-serif ${className}`}>
{children} {children}
</blockquote> </blockquote>
); );
@@ -88,12 +88,12 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
<style dangerouslySetInnerHTML={{ __html: syntaxHighlightingStyles }} /> <style dangerouslySetInnerHTML={{ __html: syntaxHighlightingStyles }} />
<div className="relative my-6"> <div className="relative my-6">
{language !== 'text' && ( {language !== 'text' && (
<div className="absolute top-2 right-2 text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded font-sans z-10 border border-slate-200"> <div className="absolute top-3 right-3 text-[10px] font-bold uppercase tracking-widest bg-white text-slate-500 px-2 py-1 rounded-md z-10 border border-slate-100 shadow-sm">
{language} {language}
</div> </div>
)} )}
<pre <pre
className={`m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded ${className} ${showLineNumbers ? 'pl-12' : ''}`} className={`m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 bg-white rounded-2xl ${className} ${showLineNumbers ? 'pl-12' : ''}`}
style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }} style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
> >
{showLineNumbers ? ( {showLineNumbers ? (
@@ -117,7 +117,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
}; };
export const InlineCode: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => ( export const InlineCode: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className = '' }) => (
<code className={`bg-slate-100 text-pink-600 px-1.5 py-0.5 rounded font-mono text-sm border border-pink-200 ${className}`}> <code className={`bg-white text-slate-800 px-1.5 py-0.5 rounded-md font-mono text-[0.9em] border border-slate-200 ${className}`}>
{children} {children}
</code> </code>
); );

12
src/components/CTA.tsx
View File

@@ -5,16 +5,16 @@ import { Reveal } from './Reveal';
export const CTA: React.FC = () => { export const CTA: React.FC = () => {
return ( return (
<section className="container relative py-32 md:py-48"> <section className="container relative py-20 md:py-32">
<Reveal width="100%"> <Reveal width="100%">
<div className="relative p-12 md:p-24 border-2 border-slate-900 bg-white"> <div className="relative p-12 md:p-20 border border-slate-200 rounded-[3rem] bg-white">
<div className="absolute top-0 left-12 w-px h-24 bg-slate-900 -translate-y-12"></div> <div className="absolute top-0 left-12 w-px h-24 bg-slate-200 -translate-y-12"></div>
<div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">?</div> <div className="absolute -right-12 -top-12 text-[15rem] font-bold text-slate-50 select-none -z-10">?</div>
<div className="space-y-16 relative z-10"> <div className="space-y-16 relative z-10">
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.8] text-slate-900"> <h2 className="text-6xl md:text-8xl font-bold tracking-tighter leading-[0.9] text-slate-900">
Interesse? <br /> Interesse? <br />
<span className="text-slate-200">Fragen kostet nichts.</span> <span className="text-slate-100">Fragen kostet nichts.</span>
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end"> <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
@@ -25,7 +25,7 @@ export const CTA: React.FC = () => {
<div className="flex flex-col items-start gap-8"> <div className="flex flex-col items-start gap-8">
<Link <Link
href="/contact" href="/contact"
className="group inline-flex items-center gap-4 bg-white border border-slate-200 rounded-full px-10 py-5 text-2xl font-bold text-slate-900 hover:border-slate-900 hover:shadow-xl hover:-translate-y-1 transition-all duration-300" className="group inline-flex items-center gap-4 bg-white border border-slate-200 rounded-full px-10 py-5 text-2xl font-bold text-slate-900 hover:border-slate-400 hover:-translate-y-1 transition-all duration-300"
> >
Projekt anfragen Projekt anfragen
<ArrowRight className="w-6 h-6 group-hover:translate-x-2 transition-transform" /> <ArrowRight className="w-6 h-6 group-hover:translate-x-2 transition-transform" />

8
src/components/FileExample.tsx
View File

@@ -102,12 +102,12 @@ export const FileExample: React.FC<FileExampleProps> = ({
return ( return (
<div <div
className="file-example w-full bg-white border border-slate-200/80 rounded-lg overflow-hidden" className="file-example w-full bg-white border border-slate-200 rounded-2xl overflow-hidden transition-all duration-300"
data-file-example data-file-example
data-expanded={isExpanded} data-expanded={isExpanded}
> >
<div <div
className="px-3 py-2 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50/60 transition-colors" className="px-4 py-3 flex items-center justify-between gap-3 cursor-pointer select-none bg-white hover:bg-slate-50 transition-colors"
onClick={toggleExpand} onClick={toggleExpand}
role="button" role="button"
tabIndex={0} tabIndex={0}
@@ -175,13 +175,13 @@ export const FileExample: React.FC<FileExampleProps> = ({
<div <div
ref={contentRef} ref={contentRef}
className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-slate-50 ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`} className={`file-example__content overflow-hidden transition-[max-height,opacity] duration-200 ease-out bg-white ${isExpanded ? 'max-h-[22rem] opacity-100' : 'max-h-0 opacity-0'}`}
id={contentId} id={contentId}
role="region" role="region"
aria-labelledby={headerId} aria-labelledby={headerId}
> >
<pre <pre
className="m-0 p-3 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border border-slate-200 rounded" className="m-0 p-6 overflow-x-auto overflow-y-auto text-[13px] leading-[1.65] font-mono text-slate-800 hide-scrollbar border-t border-slate-200"
style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }} style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", maxHeight: "22rem" }}
> >
<code className={`language-${prismLanguage}`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code> <code className={`language-${prismLanguage}`} dangerouslySetInnerHTML={{ __html: highlightedCode }}></code>

4
src/components/Footer.tsx
View File

@@ -4,12 +4,12 @@ export const Footer: React.FC = () => {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<footer className="py-24 mt-48 border-t border-slate-100"> <footer className="py-16 mt-24 border-t border-slate-100">
<div className="narrow-container"> <div className="narrow-container">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end"> <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
<div className="space-y-8"> <div className="space-y-8">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-slate-900 flex items-center justify-center"> <div className="w-8 h-8 bg-slate-900 rounded-lg flex items-center justify-center">
<span className="text-white text-sm font-bold">M</span> <span className="text-white text-sm font-bold">M</span>
</div> </div>
<span className="text-xl font-bold text-slate-900 tracking-tighter">Marc Mintel</span> <span className="text-xl font-bold text-slate-900 tracking-tighter">Marc Mintel</span>

8
src/components/Header.tsx
View File

@@ -10,10 +10,10 @@ export const Header: React.FC = () => {
const isActive = (path: string) => pathname === path; const isActive = (path: string) => pathname === path;
return ( return (
<header className="bg-white/80 backdrop-blur-md sticky top-0 z-50"> <header className="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-50">
<div className="narrow-container py-8 flex items-center justify-between"> <div className="narrow-container py-4 flex items-center justify-between">
<Link href="/" className="flex items-center gap-3 group"> <Link href="/" className="flex items-center gap-3 group">
<div className="w-10 h-10 bg-slate-900 flex items-center justify-center group-hover:bg-slate-700 transition-colors"> <div className="w-10 h-10 bg-slate-900 rounded-xl flex items-center justify-center group-hover:bg-slate-800 group-hover:scale-105 transition-all duration-300 shadow-sm">
<span className="text-white text-lg font-bold">M</span> <span className="text-white text-lg font-bold">M</span>
</div> </div>
<span className="text-slate-900 font-bold tracking-tighter text-2xl">Marc Mintel</span> <span className="text-slate-900 font-bold tracking-tighter text-2xl">Marc Mintel</span>
@@ -38,7 +38,7 @@ export const Header: React.FC = () => {
</Link> </Link>
<Link <Link
href="/contact" href="/contact"
className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border-2 border-slate-900 px-5 py-2.5 hover:bg-slate-900 hover:text-white transition-all duration-300" className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 transition-all duration-300"
> >
Anfrage Anfrage
</Link> </Link>

28
src/components/Hero.tsx
View File

@@ -3,7 +3,7 @@ import * as React from 'react';
export const Hero: React.FC = () => { export const Hero: React.FC = () => {
return ( return (
<section className="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white py-20 md:py-28 overflow-hidden"> <section className="relative bg-slate-900 text-white py-20 md:py-24 overflow-hidden">
{/* Background pattern */} {/* Background pattern */}
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<div className="absolute inset-0" style={{ <div className="absolute inset-0" style={{
@@ -24,22 +24,22 @@ export const Hero: React.FC = () => {
</p> </p>
{/* Quick stats or focus areas */} {/* Quick stats or focus areas */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10 animate-fade-in"> <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 animate-fade-in">
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Code2 className="mx-auto mb-2 text-slate-400" size={24} /> <Code2 className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-sm font-mono text-slate-300">Code</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Code</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Wrench className="mx-auto mb-2 text-slate-400" size={24} /> <Wrench className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-sm font-mono text-slate-300">Tools</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Tools</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Terminal className="mx-auto mb-2 text-slate-400" size={24} /> <Terminal className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-sm font-mono text-slate-300">Automation</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Automation</div>
</div> </div>
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-4"> <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<BookOpen className="mx-auto mb-2 text-slate-400" size={24} /> <BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-sm font-mono text-slate-300">Learning</div> <div className="text-xs font-bold uppercase tracking-widest text-slate-300">Learning</div>
</div> </div>
</div> </div>

12
src/components/MediumCard.tsx
View File

@@ -24,22 +24,22 @@ export const MediumCard: React.FC<MediumCardProps> = ({ post }) => {
return ( return (
<Link href={`/blog/${slug}`} className="group block"> <Link href={`/blog/${slug}`} className="group block">
<article className="space-y-3 py-8 border-b border-slate-50 group-hover:border-slate-900 transition-colors"> <article className="space-y-4 py-8 px-8 border border-slate-200 rounded-3xl group-hover:border-slate-400 transition-all duration-500 bg-white">
<time className="text-[10px] font-mono text-slate-300 uppercase tracking-widest group-hover:text-slate-900 transition-colors"> <time className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 group-hover:text-slate-900 transition-colors">
{formattedDate} {formattedDate}
</time> </time>
<h3 className="text-3xl font-bold text-slate-900 tracking-tighter group-hover:text-slate-900 transition-colors"> <h3 className="text-3xl md:text-4xl font-bold text-slate-900 tracking-tight group-hover:text-slate-900 transition-colors">
{title} {title}
</h3> </h3>
<p className="text-xl text-slate-500 font-serif italic leading-tight line-clamp-2"> <p className="text-xl text-slate-500 font-serif italic leading-snug line-clamp-2">
{description} {description}
</p> </p>
<div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-sm group/link"> <div className="pt-4 flex items-center gap-4 text-slate-900 font-bold text-xs uppercase tracking-widest group/link">
Lesen Lesen
<div className="w-8 h-px bg-slate-900 group-hover:w-12 transition-all"></div> <div className="w-10 h-px bg-slate-200 group-hover:bg-slate-400 group-hover:w-16 transition-all duration-500"></div>
</div> </div>
</article> </article>
</Link> </Link>

8
src/components/SearchBar.tsx
View File

@@ -50,10 +50,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
type="text" type="text"
placeholder="Suchen..." placeholder="Suchen..."
value={value} value={value}
className={`w-full px-0 py-2 font-bold text-slate-900 bg-transparent border-b-2 transition-all focus:outline-none placeholder:text-slate-100 ${ className={`w-full px-8 py-4 font-bold text-slate-900 bg-white rounded-2xl border transition-all focus:outline-none placeholder:text-slate-300 ${
size === 'large' ? 'text-2xl md:text-4xl py-4 border-b-4' : 'text-lg' size === 'large' ? 'text-2xl md:text-4xl py-6 rounded-3xl' : 'text-lg'
} ${ } ${
isFocused ? 'border-slate-900' : 'border-slate-100' isFocused ? 'border-slate-400' : 'border-slate-200'
}`} }`}
onChange={handleInput} onChange={handleInput}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
@@ -65,7 +65,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
{value && ( {value && (
<button <button
onClick={clearSearch} onClick={clearSearch}
className="absolute right-0 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors" className="absolute right-6 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
aria-label="Clear search" aria-label="Clear search"
type="button" type="button"
> >

2
src/components/Tag.tsx
View File

@@ -11,7 +11,7 @@ export const Tag: React.FC<TagProps> = ({ tag, className = '' }) => {
return ( return (
<Link <Link
href={`/tags/${tag}`} href={`/tags/${tag}`}
className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 border border-slate-100 px-3 py-1.5 hover:border-slate-900 hover:text-slate-900 transition-all duration-300 ${className}`} className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 transition-all duration-300 ${className}`}
> >
{tag} {tag}
</Link> </Link>

9
tailwind.config.js
View File

@@ -8,6 +8,12 @@ export default {
], ],
theme: { theme: {
extend: { extend: {
borderRadius: {
'xl': '1rem',
'2xl': '1.5rem',
'3xl': '2rem',
'full': '9999px',
},
colors: { colors: {
slate: { slate: {
850: '#1e293b', 850: '#1e293b',
@@ -16,7 +22,8 @@ export default {
} }
}, },
fontFamily: { fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'], sans: ['var(--font-inter)', 'Inter', 'system-ui', 'sans-serif'],
serif: ['var(--font-newsreader)', 'Georgia', 'serif'],
mono: ['JetBrains Mono', 'monospace'], mono: ['JetBrains Mono', 'monospace'],
}, },
typography: (theme) => ({ typography: (theme) => ({