feat: new design
This commit is contained in:
Nik L
205
app/globals.css
205
app/globals.css
@@ -4,77 +4,64 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: 240 240 236;
|
||||
--foreground: 22 22 20;
|
||||
--card: 249 249 247;
|
||||
--card-foreground: 22 22 20;
|
||||
--popover: 249 249 247;
|
||||
--popover-foreground: 22 22 20;
|
||||
--primary: 217 94 42;
|
||||
--primary-foreground: 249 249 247;
|
||||
--secondary: 240 240 236;
|
||||
--secondary-foreground: 47 47 44;
|
||||
--muted: 240 240 236;
|
||||
--muted-foreground: 87 87 83;
|
||||
--accent: 221 221 215;
|
||||
--accent-foreground: 22 22 20;
|
||||
--destructive: 180 50 50;
|
||||
--destructive-foreground: 249 249 247;
|
||||
--border: 196 196 189;
|
||||
--input: 196 196 189;
|
||||
--ring: 217 94 42;
|
||||
--radius: 0.375rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 22 22 20;
|
||||
--foreground: 249 249 247;
|
||||
--card: 47 47 44;
|
||||
--card-foreground: 249 249 247;
|
||||
--popover: 47 47 44;
|
||||
--popover-foreground: 249 249 247;
|
||||
--primary: 217 94 42;
|
||||
--primary-foreground: 249 249 247;
|
||||
--secondary: 87 87 83;
|
||||
--secondary-foreground: 249 249 247;
|
||||
--muted: 87 87 83;
|
||||
--muted-foreground: 196 196 189;
|
||||
--accent: 87 87 83;
|
||||
--accent-foreground: 249 249 247;
|
||||
--destructive: 180 50 50;
|
||||
--destructive-foreground: 249 249 247;
|
||||
--border: 87 87 83;
|
||||
--input: 87 87 83;
|
||||
--ring: 217 94 42;
|
||||
--radius: 0.625rem;
|
||||
--background: #F0F0EC;
|
||||
--foreground: #161614;
|
||||
--card: #F9F9F7;
|
||||
--card-foreground: #161614;
|
||||
--popover: #F9F9F7;
|
||||
--popover-foreground: #161614;
|
||||
--primary: #D95E2A;
|
||||
--primary-foreground: #F9F9F7;
|
||||
--secondary: #F0F0EC;
|
||||
--secondary-foreground: #161614;
|
||||
--muted: #F0F0EC;
|
||||
--muted-foreground: #575753;
|
||||
--accent: #DDDDD7;
|
||||
--accent-foreground: #161614;
|
||||
--destructive: #B43232;
|
||||
--destructive-foreground: #F9F9F7;
|
||||
--border: #C4C4BD;
|
||||
--input: #C4C4BD;
|
||||
--ring: #D95E2A;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-inter), 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-serif: var(--font-source-serif), 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-offwhite: #F9F9F7;
|
||||
--color-orange: #D95E2A;
|
||||
--color-grey-1: #F0F0EC;
|
||||
--color-grey-2: #DDDDD7;
|
||||
--color-grey-3: #C4C4BD;
|
||||
--color-grey-4: #A6A69F;
|
||||
--color-grey-5: #7F7F79;
|
||||
--color-grey-7: #575753;
|
||||
--color-grey-8: #2F2F2C;
|
||||
--color-grey-9: #161614;
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
--color-background: rgb(var(--background));
|
||||
--color-foreground: rgb(var(--foreground));
|
||||
--color-card: rgb(var(--card));
|
||||
--color-card-foreground: rgb(var(--card-foreground));
|
||||
--color-popover: rgb(var(--popover));
|
||||
--color-popover-foreground: rgb(var(--popover-foreground));
|
||||
--color-primary: rgb(var(--primary));
|
||||
--color-primary-foreground: rgb(var(--primary-foreground));
|
||||
--color-secondary: rgb(var(--secondary));
|
||||
--color-secondary-foreground: rgb(var(--secondary-foreground));
|
||||
--color-muted: rgb(var(--muted));
|
||||
--color-muted-foreground: rgb(var(--muted-foreground));
|
||||
--color-accent: rgb(var(--accent));
|
||||
--color-accent-foreground: rgb(var(--accent-foreground));
|
||||
--color-destructive: rgb(var(--destructive));
|
||||
--color-destructive-foreground: rgb(var(--destructive-foreground));
|
||||
--color-border: rgb(var(--border));
|
||||
--color-input: rgb(var(--input));
|
||||
--color-ring: rgb(var(--ring));
|
||||
--radius-sm: calc(var(--radius) - 2px);
|
||||
--radius-md: var(--radius);
|
||||
--radius-lg: calc(var(--radius) + 2px);
|
||||
--font-serif: var(--font-source-serif-pro);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--color-greyhaven-orange: #D95E2A;
|
||||
@@ -89,6 +76,18 @@
|
||||
--color-greyhaven-grey8: #2F2F2C;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
|
||||
width: 100%;
|
||||
overflow-x: visible;
|
||||
background: #DDDDD7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
@@ -101,22 +100,46 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Code block styling */
|
||||
.code-block {
|
||||
background: rgb(30 30 27);
|
||||
border: 1px solid rgb(var(--border));
|
||||
border-radius: var(--radius-lg);
|
||||
.bg-gradient {
|
||||
background: #DDDDD7;
|
||||
}
|
||||
|
||||
/* Subtle glow effect for primary elements */
|
||||
.glow-orange {
|
||||
box-shadow: 0 0 40px rgba(217, 94, 42, 0.08);
|
||||
.title-serif {
|
||||
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
letter-spacing: -2%;
|
||||
}
|
||||
|
||||
.text-serif {
|
||||
font-family: var(--font-source-serif-pro), serif, Arial, Helvetica, sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.surface-card {
|
||||
background: rgba(249, 249, 247, 0.92);
|
||||
box-shadow: 0 8px 24px rgba(22, 22, 20, 0.05);
|
||||
}
|
||||
|
||||
/* Code block styling */
|
||||
.code-block {
|
||||
background: rgb(47 47 44);
|
||||
border: 1px solid rgb(87 87 83);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(249, 249, 247, 0.04),
|
||||
0 6px 18px rgba(22, 22, 20, 0.06);
|
||||
}
|
||||
|
||||
.code-block,
|
||||
.code-block * {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
|
||||
/* Terminal prompt styling */
|
||||
.terminal-line::before {
|
||||
content: '$ ';
|
||||
color: rgb(var(--muted-foreground));
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Smooth section transitions */
|
||||
@@ -124,35 +147,21 @@ section {
|
||||
scroll-margin-top: 5rem;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for dark theme */
|
||||
.dark ::-webkit-scrollbar {
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.dark ::-webkit-scrollbar-track {
|
||||
background: rgb(22 22 20);
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgb(240 240 236);
|
||||
}
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: rgb(87 87 83);
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(166 166 159);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Animated gradient border */
|
||||
@keyframes border-glow {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.border-glow {
|
||||
animation: border-glow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Layer card hover effect */
|
||||
.layer-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.layer-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Carousel progress bar */
|
||||
@@ -174,7 +183,7 @@ section {
|
||||
}
|
||||
|
||||
.animate-fade-up {
|
||||
animation: fade-up 0.6s ease-out forwards;
|
||||
animation: fade-up 0.45s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Stagger children */
|
||||
|
||||
Reference in New Issue
Block a user