Skip to content

Commit 7c79fe2

Browse files
fezcodefezcode
committed
feat: Sketchbook Mode.
1 parent e9aad60 commit 7c79fe2

File tree

6 files changed

+61
-4
lines changed

6 files changed

+61
-4
lines changed

‎src/components/CommandPalette.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,8 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
6161
isVaporwave, toggleVaporwave,
6262
isCyberpunk, toggleCyberpunk,
6363
isGameboy, toggleGameboy,
64-
isComic, toggleComic
64+
isComic, toggleComic,
65+
isSketchbook, toggleSketchbook
6566
} = useVisualSettings();
6667

6768
const filteredItems = filterItems(items, searchTerm);
@@ -268,6 +269,14 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
268269
duration: 2000
269270
});
270271
break;
272+
case 'toggleSketchbookMode':
273+
toggleSketchbook();
274+
addToast({
275+
title: !isSketchbook ? 'Sketchbook Mode On' : 'Sketchbook Mode Off',
276+
message: !isSketchbook ? 'Pencil sharpened.' : 'Notebook closed.',
277+
duration: 2000
278+
});
279+
break;
271280
case 'showTime': {
272281
openGenericModal('Current Time', <LiveClock/>);
273282
break;

‎src/context/VisualSettingsContext.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export const VisualSettingsProvider = ({children}) => {
2020
const [isCyberpunk, setIsCyberpunk] = usePersistentState('is-cyberpunk', false);
2121
const [isGameboy, setIsGameboy] = usePersistentState('is-gameboy', false);
2222
const [isComic, setIsComic] = usePersistentState('is-comic', false);
23+
const [isSketchbook, setIsSketchbook] = usePersistentState('is-sketchbook', false);
2324

2425
useEffect(() => {
2526
if (isInverted) {
@@ -117,6 +118,14 @@ export const VisualSettingsProvider = ({children}) => {
117118
}
118119
}, [isComic]);
119120

121+
useEffect(() => {
122+
if (isSketchbook) {
123+
document.body.classList.add('sketchbook-mode');
124+
} else {
125+
document.body.classList.remove('sketchbook-mode');
126+
}
127+
}, [isSketchbook]);
128+
120129
const toggleInvert = () => setIsInverted(prev => !prev);
121130
const toggleRetro = () => setIsRetro(prev => !prev);
122131
const toggleParty = () => setIsParty(prev => !prev);
@@ -129,6 +138,7 @@ export const VisualSettingsProvider = ({children}) => {
129138
const toggleCyberpunk = () => setIsCyberpunk(prev => !prev);
130139
const toggleGameboy = () => setIsGameboy(prev => !prev);
131140
const toggleComic = () => setIsComic(prev => !prev);
141+
const toggleSketchbook = () => setIsSketchbook(prev => !prev);
132142

133143
return (
134144
<VisualSettingsContext.Provider value={{
@@ -143,7 +153,8 @@ export const VisualSettingsProvider = ({children}) => {
143153
isVaporwave, toggleVaporwave,
144154
isCyberpunk, toggleCyberpunk,
145155
isGameboy, toggleGameboy,
146-
isComic, toggleComic
156+
isComic, toggleComic,
157+
isSketchbook, toggleSketchbook
147158
}}>
148159
{children}
149160
</VisualSettingsContext.Provider>);

‎src/hooks/useSearchableData.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ const useSearchableData = () => {
116116
{ title: 'Toggle Cyberpunk Mode', type: 'command', commandId: 'toggleCyberpunkMode' },
117117
{ title: 'Toggle Game Boy Mode', type: 'command', commandId: 'toggleGameboyMode' },
118118
{ title: 'Toggle Comic Book Mode', type: 'command', commandId: 'toggleComicMode' },
119+
{ title: 'Toggle Sketchbook Mode', type: 'command', commandId: 'toggleSketchbookMode' },
119120
];
120121

121122
setItems([...staticRoutes, ...customCommands, ...allPosts, ...allProjects, ...allLogs, ...allApps]);

‎src/index.css‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -489,4 +489,31 @@ body.comic-mode a {
489489

490490
body.comic-mode img {
491491
filter: contrast(1.5) saturate(1.5);
492-
}
492+
}
493+
494+
/* Sketchbook Mode */
495+
body.sketchbook-mode {
496+
background-color: #f9f8f2 !important;
497+
background-image: repeating-linear-gradient(#e5e5e5 0 1px, transparent 1px 100%);
498+
background-size: 100% 30px;
499+
color: #333333 !important;
500+
font-family: 'Segoe Print', 'Bradley Hand', cursive !important;
501+
}
502+
503+
body.sketchbook-mode * {
504+
border-color: #555555 !important;
505+
border-style: solid !important;
506+
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px !important; /* Wobbly lines */
507+
}
508+
509+
body.sketchbook-mode a {
510+
color: #669dd8 !important;
511+
text-decoration: underline;
512+
text-decoration-style: wavy;
513+
}
514+
515+
body.sketchbook-mode img {
516+
filter: grayscale(100%) sepia(30%) contrast(1.2);
517+
border: 2px solid #333;
518+
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
519+
}

‎src/pages/CommandsPage.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const commandsData = [
5959
{ title: "Toggle Cyberpunk Mode", description: "Switch to a high-tech, low-life dark neon look. (Easter Egg)", color: "yellow" },
6060
{ title: "Toggle Game Boy Mode", description: "Switch to a 4-color retro handheld look. (Easter Egg)", color: "lime" },
6161
{ title: "Toggle Comic Book Mode", description: "Switch to a vibrant pop-art comic style. (Easter Egg)", color: "red" },
62+
{ title: "Toggle Sketchbook Mode", description: "Switch to a hand-drawn sketchbook style. (Easter Egg)", color: "stone" },
6263
]
6364
},
6465
{

‎src/pages/SettingsPage.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,8 @@ const SettingsPage = () => {
4545
isVaporwave, toggleVaporwave,
4646
isCyberpunk, toggleCyberpunk,
4747
isGameboy, toggleGameboy,
48-
isComic, toggleComic
48+
isComic, toggleComic,
49+
isSketchbook, toggleSketchbook
4950
} = useVisualSettings();
5051

5152
const {addToast} = useToast();
@@ -257,6 +258,13 @@ const SettingsPage = () => {
257258
checked={isComic}
258259
onChange={toggleComic}
259260
/>
261+
<div className="mb-4"></div>
262+
<CustomToggle
263+
id="enable-sketchbook-mode"
264+
label="> Sketchbook Mode"
265+
checked={isSketchbook}
266+
onChange={toggleSketchbook}
267+
/>
260268
</div>
261269
{/* Sidebar Stuff */}
262270
<h1 className="text-3xl font-arvo font-normal mb-4 text-app">

0 commit comments

Comments
 (0)