feat: Add Section layout component and refactor page.tsx with updated styling and new Button variants.
This commit is contained in:
1elle1
@@ -10,89 +10,137 @@
|
||||
|
||||
@theme {
|
||||
/* Colors */
|
||||
--color-primary: #000000;
|
||||
--color-secondary: #FFFFFF;
|
||||
--color-accent: #d6d6d6;
|
||||
--color-neutral: #F5F5F5;
|
||||
--color-background: #FFFFFF;
|
||||
--color-foreground: #000000;
|
||||
--color-muted: #B0B0B0;
|
||||
--color-muted-foreground: #ffffff;
|
||||
--color-border: #E0E0E0;
|
||||
--color-success: #4CAF50;
|
||||
--color-warning: #FF9800;
|
||||
--color-error: #F44336;
|
||||
--color-primary: var(--color-primary);
|
||||
--color-secondary: var(--color-secondary);
|
||||
--color-accent: var(--color-accent);
|
||||
--color-neutral: var(--color-neutral);
|
||||
--color-background: var(--color-background);
|
||||
--color-foreground: var(--color-foreground);
|
||||
--color-muted: var(--color-muted);
|
||||
--color-muted-foreground: var(--color-muted-foreground);
|
||||
--color-border: var(--color-border);
|
||||
--color-success: var(--color-success);
|
||||
--color-warning: var(--color-warning);
|
||||
--color-error: var(--color-error);
|
||||
|
||||
/* Fonts */
|
||||
--font-heading: 'Inter', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--font-heading: var(--font-heading);
|
||||
--font-body: var(--font-body);
|
||||
|
||||
/* Typography Scale – override Tailwind defaults to match design tokens */
|
||||
--text-xl: 1.5rem;
|
||||
--text-xl--line-height: 2rem;
|
||||
--text-2xl: 1.75rem;
|
||||
--text-2xl--line-height: 2.25rem;
|
||||
--text-3xl: 2rem;
|
||||
--text-3xl--line-height: 2.5rem;
|
||||
--text-4xl: 2.5rem;
|
||||
--text-4xl--line-height: 2.75rem;
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1.1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1.1;
|
||||
/* Typography Scale */
|
||||
--text-xs: var(--text-xs);
|
||||
--text-xs--line-height: var(--text-xs-line-height);
|
||||
--text-sm: var(--text-sm);
|
||||
--text-sm--line-height: var(--text-sm-line-height);
|
||||
--text-base: var(--text-base);
|
||||
--text-base--line-height: var(--text-base-line-height);
|
||||
--text-lg: var(--text-lg);
|
||||
--text-lg--line-height: var(--text-lg-line-height);
|
||||
--text-xl: var(--text-xl);
|
||||
--text-xl--line-height: var(--text-xl-line-height);
|
||||
--text-2xl: var(--text-2xl);
|
||||
--text-2xl--line-height: var(--text-2xl-line-height);
|
||||
--text-3xl: var(--text-3xl);
|
||||
--text-3xl--line-height: var(--text-3xl-line-height);
|
||||
--text-4xl: var(--text-4xl);
|
||||
--text-4xl--line-height: var(--text-4xl-line-height);
|
||||
--text-5xl: var(--text-5xl);
|
||||
--text-5xl--line-height: var(--text-5xl-line-height);
|
||||
--text-6xl: var(--text-6xl);
|
||||
--text-6xl--line-height: var(--text-6xl-line-height);
|
||||
|
||||
/* Spacing */
|
||||
--spacing-container: var(--spacing-container);
|
||||
--spacing-container-padding: var(--spacing-container-padding);
|
||||
}
|
||||
|
||||
/* ── Font Override (connect next/font to CSS vars) ──── */
|
||||
/* --font-inter is injected by next/font/google on <html> */
|
||||
/* ── Base Layer ────────────────────────────────────── */
|
||||
|
||||
html {
|
||||
--font-heading: var(--font-inter, 'Inter', sans-serif);
|
||||
--font-body: var(--font-inter, 'Inter', sans-serif);
|
||||
}
|
||||
@layer base {
|
||||
|
||||
/* ── Base Resets ───────────────────────────────────── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--font-body-weight);
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background);
|
||||
line-height: var(--text-base-line-height);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-weight: var(--font-body-weight);
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-background);
|
||||
line-height: var(--text-base-line-height);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--font-heading-weight);
|
||||
color: var(--color-primary);
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.5em;
|
||||
/* reasonable default */
|
||||
}
|
||||
|
||||
/* ── Headings ─────────────────────────────────────── */
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--font-heading-weight);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-3xl);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
/* ── Links ───────────────────────────────────────── */
|
||||
h3 {
|
||||
font-size: var(--text-2xl);
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--text-xl);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* ── Images ──────────────────────────────────────── */
|
||||
h5 {
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
img, video, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
h6 {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
max-width: 65ch;
|
||||
/* readability */
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
img,
|
||||
video,
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Focus ───────────────────────────────────────── */
|
||||
@@ -107,16 +155,4 @@ img, video, svg {
|
||||
::selection {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-background);
|
||||
}
|
||||
|
||||
/* ── Reduced Motion ─────────────────────────────── */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user