Skip to content

Commit e852efe

Browse files
shivv2430shivv2430
committed
Fix pencil cursor animation on contribution page
1 parent 31c256e commit e852efe

3 files changed

Lines changed: 426 additions & 2 deletions

File tree

‎frontend/css/contributing.css‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,112 @@
170170
padding: 1rem 0 2rem;
171171
}
172172

173+
html,
174+
body {
175+
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><path fill='%23cca43b' d='M4.42 20.58a1 1 0 0 0 1.41 0L15.24 11.2l-2.44-2.44L3.42 18.17a1 1 0 0 0 0 1.41zM17.36 9.08l-2.44-2.44 2.12-2.12a2 2 0 0 1 2.83 0l1.77 1.77a2 2 0 0 1 0 2.83z'/><path stroke='%23cca43b' stroke-width='1.5' d='M2 22l4-1'/></svg>") 0 24, auto !important;
176+
}
177+
178+
*:hover {
179+
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><path fill='%23ffca3a' d='M4.42 20.58a1 1 0 0 0 1.41 0L15.24 11.2l-2.44-2.44L3.42 18.17a1 1 0 0 0 0 1.41zM17.36 9.08l-2.44-2.44 2.12-2.12a2 2 0 0 1 2.83 0l1.77 1.77a2 2 0 0 1 0 2.83z'/><path stroke='%23ffca3a' stroke-width='1.5' d='M2 22l4-1'/></svg>") 0 24, pointer !important;
180+
}
181+
182+
#sc-glow-outer,
183+
#sc-glow-mid,
184+
#sc-glow-inner,
185+
#sc-dot {
186+
position: fixed;
187+
pointer-events: none;
188+
border-radius: 50%;
189+
transform: translate(-50%, -50%);
190+
will-change: left, top;
191+
}
192+
193+
/* Move ambient glow behind content to avoid overlapping cards */
194+
#sc-glow-outer {
195+
width: 120px;
196+
height: 120px;
197+
background: radial-gradient(circle, rgba(93, 64, 55, 0.25) 0%, transparent 70%);
198+
filter: blur(18px);
199+
mix-blend-mode: normal;
200+
z-index: 99996;
201+
}
202+
203+
#sc-glow-mid {
204+
width: 60px;
205+
height: 60px;
206+
background: radial-gradient(circle, rgba(93, 64, 55, 0.40) 0%, rgba(93, 64, 55, 0.15) 50%, transparent 75%);
207+
filter: blur(8px);
208+
mix-blend-mode: normal;
209+
z-index: 99997;
210+
}
211+
212+
#sc-glow-inner {
213+
width: 24px;
214+
height: 24px;
215+
background: radial-gradient(circle, rgba(93, 64, 55, 0.60) 0%, transparent 100%);
216+
filter: blur(4px);
217+
mix-blend-mode: normal;
218+
z-index: 99998;
219+
}
220+
221+
#sc-dot {
222+
width: 9px;
223+
height: 9px;
224+
background: #5d4037;
225+
opacity: 1;
226+
z-index: 99999;
227+
}
228+
229+
[data-theme="night"] #sc-glow-outer {
230+
background: radial-gradient(circle, rgba(212, 184, 150, 0.12) 4%, transparent 70%);
231+
mix-blend-mode: normal;
232+
}
233+
234+
[data-theme="night"] #sc-glow-mid {
235+
background: radial-gradient(circle, rgba(212, 184, 150, 0.25) 0%, rgba(212, 184, 150, 0.07) 50%, transparent 75%);
236+
mix-blend-mode: normal;
237+
}
238+
239+
[data-theme="night"] #sc-glow-inner {
240+
background: radial-gradient(circle, rgba(212, 184, 150, 0.5) 0%, transparent 75%);
241+
mix-blend-mode: normal;
242+
}
243+
244+
[data-theme="night"] #sc-dot {
245+
background: #D4B896;
246+
}
247+
248+
@media (hover: none) {
249+
250+
#sc-glow-outer,
251+
#sc-glow-mid,
252+
#sc-glow-inner,
253+
#sc-dot {
254+
display: none;
255+
}
256+
}
257+
258+
.sc-sparkle {
259+
position: fixed;
260+
pointer-events: none;
261+
z-index: 99995;
262+
transform: translate(-50%, -50%);
263+
animation: sc-pop 0.8s ease-out forwards;
264+
}
265+
/* Sparkle animations */
266+
.sparkle {
267+
animation: sparkle 2s ease-in-out infinite;
268+
}
269+
270+
.sparkle-1 { animation-delay: 0s; }
271+
.sparkle-2 { animation-delay: 0.6s; }
272+
.sparkle-3 { animation-delay: 1.2s; }
273+
274+
@keyframes sparkle {
275+
0%, 100% { opacity: 0; transform: scale(0); }
276+
50% { opacity: 1; transform: scale(1); }
277+
}
278+
173279

