infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

ui: Polish details

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-19 09:03:50 +02:00
parent 6fdc29fc0f
commit 19ea8b0122
35 changed files with 478 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/components/guides/GuideLayout.tsx
+12 -9
View File
@@ -148,7 +148,10 @@ export function GuideLayout({
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-8 sm:mb-12 w-full'}
>
<h1 className={'text-2xl sm:text-4xl font-bold tracking-tight text-neutral-900 break-words max-w-full'}>
<h1
style={{fontFamily: 'var(--font-display)'}}
className={'text-3xl sm:text-4xl font-bold tracking-[-0.02em] text-neutral-900 break-words max-w-full'}
>
{title}
</h1>
<p
@@ -199,16 +202,16 @@ export function GuideLayout({
<div className={'rounded-xl border border-neutral-200 bg-white p-6 shadow-sm'}>
<h2 className={'text-sm font-semibold text-neutral-900 mb-4 uppercase tracking-wide'}>On this page</h2>
<nav>
<ul className={'space-y-1'}>
<ul className={'space-y-0.5'}>
{headings.map(heading => (
<li key={heading.id} className={heading.level === 3 ? 'ml-4 mt-0.5' : 'mt-2 first:mt-0'}>
<li key={heading.id} className={heading.level === 3 ? 'ml-3' : ''}>
<a
href={`#${heading.id}`}
onClick={e => {
e.preventDefault();
const element = document.getElementById(heading.id);
if (element) {
const offset = 100; // Account for fixed header
const offset = 100;
const elementPosition = element.getBoundingClientRect().top + window.scrollY;
window.scrollTo({
top: elementPosition - offset,
@@ -216,14 +219,14 @@ export function GuideLayout({
});
}
}}
className={`block py-1 border-l-2 -ml-px pl-3 transition-all duration-200 ${
className={`block rounded px-2 py-1.5 transition-all duration-200 ${
heading.level === 2
? activeId === heading.id
? 'border-neutral-900 text-neutral-900 font-semibold text-sm'
: 'border-transparent text-neutral-600 hover:text-neutral-900 hover:border-neutral-300 font-medium text-sm'
? 'bg-neutral-100 text-sm font-semibold text-neutral-900'
: 'text-sm font-medium text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900'
: activeId === heading.id
? 'border-neutral-700 text-neutral-800 font-medium text-xs'
: 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-200 text-xs'
? 'bg-neutral-50 text-xs font-medium text-neutral-800'
: 'text-xs text-neutral-500 hover:bg-neutral-50 hover:text-neutral-700'
}`}
>
{heading.text}