Skip to content

Commit 306f417

Browse files
fezcodefezcode
committed
style: the vague page v3
1 parent f4f1f45 commit 306f417

File tree

5 files changed

+140
-131
lines changed

5 files changed

+140
-131
lines changed

‎src/components/Layout.jsx‎

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -59,13 +59,51 @@ const Layout = ({
5959

6060
const hideLayout = isAboutPage || isGraphPage || isSpecialProject || isTheVaguePage;
6161

62-
if (location.pathname.startsWith('/stories') || isSpecialProject) {
63-
return (
64-
<DndProvider>
65-
{children}
66-
</DndProvider>
67-
);
68-
}
62+
const mainContent = (location.pathname.startsWith('/stories')) ? (
63+
<DndProvider>
64+
{children}
65+
</DndProvider>
66+
) : (
67+
<div className="bg-[#050505] min-h-screen font-sans flex">
68+
{!hideLayout &&
69+
(sidebarMode === 'classic' ? (
70+
<ClassicSidebar
71+
isOpen={isSidebarOpen}
72+
toggleSidebar={toggleSidebar}
73+
toggleModal={toggleModal}
74+
setIsPaletteOpen={setIsPaletteOpen}
75+
sidebarColor={sidebarColor}
76+
/>
77+
) : (
78+
<BrutalistSidebar
79+
isOpen={isSidebarOpen}
80+
toggleSidebar={toggleSidebar}
81+
toggleModal={toggleModal}
82+
setIsPaletteOpen={setIsPaletteOpen}
83+
/>
84+
))}
85+
<div
86+
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen && !hideLayout ? (sidebarMode === 'classic' ? 'md:ml-64' : 'md:ml-72') : 'md:ml-0'}`}
87+
>
88+
{!hideLayout && (
89+
<Navbar
90+
toggleSidebar={toggleSidebar}
91+
isSidebarOpen={isSidebarOpen}
92+
isSearchVisible={isSearchVisible}
93+
toggleSearch={toggleSearch}
94+
/>
95+
)}
96+
{!hideLayout && isSearchVisible && (
97+
<Search isVisible={isSearchVisible} />
98+
)}
99+
<main className="flex-grow">{children}</main>
100+
{!hideLayout &&
101+
location.pathname !== '/projects' &&
102+
location.pathname !== '/blog' &&
103+
location.pathname !== '/commands' && <Footer />}
104+
</div>
105+
</div>
106+
);
69107

70108
return (
71109
<>
@@ -82,45 +120,7 @@ const Layout = ({
82120
toggleBSOD={toggleBSOD}
83121
/>
84122
{!hideLayout && <SidePanel />}
85-
<div className="bg-[#050505] min-h-screen font-sans flex">
86-
{!hideLayout &&
87-
(sidebarMode === 'classic' ? (
88-
<ClassicSidebar
89-
isOpen={isSidebarOpen}
90-
toggleSidebar={toggleSidebar}
91-
toggleModal={toggleModal}
92-
setIsPaletteOpen={setIsPaletteOpen}
93-
sidebarColor={sidebarColor}
94-
/>
95-
) : (
96-
<BrutalistSidebar
97-
isOpen={isSidebarOpen}
98-
toggleSidebar={toggleSidebar}
99-
toggleModal={toggleModal}
100-
setIsPaletteOpen={setIsPaletteOpen}
101-
/>
102-
))}
103-
<div
104-
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen && !hideLayout ? (sidebarMode === 'classic' ? 'md:ml-64' : 'md:ml-72') : 'md:ml-0'}`}
105-
>
106-
{!hideLayout && (
107-
<Navbar
108-
toggleSidebar={toggleSidebar}
109-
isSidebarOpen={isSidebarOpen}
110-
isSearchVisible={isSearchVisible}
111-
toggleSearch={toggleSearch}
112-
/>
113-
)}
114-
{!hideLayout && isSearchVisible && (
115-
<Search isVisible={isSearchVisible} />
116-
)}
117-
<main className="flex-grow">{children}</main>
118-
{!hideLayout &&
119-
location.pathname !== '/projects' &&
120-
location.pathname !== '/blog' &&
121-
location.pathname !== '/commands' && <Footer />}
122-
</div>
123-
</div>
123+
{mainContent}
124124
</>
125125
);
126126
};

‎src/components/VagueEditorialModal.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ const VagueEditorialModal = ({
3838
onClick={(e) => e.stopPropagation()}
3939
>
4040
{/* Header / Top Bar */}
41-
<div className={`flex items-center justify-between p-6 border-b ${isInvert ? 'border-white/10' : 'border-black/10'}`}>
41+
<div className={`flex items-center justify-between p-6 border-b ${isInvert ? 'border-[#f4f4f4]/25' : 'border-[#1a1a1a]/25'}`}>
4242
<div className="flex flex-col">
4343
<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
4747
onClick={onClose}
48-
className={`p-2 transition-transform hover:rotate-90 duration-300 ${isInvert ? 'text-white' : 'text-black'}`}
48+
className={`p-2 transition-transform hover:rotate-90 duration-300 ${isInvert ? 'text-[#f4f4f4]' : 'text-[#1a1a1a]'}`}
4949
>
5050
<XIcon weight="bold" size={24} />
5151
</button>
@@ -64,15 +64,15 @@ const VagueEditorialModal = ({
6464
? 'grayscale invert contrast-125'
6565
: 'grayscale contrast-125'}`}
6666
/>
67-
<div className={`absolute inset-0 pointer-events-none border border-current opacity-10`} />
67+
<div className={`absolute inset-0 pointer-events-none border ${isInvert ? 'border-[#f4f4f4]/25' : 'border-[#1a1a1a]/25'}`} />
6868
</div>
6969
)}
7070

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

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

7777
<p className="text-xl md:text-2xl font-instr-serif leading-relaxed italic opacity-80 mb-16">
7878
{description}

‎src/pages/AboutPage.jsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ import {
1212
BookBookmarkIcon,
1313
IdentificationCardIcon,
1414
} from '@phosphor-icons/react';
15-
import CommandPalette from '../components/CommandPalette';
16-
import { useCommandPalette } from '../context/CommandPaletteContext';
1715
import NeuromancerHUD from './about-views/NeuromancerHUD';
1816
import SystemArchitecture from './about-views/SystemArchitecture';
1917
import MindMapConstellation from './about-views/MindMapConstellation';
@@ -64,7 +62,6 @@ const AboutPage = () => {
6462
const validViews = ['dossier', 'hud', 'blueprint', 'map', 'brutalist', 'skills'];
6563

6664
const { unlockAchievement } = useAchievements();
67-
const { isPaletteOpen, setIsPaletteOpen } = useCommandPalette();
6865

6966
useEffect(() => {
7067
unlockAchievement('curious_soul');
@@ -169,7 +166,6 @@ const AboutPage = () => {
169166

170167
{/* Switcher Controls */}
171168
<ViewSwitcher currentView={view} />
172-
<CommandPalette isOpen={isPaletteOpen} setIsOpen={setIsPaletteOpen} />
173169
</div>
174170
);
175171
};

0 commit comments

Comments
 (0)