174280
.landing-cta-group,
175281
.contribute-actions {
@@ -950,3 +1056,142 @@
9501056
[data-theme="night"] .toc a {
9511057
color: #ffffff !important;
9521058
}
1059+
1060+
/* PENCIL CURSOR ANIMATION */
1061+
1062+
body.landing-page {
1063+
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235d4037" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5a4 4 0 0 1-2.5.88H2v-4.5a4 4 0 0 1 .88-2.5L17 3"></path></svg>') 5 1, auto;
1064+
}
1065+
1066+
/* Disable pencil effect on touch devices */
1067+
@media (hover: none) and (pointer: coarse) {
1068+
body.landing-page {
1069+
cursor: auto;
1070+
}
1071+
body.landing-page.pencil-active .pencil-trail,
1072+
body.landing-page.pencil-active .pencil-draw-mark {
1073+
display: none;
1074+
}
1075+
}
1076+
1077+
.pencil-cursor {
1078+
position: fixed;
1079+
pointer-events: none;
1080+
z-index: 9999;
1081+
width: 24px;
1082+
height: 24px;
1083+
font-size: 24px;
1084+
line-height: 1;
1085+
}
1086+
1087+
.pencil-trail {
1088+
position: fixed;
1089+
pointer-events: none;
1090+
z-index: 9998;
1091+
width: 12px;
1092+
height: 12px;
1093+
border-radius: 50%;
1094+
background: #d4af37;
1095+
opacity: 0.9;
1096+
animation: pencilFade 1s ease-out forwards;
1097+
box-shadow: 0 0 8px rgba(212, 175, 55, 0.8), 0 0 12px rgba(212, 175, 55, 0.5);
1098+
}
1099+
1100+
/* Responsive particle sizes */
1101+
@media (max-width: 768px) {
1102+
.pencil-trail {
1103+
width: 10px;
1104+
height: 10px;
1105+
box-shadow: 0 0 6px rgba(212, 175, 55, 0.7), 0 0 10px rgba(212, 175, 55, 0.4);
1106+
}
1107+
}
1108+
1109+
@media (max-width: 480px) {
1110+
.pencil-trail {
1111+
width: 8px;
1112+
height: 8px;
1113+
box-shadow: 0 0 4px rgba(212, 175, 55, 0.6), 0 0 8px rgba(212, 175, 55, 0.3);
1114+
}
1115+
}
1116+
1117+
@keyframes pencilFade {
1118+
0% {
1119+
opacity: 0.9;
1120+
transform: scale(1) translateY(0);
1121+
}
1122+
50% {
1123+
opacity: 0.5;
1124+
}
1125+
100% {
1126+
opacity: 0;
1127+
transform: scale(0.3) translateY(12px);
1128+
}
1129+
}
1130+
1131+
.pencil-draw-mark {
1132+
position: fixed;
1133+
pointer-events: none;
1134+
z-index: 9997;
1135+
width: 5px;
1136+
height: 5px;
1137+
border-radius: 50%;
1138+
background: #5d4037;
1139+
opacity: 0.6;
1140+
animation: drawFade 1.2s ease-out forwards;
1141+
box-shadow: 0 0 3px rgba(93, 64, 55, 0.5);
1142+
}
1143+
1144+
/* Responsive mark sizes */
1145+
@media (max-width: 768px) {
1146+
.pencil-draw-mark {
1147+
width: 4px;
1148+
height: 4px;
1149+
box-shadow: 0 0 2px rgba(93, 64, 55, 0.4);
1150+
}
1151+
}
1152+
1153+
@media (max-width: 480px) {
1154+
.pencil-draw-mark {
1155+
width: 3px;
1156+
height: 3px;
1157+
box-shadow: 0 0 2px rgba(93, 64, 55, 0.3);
1158+
}
1159+
}
1160+
1161+
@keyframes drawFade {
1162+
0% {
1163+
opacity: 0.6;
1164+
transform: scale(1);
1165+
}
1166+
100% {
1167+
opacity: 0;
1168+
transform: scale(0.2);
1169+
}
1170+
}
1171+
1172+
/* Pencil cursor for dark mode */
1173+
[data-theme="night"] body.landing-page {
1174+
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d9c0a7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5a4 4 0 0 1-2.5.88H2v-4.5a4 4 0 0 1 .88-2.5L17 3"></path></svg>') 5 1, auto;
1175+
}
1176+
1177+
[data-theme="night"] .pencil-trail {
1178+
background: #d9c0a7;
1179+
box-shadow: 0 0 8px rgba(217, 192, 167, 0.8), 0 0 12px rgba(217, 192, 167, 0.5);
1180+
}
1181+
1182+
[data-theme="night"] .pencil-draw-mark {
1183+
background: #e7e1d8;
1184+
}
1185+
1186+
/* Dark mode responsive */
1187+
@media (max-width: 768px) {
1188+
[data-theme="night"] .pencil-trail {
1189+
box-shadow: 0 0 6px rgba(217, 192, 167, 0.7), 0 0 10px rgba(217, 192, 167, 0.4);
1190+
}
1191+
}
1192+
1193+
@media (max-width: 480px) {
1194+
[data-theme="night"] .pencil-trail {
1195+
box-shadow: 0 0 4px rgba(217, 192, 167, 0.6), 0 0 8px rgba(217, 192, 167, 0.3);
1196+
}
1197+
}

0 commit comments

Comments
 (0)