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 {
@apply bg-white text-slate-800 font-serif antialiased;
font-family: 'Georgia', 'Times New Roman', serif;
line-height: 1.75;
@apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
line-height: 1.8;
}
/* Typography */
@@ -20,27 +19,19 @@
}
h1 {
@apply text-3xl md:text-4xl leading-tight mb-6;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-4xl md:text-5xl leading-[1.1] mb-8 tracking-tight;
}
h2 {
@apply text-2xl md:text-3xl leading-tight mb-4 mt-8;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-3xl md:text-4xl leading-[1.2] mb-6 mt-12 tracking-tight;
}
h3 {
@apply text-xl md:text-2xl leading-tight mb-3 mt-6;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-2xl md:text-3xl leading-[1.3] mb-4 mt-8 tracking-tight;
}
h4 {
@apply text-lg md:text-xl leading-tight mb-2 mt-4;
font-family: 'Inter', sans-serif;
letter-spacing: -0.025em;
@apply text-xl md:text-2xl leading-[1.4] mb-3 mt-6 tracking-tight;
}
p {
@@ -65,19 +56,18 @@
}
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 {
@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 */
a:focus,
button:focus,
input:focus {
outline: 2px solid #0f172a;
outline-offset: 2px;
@apply outline-none ring-2 ring-slate-900 ring-offset-2 rounded-sm;
}
}
@@ -89,26 +79,24 @@
}
.container {
@apply max-w-4xl mx-auto px-6 py-10;
@apply max-w-6xl mx-auto px-6 py-12;
}
.wide-container {
@apply max-w-5xl mx-auto px-6 py-12;
@apply max-w-7xl mx-auto px-6 py-16;
}
.narrow-container {
@apply max-w-3xl mx-auto px-6 py-8;
@apply max-w-4xl mx-auto px-6 py-10;
}
.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;
transform: rotate(-1deg);
box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.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);
backdrop-filter: blur(10px);
}
@@ -136,7 +124,7 @@
/* Article page */
.article-header {
@apply mb-8;
@apply mb-12;
}
.article-title {
@@ -178,15 +166,15 @@
/* Buttons */
.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 {
@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 {
@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 */
@@ -233,8 +221,8 @@
/* Floating back to top button */
.floating-back-to-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
bottom: 2rem;
right: 2rem;
width: 2.5rem;
height: 2.5rem;
background: white;
@@ -315,25 +303,22 @@
/* Tag Styles */
.highlighter-tag {
transform: rotate(-1deg) translateY(0);
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
animation: tagPopIn 0.3s ease-out both;
animation: tagPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: calc(var(--tag-index, 0) * 0.05s);
}
.highlighter-tag:hover {
transform: rotate(-2deg) translateY(-2px) scale(1.05);
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
@apply -translate-y-0.5 scale-105 shadow-lg shadow-slate-200;
}
@keyframes tagPopIn {
from {
opacity: 0;
transform: rotate(-1deg) scale(0.8) translateY(5px);
transform: scale(0.8) translateY(10px);
}
to {
opacity: 1;
transform: rotate(-1deg) scale(1) translateY(0);
transform: scale(1) translateY(0);
}
}
@@ -374,10 +359,7 @@
}
.highlighter-tag:focus {
outline: 2px solid #0f172a;
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);
@apply ring-2 ring-slate-900 ring-offset-2 -translate-y-0.5 scale-105;
}
/* Marker Title Styles */
@@ -500,10 +482,10 @@
/* Generic Embed Styles */
.generic-embed {
--max-width: 100%;
--border-radius: 8px;
--border-radius: 24px;
--bg-color: #ffffff;
--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;
width: 100%;

10
app/layout.tsx
View File

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