Skip to content

Commit ac3e88b

Browse files
fezcodefezcode
committed
feat: the vague modal responsiveness
1 parent bd45739 commit ac3e88b

File tree

2 files changed

+17
-17
lines changed

2 files changed

+17
-17
lines changed

‎src/components/VagueEditorialModal.jsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,33 +33,33 @@ const VagueEditorialModal = ({
3333
initial={{ opacity: 0, y: 50, scale: 0.98 }}
3434
animate={{ opacity: 1, y: 0, scale: 1 }}
3535
exit={{ opacity: 0, y: 30, scale: 0.98 }}
36-
className={`relative w-full max-w-3xl overflow-hidden flex flex-col shadow-2xl transition-colors duration-500
36+
className={`relative w-full max-w-3xl max-h-[90vh] md:max-h-[85vh] overflow-hidden flex flex-col shadow-2xl transition-colors duration-500
3737
${isInvert ? 'bg-[#1a1a1a] text-[#f4f4f4]' : 'bg-[#f4f4f4] text-[#1a1a1a]'}`}
3838
onClick={(e) => e.stopPropagation()}
3939
>
4040
{/* Header / Top Bar */}
41-
<div className={`flex items-center justify-between p-6 border-b ${isInvert ? 'border-[#f4f4f4]/25' : 'border-[#1a1a1a]/25'}`}>
41+
<div className={`flex items-center justify-between p-4 md:p-6 border-b ${isInvert ? 'border-[#f4f4f4]/25' : 'border-[#1a1a1a]/25'}`}>
4242
<div className="flex flex-col">
43-
<span className="font-instr-sans text-[10px] uppercase tracking-[0.3em] opacity-50 mb-1">Issue Details</span>
44-
<span className="font-instr-sans text-[11px] font-black uppercase tracking-widest">{date}</span>
43+
<span className="font-instr-sans text-[9px] md:text-[10px] uppercase tracking-[0.3em] opacity-50 mb-1">Issue Details</span>
44+
<span className="font-instr-sans text-[10px] md:text-[11px] font-black uppercase tracking-widest">{date}</span>
4545
</div>
4646
<button
4747
onClick={onClose}
4848
className={`p-2 transition-transform hover:rotate-90 duration-300 ${isInvert ? 'text-[#f4f4f4]' : 'text-[#1a1a1a]'}`}
4949
>
50-
<XIcon weight="bold" size={24} />
50+
<XIcon weight="bold" size={20} className="md:w-6 md:h-6" />
5151
</button>
5252
</div>
5353

5454
{/* Content Area */}
55-
<div className="p-8 md:p-16 flex-1 overflow-y-auto custom-scrollbar">
55+
<div className="p-6 md:p-16 flex-1 overflow-y-auto custom-scrollbar">
5656
<div className="max-w-2xl mx-auto text-center">
5757
{item.image && (
58-
<div className="mb-12 relative group">
58+
<div className="mb-8 md:mb-12 relative group">
5959
<img
6060
src={item.image}
6161
alt={title}
62-
className={`w-full max-w-sm mx-auto shadow-2xl transition-all duration-700
62+
className={`w-full max-w-[180px] md:max-w-sm mx-auto shadow-2xl transition-all duration-700
6363
${isInvert
6464
? 'grayscale invert contrast-125'
6565
: 'grayscale contrast-125'}`}
@@ -68,31 +68,31 @@ const VagueEditorialModal = ({
6868
</div>
6969
)}
7070

71-
<h2 className="text-5xl md:text-7xl font-instr-serif italic leading-none mb-12">
71+
<h2 className="text-4xl md:text-7xl font-instr-serif italic leading-tight md:leading-none mb-6 md:mb-12">
7272
{title}
7373
</h2>
7474

75-
<div className={`w-12 h-px mx-auto mb-12 ${isInvert ? 'bg-[#f4f4f4]/25' : 'bg-[#1a1a1a]/25'}`} />
75+
<div className={`w-12 h-px mx-auto mb-8 md:mb-12 ${isInvert ? 'bg-[#f4f4f4]/25' : 'bg-[#1a1a1a]/25'}`} />
7676

77-
<p className="text-xl md:text-2xl font-instr-serif leading-relaxed italic opacity-80 mb-16">
77+
<p className="text-lg md:text-2xl font-instr-serif leading-relaxed italic opacity-80 mb-10 md:mb-16">
7878
{description}
7979
</p>
8080

8181
{url && url !== '#' && (
82-
<div className="mt-8 flex flex-col items-center gap-6">
82+
<div className="mt-4 md:mt-8 flex flex-col items-center gap-4 md:gap-6">
8383
<a
8484
href={url}
8585
target="_blank"
8686
rel="noopener noreferrer"
87-
className="c-button -whiteInvert !h-auto !py-4 !px-10 group"
87+
className="c-button -whiteInvert !h-auto !py-3 md:!py-4 !px-8 md:!px-10 group"
8888
>
89-
<span className="c-button_label uppercase tracking-[0.3em] text-xs font-black flex items-center gap-4">
89+
<span className="c-button_label uppercase tracking-[0.3em] text-[10px] md:text-xs font-black flex items-center gap-3 md:gap-4">
9090
Download PDF
91-
<DownloadSimpleIcon weight="bold" size={20} className="group-hover:translate-y-1 transition-transform" />
91+
<DownloadSimpleIcon weight="bold" size={18} className="md:w-5 md:h-5 group-hover:translate-y-1 transition-transform" />
9292
</span>
9393
</a>
9494

95-
<p className="font-instr-sans text-[9px] uppercase tracking-[0.2em] opacity-40">
95+
<p className="font-instr-sans text-[8px] md:text-[9px] uppercase tracking-[0.2em] opacity-40">
9696
Format: PDF Document
9797
</p>
9898
</div>

‎src/pages/TheVaguePage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ const TheVaguePage = () => {
252252
>
253253
<div className="w-full">
254254
<span className="font-instr-sans text-[10px] opacity-50 block mb-8 uppercase tracking-widest font-black">No. 0{issues.length - idx}</span>
255-
<h3 className="font-instr-serif italic text-6xl md:text-8xl leading-[0.9] mb-12 group-hover:translate-x-4 transition-transform duration-700 w-full">
255+
<h3 className="font-instr-serif italic text-5xl md:text-8xl leading-[0.9] mb-12 group-hover:translate-x-4 transition-transform duration-700 w-full">
256256
{issue.title}
257257
</h3>
258258
</div>

0 commit comments

Comments
 (0)