visual polish: typography rhythm, hover states, post card, hero overlay
- globals.css: tighter type scale (display h1 = 4xl, snug leading), section spacing scales up at xl (45→80px y), section width caps at 1280 (was 1550) for better text-line-length, paragraphs constrained to 65ch. - Secondary text bumped to 0.78 lightness for better contrast on the dark bg (was 0.85, too low). - Hover: links get underline-offset + animated color transition; PostCard lifts on hover with a brand-tinted ring. - Markdown rhythm rewritten: h2 starts a new visual section (mt-12), p/li use sensible margins. Drop whitespace-break-spaces (Lexical now emits real linebreaks). - Hero: gradient overlay so the tagline reads cleanly over the busy image, subtle ↓ scroll hint at the bottom, logo scales between 180 / 220 px.
This commit is contained in:
@@ -12,16 +12,16 @@ export default function PostCard({ post }: { post: Post }) {
|
||||
<Link
|
||||
to="/blog/$slug"
|
||||
params={{ slug: post.slug }}
|
||||
className="block bg-neutral-accent rounded-card p-padding-card no-underline hover:no-underline group"
|
||||
className="block bg-neutral-accent rounded-card p-padding-card no-underline hover:no-underline transition-transform hover:-translate-y-0.5 ring-1 ring-transparent hover:ring-brand/40"
|
||||
>
|
||||
<time
|
||||
dateTime={post.createdAt}
|
||||
className="text-secondary text-sm block mb-2"
|
||||
className="text-secondary text-sm block mb-3"
|
||||
>
|
||||
{dateFmt.format(new Date(post.createdAt))}
|
||||
</time>
|
||||
<h3 className="text-main mb-2 group-hover:text-main">{post.title}</h3>
|
||||
<p className="text-secondary">{post.summary}</p>
|
||||
<h3 className="mb-2">{post.title}</h3>
|
||||
<p className="text-secondary mb-0">{post.summary}</p>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import bgDark from "@/assets/unom_Logo_5_Dark.webp";
|
||||
|
||||
export default function Landing() {
|
||||
return (
|
||||
<div className="relative w-full h-[90vh] overflow-hidden">
|
||||
<section className="relative w-full h-[90vh] overflow-hidden">
|
||||
<img
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
src={bgDark}
|
||||
@@ -11,14 +11,25 @@ export default function Landing() {
|
||||
height={2160}
|
||||
alt="Ein 3D Rendering des unom Logos"
|
||||
/>
|
||||
<div className="relative h-full flex flex-col items-center justify-center gap-8 px-section-main-x text-center">
|
||||
<div className="w-[200px]">
|
||||
{/* dim layer so the tagline sits on a calmer field */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-neutral/0 via-neutral/0 to-neutral/80" />
|
||||
|
||||
<div className="relative h-full flex flex-col items-center justify-center gap-10 px-section-main-x text-center">
|
||||
<div className="w-[180px] md:w-[220px]">
|
||||
<LogoQuadBG />
|
||||
</div>
|
||||
<p className="max-w-md text-lg md:text-xl text-main">
|
||||
<p className="max-w-md text-lg md:text-xl text-main/90">
|
||||
Kreative Webentwicklung aus Rottweil.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* subtle scroll hint */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute bottom-6 left-1/2 -translate-x-1/2 text-secondary/60 text-sm tracking-wide"
|
||||
>
|
||||
↓
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
+39
-31
@@ -3,7 +3,7 @@
|
||||
|
||||
:root {
|
||||
--main: oklch(1 0 0);
|
||||
--secondary: oklch(0.85 0 0);
|
||||
--secondary: oklch(0.78 0 0);
|
||||
--brand: oklch(0.5609 0.2483 280.67);
|
||||
--neutral: oklch(0.155 0.0395 285.68);
|
||||
--neutral-accent: oklch(0.1 0.0395 285.68);
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
--font-display: var(--font-display);
|
||||
|
||||
--radius-card: var(--radius);
|
||||
--radius-card: calc(var(--radius) * 1.25);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
@@ -44,9 +44,9 @@
|
||||
--spacing-card: 1rem;
|
||||
|
||||
--spacing-section-main-x: 25px;
|
||||
--spacing-section-main-y: 25px;
|
||||
--spacing-section-main-y: 45px;
|
||||
|
||||
--spacing-padding-card: 1.25rem;
|
||||
--spacing-padding-card: 1.5rem;
|
||||
--spacing-height-header: 100px;
|
||||
|
||||
--container-max-section: 100%;
|
||||
@@ -62,42 +62,47 @@
|
||||
|
||||
@variant xl {
|
||||
:root {
|
||||
--container-max-section: 1550px;
|
||||
--container-max-section: 1280px;
|
||||
|
||||
--spacing-section-main-x: 100px;
|
||||
--spacing-section-main-y: 45px;
|
||||
--spacing-height-header: 150px;
|
||||
--spacing-section-main-y: 80px;
|
||||
--spacing-height-header: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
@apply bg-neutral text-main font-sans;
|
||||
@apply bg-neutral text-main font-sans antialiased;
|
||||
scroll-behavior: smooth;
|
||||
font-feature-settings: "kern", "liga", "calt";
|
||||
}
|
||||
|
||||
body {
|
||||
@apply leading-relaxed;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply font-mono;
|
||||
@apply font-mono text-sm bg-neutral-accent px-1 py-0.5 rounded-sm;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-main font-display text-3xl font-bold;
|
||||
@apply text-main font-display text-4xl font-bold leading-tight tracking-tight;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl font-semibold;
|
||||
@apply text-main text-2xl font-semibold leading-snug tracking-tight;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-xl font-medium;
|
||||
@apply text-main text-xl font-medium leading-snug;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-lg;
|
||||
@apply text-main text-lg font-medium leading-snug;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply underline;
|
||||
@apply underline underline-offset-2 decoration-secondary/40 transition-colors;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@@ -114,7 +119,7 @@
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
@apply mt-6;
|
||||
@apply mt-8;
|
||||
}
|
||||
|
||||
& h1,
|
||||
@@ -131,33 +136,36 @@
|
||||
|
||||
p,
|
||||
li {
|
||||
@apply max-w-[600px] text-base text-secondary;
|
||||
line-height: 1.5;
|
||||
@apply max-w-[65ch] text-base text-secondary;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
/* Tight rhythm + ample top-of-section breathing room. Used by Pages
|
||||
* whose blocks render Lexical content (legal, blog post). */
|
||||
.markdown {
|
||||
& h1 {
|
||||
@apply mb-4! mt-8!;
|
||||
@apply mt-0 mb-6;
|
||||
}
|
||||
|
||||
& h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
@apply mb-4! mt-6!;
|
||||
& h2 {
|
||||
@apply mt-12 mb-3;
|
||||
}
|
||||
& h3 {
|
||||
@apply mt-8 mb-2;
|
||||
}
|
||||
& h4 {
|
||||
@apply mt-6 mb-2 text-secondary;
|
||||
}
|
||||
|
||||
& p {
|
||||
@apply mb-2! whitespace-break-spaces;
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
& ul {
|
||||
@apply ml-4!;
|
||||
@apply ml-5 list-disc mb-4;
|
||||
}
|
||||
& ol {
|
||||
@apply ml-5 list-decimal mb-4;
|
||||
}
|
||||
|
||||
& li {
|
||||
@apply ml-4!;
|
||||
@apply mb-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user