Skip to content

style: update color scheme to Gruvbox theme #4

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style: update color scheme to Gruvbox theme #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,36 +94,36 @@ function App() {

if (loading) {
return (
<div className="min-h-screen bg-neutral-50 flex items-center justify-center">
<p className="text-neutral-400 text-sm">Loading...</p>
<div className="min-h-screen bg-[#fbf1c7] flex items-center justify-center">
<p className="text-[#928374] text-sm">Loading...</p>
</div>
)
}

if (error) {
return (
<div className="min-h-screen bg-neutral-50 flex items-center justify-center">
<p className="text-neutral-500 text-sm">{error}</p>
<div className="min-h-screen bg-[#fbf1c7] flex items-center justify-center">
<p className="text-[#7c6f64] text-sm">{error}</p>
</div>
)
}

return (
<div className="min-h-screen bg-neutral-50 relative">
<div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-orange-200 to-transparent pointer-events-none"></div>
<div className="min-h-screen bg-[#fbf1c7] relative">
<div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-[#fabd2f]/20 to-transparent pointer-events-none"></div>
<div className="max-w-3xl mx-auto px-6 py-12 relative">
<header className="mb-8">
<h1 className="text-4xl font-extrabold text-slate-900 tracking-tight">
<h1 className="text-4xl font-extrabold text-[#3c3836] tracking-tight">
Calm HN
</h1>
<p className="text-slate-500 text-[10px] mt-2 uppercase tracking-wider">
<p className="text-[#7c6f64] text-[10px] mt-2 uppercase tracking-wider">
Top stories from the last three months
</p>
</header>

<div className="space-y-6">
{stories.map((story, index) => (
<article key={story.id} className="group -mx-3 px-3 py-3 rounded-lg hover:bg-slate-100 transition-colors duration-300 relative">
<article key={story.id} className="group -mx-3 px-3 py-3 rounded-lg hover:bg-[#ebdbb2] transition-colors duration-300 relative">
<a
href={story.url || `https://news.ycombinator.com/item?id=${story.id}`}
target="_blank"
Expand All @@ -132,10 +132,10 @@ function App() {
aria-label={story.title}
/>
<div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 relative z-10 pointer-events-none">
<span className="bg-slate-200 text-slate-500 text-[10px] leading-none font-medium px-2 py-0.5 rounded-full flex-shrink-0 self-center mt-px group-hover:bg-orange-200 group-hover:text-slate-600 transition-colors group-hover:duration-[750ms] duration-300">
<span className="bg-[#d5c4a1] text-[#665c54] text-[10px] leading-none font-medium px-2 py-0.5 rounded-full flex-shrink-0 self-center mt-px group-hover:bg-[#fabd2f] group-hover:text-[#3c3836] transition-colors group-hover:duration-[750ms] duration-300">
{index + 1}
</span>
<h2 className="text-slate-900 text-lg leading-relaxed">
<h2 className="text-[#282828] text-lg leading-relaxed">
<span className="inline-flex items-baseline gap-1.5">
{story.title}
{story.url && (
Expand All @@ -144,7 +144,7 @@ function App() {
</span>
</h2>
<div></div>
<div className="flex items-center gap-3 text-xs text-slate-400 group-hover:text-slate-500 transition-colors duration-300">
<div className="flex items-center gap-3 text-xs text-[#928374] group-hover:text-[#7c6f64] transition-colors duration-300">
<span className="flex items-center gap-1">
<ArrowUp size={12} weight="regular" className="opacity-60" />
{story.score}
Expand Down