Skip to content

Commit f4f1f45

Browse files
fezcodefezcode
committed
style: the vague page v2
1 parent b28dfd5 commit f4f1f45

File tree

3 files changed

+73
-36
lines changed

3 files changed

+73
-36
lines changed

‎src/components/VagueEditorialModal.jsx‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const VagueEditorialModal = ({
4040
{/* Header / Top Bar */}
4141
<div className={`flex items-center justify-between p-6 border-b ${isInvert ? 'border-white/10' : 'border-black/10'}`}>
4242
<div className="flex flex-col">
43-
<span className="font-instr-sans text-[10px] uppercase tracking-[0.3em] opacity-50 mb-1">Archive Record</span>
43+
<span className="font-instr-sans text-[10px] uppercase tracking-[0.3em] opacity-50 mb-1">Issue Details</span>
4444
<span className="font-instr-sans text-[11px] font-black uppercase tracking-widest">{date}</span>
4545
</div>
4646
<button
@@ -54,6 +54,20 @@ const VagueEditorialModal = ({
5454
{/* Content Area */}
5555
<div className="p-8 md:p-16 flex-1 overflow-y-auto custom-scrollbar">
5656
<div className="max-w-2xl mx-auto text-center">
57+
{item.image && (
58+
<div className="mb-12 relative group">
59+
<img
60+
src={item.image}
61+
alt={title}
62+
className={`w-full max-w-sm mx-auto shadow-2xl transition-all duration-700
63+
${isInvert
64+
? 'grayscale invert contrast-125'
65+
: 'grayscale contrast-125'}`}
66+
/>
67+
<div className={`absolute inset-0 pointer-events-none border border-current opacity-10`} />
68+
</div>
69+
)}
70+
5771
<h2 className="text-5xl md:text-7xl font-instr-serif italic leading-none mb-12">
5872
{title}
5973
</h2>
@@ -70,19 +84,16 @@ const VagueEditorialModal = ({
7084
href={url}
7185
target="_blank"
7286
rel="noopener noreferrer"
73-
className={`group flex items-center gap-4 px-10 py-5 transition-all duration-300 border-2
74-
${isInvert
75-
? 'bg-white text-black border-white hover:bg-transparent hover:text-white'
76-
: 'bg-black text-white border-black hover:bg-transparent hover:text-black'}`}
87+
className="c-button -whiteInvert !h-auto !py-4 !px-10 group"
7788
>
78-
<span className="font-instr-sans font-black text-xs uppercase tracking-[0.3em]">
79-
{item.actionLabel || "Download Artifact"}
89+
<span className="c-button_label uppercase tracking-[0.3em] text-xs font-black flex items-center gap-4">
90+
Download PDF
91+
<DownloadSimpleIcon weight="bold" size={20} className="group-hover:translate-y-1 transition-transform" />
8092
</span>
81-
<DownloadSimpleIcon weight="bold" size={20} className="group-hover:translate-y-1 transition-transform" />
8293
</a>
8394

8495
<p className="font-instr-sans text-[9px] uppercase tracking-[0.2em] opacity-40">
85-
Format: Portable Document Format (PDF)
96+
Format: PDF Document
8697
</p>
8798
</div>
8899
)}

‎src/pages/TheVaguePage.jsx‎

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const TheVaguePage = () => {
130130
</button>
131131
</div>
132132
<div className="c-nav_panel_main font-instr-sans">
133-
Archive Index <ol className="c-nav_panel_list font-instr-sans">
133+
Collection Index <ol className="c-nav_panel_list font-instr-sans">
134134
{sortedIssues.map((issue, idx) => (
135135
<li key={issue.id || idx} className="c-nav_panel_item group">
136136
<button
@@ -167,41 +167,67 @@ const TheVaguePage = () => {
167167
<div className="o-scroll h-screen overflow-y-auto overflow-x-hidden">
168168
<main>
169169
{/* HERO / NEWSPAPER SECTION */}
170-
{latestIssue && (
171-
<div id="introduction">
172-
<div className="c-newspaper">
173-
<div className="c-newspaper_container">
170+
<div className="c-newspaper">
171+
<div className="c-newspaper_container">
172+
{latestIssue && (
173+
<div id="introduction">
174174
<div className="o-container pt-24 md:pt-32">
175175
<Link
176176
to="/"
177177
className="c-nav_panel_link inline-flex items-center gap-2 mb-12"
178178
>
179179
<span className="c-nav_panel_label -under font-instr-sans uppercase tracking-[0.3em] text-[10px] font-black">← Back to Fezcodex</span>
180-
</Link> <header className="c-newspaper_header"> <p className="c-newspaper_header_subtitle font-instr-sans uppercase tracking-[0.2em] text-[11px] opacity-50">Issue No. {issues.length} {'//'} {latestIssue.date}</p>
181-
<h1 className="c-newspaper_header_title font-instr-serif italic">
182-
{latestIssue.title}
183-
</h1>
184-
<div className="c-newspaper_header_info font-instr-sans uppercase tracking-widest text-[10px] font-bold">
185-
<p>Volumes</p>
186-
<p>Latest Artifact</p>
180+
</Link> <header className="c-newspaper_header">
181+
<p className="c-newspaper_header_subtitle font-instr-sans uppercase tracking-[0.2em] text-[11px] opacity-50">Issue No. {issues.length} {'//'} {latestIssue.date}</p>
182+
<h1 className="c-newspaper_header_title font-instr-serif italic">
183+
{latestIssue.title}
184+
</h1>
185+
<div className="c-newspaper_header_info font-instr-sans uppercase tracking-widest text-[10px] font-bold">
186+
<p>Volumes</p>
187+
<p>Latest Publication</p>
188+
</div>
189+
</header>
190+
<div className="c-newspaper_intro font-instr-serif italic">
191+
<p>
192+
{latestIssue.description}
193+
</p>
194+
</div>
195+
196+
<div className="mt-8 font-instr-sans pb-20 text-center">
197+
<button className="c-button -whiteInvert group" onClick={() => handleIssueClick(latestIssue)}>
198+
<span className="c-button_label uppercase tracking-widest text-xs font-black">View Issue</span>
199+
</button>
200+
</div>
187201
</div>
188-
</header>
189-
<div className="c-newspaper_intro font-instr-serif italic">
190-
<p>
191-
{latestIssue.description}
192-
</p>
193202
</div>
203+
)}
194204

195-
<div className="mt-8 font-instr-sans pb-20 text-center">
196-
<button className="c-button -black" onClick={() => handleIssueClick(latestIssue)}>
197-
<span className="c-button_label uppercase tracking-widest text-xs font-black">Open Issue Artifact</span>
198-
</button>
205+
{/* ARCHIVE LIST SECTION */}
206+
<hr className="w-full border-t border-current border-opacity-20 !ml-0" />
207+
<section className="pb-32 o-container relative z-10">
208+
<div className="pt-12">
209+
<h2 className="font-instr-sans uppercase tracking-[0.3em] text-[11px] mb-16 opacity-70 font-black">Issue Collection</h2>
210+
<div className="flex flex-col">
211+
{sortedIssues.map((issue, idx) => (
212+
<button
213+
key={issue.id || idx}
214+
onClick={() => handleIssueClick(issue)}
215+
className="flex flex-col md:flex-row md:items-baseline justify-between group border-b border-current border-opacity-10 py-8 hover:opacity-50 transition-all text-left"
216+
>
217+
<div className="flex items-baseline gap-6">
218+
<span className="font-instr-sans text-[10px] opacity-50">0{issues.length - idx}</span>
219+
<span className="font-instr-serif italic text-4xl md:text-7xl leading-tight">{issue.title}</span>
220+
</div>
221+
<div className="flex flex-col md:text-right mt-4 md:mt-0">
222+
<span className="font-instr-sans text-[10px] uppercase tracking-[0.2em] font-bold">{issue.date}</span>
223+
<span className="font-instr-sans text-[9px] uppercase tracking-widest opacity-60 mt-1">Read Now</span>
224+
</div>
225+
</button>
226+
))}
227+
</div>
199228
</div>
200-
</div>
201-
</div>
202-
</div>
203-
</div>
204-
)}
229+
</section> </div>
230+
</div>
205231
</main>
206232
</div>
207233

‎src/styles/EditorialNew.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ hr { margin-top: 0; margin-bottom: 0; border-top: 1px solid rgba(26, 26, 26, .25
184184

185185
/* Button Styles */
186186
.c-button {
187-
position: relative; height: 2.66667rem; padding: 0 1.33333rem; border-radius: 1.38889rem;
187+
position: relative; height: 2.66667rem; padding: 0 1.33333rem; border-radius: 0;
188188
font-family: 'Instrument Sans', sans-serif; display: inline-flex; align-items: center; justify-content: center;
189189
border: 2px solid #1a1a1a; color: #1a1a1a;
190190
}

0 commit comments

Comments
 (0)