-
Notifications
You must be signed in to change notification settings - Fork 1
feat: match qron.space gold/black theme + Geist font on authichain.com #31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,179 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap'); | ||
|
|
||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { | ||
| :root { | ||
| --background: 0 0% 100%; | ||
| --foreground: 240 10% 3.9%; | ||
| --card: 0 0% 100%; | ||
| --card-foreground: 240 10% 3.9%; | ||
| --popover: 0 0% 100%; | ||
| --popover-foreground: 240 10% 3.9%; | ||
| --primary: 271 91% 65%; /* Purple */ | ||
| --primary-foreground: 0 0% 100%; | ||
| --secondary: 142 76% 36%; /* Green */ | ||
| --secondary-foreground: 0 0% 100%; | ||
| --muted: 240 4.8% 95.9%; | ||
| --muted-foreground: 240 3.8% 46.1%; | ||
| --accent: 240 4.8% 95.9%; | ||
| --accent-foreground: 240 5.9% 10%; | ||
| --destructive: 0 84.2% 60.2%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 240 5.9% 90%; | ||
| --input: 240 5.9% 90%; | ||
| --ring: 271 91% 65%; | ||
| --radius: 0.5rem; | ||
| } | ||
| :root { | ||
| --background: 0 0% 4%; | ||
| --foreground: 0 0% 93%; | ||
| --card: 0 0% 7%; | ||
| --card-foreground: 0 0% 93%; | ||
| --popover: 0 0% 7%; | ||
| --popover-foreground: 0 0% 93%; | ||
| --primary: 43 80% 47%; /* Gold - matches qron.space */ | ||
| --primary-foreground: 0 0% 5%; | ||
| --secondary: 0 0% 10%; | ||
| --secondary-foreground: 0 0% 93%; | ||
| --muted: 0 0% 10%; | ||
| --muted-foreground: 0 0% 53%; | ||
| --accent: 43 80% 47%; /* Gold */ | ||
| --accent-foreground: 0 0% 5%; | ||
| --destructive: 0 84.2% 60.2%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 0 0% 17%; | ||
| --input: 0 0% 17%; | ||
| --ring: 43 80% 47%; | ||
| --gold: 43 80% 47%; | ||
| --gold-light: 45 90% 60%; | ||
| --gold-foreground: 0 0% 5%; | ||
| --radius: 0.5rem; | ||
| } | ||
|
|
||
| .dark { | ||
| --background: 240 10% 3.9%; | ||
| --foreground: 0 0% 98%; | ||
| --card: 240 10% 8%; | ||
| --card-foreground: 0 0% 98%; | ||
| --popover: 240 10% 8%; | ||
| --popover-foreground: 0 0% 98%; | ||
| --primary: 271 91% 65%; /* Purple */ | ||
| --primary-foreground: 0 0% 100%; | ||
| --secondary: 142 76% 36%; /* Green */ | ||
| --secondary-foreground: 0 0% 100%; | ||
| --muted: 240 3.7% 15.9%; | ||
| --muted-foreground: 240 5% 64.9%; | ||
| --accent: 240 3.7% 15.9%; | ||
| --accent-foreground: 0 0% 98%; | ||
| --destructive: 0 62.8% 30.6%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 240 3.7% 15.9%; | ||
| --input: 240 3.7% 15.9%; | ||
| --ring: 271 91% 65%; | ||
| --background: 0 0% 4%; | ||
| --foreground: 0 0% 93%; | ||
| --card: 0 0% 7%; | ||
| --card-foreground: 0 0% 93%; | ||
| --popover: 0 0% 7%; | ||
| --popover-foreground: 0 0% 93%; | ||
| --primary: 43 80% 47%; | ||
| --primary-foreground: 0 0% 5%; | ||
| --secondary: 0 0% 10%; | ||
| --secondary-foreground: 0 0% 93%; | ||
| --muted: 0 0% 10%; | ||
| --muted-foreground: 0 0% 53%; | ||
| --accent: 43 80% 47%; | ||
| --accent-foreground: 0 0% 5%; | ||
| --destructive: 0 62.8% 30.6%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 0 0% 17%; | ||
| --input: 0 0% 17%; | ||
| --ring: 43 80% 47%; | ||
| } | ||
| } | ||
|
|
||
| @layer base { | ||
| * { | ||
| @apply border-border; | ||
| } | ||
| body { | ||
| @apply bg-background text-foreground; | ||
| } | ||
| * { | ||
| @apply border-border; | ||
| } | ||
| body { | ||
| @apply bg-background text-foreground; | ||
| font-family: 'Geist', 'Geist Fallback', Arial, sans-serif; | ||
| } | ||
| } | ||
|
|
||
| /* Purple/Green Gradient Theme */ | ||
| .gradient-primary { | ||
| background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(142 76% 36%) 100%); | ||
| /* Gold gradient utility - matches qron.space */ | ||
| .gradient-gold { | ||
| background: linear-gradient(135deg, #E8C547 0%, #C9A227 50%, #A07D10 100%); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background-clip: text; | ||
| } | ||
|
|
||
| .gradient-text { | ||
| background: linear-gradient(135deg, hsl(271 91% 65%) 0%, hsl(142 76% 36%) 100%); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background-clip: text; | ||
| /* Gold glow */ | ||
| .glow-gold { | ||
| box-shadow: 0 0 20px rgba(201, 162, 39, 0.35); | ||
| } | ||
|
|
||
| /* Animations */ | ||
| @keyframes shimmer { | ||
| 0% { | ||
| background-position: -1000px 0; | ||
| } | ||
| 100% { | ||
| background-position: 1000px 0; | ||
| /* Gold button */ | ||
| .btn-gold { | ||
| background: linear-gradient(135deg, #E8C547, #C9A227); | ||
| color: #0a0a0a; | ||
| font-weight: 700; | ||
| transition@:i moppoarcti tuyr l0(.'2hst,t ptsr:a/n/sffoonrtms .0g.o1osg;l | ||
| e}a | ||
| p.ibst.nc-ogmo/lcds:sh2o?vfearm i{l | ||
|
Comment on lines
+85
to
+87
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The Useful? React with 👍 / 👎. |
||
| y = Goepiascti:twyg:h t0@.390;0 | ||
| ; 4 0t0r;a5n0s0f;o6r0m0:; 7t0r0a;n8s0l0a&tdeiYs(p-l1apyx=)s;w | ||
| a}p'); | ||
|
|
||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { | ||
| :root { | ||
| --background: 0 0% 4%; | ||
| --foreground: 0 0% 93%; | ||
| --card: 0 0% 7%; | ||
| --card-foreground: 0 0% 93%; | ||
| --popover: 0 0% 7%; | ||
| --popover-foreground: 0 0% 93%; | ||
| --primary: 43 80% 47%; /* Gold - matches qron.space */ | ||
| --primary-foreground: 0 0% 5%; | ||
| --secondary: 0 0% 10%; | ||
| --secondary-foreground: 0 0% 93%; | ||
| --muted: 0 0% 10%; | ||
| --muted-foreground: 0 0% 53%; | ||
| --accent: 43 80% 47%; /* Gold */ | ||
| --accent-foreground: 0 0% 5%; | ||
| --destructive: 0 84.2% 60.2%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 0 0% 17%; | ||
| --input: 0 0% 17%; | ||
| --ring: 43 80% 47%; | ||
| --gold: 43 80% 47%; | ||
| --gold-light: 45 90% 60%; | ||
| --gold-foreground: 0 0% 5%; | ||
| --radius: 0.5rem; | ||
| } | ||
|
|
||
| .dark { | ||
| --background: 0 0% 4%; | ||
| --foreground: 0 0% 93%; | ||
| --card: 0 0% 7%; | ||
| --card-foreground: 0 0% 93%; | ||
| --popover: 0 0% 7%; | ||
| --popover-foreground: 0 0% 93%; | ||
| --primary: 43 80% 47%; | ||
| --primary-foreground: 0 0% 5%; | ||
| --secondary: 0 0% 10%; | ||
| --secondary-foreground: 0 0% 93%; | ||
| --muted: 0 0% 10%; | ||
| --muted-foreground: 0 0% 53%; | ||
| --accent: 43 80% 47%; | ||
| --accent-foreground: 0 0% 5%; | ||
| --destructive: 0 62.8% 30.6%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 0 0% 17%; | ||
| --input: 0 0% 17%; | ||
| --ring: 43 80% 47%; | ||
| } | ||
| } | ||
|
|
||
| .animate-shimmer { | ||
| animation: shimmer 2s infinite linear; | ||
| background: linear-gradient( | ||
| to right, | ||
| #f6f7f8 0%, | ||
| #edeef1 20%, | ||
| #f6f7f8 40%, | ||
| #f6f7f8 100% | ||
| ); | ||
| background-size: 1000px 100%; | ||
| @layer base { | ||
| * { | ||
| @apply border-border; | ||
| } | ||
| body { | ||
| @apply bg-background text-foreground; | ||
| font-family: 'Geist', 'Geist Fallback', Arial, sans-serif; | ||
| } | ||
| } | ||
|
|
||
| /* Gold gradient utility - matches qron.space */ | ||
| .gradient-gold { | ||
| background: linear-gradient(135deg, #E8C547 0%, #C9A227 50%, #A07D10 100%); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background-clip: text; | ||
| } | ||
|
|
||
| /* Gold glow */ | ||
| .glow-gold { | ||
| box-shadow: 0 0 20px rgba(201, 162, 39, 0.35); | ||
| } | ||
|
|
||
| /* Gold button */ | ||
| .btn-gold { | ||
| background: linear-gradient(135deg, #E8C547, #C9A227); | ||
| color: #0a0a0a; | ||
| font-weight: 700; | ||
| transition: opacity 0.2s, transform 0.1s; | ||
| } | ||
| .btn-gold:hover { | ||
| opacity: 0.9; | ||
| transform: translateY(-1px); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This commit replaces the old gradient utilities with
.gradient-gold, but existing callers still reference.gradient-primaryand.gradient-text(for examplecomponents/ui/button.tsx,components/ui/progress.tsx, and severalapp/*/page.tsxfiles). After this change those class names have no definitions, so large parts of the UI lose intended branding styles.Useful? React with 👍 / 👎.