Skip to content

Commit 3b4e669

Browse files
fezcodefezcode
committed
feat: better visibility on log cards for luxe
1 parent 8e26b34 commit 3b4e669

File tree

2 files changed

+71
-64
lines changed

2 files changed

+71
-64
lines changed

‎src/components/LuxeArt.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useMemo } from 'react';
22

3-
const LuxeArt = ({ seed = 'luxe', className, transparent = false }) => {
3+
const LuxeArt = ({ seed = 'luxe', className, transparent = false, colorful = false }) => {
44
// LCG Random Generator
55
const rng = useMemo(() => {
66
let h = 0xdeadbeef;
@@ -61,9 +61,9 @@ const LuxeArt = ({ seed = 'luxe', className, transparent = false }) => {
6161
// const color = `hsla(${baseHue + (r() - 0.5) * 40}, ${saturation}%, ${lightness - i * 5}%, ${opacity})`;
6262
// Force grayscale/gold/bronze tones for "Luxe"
6363
const isGold = r() > 0.8;
64-
const hue = isGold ? 45 : baseHue; // 45 is roughly gold
65-
const sat = isGold ? 60 : 0; // Grayscale or Gold
66-
const lit = isGold ? 60 : 90 - i * 5;
64+
const hue = isGold ? 45 : (baseHue + (r() - 0.5) * 30);
65+
const sat = colorful ? (40 + r() * 40) : (isGold ? 60 : 0);
66+
const lit = colorful ? (70 + r() * 15) : (isGold ? 60 : 90 - i * 5);
6767

6868
items.push({
6969
d,
@@ -84,7 +84,7 @@ const LuxeArt = ({ seed = 'luxe', className, transparent = false }) => {
8484
}
8585

8686
return { curves: items, specks };
87-
}, [rng, transparent]);
87+
}, [rng, transparent, colorful]);
8888

8989
return (
9090
<div className={`w-full h-full overflow-hidden relative ${!transparent && 'bg-[#EBEBEB]'} ${className}`}>

‎src/pages/luxe-views/LuxeLogsPage.jsx‎

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { MagnifyingGlassIcon, StarIcon, ArrowUpRightIcon } from '@phosphor-icons
44
import Seo from '../../components/Seo';
55
import piml from 'piml';
66
import colors from '../../config/colors';
7+
import LuxeArt from '../../components/LuxeArt';
78

89
const categories = [
910
'Book', 'Movie', 'Video', 'Game', 'Article', 'Music',
@@ -120,66 +121,72 @@ const LuxeLogsPage = () => {
120121
</header>
121122

122123
<div className="space-y-0">
123-
{loading ? (
124-
<div className="py-32 text-center font-outfit text-[#1A1A1A]/40">Loading Archives...</div>
125-
) : (
126-
filteredLogs.map((log) => {
127-
const color = colors[log.category.toLowerCase()] || '#1A1A1A';
128-
return (
129-
<Link
130-
key={log.id}
131-
to={`/logs/${log.category.toLowerCase()}/${log.slug}`}
132-
className="group block border-b border-[#1A1A1A]/5 py-8 hover:bg-white transition-all px-6 -mx-6 rounded-sm"
124+
{loading ? (
125+
<div className="py-32 text-center font-outfit text-[#1A1A1A]/40">Loading Archives...</div>
126+
) : (
127+
filteredLogs.map((log) => {
128+
const color = colors[log.category.toLowerCase()] || '#1A1A1A';
129+
return (
130+
<Link
131+
key={log.id}
132+
to={`/logs/${log.category.toLowerCase()}/${log.slug}`}
133+
className="group relative block border-b border-[#1A1A1A]/5 py-8 transition-all px-6 -mx-6 rounded-sm overflow-hidden"
134+
>
135+
{/* Background Art */}
136+
<div className="absolute inset-0 opacity-10 group-hover:opacity-30 transition-opacity duration-700 pointer-events-none">
137+
<LuxeArt seed={log.title} colorful={false} className="w-full h-full mix-blend-multiply transition-transform duration-1000 group-hover:scale-110" />
138+
</div>
139+
140+
<div className="relative z-10 flex flex-col md:flex-row md:items-center gap-6 md:gap-12">
141+
{/* Metadata Column */}
142+
<div className="flex items-center gap-8 md:w-48 shrink-0">
143+
<span className="font-outfit text-[10px] uppercase tracking-widest text-[#1A1A1A]/30 w-16">
144+
{new Date(log.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
145+
</span>
146+
<span
147+
className="font-outfit text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 border rounded-full transition-colors text-black"
148+
style={{
149+
backgroundColor: color,
150+
borderColor: color,
151+
}}
133152
>
134-
<div className="flex flex-col md:flex-row md:items-center gap-6 md:gap-12">
135-
{/* Metadata Column */}
136-
<div className="flex items-center gap-8 md:w-48 shrink-0">
137-
<span className="font-outfit text-[10px] uppercase tracking-widest text-[#1A1A1A]/30 w-16">
138-
{new Date(log.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
139-
</span>
140-
<span
141-
className="font-outfit text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 border rounded-full transition-colors text-black"
142-
style={{
143-
backgroundColor: color,
144-
borderColor: color,
145-
}}
146-
>
147-
{log.category}
148-
</span>
149-
</div>
150-
{/* Title Column */}
151-
<div className="flex-1 min-w-0">
152-
<h2 className="font-playfairDisplay text-2xl md:text-3xl text-[#1A1A1A] group-hover:italic transition-all leading-tight truncate">
153-
{log.title}
154-
</h2>
155-
{log.author && (
156-
<p className="font-outfit text-xs text-[#1A1A1A]/40 mt-1 uppercase tracking-wider">
157-
{log.author}
158-
</p>
159-
)}
160-
</div>
161-
162-
{/* Rating & Action */}
163-
<div className="flex items-center justify-between md:justify-end gap-12 md:w-48 shrink-0">
164-
<div className="flex gap-0.5">
165-
{[...Array(5)].map((_, i) => (
166-
<StarIcon
167-
key={i}
168-
size={12}
169-
weight="fill"
170-
className={i < (log.rating || 0) ? "text-[#8D4004]" : "text-[#1A1A1A]/10"}
171-
/>
172-
))}
173-
</div>
174-
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
175-
<ArrowUpRightIcon size={20} className="text-[#1A1A1A]/20" />
176-
</div>
177-
</div>
178-
</div>
179-
</Link>
180-
);
181-
})
182-
)}
153+
{log.category}
154+
</span>
155+
</div>
156+
157+
{/* Title Column */}
158+
<div className="flex-1 min-w-0">
159+
<h2 className="font-playfairDisplay text-2xl md:text-3xl text-[#1A1A1A] group-hover:italic transition-all leading-tight truncate">
160+
{log.title}
161+
</h2>
162+
{log.author && (
163+
<p className="font-outfit text-xs text-[#1A1A1A]/40 mt-1 uppercase tracking-wider">
164+
{log.author}
165+
</p>
166+
)}
167+
</div>
168+
169+
{/* Rating & Action */}
170+
<div className="flex items-center justify-between md:justify-end gap-12 md:w-48 shrink-0">
171+
<div className="flex gap-0.5">
172+
{[...Array(5)].map((_, i) => (
173+
<StarIcon
174+
key={i}
175+
size={12}
176+
weight="fill"
177+
className={i < (log.rating || 0) ? "text-[#8D4004]" : "text-[#1A1A1A]/10"}
178+
/>
179+
))}
180+
</div>
181+
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
182+
<ArrowUpRightIcon size={20} className="text-[#1A1A1A]/20" />
183+
</div>
184+
</div>
185+
</div>
186+
</Link>
187+
);
188+
})
189+
)}
183190
</div>
184191

185192
</div>

0 commit comments

Comments
 (0)