feat: do a total theme redesign #8

Merged
naomi merged 3 commits from feat/theme into main 2026-01-29 16:11:18 -08:00
Showing only changes of commit 72f7b05beb - Show all commits
+14 -4
View File
@@ -216,7 +216,7 @@ nhcarriganHeadersStyles.innerHTML = `
html { html {
font-family: 'Vampyr', monospace; font-family: 'Vampyr', monospace;
cursor: url('https://cdn.nhcarrigan.com/cursors/rose-cursor.png') 16 16, url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g transform="translate(12 12) rotate(-45 12 12)"><circle cx="12" cy="6" r="5" fill="%232B1B3D"/><circle cx="6" cy="12" r="5" fill="%232B1B3D"/><circle cx="18" cy="12" r="5" fill="%232B1B3D"/><circle cx="12" cy="18" r="5" fill="%232B1B3D"/><circle cx="12" cy="12" r="3.5" fill="%23A8577E"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="1.5" fill="%23D4A5C7" opacity="0.8"/></svg>') 0 0, url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
min-height: 100vh; min-height: 100vh;
min-width: 100vw; min-width: 100vw;
} }
@@ -335,7 +335,7 @@ footer {
background: none; background: none;
border: 1px solid var(--witch-plum); border: 1px solid var(--witch-plum);
border-radius: 20px; border-radius: 20px;
cursor: url('https://cdn.nhcarrigan.com/cursors/rose-pointer.png') 16 16, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23glow)"><circle cx="12" cy="6" r="5.5" fill="%23A8577E"/><circle cx="6" cy="12" r="5.5" fill="%23A8577E"/><circle cx="18" cy="12" r="5.5" fill="%23A8577E"/><circle cx="12" cy="18" r="5.5" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="2" fill="%23D4A5C7" opacity="0.9"/></svg>') 0 0, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
color: var(--witch-lavender); color: var(--witch-lavender);
font-size: 1rem; font-size: 1rem;
font-family: 'Vampyr', monospace; font-family: 'Vampyr', monospace;
@@ -357,7 +357,7 @@ footer {
a { a {
color: var(--accent); color: var(--accent);
cursor: url('https://cdn.nhcarrigan.com/cursors/rose-pointer.png') 16 16, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23glow)"><circle cx="12" cy="6" r="5.5" fill="%23A8577E"/><circle cx="6" cy="12" r="5.5" fill="%23A8577E"/><circle cx="18" cy="12" r="5.5" fill="%23A8577E"/><circle cx="12" cy="18" r="5.5" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="2" fill="%23D4A5C7" opacity="0.9"/></svg>') 0 0, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
text-decoration: none; text-decoration: none;
} }
@@ -367,6 +367,7 @@ a:hover {
text-decoration: underline; text-decoration: underline;
text-decoration-color: var(--witch-mauve); text-decoration-color: var(--witch-mauve);
text-underline-offset: 3px; text-underline-offset: 3px;
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="sparkle"><feGaussianBlur stdDeviation="4" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23sparkle)"><circle cx="12" cy="6" r="6" fill="%23A8577E"/><circle cx="6" cy="12" r="6" fill="%23A8577E"/><circle cx="18" cy="12" r="6" fill="%23A8577E"/><circle cx="12" cy="18" r="6" fill="%23A8577E"/><circle cx="12" cy="12" r="4.5" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="3"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2.5"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2.5"/></g><circle cx="3" cy="3" r="2.5" fill="%23E8D5E8"/><circle cx="8" cy="1" r="1" fill="%23D4A5C7"/><circle cx="1" cy="8" r="1" fill="%23D4A5C7"/></svg>') 0 0, pointer;
} }
#tree-nation-offset-website { #tree-nation-offset-website {
@@ -505,6 +506,10 @@ input, textarea, select {
outline: none; outline: none;
} }
input[type="text"], input[type="email"], input[type="password"], textarea {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><line x1="12" y1="6" x2="12" y2="42" stroke="%232B1B3D" stroke-width="2"/><line x1="8" y1="6" x2="16" y2="6" stroke="%232B1B3D" stroke-width="2"/><line x1="8" y1="42" x2="16" y2="42" stroke="%232B1B3D" stroke-width="2"/><circle cx="12" cy="24" r="3" fill="%23A8577E" opacity="0.5"/></svg>') 12 24, text;
}
input:focus, textarea:focus, select:focus { input:focus, textarea:focus, select:focus {
border-color: var(--witch-rose); border-color: var(--witch-rose);
box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.15); box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.15);
@@ -520,7 +525,7 @@ button, input[type="submit"], input[type="button"] {
color: var(--witch-moon); color: var(--witch-moon);
border: none; border: none;
border-radius: 25px; border-radius: 25px;
cursor: url('https://cdn.nhcarrigan.com/cursors/rose-pointer.png') 16 16, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23glow)"><circle cx="12" cy="6" r="5.5" fill="%23A8577E"/><circle cx="6" cy="12" r="5.5" fill="%23A8577E"/><circle cx="18" cy="12" r="5.5" fill="%23A8577E"/><circle cx="12" cy="18" r="5.5" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="2" fill="%23D4A5C7" opacity="0.9"/></svg>') 0 0, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
@@ -623,6 +628,11 @@ pre {
color: var(--witch-moon); color: var(--witch-moon);
} }
/* Draggable elements */
[draggable="true"] {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g transform="translate(12 12)"><path d="M12 2 L2 12 L12 22 L22 12 Z" fill="%232B1B3D"/><circle cx="12" cy="12" r="6" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 4 L12 0 M12 24 L12 20 M4 12 L0 12 M24 12 L20 12" stroke="%232B1B3D" stroke-width="2"/></g></svg>') 12 12, move;
}
@media screen and (max-width: 625px) { @media screen and (max-width: 625px) {
#tree-nation-offset-website { #tree-nation-offset-website {
display: none; display: none;