add fancy neon hover effect to social icons using the same svg filter as for the boxes

chrisweb · chrisweb · commit 0a9e9ac9ed82 · 2025-01-04T16:09:17.000+01:00
diff --git a/app/global.css b/app/global.css
@@ -928,14 +928,16 @@ make the text color a bit darker */
 
 .socialIcon {
     margin-right: calc(var(--main-spacing) / 2);
-    color: var(--primary-light-color);
+    color: rgb(255, 225, 245);
+    filter: drop-shadow(0px 0px 2px var(--primary-light-color)) drop-shadow(0px 0px 10px var(--primary-light-color));
 }
 
 /* not on mobile */
 @media (hover: hover) {
 
     .socialIcon:hover {
-        color: var(--secondary-light-color);
+        color: rgb(255, 255, 255);
+        filter: drop-shadow(0px 0px 1px var(--secondary-light-color)) drop-shadow(0px 0px 8px var(--secondary-light-color));
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -928,14 +928,16 @@ make the text color a bit darker */`
`928`	`928`
`929`	`929`	`.socialIcon {`
`930`	`930`	`margin-right: calc(var(--main-spacing) / 2);`
`931`		`- color: var(--primary-light-color);`
	`931`	`+ color: rgb(255, 225, 245);`
	`932`	`+ filter: drop-shadow(0px 0px 2px var(--primary-light-color)) drop-shadow(0px 0px 10px var(--primary-light-color));`
`932`	`933`	`}`
`933`	`934`
`934`	`935`	`/* not on mobile */`
`935`	`936`	`@media (hover: hover) {`
`936`	`937`
`937`	`938`	`.socialIcon:hover {`
`938`		`- color: var(--secondary-light-color);`
	`939`	`+ color: rgb(255, 255, 255);`
	`940`	`+ filter: drop-shadow(0px 0px 1px var(--secondary-light-color)) drop-shadow(0px 0px 8px var(--secondary-light-color));`
`939`	`941`	`}`
`940`	`942`	`}`
`941`	`943`